@grove-dev/astro 0.5.2 → 0.5.3

package/dist/lib/icon-registry.js

@@ -0,0 +1,85 @@
+/**
+ * Icon registry resolution — the name → asset lookup shared by
+ * `components/Icon.astro` and the icon test suite.
+ *
+ * Kept out of the component's frontmatter so tests can assert on the
+ * exact resolution the component performs instead of reimplementing
+ * (and drifting from) the alias and folder rules.
+ */
+/**
+ * Normalize: lowercase + replace spaces/underscores with dashes.
+ *
+ * Deliberately NOT `@grove-dev/core`'s `slugify`, which also strips
+ * dots and other punctuation. Icon names are file names, so they must
+ * survive verbatim apart from case and separator normalization.
+ */
+export function slugifyIconName(s) {
+    return s
+        .toLowerCase()
+        .trim()
+        .replace(/[\s_]+/g, "-");
+}
+/**
+ * Built-in id remaps. Stack-only by design: `category="platform"`
+ * resolves straight to the file name so a consumer shipping their own
+ * `public/icons/platforms/ios.svg` is never silently bypassed.
+ */
+const defaultAliases = {
+    stack: {
+        ios: "apple",
+        "native-ios": "apple",
+        ipados: "apple",
+        macos: "apple",
+        "objective-c": "apple",
+        spritekit: "apple",
+        swiftui: "apple",
+        kmp: "kotlin",
+        "kotlin-multiplatform": "kotlin",
+        // Names the shipped set covers under a different file.
+        "node.js": "nodejs",
+        node: "nodejs",
+        clojurescript: "clojure",
+        svelte: "sveltekit",
+    },
+};
+/** Stack marks that `category="platform"` should reuse rather than duplicate. */
+const platformStackIcons = new Set(["docker"]);
+/** Platforms with no mark at all — always render the initials chip. */
+export const textOnlyPlatforms = new Set(["self-host", "self-hosted"]);
+/**
+ * Resolve a registry id to the asset it points at.
+ *
+ * Lookup order: `aliases` → the built-in stack aliases → the raw
+ * slugified name. Any name not covered by the shipped set simply
+ * resolves to `{category-folder}/{slug}`, which is what lets consumers
+ * drop their own SVGs in without touching this file.
+ */
+export function resolveIconAsset(name, category, aliases) {
+    const resolved = resolveName(name, category, aliases);
+    const folder = category === "stack" || (category === "platform" && platformStackIcons.has(resolved))
+        ? "stacks"
+        : category === "platform"
+            ? "platforms"
+            : "brands";
+    return {
+        folder,
+        name: resolved,
+        key: `${folder}/${resolved}`,
+        textOnly: category === "platform" && textOnlyPlatforms.has(resolved),
+    };
+}
+function resolveName(raw, category, aliases) {
+    if (!raw)
+        return "";
+    for (const registry of [aliases, defaultAliases[category]]) {
+        if (!registry)
+            continue;
+        const lower = raw.toLowerCase();
+        for (const [k, v] of Object.entries(registry)) {
+            if (k.toLowerCase() === lower)
+                return slugifyIconName(v);
+        }
+    }
+    return slugifyIconName(raw);
+}
+//# sourceMappingURL=icon-registry.js.map

