Rewrite as Vite + React app with structural SVG color grouping

- Replace CRA with Vite
- Read <g fill> structure from Vectorizer.ai SVG output
- CIEDE2000 nearest-anchor color assignment
- SVG layer filtering and PSD export (ag-psd)
- Error message when SVG lacks group structure

.gitattributes

@@ -1,35 +0,0 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -1,23 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -6,77 +6,6 @@ colorTo: red
 sdk: static
 pinned: false
 app_build_command: npm run build
-app_file: build/index.html
+app_file: dist/index.html
 short_description: Vectorizer.AI to PSD
 ---
-
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>svg-color-grouper</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package.json

@@ -1,39 +1,29 @@
 {
-  "name": "react-template",
-  "version": "0.1.0",
+  "name": "svg-color-grouper",
   "private": true,
-  "dependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "dependencies": {
+    "ag-psd": "^30.1.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "jsdom": "^28.1.0",
+    "vite": "^7.3.1"
   }
 }

public/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/App.jsx

@@ -0,0 +1,229 @@
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { extractColorsFromSVG, extractStructuralGroups, rgbToLab } from './colorUtils';
+import { buildFilteredSvgHtml } from './svgFilter';
+import { exportPSD } from './psdExport';
+import { buildStructuralColorGroups } from './grouping';
+
+function LoadingOverlay({ text, progress, pct }) {
+  return (
+    <div className="loading-overlay" style={{ opacity: 1, pointerEvents: 'all' }}>
+      <div className="spinner" />
+      <div className="loading-text">{text}</div>
+      <div className="loading-progress">{progress}</div>
+      <div className="progress-bar-wrap">
+        <div className="progress-bar-fill" style={{ width: `${pct}%` }} />
+      </div>
+    </div>
+  );
+}
+
+function SwatchGroup({ group, colors, index, active, onClick }) {
+  return (
+    <div className={`swatch-group${active ? ' swatch-group-active' : ''}`} onClick={onClick}>
+      <div className="group-label">Group {index + 1} ({group.length}色)</div>
+      {group.map((ci) => (
+        <div key={ci} className="swatch" style={{ backgroundColor: colors[ci].hex }} title={colors[ci].hex} />
+      ))}
+    </div>
+  );
+}
+
+export default function App() {
+  const [svgDoc, setSvgDoc] = useState(null);
+  const [uniqueColors, setUniqueColors] = useState([]);
+  const [loading, setLoading] = useState(null);
+  const [exportStatus, setExportStatus] = useState('');
+  const [dragActive, setDragActive] = useState(false);
+  const [previewHtml, setPreviewHtml] = useState('');
+  const [visibleLayers, setVisibleLayers] = useState(null);
+  const [structuralGroups, setStructuralGroups] = useState(null);
+  const [loadError, setLoadError] = useState('');
+
+  const groups = useMemo(() => {
+    if (!structuralGroups) return [];
+    const avgL = (group) => {
+      let sum = 0;
+      for (const ci of group) {
+        const c = uniqueColors[ci];
+        sum += rgbToLab(c.r, c.g, c.b)[0];
+      }
+      return sum / group.length;
+    };
+    const g = [...structuralGroups];
+    g.sort((a, b) => avgL(b) - avgL(a));
+    return g;
+  }, [structuralGroups, uniqueColors]);
+
+  // Reset visibility when groups change
+  useEffect(() => { setVisibleLayers(null); }, [groups]);
+
+  const compositePreview = useMemo(() => {
+    if (!svgDoc || groups.length === 0) return previewHtml;
+    if (visibleLayers === null) return previewHtml;
+    if (visibleLayers.size === 0) return '';
+    const mergedColors = new Set();
+    for (const gi of visibleLayers) {
+      for (const ci of groups[gi]) {
+        mergedColors.add(uniqueColors[ci].hex);
+      }
+    }
+    return buildFilteredSvgHtml(svgDoc, mergedColors);
+  }, [svgDoc, groups, uniqueColors, visibleLayers, previewHtml]);
+
+  const loadSVG = useCallback(async (text) => {
+    setVisibleLayers(null);
+    setStructuralGroups(null);
+    setLoadError('');
+    setLoading({ text: 'SVGを解析中...', progress: '', pct: 0 });
+    await tick();
+
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(text, 'image/svg+xml');
+    const svgEl = doc.querySelector('svg');
+    if (!svgEl) { setLoading(null); return; }
+
+    setSvgDoc(doc);
+    setPreviewHtml(new XMLSerializer().serializeToString(svgEl));
+
+    setLoading({ text: '色を抽出中...', progress: '', pct: 30 });
+    await tick();
+    const colors = extractColorsFromSVG(svgEl);
+    setUniqueColors(colors);
+
+    const structure = extractStructuralGroups(svgEl);
+    if (structure) {
+      setLoading({ text: '構造ベースのグループ化...', progress: `${structure.anchors.length}アンカー + ${structure.strokes.length}ストローク`, pct: 60 });
+      await tick();
+      const sGroups = buildStructuralColorGroups(structure, colors);
+      setStructuralGroups(sGroups);
+    } else {
+      setStructuralGroups(null);
+      setLoadError('色グループ構造（<g fill>）が見つかりません。Vectorizer.aiで Group By を Color に設定してエクスポートしてください。');
+    }
+
+    setVisibleLayers(null);
+    setLoading(null);
+  }, []);
+
+  const handleFile = useCallback((file) => {
+    if (!file || !file.name.toLowerCase().endsWith('.svg')) return;
+    const reader = new FileReader();
+    reader.onload = (e) => loadSVG(e.target.result);
+    reader.readAsText(file);
+  }, [loadSVG]);
+
+  const handleExport = useCallback(async () => {
+    if (!svgDoc || groups.length === 0) return;
+    setExportStatus('');
+    setLoading({ text: 'PSDエクスポート準備中...', progress: '', pct: 0 });
+    try {
+      await exportPSD(svgDoc, groups, uniqueColors, (text, progress, pct) => {
+        setLoading({ text, progress, pct });
+      });
+      setLoading(null);
+      setExportStatus('エクスポート完了!');
+    } catch (err) {
+      setLoading(null);
+      setExportStatus(`エラー: ${err.message}`);
+      console.error(err);
+    }
+  }, [svgDoc, groups, uniqueColors]);
+
+  const onDragOver = useCallback((e) => { e.preventDefault(); setDragActive(true); }, []);
+  const onDragLeave = useCallback(() => setDragActive(false), []);
+  const onDrop = useCallback((e) => {
+    e.preventDefault();
+    setDragActive(false);
+    if (e.dataTransfer.files.length) handleFile(e.dataTransfer.files[0]);
+  }, [handleFile]);
+
+  const toggleLayer = (gi) => {
+    setVisibleLayers((prev) => {
+      if (prev === null) {
+        const next = new Set(Array.from({ length: groups.length }, (_, i) => i));
+        next.delete(gi);
+        return next;
+      }
+      const next = new Set(prev);
+      if (next.has(gi)) next.delete(gi);
+      else next.add(gi);
+      if (next.size === groups.length) return null;
+      return next;
+    });
+  };
+
+  const isLayerVisible = (gi) => visibleLayers === null || visibleLayers.has(gi);
+  const loaded = uniqueColors.length > 0;
+
+  return (
+    <>
+      <div className="header">
+        <h1>SVG Color Grouper → PSD</h1>
+      </div>
+      <div
+        className={`container${dragActive ? ' drag-active' : ''}`}
+        onDragOver={onDragOver}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
+      >
+        <div className="sidebar">
+          <div className="section">
+            <h3>入力</h3>
+            <label className="file-btn" htmlFor="svg-input">SVGファイルを選択</label>
+            <input type="file" id="svg-input" accept=".svg"
+              onChange={(e) => handleFile(e.target.files[0])} />
+            {loaded && !loadError && <div className="status">
+              {uniqueColors.length}色を検出 ({groups.length}グループ)
+            </div>}
+            {loadError && <div className="status error">{loadError}</div>}
+          </div>
+
+          {loaded && groups.length > 0 && (
+            <div className="section">
+              <h3>色グループ ({groups.length}グループ / クリックで表示切替)</h3>
+              <div className="swatches">
+                {groups.map((group, gi) => (
+                  <SwatchGroup
+                    key={gi} group={group} colors={uniqueColors} index={gi}
+                    active={isLayerVisible(gi)}
+                    onClick={() => toggleLayer(gi)}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {loaded && groups.length > 0 && (
+            <div className="section">
+              <h3>出力</h3>
+              <button className="export-btn" onClick={handleExport}>
+                PSDエクスポート
+              </button>
+              {exportStatus && <div className="status">{exportStatus}</div>}
+            </div>
+          )}
+        </div>
+
+        <div className="main">
+          {compositePreview ? (
+            <div className="preview-area" dangerouslySetInnerHTML={{ __html: compositePreview }} />
+          ) : (
+            <div className="preview-area">
+              <div className="info">
+                {loaded ? 'レイヤーを選択してください' : 'SVGファイルをドラッグ＆ドロップ、または左のボタンから選択'}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {loading && (
+        <LoadingOverlay text={loading.text} progress={loading.progress} pct={loading.pct} />
+      )}
+    </>
+  );
+}
+
+function tick() {
+  return new Promise((r) => setTimeout(r, 0));
+}

src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/colorUtils.js

@@ -0,0 +1,148 @@
+// sRGB → Linear
+function srgbToLinear(c) {
+  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+
+// RGB [0-255] → XYZ
+function rgbToXyz(r, g, b) {
+  const rl = srgbToLinear(r / 255);
+  const gl = srgbToLinear(g / 255);
+  const bl = srgbToLinear(b / 255);
+  return [
+    0.4124564 * rl + 0.3575761 * gl + 0.1804375 * bl,
+    0.2126729 * rl + 0.7151522 * gl + 0.0721750 * bl,
+    0.0193339 * rl + 0.1191920 * gl + 0.9503041 * bl,
+  ];
+}
+
+// XYZ → CIELAB
+function xyzToLab(x, y, z) {
+  const Xn = 0.95047, Yn = 1.0, Zn = 1.08883;
+  const f = (v) => (v > 0.008856 ? Math.cbrt(v) : 7.787 * v + 16 / 116);
+  const fx = f(x / Xn), fy = f(y / Yn), fz = f(z / Zn);
+  return [116 * fy - 16, 500 * (fx - fy), 200 * (fy - fz)];
+}
+
+export function rgbToLab(r, g, b) {
+  const [x, y, z] = rgbToXyz(r, g, b);
+  return xyzToLab(x, y, z);
+}
+
+export function labDist(a, b) {
+  const dL = a[0] - b[0], da = a[1] - b[1], db = a[2] - b[2];
+  return Math.sqrt(dL * dL + da * da + db * db);
+}
+
+// Parse any CSS color string → { r, g, b, hex }
+const parseCtx = typeof document !== 'undefined'
+  ? document.createElement('canvas').getContext('2d')
+  : null;
+
+export function parseColor(str) {
+  if (!str || str === 'none' || str === 'transparent' || str === 'inherit' || str === 'currentColor') return null;
+  if (str.startsWith('url(')) return null;
+  if (!parseCtx) return null;
+  parseCtx.fillStyle = '#000000';
+  parseCtx.fillStyle = str;
+  const hex = parseCtx.fillStyle;
+  if (hex.startsWith('#')) {
+    const n = parseInt(hex.slice(1), 16);
+    return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255, hex };
+  }
+  const m = hex.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  if (m) {
+    const r = +m[1], g = +m[2], b = +m[3];
+    const h = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+    return { r, g, b, hex: h };
+  }
+  return null;
+}
+
+// Extract unique colors from SVG element (all elements including <g>)
+export function extractColorsFromSVG(svgEl) {
+  const colorMap = new Map();
+  const elements = svgEl.querySelectorAll('*');
+  for (const el of elements) {
+    const fill = el.getAttribute('fill');
+    const stroke = el.getAttribute('stroke');
+    const style = el.getAttribute('style') || '';
+    const styleFill = style.match(/fill\s*:\s*([^;]+)/);
+    const styleStroke = style.match(/stroke\s*:\s*([^;]+)/);
+    for (const raw of [fill, stroke, styleFill?.[1], styleStroke?.[1]]) {
+      if (!raw) continue;
+      const c = parseColor(raw.trim());
+      if (c) colorMap.set(c.hex, c);
+    }
+  }
+  return Array.from(colorMap.values());
+}
+
+// Extract structural color groups from SVG:
+// - Fill anchor colors from <g fill="..."> elements
+// - Stroke colors from individual paths
+// Returns { anchors: [{hex, r, g, b}], strokes: [{hex, r, g, b}] } or null if no structure
+export function extractStructuralGroups(svgEl) {
+  const anchors = new Map(); // fill colors on <g> elements
+  const strokes = new Map(); // stroke colors on leaf elements
+
+  const gElements = svgEl.querySelectorAll('g');
+  for (const g of gElements) {
+    const fill = g.getAttribute('fill');
+    if (fill) {
+      const c = parseColor(fill.trim());
+      if (c) anchors.set(c.hex, c);
+    }
+  }
+
+  // If no <g fill> structure found, return null
+  if (anchors.size < 2) return null;
+
+  const allElements = svgEl.querySelectorAll('*');
+  for (const el of allElements) {
+    if (el.tagName === 'g' || el.tagName === 'svg' || el.tagName === 'defs') continue;
+    const stroke = el.getAttribute('stroke');
+    if (stroke) {
+      const c = parseColor(stroke.trim());
+      if (c && !anchors.has(c.hex)) strokes.set(c.hex, c);
+    }
+    const fill = el.getAttribute('fill');
+    if (fill) {
+      const c = parseColor(fill.trim());
+      if (c && !anchors.has(c.hex)) strokes.set(c.hex, c);
+    }
+  }
+
+  return {
+    anchors: Array.from(anchors.values()),
+    strokes: Array.from(strokes.values()),
+  };
+}
+
+// Get the color directly set on this element (no inheritance)
+export function getOwnColor(el, attr) {
+  const style = el.getAttribute('style') || '';
+  const styleMatch = style.match(new RegExp(attr + '\\s*:\\s*([^;]+)'));
+  if (styleMatch) {
+    const c = parseColor(styleMatch[1].trim());
+    return c ? c.hex : null;
+  }
+  const val = el.getAttribute(attr);
+  if (val) {
+    const c = parseColor(val.trim());
+    return c ? c.hex : null;
+  }
+  return null;
+}
+
+// Get effective color including inheritance from parent <g> elements
+export function getEffectiveColor(el, attr) {
+  let node = el;
+  while (node && node.nodeType === 1) {
+    const color = getOwnColor(node, attr);
+    if (color) return color;
+    const val = node.getAttribute(attr);
+    if (val === 'none') return null;
+    node = node.parentNode;
+  }
+  return null;
+}

src/grouping.js

@@ -0,0 +1,120 @@
+import { rgbToLab, labDist } from './colorUtils.js';
+
+/**
+ * CIEDE2000 color difference.
+ * More perceptually uniform than Euclidean Lab distance.
+ */
+export function ciede2000(lab1, lab2) {
+  const [L1, a1, b1] = lab1;
+  const [L2, a2, b2] = lab2;
+
+  const C1 = Math.sqrt(a1 * a1 + b1 * b1);
+  const C2 = Math.sqrt(a2 * a2 + b2 * b2);
+  const Cmean = (C1 + C2) / 2;
+  const Cmean7 = Cmean ** 7;
+  const G = 0.5 * (1 - Math.sqrt(Cmean7 / (Cmean7 + 6103515625))); // 25^7
+
+  const a1p = a1 * (1 + G);
+  const a2p = a2 * (1 + G);
+  const C1p = Math.sqrt(a1p * a1p + b1 * b1);
+  const C2p = Math.sqrt(a2p * a2p + b2 * b2);
+
+  let h1p = Math.atan2(b1, a1p) * 180 / Math.PI;
+  if (h1p < 0) h1p += 360;
+  let h2p = Math.atan2(b2, a2p) * 180 / Math.PI;
+  if (h2p < 0) h2p += 360;
+
+  const dLp = L2 - L1;
+  const dCp = C2p - C1p;
+
+  let dhp;
+  if (C1p * C2p === 0) {
+    dhp = 0;
+  } else if (Math.abs(h2p - h1p) <= 180) {
+    dhp = h2p - h1p;
+  } else if (h2p - h1p > 180) {
+    dhp = h2p - h1p - 360;
+  } else {
+    dhp = h2p - h1p + 360;
+  }
+  const dHp = 2 * Math.sqrt(C1p * C2p) * Math.sin(dhp * Math.PI / 360);
+
+  const Lpmean = (L1 + L2) / 2;
+  const Cpmean = (C1p + C2p) / 2;
+
+  let Hpmean;
+  if (C1p * C2p === 0) {
+    Hpmean = h1p + h2p;
+  } else if (Math.abs(h1p - h2p) <= 180) {
+    Hpmean = (h1p + h2p) / 2;
+  } else if (h1p + h2p < 360) {
+    Hpmean = (h1p + h2p + 360) / 2;
+  } else {
+    Hpmean = (h1p + h2p - 360) / 2;
+  }
+
+  const T = 1
+    - 0.17 * Math.cos((Hpmean - 30) * Math.PI / 180)
+    + 0.24 * Math.cos(2 * Hpmean * Math.PI / 180)
+    + 0.32 * Math.cos((3 * Hpmean + 6) * Math.PI / 180)
+    - 0.20 * Math.cos((4 * Hpmean - 63) * Math.PI / 180);
+
+  const SL = 1 + 0.015 * (Lpmean - 50) ** 2 / Math.sqrt(20 + (Lpmean - 50) ** 2);
+  const SC = 1 + 0.045 * Cpmean;
+  const SH = 1 + 0.015 * Cpmean * T;
+
+  const Cpmean7 = Cpmean ** 7;
+  const RT = -2 * Math.sqrt(Cpmean7 / (Cpmean7 + 6103515625))
+    * Math.sin(60 * Math.exp(-(((Hpmean - 275) / 25) ** 2)) * Math.PI / 180);
+
+  return Math.sqrt(
+    (dLp / SL) ** 2 +
+    (dCp / SC) ** 2 +
+    (dHp / SH) ** 2 +
+    RT * (dCp / SC) * (dHp / SH)
+  );
+}
+
+/**
+ * Assign stroke colors to anchor groups using nearest-anchor distance.
+ *
+ * @param {{ anchors: {hex,r,g,b}[], strokes: {hex,r,g,b}[] }} structure
+ * @param {{ hex: string, r: number, g: number, b: number }[]} allColors
+ * @param {{ distFn?: 'lab' | 'ciede2000' }} options
+ * @returns {number[][]} groups - array of color index arrays (anchor order)
+ */
+export function buildStructuralColorGroups(structure, allColors, options = {}) {
+  const { anchors, strokes } = structure;
+  const distFn = options.distFn || 'ciede2000';
+
+  // Build color index map
+  const colorIndex = new Map();
+  allColors.forEach((c, i) => colorIndex.set(c.hex, i));
+
+  // Compute anchor Labs
+  const anchorLabs = anchors.map(a => rgbToLab(a.r, a.g, a.b));
+
+  // Initialize groups with anchor colors
+  const groups = anchors.map(a => {
+    const idx = colorIndex.get(a.hex);
+    return idx !== undefined ? [idx] : [];
+  });
+
+  // Distance function
+  const dist = distFn === 'ciede2000' ? ciede2000 : labDist;
+
+  // Assign each stroke to nearest anchor
+  for (const s of strokes) {
+    const idx = colorIndex.get(s.hex);
+    if (idx === undefined) continue;
+    const sLab = rgbToLab(s.r, s.g, s.b);
+    let bestGi = 0, bestDist = Infinity;
+    for (let gi = 0; gi < anchorLabs.length; gi++) {
+      const d = dist(sLab, anchorLabs[gi]);
+      if (d < bestDist) { bestDist = d; bestGi = gi; }
+    }
+    groups[bestGi].push(idx);
+  }
+
+  return groups.filter(g => g.length > 0);
+}

src/index.css

@@ -1,13 +1,52 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f7; color: #1d1d1f; min-height: 100vh; }
+
+.header { background: #fff; padding: 16px 24px; border-bottom: 1px solid #d2d2d7; display: flex; align-items: center; gap: 16px; }
+.header h1 { font-size: 18px; font-weight: 600; color: #1d1d1f; }
+
+.container { display: flex; height: calc(100vh - 57px); }
+
+.sidebar { width: 320px; min-width: 320px; background: #fff; border-right: 1px solid #d2d2d7; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
+
+.main { flex: 1; padding: 16px; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
+
+.section { background: #f5f5f7; border: 1px solid #d2d2d7; border-radius: 8px; padding: 12px; }
+.section h3 { font-size: 13px; color: #86868b; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
+
+input[type="file"] { display: none; }
+.file-btn { display: inline-block; padding: 8px 16px; background: #0071e3; border: none; border-radius: 6px; color: #fff; cursor: pointer; font-size: 13px; text-align: center; width: 100%; transition: background 0.2s; }
+.file-btn:hover { background: #0077ed; }
+
+.slider-row { display: flex; align-items: center; gap: 8px; }
+.slider-row input[type="range"] { flex: 1; accent-color: #0071e3; }
+.slider-val { font-size: 14px; font-weight: 600; min-width: 28px; text-align: right; color: #1d1d1f; }
+
+.swatches { display: flex; flex-direction: column; gap: 6px; }
+.swatch-group { border: 1px solid #d2d2d7; border-radius: 6px; padding: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; background: #fff; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
+.swatch-group:hover { border-color: #0071e3; }
+.swatch-group-active { border-color: #0071e3; box-shadow: 0 0 0 2px rgba(0,113,227,0.3); }
+.swatch-group .group-label { font-size: 10px; color: #86868b; width: 100%; margin-bottom: 2px; }
+.swatch { width: 24px; height: 24px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.12); position: relative; }
+.swatch:hover::after { content: attr(title); position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background: #1d1d1f; color: #fff; padding: 2px 6px; border-radius: 3px; font-size: 10px; white-space: nowrap; z-index: 10; }
+
+.export-btn { padding: 10px 16px; background: #30d158; border: none; border-radius: 6px; color: #fff; cursor: pointer; font-size: 14px; font-weight: 600; width: 100%; transition: background 0.2s; }
+.export-btn:hover { background: #28c04e; }
+.export-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.preview-area { border: 1px solid #d2d2d7; border-radius: 8px; background: repeating-conic-gradient(#e8e8e8 0% 25%, #fff 0% 50%) 50% / 16px 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; max-width: 100%; min-height: 300px; flex: 1; width: 100%; }
+.preview-area svg { max-width: 100%; max-height: 100%; }
+
+.info { font-size: 13px; color: #86868b; text-align: center; padding: 40px; }
+.status { font-size: 12px; color: #86868b; margin-top: 4px; }
+.status.error { color: #ff3b30; font-weight: 500; line-height: 1.4; }
+
+/* Loading overlay */
+.loading-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.85); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; transition: opacity 0.2s; backdrop-filter: blur(4px); }
+.spinner { width: 48px; height: 48px; border: 4px solid #d2d2d7; border-top-color: #0071e3; border-radius: 50%; animation: spin 0.8s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.loading-text { margin-top: 16px; font-size: 14px; color: #1d1d1f; }
+.loading-progress { margin-top: 8px; font-size: 12px; color: #86868b; }
+.progress-bar-wrap { width: 200px; height: 6px; background: #e8e8e8; border-radius: 3px; margin-top: 12px; overflow: hidden; }
+.progress-bar-fill { height: 100%; background: #0071e3; border-radius: 3px; transition: width 0.3s; }
+
+.drag-active { outline: 3px dashed #0071e3; outline-offset: -3px; }

src/index.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

src/psdExport.js

@@ -0,0 +1,86 @@
+import { writePsd } from 'ag-psd';
+import { filterSvgByColors } from './svgFilter';
+
+async function renderSvgToCanvas(svgEl, width, height) {
+  const serializer = new XMLSerializer();
+  const svgString = serializer.serializeToString(svgEl);
+  const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+
+  const img = new Image();
+  await new Promise((resolve, reject) => {
+    img.onload = resolve;
+    img.onerror = reject;
+    img.src = url;
+  });
+
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext('2d');
+  ctx.clearRect(0, 0, width, height);
+  ctx.drawImage(img, 0, 0, width, height);
+  URL.revokeObjectURL(url);
+  return canvas;
+}
+
+export async function exportPSD(svgDoc, groups, uniqueColors, onProgress) {
+  const svgEl = svgDoc.querySelector('svg');
+  let width, height;
+  const vb = svgEl.getAttribute('viewBox');
+  if (vb) {
+    const parts = vb.split(/[\s,]+/).map(Number);
+    width = parts[2]; height = parts[3];
+  } else {
+    width = parseFloat(svgEl.getAttribute('width')) || 512;
+    height = parseFloat(svgEl.getAttribute('height')) || 512;
+  }
+
+  const maxDim = 4096;
+  if (width > maxDim || height > maxDim) {
+    const scale = maxDim / Math.max(width, height);
+    width = Math.round(width * scale);
+    height = Math.round(height * scale);
+  } else {
+    width = Math.round(width);
+    height = Math.round(height);
+  }
+
+  const total = groups.length;
+  const children = [];
+
+  for (let gi = 0; gi < total; gi++) {
+    onProgress?.('レイヤーをレンダリング中...', `${gi + 1} / ${total}`, Math.round((gi / (total + 1)) * 100));
+    await new Promise((r) => setTimeout(r, 0));
+
+    const groupColors = new Set(groups[gi].map((ci) => uniqueColors[ci].hex));
+    const filteredSvg = svgEl.cloneNode(true);
+    filterSvgByColors(filteredSvg, groupColors);
+
+    const canvas = await renderSvgToCanvas(filteredSvg, width, height);
+    children.push({
+      name: `Group ${gi + 1} (${groups[gi].map((ci) => uniqueColors[ci].hex).join(', ')})`,
+      canvas,
+      transparencyProtected: false,
+      hidden: false,
+      opacity: 255,
+      blendMode: 'normal',
+    });
+  }
+
+  onProgress?.('PSDを生成中...', '', 90);
+  await new Promise((r) => setTimeout(r, 0));
+
+  const buffer = writePsd({ width, height, channels: 4, bitsPerChannel: 8, colorMode: 3, children });
+
+  onProgress?.('ダウンロード中...', '', 100);
+  await new Promise((r) => setTimeout(r, 0));
+
+  const blob = new Blob([buffer], { type: 'application/octet-stream' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'color_groups.psd';
+  a.click();
+  URL.revokeObjectURL(url);
+}

src/reportWebVitals.js

@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

src/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

src/svgFilter.js

@@ -0,0 +1,54 @@
+import { getOwnColor, getEffectiveColor } from './colorUtils';
+
+export function filterSvgByColors(svgEl, groupColors) {
+  // Phase 1: resolve effective colors BEFORE modifying DOM
+  const allElements = svgEl.querySelectorAll('*');
+  const resolved = new Map();
+  for (const el of allElements) {
+    if (el.tagName === 'svg' || el.tagName === 'defs' || el.tagName === 'g') continue;
+    resolved.set(el, {
+      fill: getEffectiveColor(el, 'fill'),
+      stroke: getEffectiveColor(el, 'stroke'),
+    });
+  }
+
+  // Phase 2: apply visibility changes
+  for (const el of allElements) {
+    if (el.tagName === 'svg' || el.tagName === 'defs') continue;
+
+    if (el.tagName === 'g') {
+      const ownFill = getOwnColor(el, 'fill');
+      if (ownFill && !groupColors.has(ownFill)) {
+        el.setAttribute('fill', 'none');
+      }
+      const ownStroke = getOwnColor(el, 'stroke');
+      if (ownStroke && !groupColors.has(ownStroke)) {
+        el.setAttribute('stroke', 'none');
+      }
+      continue;
+    }
+
+    const r = resolved.get(el);
+    if (!r) continue;
+    const fillInGroup = r.fill && groupColors.has(r.fill);
+    const strokeInGroup = r.stroke && groupColors.has(r.stroke);
+
+    if (!fillInGroup && !strokeInGroup) {
+      el.setAttribute('fill', 'none');
+      el.setAttribute('stroke', 'none');
+    } else {
+      if (!fillInGroup) {
+        el.setAttribute('fill', 'none');
+      }
+      if (r.stroke && !strokeInGroup) {
+        el.setAttribute('stroke', 'none');
+      }
+    }
+  }
+}
+
+export function buildFilteredSvgHtml(svgDoc, groupColorSet) {
+  const svgEl = svgDoc.querySelector('svg').cloneNode(true);
+  filterSvgByColors(svgEl, groupColorSet);
+  return new XMLSerializer().serializeToString(svgEl);
+}

vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})