@humanforest/slidev-theme 0.1.0

package/components/iconSlugs.js

@@ -0,0 +1,55 @@
+// Every icon slug `<IconTile icon="…">` will accept, derived from the generated collections
+// rather than restated — the same shape backgrounds.js already fixes for background names (see that
+// file's own doc comment for the defect this pattern exists to prevent).
+//
+// task-7-fix-1.md CRITICAL 1: `IconTile.icon` shipped `type: String, required: true` with no
+// validator at all, so nothing — not the manifest, not a gate, not this package's own vitest
+// suite — could tell a real icon slug apart from an invented one. A preset's `fill` prose (Task 7)
+// named "a check icon"; `packages/ui/icons/forest/` has no tick, only bike variants, mark,
+// mark-fill, parking, star, star-fill and traffic-light variants. Every consumer of `<IconTile>`
+// falls back to the Forest mark on a miss (IconTile.vue's own `FALLBACK_ICON`), silently — the
+// slug was never checked against anything real.
+//
+// task-8b (this file): the deck was Forest-only, but Jose's own direction is "icons should come
+// from lucide or from our own icon library" — the design system HAS a tick, in Lucide, the
+// `checklist` preset's own regression just never reached for it. `ICON_SLUGS` now spans BOTH
+// sets, each entry carrying its own namespace prefix (`forest:bike`, `lucide:check`) — a bare,
+// unprefixed name is never valid. That's not pedantry: both sets carry a `bike`, a `star` and a
+// `parking` of their own, so a flat merged namespace would be a real collision the moment both
+// are in play, not a hypothetical one. `FOREST_SLUGS` and `LUCIDE_SLUGS` are exported
+// individually too — `FOREST_SLUGS` is what scripts/deckShowcase.ts's own exhaustive coverage
+// check should track against (every FOREST icon appearing somewhere in the showcase is a
+// meaningful, small, achievable guarantee; the same demand across all ~1,774 Lucide names would
+// not be — nobody is meant to showcase the whole Lucide set, only draw from it).
+//
+// `scripts/icons.ts` already reads `packages/ui/icons/forest/*.svg` with `readdirSync()` and the
+// installed `@iconify-json/lucide/icons.json`'s own key list, writing both into
+// `packages/ui/src/icons.ts`'s `FOREST_ICON_NAMES`/`LUCIDE_ICON_NAMES` exports — re-deriving
+// either list a second time here (a second `readdirSync`, a second `icons.json` read) would be
+// exactly the anti-pattern backgrounds.js itself was written to close: two independent places
+// deriving what should be one list, free to disagree the moment either one changes.
+//
+// Named re-exports, not a default import of the whole module: `forestIcons`' own SVG path data
+// lives in the same source file but is never referenced past this line, so a real bundler's
+// dead-code elimination drops it from anything that imports only these names —
+// packages/slidev-theme/test/manifest.static.test.ts checks the resolution chain; IconTile.vue's
+// own `import.meta.env.DEV` guard on its validator is what actually keeps the ~1,790-name array
+// itself out of a deck's PRODUCTION bundle (see that file's doc comment for why a name array, cheap
+// as it is next to Lucide's 543 KB of path data, still isn't worth paying for in every deck build
+// just to back a check Vue never runs outside dev).
+//
+// Reached by relative path across the package boundary, not a `@humanforest/ui` package
+// specifier — the same trick Kpi.vue already uses for kpiDelta.ts/kpiFormat.ts, and for the same
+// reason: `@humanforest/ui`'s own entry point drags in Nuxt UI, reka-ui and mapbox-gl, none of
+// which a slide needs. `packages/ui/src/icons.ts` has zero imports of its own — a dependency-free
+// leaf, the same standard those two files are held to.
+import { FOREST_ICON_NAMES, LUCIDE_ICON_NAMES } from '@humanforest/ui/icons';
+
+/** Every Forest icon, namespaced — `bike-off` → `forest:bike-off`. */
+export const FOREST_SLUGS = FOREST_ICON_NAMES.map((name) => `forest:${name}`);
+
+/** Every Lucide icon, namespaced — `check` → `lucide:check`. */
+export const LUCIDE_SLUGS = LUCIDE_ICON_NAMES.map((name) => `lucide:${name}`);
+
+/** Every slug `<IconTile icon="…">` resolves — both sets, namespace preserved, never merged flat. */
+export const ICON_SLUGS = [...FOREST_SLUGS, ...LUCIDE_SLUGS];