package/dist/lib/icon-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-registry.js","sourceRoot":"","sources":["../../src/lib/icon-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAAC,CAAS;IACvC,OAAO,CAAC;SACL,WAAW,EAAE;SACb,IAAI,EAAE;SACN,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;AAC7B,CAAC;AAED;;;;GAIG;AACH,MAAM,cAAc,GAA0D;IAC5E,KAAK,EAAE;QACL,GAAG,EAAE,OAAO;QACZ,YAAY,EAAE,OAAO;QACrB,MAAM,EAAE,OAAO;QACf,KAAK,EAAE,OAAO;QACd,aAAa,EAAE,OAAO;QACtB,SAAS,EAAE,OAAO;QAClB,OAAO,EAAE,OAAO;QAChB,GAAG,EAAE,QAAQ;QACb,sBAAsB,EAAE,QAAQ;QAChC,uDAAuD;QACvD,SAAS,EAAE,QAAQ;QACnB,IAAI,EAAE,QAAQ;QACd,aAAa,EAAE,SAAS;QACxB,MAAM,EAAE,WAAW;KACpB;CACF,CAAC;AAEF,iFAAiF;AACjF,MAAM,kBAAkB,GAAG,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;AAE/C,uEAAuE;AACvE,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,GAAG,CAAC,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC;AAavE;;;;;;;GAOG;AACH,MAAM,UAAU,gBAAgB,CAC9B,IAAY,EACZ,QAAsB,EACtB,OAAgC;IAEhC,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;IACtD,MAAM,MAAM,GACV,QAAQ,KAAK,OAAO,IAAI,CAAC,QAAQ,KAAK,UAAU,IAAI,kBAAkB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACnF,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,QAAQ,KAAK,UAAU;YACvB,CAAC,CAAC,WAAW;YACb,CAAC,CAAC,QAAQ,CAAC;IAEjB,OAAO;QACL,MAAM;QACN,IAAI,EAAE,QAAQ;QACd,GAAG,EAAE,GAAG,MAAM,IAAI,QAAQ,EAAE;QAC5B,QAAQ,EAAE,QAAQ,KAAK,UAAU,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC;KACrE,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAClB,GAAW,EACX,QAAsB,EACtB,OAAgC;IAEhC,IAAI,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC;IACpB,KAAK,MAAM,QAAQ,IAAI,CAAC,OAAO,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC;QAC3D,IAAI,CAAC,QAAQ;YAAE,SAAS;QACxB,MAAM,KAAK,GAAG,GAAG,CAAC,WAAW,EAAE,CAAC;QAChC,KAAK,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9C,IAAI,CAAC,CAAC,WAAW,EAAE,KAAK,KAAK;gBAAE,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC;QAC3D,CAAC;IACH,CAAC;IACD,OAAO,eAAe,CAAC,GAAG,CAAC,CAAC;AAC9B,CAAC"}

package/dist/lib/index.d.ts

@@ -10,6 +10,7 @@
  *     `lib/search`)
  *   - compute taxonomy counts at build time (`lib/taxonomy-counts`)
  *   - pretty-print slugs and label/lens/sort/status ids (`lib/display`)
+ *   - resolve icon registry ids to asset paths (`lib/icon-registry`)
  *
  * All helpers are pure, dependency-free, and typed against
  * `@grove-dev/core` (specifically `ProjectRecord` for the index
@@ -22,4 +23,7 @@ export * from "./search.js";
 export * from "./taxonomy-counts.js";
 export * from "./display.js";
 export * from "./load-collections.js";
+export * from "./icon-registry.js";
+export * from "./icon-kinds.js";
+export * from "./packaged-icons.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC"}

package/dist/lib/index.js

@@ -10,6 +10,7 @@
  *     `lib/search`)
  *   - compute taxonomy counts at build time (`lib/taxonomy-counts`)
  *   - pretty-print slugs and label/lens/sort/status ids (`lib/display`)
