feat: Modernize the visual card editor. (#2586)

scripts/clean-dist-plugin.js

@@ -0,0 +1,32 @@
+import { existsSync, readdirSync, rmSync } from 'node:fs';
+
+/**
+ * Rollup plugin: deletes prior build artifacts from `dist/` (which otherwise
+ * accumulate stale hashed chunks that can be served in place of fresh output).
+ * Deletes only top-level build artifacts by extension (no recursion), so
+ * anything unexpected in `dist/` survives. Cleans once per process: watch mode
+ * cleans at startup, not on every incremental rebuild.
+ *
+ * @type {() => import('rollup').Plugin}
+ */
+export const cleanDist = () => {
+  let cleaned = false;
+  return {
+    name: 'clean-dist',
+    buildStart() {
+      if (cleaned) {
+        return;
+      }
+      cleaned = true;
+      const dist = new URL('../dist/', import.meta.url);
+      if (!existsSync(dist)) {
+        return;
+      }
+      for (const entry of readdirSync(dist, { withFileTypes: true })) {
+        if (entry.isFile() && /\.js(\.map)?$/.test(entry.name)) {
+          rmSync(new URL(entry.name, dist));
+        }
+      }
+    },
+  };
+};

scripts/docs-update-icons.sh

@@ -2,22 +2,9 @@
 
 # This script copies icons out of the source tree for documentation.
 
-FRIGATE="./src/camera-manager/frigate/assets/frigate.svg"
-IRIS="./src/images/iris.svg"
-MOTIONEYE="./src/camera-manager/motioneye/assets/motioneye.svg"
-REOLINK="./src/camera-manager/reolink/assets/reolink.svg"
-TPLINK="./src/camera-manager/tplink/assets/tplink.svg"
-
 DIR_ICONS="./docs/images/icons"
 
-copy() {
-  PATH="$1"
-  echo "Copying image $PATH to $DIR_ICONS"
-  /bin/cp "$PATH" "$DIR_ICONS"
-}
-
-copy "$FRIGATE"
-copy "$IRIS"
-copy "$MOTIONEYE"
-copy "$REOLINK"
-copy "$TPLINK"
+for ICON in ./src/images/icons/*.svg; do
+  echo "Copying image $ICON to $DIR_ICONS"
+  /bin/cp "$ICON" "$DIR_ICONS"
+done

scripts/svg-path-plugin.js

@@ -0,0 +1,28 @@
+import { readFileSync } from 'node:fs';
+
+/**
+ * Rollup/Vite plugin: importing an SVG yields `{ path, viewBox }` extracted at
+ * build time, the shape a Home Assistant custom iconset serves. The SVG must
+ * be a single-path icon.
+ *
+ * @type {() => import('rollup').Plugin}
+ */
+export const svgPath = () => ({
+  name: 'svg-path',
+
+  // Vite: run before its builtin asset handling.
+  enforce: 'pre',
+
+  load(id) {
+    if (!id.endsWith('.svg')) {
+      return null;
+    }
+    const source = readFileSync(id, 'utf-8');
+    const path = / d="([^"]*)"/.exec(source)?.[1];
+    const viewBox = /viewBox="([^"]*)"/.exec(source)?.[1];
+    if (!path || !viewBox) {
+      throw new Error(`Imported SVG must have a path and viewBox: ${id}`);
+    }
+    return `export default ${JSON.stringify({ path, viewBox })};`;
+  },
+});