@hubpav/hwio-ui 0.7.7 → 0.7.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubpav/hwio-ui",
-  "version": "0.7.7",
+  "version": "0.7.9",
   "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.7",
-    "@hubpav/hwio-web-runtime": "0.7.7",
-    "@hubpav/hwio-web-worker": "0.7.7",
+    "@hubpav/hwio-brand": "0.7.9",
+    "@hubpav/hwio-web-runtime": "0.7.9",
+    "@hubpav/hwio-web-worker": "0.7.9",
     "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/HWioChoiceCards.astro

@@ -6,7 +6,7 @@ import HWioIcon from './HWioIcon.astro';
 interface Choice { label: string; title: string; text: string; points?: string[]; cta: HWioCta }
 interface Props { items: Choice[]; lead?: number; class?: string }
 const { items, lead = 0, class: className = '' } = Astro.props;
-const COLS = { 1: 'grid gap-6', 2: 'grid gap-6 md:grid-cols-2', 3: 'grid gap-6 md:grid-cols-3' } as const;
+const COLS = { 1: 'grid grid-cols-1 gap-6', 2: 'grid grid-cols-1 gap-6 md:grid-cols-2', 3: 'grid grid-cols-1 gap-6 md:grid-cols-3' } as const;
 const cols = COLS[(Math.min(Math.max(items.length, 1), 3) as 1 | 2 | 3)];
 ---
 <div class:list={[cols, 'mx-auto max-w-[65rem]', className]}>

package/src/components/HWioContactSection.astro

