@mp-consulting/homebridge-ui-kit 1.2.2 → 1.3.0

package/dist/theme-boot.js

@@ -0,0 +1,2 @@
+/* @mp-consulting/homebridge-ui-kit v1.3.0 */
+(()=>{(function(){try{var t=document.documentElement,e=null;try{e=localStorage.getItem("mp-kit-theme")}catch{}var a=e==="dark"||e!=="light"&&!!window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches;t.setAttribute("data-bs-theme",a?"dark":"light"),a?t.classList.add("mp-theme-dark"):t.classList.remove("mp-theme-dark")}catch{}})();})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mp-consulting/homebridge-ui-kit",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Brand design system for @mp-consulting Homebridge plugins",
   "keywords": [
     "homebridge",
@@ -15,14 +15,35 @@
   "author": "MP Consulting",
   "license": "MIT",
   "type": "module",
+  "types": "./dist/kit.d.mts",
+  "module": "./dist/kit.mjs",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mp-consulting/homebridge-ui-kit.git"
   },
   "exports": {
+    ".": {
+      "types": "./dist/kit.d.mts",
+      "import": "./dist/kit.mjs",
+      "default": "./dist/kit.mjs"
+    },
     "./kit.css": "./dist/kit.css",
-    "./kit.js": "./dist/kit.js",
+    "./kit.min.css": "./dist/kit.min.css",
+    "./kit.js": {
+      "types": "./dist/kit.d.ts",
+      "default": "./dist/kit.js"
+    },
+    "./kit.min.js": {
+      "types": "./dist/kit.d.ts",
+      "default": "./dist/kit.min.js"
+    },
+    "./kit.mjs": {
+      "types": "./dist/kit.d.mts",
+      "default": "./dist/kit.mjs"
+    },
     "./ai.css": "./dist/ai.css",
+    "./ai.min.css": "./dist/ai.min.css",
+    "./theme-boot.js": "./dist/theme-boot.js",
     "./dist/*": "./dist/*",
     "./package.json": "./package.json"
   },
@@ -39,6 +60,21 @@
   "scripts": {
     "build": "node scripts/build.js",
     "build:check": "node scripts/build.js --check",
-    "test": "node --test test/*.test.js"
+    "test": "node --test test/*.test.js",
+    "test:types": "tsc -p test/types",
+    "examples": "node scripts/copy-assets.js --vendor --dest examples/lib",
+    "serve": "node e2e/serve.js",
+    "test:visual": "playwright test",
+    "test:visual:update": "playwright test --update-snapshots",
+    "size": "node scripts/check-size.js"
+  },
+  "devDependencies": {
+    "@axe-core/playwright": "^4.13.0",
+    "@playwright/test": "^1.63.0",
+    "bootstrap": "^5.3.8",
+    "bootstrap-icons": "^1.13.1",
+    "esbuild": "^0.28.2",
+    "jsdom": "^27.4.0",
+    "typescript": "^7.0.2"
   }
 }

package/scripts/copy-assets.js

@@ -1,9 +1,11 @@
 #!/usr/bin/env node
-// mp-ui-kit-copy — copies the UI kit's dist/ files (kit.css, kit.js, ai.css)
-// into a plugin's custom UI folder. Zero dependencies.
+// mp-ui-kit-copy — copies the UI kit's browser files from dist/ (kit.css,
+// kit.js, ai.css, their .min variants, theme-boot.js, …) into a plugin's
+// custom UI folder. Zero dependencies.
 //
 //   mp-ui-kit-copy                     → <cwd>/homebridge-ui/public/lib/
 //   mp-ui-kit-copy --dest <dir>        → <dir> (relative to the current directory)
+//   mp-ui-kit-copy --only a,b          → only these dist files (e.g. kit.min.css,kit.min.js)
 //   mp-ui-kit-copy --vendor            → also Bootstrap / Bootstrap Icons from the
 //                                        plugin's node_modules (lib/ + lib/fonts/)
 