package/components/iconUrl.js

@@ -0,0 +1,51 @@
+/*
+  Resolving a namespaced icon slug to a URL a CSS mask can draw. Extracted from IconTile.vue when
+  Marquee needed the same thing — a second copy would have re-derived the scanner trap below by
+  hand, and that trap is invisible when you get it wrong.
+
+  ★ THE ICON IS DRAWN AS A CSS MASK, NOT THROUGH UnoCSS'S `i-forest-*` UTILITY. That utility only
+  exists once UnoCSS's static scanner sees the literal class string in source — and an `icon` prop
+  means the class would have to be assembled at runtime (`i-forest-${icon}`), a string the scanner
+  never sees, so the rule for it is silently never generated. Masking the SVG straight from the
+  shared icon source sidesteps the scanner entirely.
+
+  ★ THE GLOB PATHS ARE RELATIVE TO THIS DIRECTORY. This file has to stay in components/ beside its
+  callers: `import.meta.glob` is resolved against the importing MODULE's own path at build time, so
+  moving it one directory up silently resolves nothing and every icon falls back.
+*/
+
+// Eager + `?url`: this is sixteen-odd URL strings, not the SVG bodies, so resolving the whole set
+// up front costs nothing and keeps the lookup below synchronous.
+const FOREST_ICONS = import.meta.glob('../icons/forest/*.svg', { eager: true, query: '?url', import: 'default' });
+const forestIconPath = (name) => `../icons/forest/${name}.svg`;
+
+// The Lucide half of the SAME technique, but sourced differently: there is no per-icon file to
+// glob — @iconify-json/lucide ships one 543 KB icons.json for its whole ~1,774-icon set.
+// scripts/deckIcons.ts pre-extracts ONLY the Lucide names this repo's decks actually reference into
+// packages/slidev-theme/icons/lucide/*.svg, so this glob only ever picks up icons in real use.
+const LUCIDE_ICONS = import.meta.glob('../icons/lucide/*.svg', { eager: true, query: '?url', import: 'default' });
+const lucideIconPath = (name) => `../icons/lucide/${name}.svg`;
+
+/* A slug with no matching file masks the glyph out entirely — an invisible shape, no console error,
+   and deckAudit measures geometry only, so it passes. Falling back to a real, always-present icon
+   turns that into "visibly the wrong icon" instead of "gone". */
+export const FALLBACK_ICON = 'mark-fill';
+
+/**
+ * `icon` is always "<namespace>:<name>". The namespace is never optional: Forest's own set and
+ * Lucide's each have a `bike`, a `star` and a `parking`, so a bare name is a real collision.
+ * Anything unrecognised returns undefined and the caller applies FALLBACK_ICON.
+ */
+export const resolveIconUrl = (icon) => {
+  if (typeof icon !== 'string') return undefined;
+  const i = icon.indexOf(':');
+  if (i < 0) return undefined;
+  const namespace = icon.slice(0, i);
+  const name = icon.slice(i + 1);
+  if (namespace === 'forest') return FOREST_ICONS[forestIconPath(name)];
+  if (namespace === 'lucide') return LUCIDE_ICONS[lucideIconPath(name)];
+  return undefined;
+};
+
+/** The same resolution with the fallback already applied — what a caller drawing a mask wants. */
+export const iconUrlOrFallback = (icon) => resolveIconUrl(icon) ?? FOREST_ICONS[forestIconPath(FALLBACK_ICON)];