@@ -16,7 +16,7 @@ interface Props {
 const { id = 'contact', eyebrow, title, lead, person, tone = 'alt', class: className = '' } = Astro.props;
 ---
 <HWioSection id={id} tone={tone} class={className}>
-  <div class="grid gap-12 lg:grid-cols-[2fr_3fr]">
+  <div class="grid grid-cols-1 gap-12 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
     <div>
       <HWioSectionHeader eyebrow={eyebrow} title={title} lead={lead} align="left" />
       {person && (

package/src/components/HWioFeatureGrid.astro

@@ -1,7 +1,7 @@
 ---
 import HWioFeatureCard from './HWioFeatureCard.astro';
 interface Props { items: { title: string; text: string; icon?: string; href?: string }[]; columns?: 2 | 3 | 4; class?: string }
-const COLS = { 2: 'grid gap-6 md:grid-cols-2', 3: 'grid gap-6 md:grid-cols-2 lg:grid-cols-3', 4: 'grid gap-6 md:grid-cols-2 lg:grid-cols-4' } as const;
+const COLS = { 2: 'grid grid-cols-1 gap-6 md:grid-cols-2', 3: 'grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3', 4: 'grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4' } as const;
 const { items, columns = 3, class: className = '' } = Astro.props;
 ---
 <div class:list={[COLS[columns], className]}>

package/src/components/HWioFooter.astro

@@ -37,8 +37,8 @@ const linkClass = 'inline-flex items-center gap-1 text-neutral-content/80 transi
 
   <div class="container py-12 lg:py-16">
     {/* Long compound words (DE "Datenschutzerklärung", "Rechtsdokumente") are wider than a column on
-        phones and at 1024 px: hyphenate them, words under 12 letters stay whole. */}
-    <div class="grid grid-cols-2 gap-8 break-words hyphens-auto [hyphenate-limit-chars:12_5_5] md:grid-cols-3 lg:grid-cols-6">
+        phones and at 1024 px: hyphenate them; words under 10 letters (brand names) stay whole. */}
+    <div class="grid grid-cols-2 gap-8 hwio-hyphenate md:grid-cols-3 lg:grid-cols-6">
       <div class="hidden md:col-span-3 md:flex lg:col-span-1 lg:block">
         <slot name="logo" />
       </div>

package/src/components/HWioHeroSplit.astro

@@ -8,7 +8,7 @@ const { id, eyebrow, title, accent, lead, actions = [], checklist = [], reverse
 const VARIANT = { primary: 'primary', secondary: 'secondary', ghost: 'ghost' } as const;
 ---
 <section id={id} class:list={['bg-base-100 text-base-content', className]}>
-  <div class:list={['container grid items-center gap-12 py-16 lg:grid-cols-[7fr_5fr] lg:gap-16 lg:py-24', reverse ? 'lg:[&>*:first-child]:order-2' : '']}>
+  <div class:list={['container grid grid-cols-1 items-center gap-12 py-16 lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)] lg:gap-16 lg:py-24', reverse ? 'lg:[&>*:first-child]:order-2' : '']}>
     <div>
       {eyebrow && <p class="hwio-kicker mb-5">{eyebrow}</p>}
       <h1><slot name="title"><span class="block">{title}</span>{accent && <span class="block text-accent">{accent}</span>}</slot></h1>

package/src/components/HWioHubSpotForm.astro

@@ -17,7 +17,7 @@ interface Props {
   class?: string;
 }
 const { form, fields, labels, locale, turnstileSiteKey, layout = 'grid', class: className = '' } = Astro.props;
-const LAYOUT = { grid: 'grid gap-4 md:grid-cols-2', inline: 'flex flex-col gap-3 sm:flex-row sm:items-end' } as const;
+const LAYOUT = { grid: 'grid grid-cols-1 gap-4 md:grid-cols-2', inline: 'flex flex-col gap-3 sm:flex-row sm:items-end' } as const;
 ---
 <form
   class:list={['hwio-form', className]}

package/src/components/HWioPricingTiers.astro

@@ -5,7 +5,7 @@ import HWioIcon from './HWioIcon.astro';
 interface Tier { eyebrow?: string; name: string; price?: string; pricePrefix?: string; period?: string; description?: string; features: string[]; cta?: HWioCta; featured?: boolean; badge?: string }
 interface Props { tiers: Tier[]; class?: string }
 const { tiers, class: className = '' } = Astro.props;
-const COLS = { 1: 'grid gap-6', 2: 'grid gap-6 md:grid-cols-2', 3: 'grid gap-6 md:grid-cols-3', 4: 'grid gap-6 md:grid-cols-2 lg:grid-cols-4' } as const;
+const COLS = { 1: 'grid grid-cols-1 gap-6', 2: 'grid grid-cols-1 gap-6 md:grid-cols-2', 3: 'grid grid-cols-1 gap-6 md:grid-cols-3', 4: 'grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4' } as const;
 const cols = (Math.min(Math.max(tiers.length, 1), 4) as 1 | 2 | 3 | 4);
 ---
 <div class:list={[COLS[cols], className]}>

package/src/components/HWioProcessSteps.astro

@@ -3,7 +3,7 @@
 /** `number` overrides the rendered ordinal (sites whose copy numbers steps "01", "02"…). */
 interface Props { items: { title: string; text: string; number?: string }[]; orientation?: 'horizontal' | 'vertical'; class?: string }
 const { items, orientation = 'horizontal', class: className = '' } = Astro.props;
-const LAYOUT = { horizontal: 'grid gap-8 md:grid-cols-2 lg:grid-cols-4', vertical: 'grid gap-8' } as const;
+const LAYOUT = { horizontal: 'grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4', vertical: 'grid grid-cols-1 gap-8' } as const;
 ---
 <ol class:list={[LAYOUT[orientation], className]} data-hwio-steps>
   {items.map((step, i) => (

package/src/components/HWioSectionHeader.astro

@@ -6,7 +6,7 @@ const { eyebrow, title, lead, align = 'center', layout = 'stack', level = 2, cla
 const Heading = `h${level}` as 'h1' | 'h2' | 'h3';
 ---
 {layout === 'split' ? (
-  <div class:list={['grid gap-8 lg:grid-cols-[5fr_7fr] lg:items-end', className]}>
+  <div class:list={['grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:items-end', className]}>
     <div>
       {eyebrow && <p class="hwio-kicker mb-4">{eyebrow}</p>}
       <Heading><slot name="title">{title}</slot></Heading>

package/src/components/HWioStatsBand.astro

@@ -6,7 +6,7 @@ const COLS = { 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-3', 4: 'sm:grid-cols-2 lg:g
 const cols = COLS[(Math.min(Math.max(items.length, 2), 5) as 2 | 3 | 4 | 5)];
 ---
 <section id={id} class:list={['border-y border-base-300 bg-base-100 text-base-content', className]}>
-  <div class:list={['container grid py-9', cols]}>
+  <div class:list={['container grid grid-cols-1 py-9', cols]}>
     {items.map((s, i) => {
       const numeric = typeof s.value === 'number';
       return (

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

@@ -20,6 +20,19 @@
   --font-sans: var(--hwio-font-sans);
 }
 
+/* Long words (CS/DE/PL compounds) hyphenate instead of overflowing a narrow column. At least five
+   letters on each side of the hyphen, so no word under 10 letters ever splits; this keeps the brand
+   names whole (HARDWARIO, ProXimos, CHESTER) in Safari too, which ignores hyphenate-limit-chars and
+   reads only the -webkit- limits. A word no browser can hyphenate still breaks rather than widening
+   its grid or flex parent (`anywhere` lowers min-content). */
+@utility hwio-hyphenate {
+  overflow-wrap: anywhere;
+  hyphens: auto;
+  hyphenate-limit-chars: 10 5 5;
+  -webkit-hyphenate-limit-before: 5;
+  -webkit-hyphenate-limit-after: 5;
+}
+
 /* One container for the fleet; width comes from the theme (hub) or the site (landing).
    Unlayered on purpose: Tailwind's built-in `container` utility caps max-width at each
    breakpoint (40/48/64/80/96rem) and would otherwise win over the theme's width. */
@@ -68,6 +81,16 @@
   @media (width >= 64rem) {
     h1 { font-size: 3.5rem; }
   }
+  /* Phones: a heading word wider than its column (a 40 px H1 gets 218-288 px) hyphenates instead
+     of running past the screen, and a token longer than the line (a URL, an ID) breaks. */
+  @media (width < 40rem) {
+    h1, h2, h3 {
+      @apply hwio-hyphenate;
+    }
+    main {
+      overflow-wrap: break-word;
+    }
+  }
   :focus-visible {
     outline: 2px solid var(--color-secondary);
     outline-offset: 2px;
@@ -83,6 +106,16 @@
 }
 
 @layer components {
+  /* Phones: a button label wider than its column wraps onto a second line instead of pushing the
+     page sideways; one-line buttons keep their height. */
+  @media (width < 40rem) {
+    .btn {
+      max-width: 100%;
+      height: auto;
+      min-height: var(--size);
+      padding-block: 0.375rem;
+    }
+  }
   /* Rhythm (direction A): 80 / 112 px sections, 40 / 48 px compact bands. */
   .hwio-section { padding-block: calc(var(--spacing) * 20); }
   .hwio-section-compact { padding-block: calc(var(--spacing) * 10); }