@@ -40,6 +42,29 @@ const VENDOR = [
 // The plugin UI does not serve source maps, so drop the references to them.
 const SOURCE_MAP = /^\s*\/[*/]# sourceMappingURL=.*$/gm;
 
+// Source maps and TypeScript declarations are not served to the browser.
+const NOT_FOR_BROWSER = /\.(map|d\.ts|d\.mts)$/;
+
+/** The dist/ files the CLI can copy. */
+export function browserFiles() {
+  return readdirSync(distDir)
+    .filter(name => statSync(join(distDir, name)).isFile() && !NOT_FOR_BROWSER.test(name))
+    .sort();
+}
+
+const KIT_CSS = /(?:^|\/)kit(?:\.min)?\.css$/;
+const AI_CSS = /(?:^|\/)ai(?:\.min)?\.css$/;
+const STYLESHEET_HREF = /<link\b[^>]*\bhref\s*=\s*["']([^"']+)["']/gi;
+
+/**
+ * True when an HTML document links both kit.css and ai.css (or their .min
+ * variants). kit.css already contains ai.css, so loading both duplicates it.
+ */
+export function loadsKitAndAi(html) {
+  const hrefs = Array.from(String(html).matchAll(STYLESHEET_HREF), m => m[1].split(/[?#]/)[0]);
+  return hrefs.some(h => KIT_CSS.test(h)) && hrefs.some(h => AI_CSS.test(h));
+}
+
 function findPackage(cwd, pkg) {
   try {
     const require = createRequire(join(cwd, 'package.json'));
@@ -54,16 +79,43 @@ function findPackage(cwd, pkg) {
  * Copies the kit into `dest` (default `<cwd>/homebridge-ui/public/lib`).
  * Returns the list of written file paths.
  */
-export function copyAssets({ cwd = process.cwd(), dest, vendor = false, log = () => {} } = {}) {
+export function copyAssets({
+  cwd = process.cwd(), dest, vendor = false, only, log = () => {},
+} = {}) {
   const target = resolve(cwd, dest || DEFAULT_DEST);
+  const available = browserFiles();
+  let names = available;
+  if (only && only.length) {
+    const unknown = only.filter(n => !available.includes(n));
+    if (unknown.length) {
+      throw new Error(`--only: unknown file ${unknown.join(', ')} (available: ${available.join(', ')})`);
+    }
+    names = available.filter(n => only.includes(n));
+  }
   mkdirSync(target, { recursive: true });
   const written = [];
 
-  for (const name of readdirSync(distDir)) {
+  for (const name of names) {
     const from = join(distDir, name);
-    if (!statSync(from).isFile()) { continue; }
-    copyFileSync(from, join(target, name));
-    written.push(join(target, name));
+    const to = join(target, name);
+    if (/\.(css|js|mjs)$/.test(name)) {
+      // The .map files are not copied, so drop the references to them.
+      writeFileSync(to, readFileSync(from, 'utf8').replace(SOURCE_MAP, ''));
+    } else {
+      copyFileSync(from, to);
+    }
+    written.push(to);
+  }
+
+  // kit.css already contains ai.css: warn when a page next to lib/ loads both.
+  const pageDir = dirname(target);
+  if (existsSync(pageDir)) {
+    for (const page of readdirSync(pageDir).filter(n => n.endsWith('.html'))) {
+      if (loadsKitAndAi(readFileSync(join(pageDir, page), 'utf8'))) {
+        log(`! ${relative(cwd, join(pageDir, page))} loads both kit.css and ai.css; `
+          + 'kit.css already includes ai.css, so load only one of them');
+      }
+    }
   }
 
   if (vendor) {
@@ -96,7 +148,11 @@ export function copyAssets({ cwd = process.cwd(), dest, vendor = false, log = ()
 }
 
 function parseArgs(argv) {
-  const opts = { vendor: false, help: false };
+  const opts = { vendor: false, help: false, only: [] };
+  const addOnly = value => {
+    if (!value) { throw new Error('--only needs a comma-separated list of files'); }
+    opts.only.push(...value.split(',').map(v => v.trim()).filter(Boolean));
+  };
   for (let i = 0; i < argv.length; i += 1) {
     const arg = argv[i];
     if (arg === '--dest') {
@@ -105,6 +161,11 @@ function parseArgs(argv) {
       if (!opts.dest) { throw new Error('--dest needs a directory'); }
     } else if (arg.startsWith('--dest=')) {
       opts.dest = arg.slice('--dest='.length);
+    } else if (arg === '--only') {
+      addOnly(argv[i + 1]);
+      i += 1;
+    } else if (arg.startsWith('--only=')) {
+      addOnly(arg.slice('--only='.length));
     } else if (arg === '--vendor') {
       opts.vendor = true;
     } else if (arg === '--help' || arg === '-h') {
@@ -116,15 +177,20 @@ function parseArgs(argv) {
   return opts;
 }
 
-const USAGE = `Usage: mp-ui-kit-copy [--dest <dir>] [--vendor]
+const USAGE = `Usage: mp-ui-kit-copy [--dest <dir>] [--only <files>] [--vendor]
+
+Copies @mp-consulting/homebridge-ui-kit's browser files (kit.css, kit.js,
+ai.css, their .min variants, theme-boot.js, …) into ${DEFAULT_DEST}/ of the
+current directory.
 
-Copies @mp-consulting/homebridge-ui-kit's dist/ (kit.css, kit.js, ai.css)
-into ${DEFAULT_DEST}/ of the current directory.
+  --dest <dir>     copy into <dir> instead (relative to the current directory)
+  --only <files>   copy only these dist files, comma-separated
+                   (e.g. --only kit.min.css,kit.min.js,theme-boot.js)
+  --vendor         also copy bootstrap.min.css, bootstrap.bundle.min.js,
+                   bootstrap-icons.min.css and fonts/ from your node_modules
+  -h, --help       show this help
 
-  --dest <dir>  copy into <dir> instead (relative to the current directory)
-  --vendor      also copy bootstrap.min.css, bootstrap.bundle.min.js,
-                bootstrap-icons.min.css and fonts/ from your node_modules
-  -h, --help    show this help`;
+Note: kit.css already contains ai.css. Load one of them, never both.`;
 
 function isMain() {
   if (!process.argv[1]) { return false; }