@hubpav/hwio-ui 0.7.8 → 0.7.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubpav/hwio-ui",
-  "version": "0.7.8",
+  "version": "0.7.10",
   "description": "HARDWARIO web design system for Astro: DaisyUI 5 themes generated from the brand tokens, the Tailwind entry stylesheet and the HWio* components.",
   "license": "MIT",
   "type": "module",
@@ -28,12 +28,13 @@
     "./html": "./src/html.ts"
   },
   "scripts": {
-    "build": "node scripts/build-themes.mjs"
+    "build": "node scripts/build-themes.mjs",
+    "test": "node --test \"test/**/*.test.mjs\""
   },
   "dependencies": {
-    "@hubpav/hwio-brand": "0.7.8",
-    "@hubpav/hwio-web-runtime": "0.7.8",
-    "@hubpav/hwio-web-worker": "0.7.8",
+    "@hubpav/hwio-brand": "0.7.10",
+    "@hubpav/hwio-web-runtime": "0.7.10",
+    "@hubpav/hwio-web-worker": "0.7.10",
     "daisyui": "5.7.47"
   },
   "peerDependencies": {

package/src/component-sources.mjs

@@ -0,0 +1,125 @@
+// Tailwind scans the package's components through `@source "../components"` in styles.css, so a
+// page used to carry DaisyUI and utility rules for every HWio component, rendered or not. The
+// Vite plugin below appends `@source not` lines for the components a site never imports to the
+// site's entry stylesheet (the one that imports `@hubpav/hwio-ui/styles.css`). It keeps every
+// component when it cannot be sure: no import found, or an import it cannot read literally.
+import { existsSync, readdirSync, readFileSync, realpathSync, statSync } from 'node:fs';
+import { dirname, join, relative, resolve, sep } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+export const HWIO_COMPONENTS_DIR = fileURLToPath(new URL('./components/', import.meta.url));
+
+const ENTRY_IMPORT = /@import\s+(?:url\()?["']@hubpav\/hwio-ui\/styles\.css["']/;
+const LITERAL_IMPORT = /@hubpav\/hwio-ui\/components\/(HWio[A-Za-z0-9]+)\.astro/g;
+const ANY_IMPORT = /@hubpav\/hwio-ui\/components\//g;
+const LOCAL_IMPORT = /from\s+["']\.\/(HWio[A-Za-z0-9]+)\.astro["']/g;
+// Plain Markdown cannot import a component; MDX can.
+const SCAN_EXT = /\.(astro|[cm]?[jt]sx?|mdx|svelte|vue)$/;
+const SKIP_DIRS = new Set(['node_modules', 'dist', '.astro', '.git', '.wrangler', 'public']);
+
+/** Component name -> the components it imports, read from the package's own sources. */
+export function hwioComponentGraph(dir = HWIO_COMPONENTS_DIR) {
+  const graph = new Map();
+  for (const file of readdirSync(dir)) {
+    if (!file.endsWith('.astro')) continue;
+    const source = readFileSync(join(dir, file), 'utf8');
+    graph.set(file.slice(0, -'.astro'.length), new Set(Array.from(source.matchAll(LOCAL_IMPORT), (m) => m[1])));
+  }
+  return graph;
+}
+
+/**
+ * The components to leave out of the scan, given the text of every file that may import one.
+ * Returns null (scan everything) when nothing imports a component or an import is not a literal
+ * `@hubpav/hwio-ui/components/HWioName.astro` path (a computed path could name any of them).
+ */
+export function hwioUnusedComponents(texts, graph = hwioComponentGraph()) {
+  const used = new Set();
+  for (const text of texts) {
+    const literal = Array.from(text.matchAll(LITERAL_IMPORT), (m) => m[1]);
+    if (Array.from(text.matchAll(ANY_IMPORT)).length !== literal.length) return null;
+    literal.forEach((name) => used.add(name));
+  }
+  if (!used.size || [...used].some((name) => !graph.has(name))) return null;
+  const stack = [...used];
+  while (stack.length) {
+    for (const dep of graph.get(stack.pop()) ?? []) {
+      if (!used.has(dep)) { used.add(dep); stack.push(dep); }
+    }
+  }
+  return [...graph.keys()].filter((name) => !used.has(name)).sort();
+}
+
+function walk(dir, out) {
+  let entries;
+  try { entries = readdirSync(dir, { withFileTypes: true }); } catch { return out; }
+  for (const entry of entries) {
+    if (SKIP_DIRS.has(entry.name)) continue;
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) walk(path, out);
+    else if (entry.isFile() && SCAN_EXT.test(entry.name)) out.push(path);
+  }
+  return out;
+}
+
+/** Real directory of an installed dependency, looked up the way Node does (walking up). */
+function packageDir(name, from) {
+  for (let dir = from; ; dir = dirname(dir)) {
+    const candidate = join(dir, 'node_modules', name);
+    if (existsSync(candidate)) return realpathSync(candidate);
+    if (dirname(dir) === dir) return null;
+  }
+}
+
+/**
+ * Where a site's component imports can live: the project, every local (workspace or `file:`)
+ * dependency, and every directory the entry stylesheet itself registers with `@source`.
+ */
+export function hwioScanRoots(root, cssFile, css) {
+  const roots = new Set([root]);
+  try {
+    const pkg = JSON.parse(readFileSync(join(root, 'package.json'), 'utf8'));
+    for (const name of Object.keys({ ...pkg.dependencies, ...pkg.devDependencies })) {
+      if (name.startsWith('@hubpav/hwio-')) continue; // the design system itself (linked in its own workspace)
+      const dir = packageDir(name, root);
+      if (dir && !dir.split(sep).includes('node_modules')) roots.add(dir);
+    }
+  } catch { /* no package.json: the project alone */ }
+  for (const m of css.matchAll(/@source\s+(?!not\b)(?!inline\()["']([^"']+)["']/g)) {
+    const dir = resolve(dirname(cssFile), m[1]);
+    if (!dir.split(sep).includes('node_modules') && existsSync(dir)) roots.add(statSync(dir).isDirectory() ? dir : dirname(dir));
+  }
+  return [...roots];
+}
+
+/**
+ * Vite plugin: a `load` hook, so it works whatever order the Tailwind plugin runs in (Tailwind
+ * transforms the entry stylesheet after it is loaded and reads its @imports from disk itself).
+ * @param {{ root: string, logger?: { info: (msg: string) => void } }} options
+ */
+export function hwioComponentSourcesPlugin({ root, logger }) {
+  const graph = hwioComponentGraph();
+  const reported = new Set();
+  return {
+    name: '@hubpav/hwio-ui:component-sources',
+    enforce: 'pre',
+    load(id) {
+      const file = id.split('?')[0];
+      if (!file.endsWith('.css') || file.split(sep).includes('node_modules') || !existsSync(file)) return null;
+      const css = readFileSync(file, 'utf8');
+      if (!ENTRY_IMPORT.test(css)) return null;
+      const files = [...new Set(hwioScanRoots(root, file, css).flatMap((dir) => walk(dir, [])))];
+      for (const f of files) this.addWatchFile?.(f);
+      const unused = hwioUnusedComponents(files.map((f) => readFileSync(f, 'utf8')), graph);
+      if (!reported.has(file)) {
+        reported.add(file);
+        logger?.info(unused
+          ? `Tailwind scans ${graph.size - unused.length} of ${graph.size} HWio components (${relative(root, file)})`
+          : `Tailwind scans all ${graph.size} HWio components (${relative(root, file)})`);
+      }
+      if (!unused?.length) return null;
+      const lines = unused.map((name) => `@source not "${relative(dirname(file), join(HWIO_COMPONENTS_DIR, `${name}.astro`)).split(sep).join('/')}";`);
+      return `${css}\n/* @hubpav/hwio-ui: components this site never imports */\n${lines.join('\n')}\n`;
+    },
+  };
+}

package/src/components/HWioHeader.astro

@@ -8,6 +8,10 @@
  * nav runtime keeps the checkbox, `aria-expanded` and focus in sync (into the panel on open, back to the
  * trigger on close, Escape closes). Below `sm` the bar drops the language dropdown (the drawer carries the
  * pills), so logo, theme toggle and the 48 px trigger fit a 320 px viewport without horizontal overflow.
+ *
+ * `navDensity="tight"` with `desktopFrom="xl"`: between 1280 and 1535 px, where the container is still
+ * 1280 px wide, the nav labels drop from 15 to 14 px and the item padding from 12 to 8 px, so a long nav
+ * plus CTAs (SK/PL/CS labels) fits without sideways scroll. From 1536 px the nav is back to default.
  */
 import type { HWioCta, HWioLinkItem } from '../types';
 import HWioButton from './HWioButton.astro';
@@ -30,13 +34,15 @@ interface Props {
   labels: { nav: string; menu: string; close: string; theme?: string; languages?: string };
   /** Viewport from which the inline nav and CTAs replace the drawer (default lg; xl for long navs). */
   desktopFrom?: 'lg' | 'xl';
+  /** 'tight' (with desktopFrom xl only): smaller nav labels and padding from 1280 to 1535 px. Default 'default'. */
+  navDensity?: 'default' | 'tight';
   id?: string;
   class?: string;
 }
-const { nav, ctas = [], languages = [], showThemeToggle = true, scrollspy = false, labels, desktopFrom = 'lg', id = 'hwio-nav-drawer', class: className = '' } = Astro.props;
+const { nav, ctas = [], languages = [], showThemeToggle = true, scrollspy = false, labels, desktopFrom = 'lg', navDensity = 'default', id = 'hwio-nav-drawer', class: className = '' } = Astro.props;
 const BREAK = {
-  lg: { nav: 'hidden flex-1 self-stretch justify-center lg:flex', ctas: 'hidden items-center gap-2 lg:flex', drawer: 'drawer drawer-end w-auto lg:hidden', panels: 'hidden lg:block' },
-  xl: { nav: 'hidden flex-1 self-stretch justify-center xl:flex', ctas: 'hidden items-center gap-2 xl:flex', drawer: 'drawer drawer-end w-auto xl:hidden', panels: 'hidden xl:block' },
+  lg: { nav: 'hidden flex-1 self-stretch justify-center lg:flex', ctas: 'hidden items-center gap-2 lg:flex', drawer: 'drawer drawer-end w-auto lg:hidden', panels: 'hidden lg:block', densityTight: '' },
+  xl: { nav: 'hidden flex-1 self-stretch justify-center xl:flex', ctas: 'hidden items-center gap-2 xl:flex', drawer: 'drawer drawer-end w-auto xl:hidden', panels: 'hidden xl:block', densityTight: 'hwio-nav-tight' },
 } as const;
 const bp = BREAK[desktopFrom];
 const CTA_VARIANT = { primary: 'primary', secondary: 'secondary', ghost: 'ghost' } as const;
@@ -50,7 +56,7 @@ const linkAttrs = (item: HWioLinkItem) => (item.external ? { target: '_blank', r
     </div>
 
     <nav class={bp.nav} aria-label={labels.nav} data-hwio-scrollspy={scrollspy ? 'true' : undefined}>
-      <ul class="menu hwio-nav menu-horizontal h-full flex-nowrap items-stretch gap-0 px-0 py-0 whitespace-nowrap">
+      <ul class:list={['menu hwio-nav menu-horizontal h-full flex-nowrap items-stretch gap-0 px-0 py-0 whitespace-nowrap', navDensity === 'tight' && bp.densityTight]}>
         {nav.map((item) => (
           <li class:list={[item.current && 'hwio-nav-current']}>
             {item.mega ? (

package/src/integration.d.mts

@@ -7,5 +7,11 @@ export interface HWioUiOptions {
   assets?: boolean;
   /** Font families copied into /fonts (file-name prefixes in @hubpav/hwio-brand/dist/fonts). Default ['inter']. */
   fonts?: string[];
+  /**
+   * 'used' (default): Tailwind scans only the HWio components the site imports (found in the project,
+   * its local workspace dependencies and the entry stylesheet's own `@source` directories), so pages
+   * carry no rules for components they never render. 'all': scan every component.
+   */
+  componentCss?: 'used' | 'all';
 }
 export function hwioUi(options?: HWioUiOptions): AstroIntegration;

package/src/integration.mjs

@@ -3,12 +3,14 @@
 //   integrations: [hwioUi({ headers: { gtm: true, turnstile: true, submitEndpoint: 'https://submit.hardwario.com', earlyHints: ['/fonts/inter-latin.woff2', '/fonts/inter-latin-ext.woff2'] } })]
 // It (1) forces component scripts to stay external (script-src 'self' covers them), (2) serves the
 // brand fonts and logos in dev and copies them into the build output, (3) writes `_headers`
-// from one options object so security headers have a single source of truth.
+// from one options object so security headers have a single source of truth, (4) limits
+// Tailwind's scan of the package components to the ones the site imports (component-sources.mjs).
 import { copyFileSync, mkdirSync, readdirSync, writeFileSync, existsSync, readFileSync } from 'node:fs';
 import { join, dirname, extname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { createRequire } from 'node:module';
 import { hwioRenderHeadersFile } from '@hubpav/hwio-web-worker/headers';
+import { hwioComponentSourcesPlugin } from './component-sources.mjs';
 
 const require = createRequire(import.meta.url);
 
@@ -19,20 +21,22 @@ function brandDir() {
 const MIME = { '.woff2': 'font/woff2', '.svg': 'image/svg+xml', '.png': 'image/png', '.ico': 'image/x-icon' };
 
 /**
- * @param {{ headers?: import('@hubpav/hwio-web-worker/headers').HWioHeadersOptions | false, assets?: boolean, fonts?: string[] }} [options]
+ * @param {{ headers?: import('@hubpav/hwio-web-worker/headers').HWioHeadersOptions | false, assets?: boolean, fonts?: string[], componentCss?: 'used' | 'all' }} [options]
  *   fonts: font families (file-name prefixes in @hubpav/hwio-brand/dist/fonts) copied to /fonts; default ['inter'].
+ *   componentCss: 'used' (default) emits CSS for the components the site imports, 'all' for every component.
  * @returns {import('astro').AstroIntegration}
  */
 export function hwioUi(options = {}) {
-  const { headers = false, assets = true, fonts = ['inter'] } = options;
+  const { headers = false, assets = true, fonts = ['inter'], componentCss = 'used' } = options;
   const brand = brandDir();
   const fontsDir = join(brand, 'dist/fonts');
   const logosDir = join(brand, 'logos');
   return {
     name: '@hubpav/hwio-ui',
     hooks: {
-      'astro:config:setup': ({ updateConfig }) => {
-        updateConfig({ vite: { build: { assetsInlineLimit: 0 } } });
+      'astro:config:setup': ({ updateConfig, config, logger }) => {
+        const plugins = componentCss === 'used' ? [hwioComponentSourcesPlugin({ root: fileURLToPath(config.root), logger })] : [];
+        updateConfig({ vite: { build: { assetsInlineLimit: 0 }, plugins } });
       },
       'astro:server:setup': ({ server }) => {
         if (!assets) return;

package/src/styles/styles.css

@@ -297,6 +297,19 @@
   --menu-active-bg: transparent;
   --menu-active-fg: currentColor;
 }
+/* HWioHeader navDensity="tight" (desktopFrom="xl"): from 1280 to 1535 px the container is 1280 px wide
+   while the full nav and CTAs show, and long SK/PL/CS labels overflowed it. Labels drop from 15 to 14 px
+   and item padding from 12 to 8 px in that range only; the current-page bar follows the padding.
+   Unlayered so it wins over the links' px-3 and text-[15px] utilities. */
+@media (80rem <= width < 96rem) {
+  .hwio-nav-tight > li > :is(a, button) {
+    padding-inline: 0.5rem;
+    font-size: 14px;
+  }
+  .hwio-nav-tight > .hwio-nav-current::after {
+    inset-inline: 0.5rem;
+  }
+}
 /* DaisyUI 5.7.30+ also gives pressed buttons (aria-pressed / aria-checked) a filled ground. A ghost
    toggle shows its state in its own content (HWioThemeToggle swaps moon and sun and sets
    aria-pressed="true" in dark mode), so it keeps the transparent ground at rest; hover and focus