+ *   - resolve icon registry ids to asset paths (`lib/icon-registry`)
  *
  * All helpers are pure, dependency-free, and typed against
  * `@grove-dev/core` (specifically `ProjectRecord` for the index
@@ -22,4 +23,7 @@ export * from "./search.js";
 export * from "./taxonomy-counts.js";
 export * from "./display.js";
 export * from "./load-collections.js";
+export * from "./icon-registry.js";
+export * from "./icon-kinds.js";
+export * from "./packaged-icons.js";
 //# sourceMappingURL=index.js.map

package/dist/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC"}

package/dist/lib/packaged-icons.d.ts

@@ -0,0 +1,9 @@
+import type { IconSyncOptions, IconSyncResult } from "@grove-dev/core";
+/**
+ * `packages/astro/assets/icons` — two levels up, which holds for both
+ * `src/lib/` (tests, Vite) and `dist/lib/` (published).
+ */
+export declare const packagedIconsDir: string;
+/** Copy the packaged icon set into a site's `public/`. */
+export declare function syncPackagedIcons(publicDir: string, options?: IconSyncOptions): Promise<IconSyncResult>;
+//# sourceMappingURL=packaged-icons.d.ts.map

package/dist/lib/packaged-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"packaged-icons.d.ts","sourceRoot":"","sources":["../../src/lib/packaged-icons.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGvE;;;GAGG;AACH,eAAO,MAAM,gBAAgB,QAM5B,CAAC;AAEF,0DAA0D;AAC1D,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,eAAe,GACxB,OAAO,CAAC,cAAc,CAAC,CAEzB"}

package/dist/lib/packaged-icons.js

@@ -0,0 +1,21 @@
+/**
+ * Locate the icon set that ships inside `@grove-dev/astro`.
+ *
+ * The component and the SVGs it points at live in the same package on
+ * purpose: an upgrade that changes how `Icon.astro` resolves a name
+ * carries the matching artwork with it, so a consumer can never end up
+ * with a component asking for files their site does not have.
+ */
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { syncIconAssets } from "@grove-dev/core";
+/**
+ * `packages/astro/assets/icons` — two levels up, which holds for both
+ * `src/lib/` (tests, Vite) and `dist/lib/` (published).
+ */
+export const packagedIconsDir = resolve(dirname(fileURLToPath(import.meta.url)), "..", "..", "assets", "icons");
+/** Copy the packaged icon set into a site's `public/`. */
+export function syncPackagedIcons(publicDir, options) {
+    return syncIconAssets(packagedIconsDir, publicDir, options);
+}
+//# sourceMappingURL=packaged-icons.js.map

package/dist/lib/packaged-icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"packaged-icons.js","sourceRoot":"","sources":["../../src/lib/packaged-icons.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,OAAO,CACrC,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EACvC,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,OAAO,CACR,CAAC;AAEF,0DAA0D;AAC1D,MAAM,UAAU,iBAAiB,CAC/B,SAAiB,EACjB,OAAyB;IAEzB,OAAO,cAAc,CAAC,gBAAgB,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grove-dev/astro",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "type": "module",
   "description": "Composable Astro UI, data adapters, and integration for Grove directories.",
   "license": "MIT",
@@ -29,6 +29,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "files": [
+    "assets",
     "dist",
     "src/components",
     "src/layouts",
@@ -60,7 +61,7 @@
     "sanitize-html": "^2.17.5",
     "shiki": "^1.29.2",
     "yaml": "^2.9.0",
-    "@grove-dev/core": "0.5.2"
+    "@grove-dev/core": "0.5.3"
   },
   "peerDependencies": {
     "astro": "^6.0.0 || ^7.0.0"

package/src/components/CollectionRow.astro

@@ -12,19 +12,20 @@
  *  - `href` — full detail URL; wins over `routeSlug`
  *  - `routeSlug` — blueprint slug (e.g. "projects"); details derived
  *    as `/${routeSlug}/${slug}` when `href` is not provided
- *  - `showChips` — render platform + stack chip row (default true)
- *  - `showMeta` — render stars/updated/license metadata (default true)
- *  - `showLabel` — render the curated/category label (default true)
+ *  - `showChips`, `showLabel` — deprecated no-ops. The card renders
+ *    one fixed layout everywhere, so a record cannot look like a
+ *    different record depending on the page it appears on.
+ *  - `showMeta` — still honoured: it controls whether the *data*
+ *    (stars, last-updated) is passed in at all, not how it is drawn
  *  - `class` — extra class on the card root
  *  - `eager` — bypass lazy loading for above-the-fold avatars
  *
- * Footer links:
- *  - "View repo" — when `entry.repoHref` is set
- *  - "Visit site" — when `entry.homepageHref` is set
+ * The repository is reached through the card's `owner/repo` line;
+ * there is no separate footer link button.
  *
  * Analytics: emits `data-event="collection_item_click"` /
- * `data-event-source="collection_row"` on the card root and per-link
- * events on the footer links, so sites wire one handler in BaseLayout.
+ * `data-event-source="collection_row"` on the card root, so sites wire
+ * one handler in BaseLayout.
  */
 import type { CollectionEntry } from "@grove-dev/core";
 import ProjectCard from "./ProjectCard.astro";
@@ -35,8 +36,11 @@ interface Props {
   href?: string;
   /** Blueprint route slug; detail URL = `/${routeSlug}/${slug}`. */
   routeSlug?: string;
+  /** @deprecated Ignored — the card renders one fixed layout. */
   showChips?: boolean;
+  /** Pass stars / last-updated through to the card. Default true. */
   showMeta?: boolean;
+  /** @deprecated Ignored — see `showChips`. */
   showLabel?: boolean;
   eager?: boolean;
   class?: string;
@@ -46,9 +50,7 @@ const {
   entry,
   href: hrefProp,
   routeSlug,
-  showChips = true,
   showMeta = true,
-  showLabel = true,
   eager = false,
   class: className = "",
 } = Astro.props;
@@ -61,33 +63,6 @@ const detailHref =
     : entry.url || (base ? `/${base}/${slug}` : `/${slug}`);
 
 const repoHref = entry.repoHref;
-const homepageHref = entry.homepageHref;
-const curated = Boolean(entry.curationScore || (entry.activityScore && entry.activityScore > 0.5));
-
-const secondaryLinks = [
-  ...(repoHref
-    ? [
-        {
-          label: "View repo",
-          href: repoHref,
-          external: true,
-          event: "external_repo_click",
-          eventSource: "collection_row_view_repo",
-        },
-      ]
-    : []),
-  ...(homepageHref
-    ? [
-        {
-          label: "Visit site",
-          href: homepageHref,
-          external: true,
-          event: "external_link_click",
-          eventSource: "collection_row_visit_site",
-        },
-      ]
-    : []),
-];
 ---
 
 <ProjectCard
@@ -98,17 +73,7 @@ const secondaryLinks = [
   repoUrl={repoHref}
   stars={showMeta ? entry.stars : undefined}
   pushedAt={showMeta ? entry.pushedAt : undefined}
-  license={showMeta ? (entry.license ?? null) : null}
-  category={entry.categories?.[0]}
-  status={entry.status}
-  curated={curated}
   stack={entry.stack}
-  platforms={entry.platform ?? []}
-  showCurated={showLabel}
-  showLicense={showMeta}
-  showCategoryStatus={showLabel}
-  labelledChips={showChips}
-  secondaryLinks={secondaryLinks}
   eager={eager}
   event="collection_item_click"
   eventSource="collection_row"

package/src/components/Icon.astro

@@ -2,18 +2,14 @@
 /**
  * Icon — brand icon registry.
  *
- * Renders an `<img src="/icons/{stacks|platforms|brands}/{name}.svg" />`
- * for a given registry name. The Astro integration ships the default
- * `public/icons/{stacks,platforms}/` assets inside the `default`
- * template's `public/` directory; consumers can ship their own SVGs
- * under the same path (or override the `base` prop) without forking
+ * Resolves a registry name to `/icons/{stacks|platforms|brands}/{name}.svg`
+ * and renders it. The Astro integration syncs the packaged set into the
+ * consumer's `public/icons/` on every build; consumers can ship their own
+ * SVGs under the same paths (or override the `base` prop) without forking
  * this component.
  *
  * The component is **generic** — it does not import any consumer-side
- * `siteConfig`, `item`, or blueprint-specific module. Every consumer
- * supplies its own icon list (and optionally an `aliases` map for
- * friendly ids) via props, and any `name` not in the registry
- * falls back to the initials placeholder.
+ * `siteConfig`, `item`, or blueprint-specific module.
  *
  * `category` selects the subfolder:
  *
@@ -21,21 +17,43 @@
  *   - "platform"  → `/icons/platforms/{name}.svg`
  *   - "brand"     → `/icons/brands/{name}.svg`   (consumer-supplied)
  *
- * Theme-aware: when the consumer sets `mode: "auto"` the component
- * looks for `{name}-light.svg` and `{name}-dark.svg` siblings in
- * addition to the default `{name}.svg` and switches the `src` based
- * on the resolved theme via the inline `data-grove-icon` script.
- * For static (non-themed) icons this is a no-op — set `mode: "static"`
- * (the default) to keep the markup simple and avoid hydration cost.
+ * ## Theming
+ *
+ * `ICON_KINDS` (generated by `scripts/sync-icons.mjs`) classifies each
+ * packaged icon:
+ *
+ *   - **color** — the default. Any brand with a color mark keeps it,
+ *     rendered as `<img>` with an `onerror` fallback to an initials
+ *     chip.
+ *   - **mono** — marks with no color to lose (Apple, Rust, Tauri,
+ *     Solidity, Deno) plus the concept glyphs. Rendered as a CSS-masked
+ *     `<span>` painted from `--grove-foreground`, which reproduces how
+ *     those brands are actually used: solid black on light, solid white
+ *     on dark, with no script and no second file. See
+ *     `.grove-icon-mask` in `styles.css`.
+ *
+ * The map CLASSIFIES; it does not gate availability. A name it has never
+ * heard of — a consumer's own SVG — takes the `<img>` path, exactly as
+ * before. Pass `kind="mono"` to opt a custom mark into `currentColor`
+ * tinting.
  *
  * Aliases: a tiny `aliases` map (e.g. `rn → react-native`) lets the
- * registry accept multiple ids for the same asset without a renames
- * pass. The lookup falls through the aliases map before failing over
+ * registry accept multiple ids for the same asset. Lookup falls through
+ * `aliases` → the built-in stack aliases → the raw slug, then fails over
  * to the initials placeholder.
  */
-import { getOwnerAndRepoFromRepoUrl } from "../lib/repo";
+import { ICON_KINDS } from "../lib/icon-kinds";
+import type { IconKind } from "../lib/icon-kinds";
+import { resolveIconAsset, slugifyIconName } from "../lib/icon-registry";
+import type { IconCategory } from "../lib/icon-registry";
 
-export type IconCategory = "stack" | "platform" | "brand";
+export type { IconCategory, IconKind };
+
+/**
+ * @deprecated Theme variants are no longer file-based — `mono` icons
+ * inherit `currentColor`. Accepted and ignored so consumers passing
+ * `mode="auto"` do not hit a type error.
+ */
 export type IconMode = "static" | "auto";
 
 interface Props {
@@ -52,11 +70,14 @@ interface Props {
   class?: string;
   /** Tooltip / aria-label. */
   title?: string;
+  /** @deprecated No-op. Kept for one minor release. */
+  mode?: IconMode;
   /**
-   * Static (single SVG) or auto (light/dark variants via inline
-   * script). Default "static".
+   * Override the packaged kind classification. Pass `"mono"` for a
+   * consumer-supplied single-color mark so it is painted black on
+   * light and white on dark instead of shipping two files.
    */
-  mode?: IconMode;
+  kind?: IconKind;
   /**
    * Optional id → id remap. Lookup goes `name → aliases[name] →
    * {name}.svg` (case-insensitive).
@@ -74,7 +95,7 @@ interface Props {
   fallbackInitials?: string;
   /**
    * Base path for icon files. Defaults to `/icons` (matches the
-   * default template's `public/icons/`).
+   * synced `public/icons/`).
    */
   base?: string;
 }
@@ -85,125 +106,66 @@ const {
   size = 16,
   class: className = "",
   title,
-  mode = "static",
+  kind,
   aliases,
   available,
   fallbackInitials,
   base = "/icons",
 } = Astro.props;
 
-// Normalize: lowercase + replace spaces/underscores with dashes.
-function slugify(s: string): string {
-  return s.toLowerCase().trim().replace(/[\s_]+/g, "-");
-}
-
-// Resolve `name` through the aliases map.
-function resolveName(raw: string): string {
-  if (!raw) return "";
-  const defaultAliases: Partial<Record<IconCategory, Record<string, string>>> = {
-    stack: {
-      ios: "apple",
-      "native-ios": "apple",
-      ipados: "apple",
-      macos: "apple",
-      "objective-c": "apple",
-      spritekit: "apple",
-      swiftui: "apple",
-      kmp: "kotlin",
-      "kotlin-multiplatform": "kotlin",
-    },
-  };
-  for (const registry of [aliases, defaultAliases[category]]) {
-    if (!registry) continue;
-    const lower = raw.toLowerCase();
-    for (const [k, v] of Object.entries(registry)) {
-      if (k.toLowerCase() === lower) return slugify(v);
-    }
-  }
-  return slugify(raw);
-}
-
-const resolved = resolveName(name);
-const availableIcons = available?.map(slugify);
+const asset = resolveIconAsset(name, category, aliases);
+const resolved = asset.name;
+const availableIcons = available?.map(slugifyIconName);
 const hasAsset =
   category === "brand" ||
   availableIcons === undefined ||
   availableIcons.includes(resolved);
-const effectiveMode: IconMode = resolved === "apple" ? "auto" : mode;
-const platformStackIcons = new Set(["docker"]);
-const textOnlyPlatforms = new Set(["self-host", "self-hosted"]);
-const folder =
-  category === "stack" || (category === "platform" && platformStackIcons.has(resolved))
-    ? "stacks"
-    : category === "platform"
-      ? "platforms"
-      : "brands";
-const baseUrl = `${base.replace(/\/$/, "")}/${folder}/${resolved}`;
-
-// Static: just point at the canonical svg.
-const staticSrc = `${baseUrl}.svg`;
+const src = `${base.replace(/\/$/, "")}/${asset.folder}/${resolved}.svg`;
 
 // Initials fallback: first 1–2 alphanumerics, uppercased.
 const init = (fallbackInitials ?? name ?? "")
   .replace(/[^a-z0-9]/gi, "")
   .slice(0, 2)
   .toUpperCase();
-const showFallback =
-  !resolved ||
-  !hasAsset ||
-  (category === "platform" && textOnlyPlatforms.has(resolved));
+const showFallback = !resolved || !hasAsset || asset.textOnly;
+
+// Unknown names fall through to `<img>`, never to `mono` — a mask has
+// no `onerror`, so a missing file would render an invisible blank.
+const effectiveKind: IconKind = kind ?? ICON_KINDS[asset.key] ?? "color";
+
+// `name` reaches the mask branch as part of a CSS `url()` token, and
+// slugifying does not remove the characters that would close it. Astro
+// escapes the attribute; this escapes the CSS inside it.
+const cssUrl = src.replace(/['"()\\\s]/g, encodeURIComponent);
 
 // Build aria-label.
 const ariaLabel = title ?? name;
 const a11y: Record<string, string> = title
   ? { "aria-label": ariaLabel, role: "img" }
   : { "aria-hidden": "true", "focusable": "false" };
+
+const fallbackClass = [
+  "inline-flex shrink-0 select-none items-center justify-center rounded-sm bg-ink-100 align-middle font-semibold uppercase leading-none text-ink-700 dark:bg-ink-800 dark:text-ink-200",
+  className,
+];
+const fallbackStyle = `width:${size}px;height:${size}px;font-size:${Math.max(10, size - 6)}px;`;
 ---
 
 {
   showFallback ? (
-    <span
-      class:list={[
-        "inline-flex shrink-0 select-none items-center justify-center rounded-sm bg-ink-100 align-middle font-semibold uppercase leading-none text-ink-700 dark:bg-ink-800 dark:text-ink-200",
-        className,
-      ]}
-      style={`width:${size}px;height:${size}px;font-size:${Math.max(10, size - 6)}px;`}
-      {...a11y}
-    >
+    <span class:list={fallbackClass} style={fallbackStyle} {...a11y}>
       {init || "·"}
     </span>
-  ) : effectiveMode === "auto" ? (
-    <>
-      <img
-        src={`${baseUrl}-light.svg`}
-        data-grove-icon
-        data-grove-icon-light={`${baseUrl}-light.svg`}
-        data-grove-icon-dark={`${baseUrl}-dark.svg`}
-        data-grove-icon-fallback={`${baseUrl}-light.svg`}
-        width={size}
-        height={size}
-        alt=""
-        class:list={["inline-block shrink-0 align-middle", className]}
-        onerror="this.hidden=true;this.nextElementSibling.hidden=false"
-        {...a11y}
-      />
-      <span
-        hidden
-        data-grove-icon-fallback-initials
-        class:list={[
-          "inline-flex shrink-0 select-none items-center justify-center rounded-sm bg-ink-100 align-middle font-semibold uppercase leading-none text-ink-700 dark:bg-ink-800 dark:text-ink-200",
-          className,
-        ]}
-        style={`width:${size}px;height:${size}px;font-size:${Math.max(10, size - 6)}px;`}
-        {...a11y}
-      >
-        {init || "·"}
-      </span>
-    </>
+  ) : effectiveKind === "mono" ? (
+    <span
+      class:list={["grove-icon-mask", className]}
+      style={`width:${size}px;height:${size}px;--grove-icon-url:url('${cssUrl}');`}
+      {...a11y}
+    />
   ) : (
     <>
       <img
-        src={staticSrc}
+        src={src}
         width={size}
         height={size}
         alt=""
@@ -213,49 +175,9 @@ const a11y: Record<string, string> = title
         onerror="this.hidden=true;this.nextElementSibling.hidden=false"
         {...a11y}
       />
-      <span
-        hidden
-        data-grove-icon-fallback-initials
-        class:list={[
-          "inline-flex shrink-0 select-none items-center justify-center rounded-sm bg-ink-100 align-middle font-semibold uppercase leading-none text-ink-700 dark:bg-ink-800 dark:text-ink-200",
-          className,
-        ]}
-        style={`width:${size}px;height:${size}px;font-size:${Math.max(10, size - 6)}px;`}
-        {...a11y}
-      >
+      <span hidden data-grove-icon-fallback-initials class:list={fallbackClass} style={fallbackStyle} {...a11y}>
         {init || "·"}
       </span>
     </>
   )
 }
-
-{effectiveMode === "auto" && (
-  <script is:inline>
-    // Theme-aware icon swap. Runs after THEME_INIT (BaseLayout) so
-    // `data-resolved-theme` is already populated. Idempotent — the
-    // MutationObserver picks up theme changes from ThemeToggle.
-    (function () {
-      function swap() {
-        var theme =
-          document.documentElement.dataset.resolvedTheme || "light";
-        var nodes = document.querySelectorAll(
-          "img[data-grove-icon]:not([data-grove-icon-bound])",
-        );
-        for (var i = 0; i < nodes.length; i++) {
-          var img = nodes[i];
-          img.setAttribute("data-grove-icon-bound", "1");
-          var next =
-            theme === "dark"
-              ? img.getAttribute("data-grove-icon-dark")
-              : img.getAttribute("data-grove-icon-light");
-          if (next) img.src = next;
-        }
-      }
-      swap();
-      new MutationObserver(swap).observe(document.documentElement, {
-        attributes: true,
-        attributeFilter: ["data-resolved-theme"],
-      });
-    })();
-  </script>
-)}