OpenIcon: the agentic styles re-render brand marks, and a style says which ground it needs (#211)

Anthony, on the gallery with the Brands filter and Agentic Emissive
selected: "why doesn't brands change?" It could not. Every brand file
was byte-identical across all four colour styles — github.webp was the
same 606-byte file in hq, matte, machined and emissive — because a
colour style stopped at the drawn icons and a brand's coloured form was
just the line mark recoloured to the owner's hex.

The three agentic styles now re-render the marks in their material,
pinned to the owner's own mark: same geometry, same colour, new surface.
hq keeps the flat marks a first-release reader already has.

Spec:

- Rule 7 said "a set does not redraw them", which forbade exactly this.
  It now says what a re-rendering may and may not do: geometry, counters
  and figure/ground are fixed, only the surface changes.
- Rule 8 gains the third provenance: a re-rendered mark is `both`, the
  geometry its owner's and the material the set's.
- Rule 10 covers every colour style rather than hq alone, and says what
  a material that works by emitting light does with a mark too dark to
  emit: its own colour where it can, a lighter tint of the same hue
  where it is dark but still coloured, neutral white where there is no
  hue left. 85, 4 and 22 of the 111.
- Rule 12 says how a reader tells the two apart without comparing files:
  a flat style writes `svg` and `made_by: human`, a re-rendering style
  writes no `svg` and `made_by: both`.
- Rule 13 gains `ground`. It already observed that a near-black style is
  right on a terminal and illegible on paper, but gave a reader no way
  to know which style that was.

Gallery:

- Honours `ground: dark`, so emissive draws on the dark tiles it needs.
  Without it the 22 marks that emit neutral white — GitHub, Apple,
  OpenAI — were invisible on a white tile, which is the same class of
  bug as the one that started this.
- In the detail hero each style tile carries its own ground, so a
  dark-only style sitting beside three light ones still shows something.

The hosted set carries the new brand webp for the three agentic styles
and drops the 333 flat marks they no longer reference.

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

apps/logicsrc-web/src/app/openicon/gallery.module.css

@@ -446,3 +446,15 @@
   max-width: 100%;
   height: auto;
 }
+
+/*
+ * A style that declares ground: dark gets one. Emissive bodies are near-black
+ * and the marks with no hue to raise emit neutral white, so on the hero's pale
+ * gradient the tile would be empty.
+ */
+.heroHqDark {
+  border-radius: 0.5rem;
+  padding: 0.35rem 0.2rem;
+  background: #11161b;
+  color: #8fa0ad;
+}

apps/logicsrc-web/src/app/openicon/gallery.tsx

@@ -38,7 +38,7 @@ type Icon = {
 
 type StyleFiles = { png?: string; webp?: string; svg?: string; made_by?: string; hex?: string };
 
-type StyleInfo = { label?: string; material?: string; dir?: string };
+type StyleInfo = { label?: string; material?: string; dir?: string; ground?: "light" | "dark" | "any" };
 
 type IconSet = {
   name: string;
@@ -261,6 +261,11 @@ export function Gallery(): ReactNode {
     }))
     .filter((s) => s.count > 0);
   const terminal = filters.view !== "svg";
+  // A style may say it needs a dark ground, and emissive does: its near-black
+  // bodies and the marks that emit neutral white are invisible on a white
+  // tile. The set is the only thing that knows, so honour what it says rather
+  // than guessing from the style id.
+  const darkGround = !terminal && set.style_info?.[filters.style]?.ground === "dark";
   const active = filters.q || filters.category || filters.kind;
 
   return (
@@ -397,7 +402,10 @@ export function Gallery(): ReactNode {
       {results.length === 0 ? (
         <p className={styles.notice}>Nothing matches. Try an alias (email, trash) or fewer words.</p>
       ) : (
-        <ul className={`${styles.grid} ${terminal ? styles.gridTerminal : ""}`} style={{ ["--tile" as string]: `${filters.size}px` }}>
+        <ul
+          className={`${styles.grid} ${terminal || darkGround ? styles.gridTerminal : ""}`}
+          style={{ ["--tile" as string]: `${filters.size}px` }}
+        >
           {results.map((i) => (
             <li key={i.key}>
               <button
@@ -462,7 +470,12 @@ function Detail({ icon, set, color, onClose }: { icon: Icon; set: IconSet; color
         {colourIds.length ? (
           <div className={styles.heroStyles}>
             {colourIds.map((id) => (
-              <div className={styles.heroHq} key={id}>
+              // Each tile carries its own ground: side by side, a dark-only
+              // style next to three light ones would otherwise show nothing.
+              <div
+                className={`${styles.heroHq} ${set.style_info?.[id]?.ground === "dark" ? styles.heroHqDark : ""}`}
+                key={id}
+              >
                 <Art icon={icon} style={id} color={color} size={64} />
                 <span>{set.style_info?.[id]?.label ?? id}</span>
               </div>