@ojiepermana/angular-theme 22.0.41 → 22.0.44

package/styles/css/base/components.css

@@ -126,4 +126,216 @@
     line-height: var(--nav-badge-line-height, var(--text-sm--line-height));
     font-weight: var(--nav-badge-weight, 500);
   }
+
+  /* Layout `honeycomb` surface — a TRUE tessellated flat-top hexagon grid drawn
+   * as a token-colored mask layer, so it recolors with the active theme/neutral
+   * (light + dark) like the other `<Layout surface>` patterns. Adjacent hexagons
+   * SHARE a single edge (no gaps), and `vector-effect: non-scaling-stroke` pins
+   * every line to a fixed 1px regardless of cell size. The SVG tile is exactly
+   * one lattice period (width 3s × height s√3, s=24px) so `mask-repeat` tiles it
+   * seamlessly; the path is solid-stroke and faintness is owned by
+   * --layout-grid-line-opacity (the dense `grid` tier, since honeycomb is
+   * multi-axis). Tune cell size via --layout-hex-size — keep the √3 (≈1.732)
+   * width:height ratio or the hexagons stretch. Edit the pattern here, not
+   * per-theme. */
+  .layout-surface-honeycomb {
+    position: relative;
+    --layout-hex-size: 43.2px 24.941px;
+    --layout-hex-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='41.569' viewBox='0 0 72 41.569'><path d='M-12 -62.354L-24 -83.138L-48 -83.138L-60 -62.354L-48 -41.569L-24 -41.569ZM-12 -20.785L-24 -41.569L-48 -41.569L-60 -20.785L-48 0L-24 0ZM-12 20.785L-24 0L-48 0L-60 20.785L-48 41.569L-24 41.569ZM-12 62.354L-24 41.569L-48 41.569L-60 62.354L-48 83.138L-24 83.138ZM-12 103.923L-24 83.138L-48 83.138L-60 103.923L-48 124.708L-24 124.708ZM-12 145.492L-24 124.708L-48 124.708L-60 145.492L-48 166.277L-24 166.277ZM24 -83.138L12 -103.923L-12 -103.923L-24 -83.138L-12 -62.354L12 -62.354ZM24 -41.569L12 -62.354L-12 -62.354L-24 -41.569L-12 -20.785L12 -20.785ZM24 0L12 -20.785L-12 -20.785L-24 0L-12 20.785L12 20.785ZM24 41.569L12 20.785L-12 20.785L-24 41.569L-12 62.354L12 62.354ZM24 83.138L12 62.354L-12 62.354L-24 83.138L-12 103.923L12 103.923ZM24 124.708L12 103.923L-12 103.923L-24 124.708L-12 145.492L12 145.492ZM60 -62.354L48 -83.138L24 -83.138L12 -62.354L24 -41.569L48 -41.569ZM60 -20.785L48 -41.569L24 -41.569L12 -20.785L24 0L48 0ZM60 20.785L48 0L24 0L12 20.785L24 41.569L48 41.569ZM60 62.354L48 41.569L24 41.569L12 62.354L24 83.138L48 83.138ZM60 103.923L48 83.138L24 83.138L12 103.923L24 124.708L48 124.708ZM60 145.492L48 124.708L24 124.708L12 145.492L24 166.277L48 166.277ZM96 -83.138L84 -103.923L60 -103.923L48 -83.138L60 -62.354L84 -62.354ZM96 -41.569L84 -62.354L60 -62.354L48 -41.569L60 -20.785L84 -20.785ZM96 0L84 -20.785L60 -20.785L48 0L60 20.785L84 20.785ZM96 41.569L84 20.785L60 20.785L48 41.569L60 62.354L84 62.354ZM96 83.138L84 62.354L60 62.354L48 83.138L60 103.923L84 103.923ZM96 124.708L84 103.923L60 103.923L48 124.708L60 145.492L84 145.492ZM132 -62.354L120 -83.138L96 -83.138L84 -62.354L96 -41.569L120 -41.569ZM132 -20.785L120 -41.569L96 -41.569L84 -20.785L96 0L120 0ZM132 20.785L120 0L96 0L84 20.785L96 41.569L120 41.569ZM132 62.354L120 41.569L96 41.569L84 62.354L96 83.138L120 83.138ZM132 103.923L120 83.138L96 83.138L84 103.923L96 124.708L120 124.708ZM132 145.492L120 124.708L96 124.708L84 145.492L96 166.277L120 166.277Z' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/></svg>");
+  }
+
+  .layout-surface-honeycomb::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    background-color: hsl(var(--layout-grid-line) / var(--layout-grid-line-opacity));
+    -webkit-mask-image: var(--layout-hex-mask);
+    mask-image: var(--layout-hex-mask);
+    -webkit-mask-repeat: repeat;
+    mask-repeat: repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-size: var(--layout-hex-size);
+    mask-size: var(--layout-hex-size);
+  }
+
+  /* Layout `matrix` surface — a scattered field of binary digits (0/1) at
+   * varied sizes with per-glyph opacity baked into the SVG, painted as a mask
+   * layer so it recolors with the active theme like the other `<Layout surface>`
+   * patterns. Unlike the neutral grid surfaces it is tinted with the brand
+   * --primary accent (--layout-matrix-opacity is the global faintness knob, toned
+   * down for dark mode in base/tokens.css), giving a soft "digital" signature
+   * behind content. The SVG tile is one square period (--layout-matrix-size) and
+   * `mask-repeat` tiles it seamlessly; every glyph sits inside the tile so the
+   * seam never cuts a digit. Edit the field here, not per-theme. */
+  .layout-surface-matrix {
+    position: relative;
+    --layout-matrix-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g font-family='monospace' fill='black' text-anchor='middle' dominant-baseline='middle'><text x='14' y='12' font-size='13' fill-opacity='.35'>0</text><text x='43' y='11' font-size='12' fill-opacity='.85'>0</text><text x='59' y='11' font-size='11' fill-opacity='.45'>0</text><text x='80' y='15' font-size='12' fill-opacity='.45'>0</text><text x='110' y='17' font-size='8' fill-opacity='.3'>1</text><text x='137' y='11' font-size='9' fill-opacity='.6'>1</text><text x='150' y='11' font-size='10' fill-opacity='.35'>0</text><text x='179' y='18' font-size='10' fill-opacity='.85'>0</text><text x='203' y='17' font-size='12' fill-opacity='.7'>0</text><text x='226' y='15' font-size='10' fill-opacity='1'>1</text><text x='21' y='37' font-size='10' fill-opacity='.45'>0</text><text x='34' y='37' font-size='11' fill-opacity='.7'>1</text><text x='60' y='45' font-size='9' fill-opacity='.4'>1</text><text x='88' y='35' font-size='11' fill-opacity='.3'>1</text><text x='114' y='34' font-size='12' fill-opacity='.55'>1</text><text x='134' y='40' font-size='12' fill-opacity='.35'>1</text><text x='159' y='44' font-size='11' fill-opacity='.3'>0</text><text x='181' y='37' font-size='12' fill-opacity='.5'>1</text><text x='203' y='44' font-size='10' fill-opacity='.7'>0</text><text x='222' y='40' font-size='11' fill-opacity='.45'>0</text><text x='19' y='58' font-size='10' fill-opacity='.6'>1</text><text x='44' y='62' font-size='9' fill-opacity='.6'>1</text><text x='63' y='67' font-size='11' fill-opacity='.6'>1</text><text x='91' y='64' font-size='11' fill-opacity='.4'>0</text><text x='103' y='58' font-size='13' fill-opacity='.3'>0</text><text x='131' y='63' font-size='10' fill-opacity='.3'>1</text><text x='150' y='63' font-size='12' fill-opacity='.4'>1</text><text x='180' y='62' font-size='12' fill-opacity='.7'>0</text><text x='206' y='66' font-size='13' fill-opacity='.6'>1</text><text x='223' y='57' font-size='13' fill-opacity='.3'>1</text><text x='12' y='91' font-size='11' fill-opacity='.35'>0</text><text x='37' y='80' font-size='8' fill-opacity='.85'>0</text><text x='57' y='84' font-size='8' fill-opacity='.45'>0</text><text x='87' y='81' font-size='10' fill-opacity='1'>1</text><text x='107' y='81' font-size='11' fill-opacity='.7'>1</text><text x='131' y='80' font-size='9' fill-opacity='.5'>1</text><text x='154' y='88' font-size='12' fill-opacity='.45'>0</text><text x='183' y='86' font-size='9' fill-opacity='.85'>0</text><text x='198' y='87' font-size='9' fill-opacity='.85'>1</text><text x='222' y='81' font-size='15' fill-opacity='.85'>0</text><text x='16' y='108' font-size='13' fill-opacity='1'>0</text><text x='43' y='114' font-size='10' fill-opacity='.6'>0</text><text x='65' y='105' font-size='12' fill-opacity='.55'>1</text><text x='88' y='114' font-size='15' fill-opacity='.7'>1</text><text x='106' y='111' font-size='10' fill-opacity='.55'>1</text><text x='137' y='107' font-size='10' fill-opacity='.45'>0</text><text x='154' y='106' font-size='11' fill-opacity='.7'>0</text><text x='183' y='107' font-size='13' fill-opacity='.35'>0</text><text x='206' y='112' font-size='15' fill-opacity='.7'>0</text><text x='229' y='108' font-size='13' fill-opacity='.35'>1</text><text x='20' y='137' font-size='11' fill-opacity='.6'>1</text><text x='42' y='127' font-size='9' fill-opacity='.4'>0</text><text x='57' y='133' font-size='11' fill-opacity='1'>0</text><text x='89' y='137' font-size='13' fill-opacity='.4'>1</text><text x='109' y='127' font-size='8' fill-opacity='.85'>0</text><text x='135' y='127' font-size='10' fill-opacity='.3'>0</text><text x='152' y='129' font-size='10' fill-opacity='.5'>1</text><text x='178' y='136' font-size='8' fill-opacity='.7'>1</text><text x='203' y='135' font-size='12' fill-opacity='.85'>1</text><text x='220' y='127' font-size='12' fill-opacity='.7'>0</text><text x='19' y='156' font-size='15' fill-opacity='.4'>0</text><text x='35' y='156' font-size='9' fill-opacity='.55'>0</text><text x='64' y='155' font-size='11' fill-opacity='.85'>0</text><text x='80' y='151' font-size='8' fill-opacity='.85'>0</text><text x='108' y='149' font-size='9' fill-opacity='.55'>1</text><text x='133' y='155' font-size='12' fill-opacity='.5'>0</text><text x='154' y='155' font-size='11' fill-opacity='.85'>0</text><text x='182' y='160' font-size='10' fill-opacity='.7'>0</text><text x='197' y='150' font-size='11' fill-opacity='.35'>1</text><text x='226' y='154' font-size='10' fill-opacity='.35'>1</text><text x='21' y='174' font-size='14' fill-opacity='.4'>1</text><text x='36' y='173' font-size='11' fill-opacity='.35'>0</text><text x='61' y='178' font-size='13' fill-opacity='.4'>0</text><text x='88' y='184' font-size='11' fill-opacity='.6'>1</text><text x='105' y='176' font-size='14' fill-opacity='.3'>1</text><text x='130' y='177' font-size='14' fill-opacity='.6'>0</text><text x='153' y='179' font-size='12' fill-opacity='.35'>0</text><text x='184' y='181' font-size='9' fill-opacity='.5'>0</text><text x='198' y='183' font-size='9' fill-opacity='.4'>1</text><text x='228' y='182' font-size='13' fill-opacity='.6'>1</text><text x='12' y='206' font-size='12' fill-opacity='.55'>1</text><text x='34' y='196' font-size='14' fill-opacity='.6'>0</text><text x='67' y='198' font-size='8' fill-opacity='.5'>0</text><text x='80' y='205' font-size='9' fill-opacity='.35'>1</text><text x='108' y='199' font-size='12' fill-opacity='.5'>1</text><text x='133' y='195' font-size='14' fill-opacity='.35'>0</text><text x='160' y='198' font-size='9' fill-opacity='.5'>0</text><text x='179' y='201' font-size='10' fill-opacity='.7'>1</text><text x='201' y='197' font-size='10' fill-opacity='.5'>0</text><text x='218' y='195' font-size='12' fill-opacity='.85'>0</text><text x='16' y='229' font-size='9' fill-opacity='.7'>1</text><text x='40' y='229' font-size='12' fill-opacity='.45'>1</text><text x='68' y='222' font-size='14' fill-opacity='.6'>0</text><text x='91' y='230' font-size='9' fill-opacity='.35'>0</text><text x='110' y='229' font-size='11' fill-opacity='.3'>0</text><text x='127' y='228' font-size='12' fill-opacity='1'>1</text><text x='152' y='222' font-size='11' fill-opacity='.4'>0</text><text x='175' y='218' font-size='10' fill-opacity='.85'>1</text><text x='199' y='218' font-size='10' fill-opacity='.55'>0</text><text x='220' y='222' font-size='9' fill-opacity='.5'>1</text></g></svg>");
+    /* Glow layer mask — ~10% of the digits (10 of 100), placed only in the tile's
+     * EDGE bands (never the center). Each is drawn twice through a `feGaussianBlur`
+     * filter (soft bloom halo) plus once sharp (lit core); painted brighter than the
+     * field via --layout-matrix-glow-opacity on `::after`. Static — no animation. */
+    --layout-matrix-glow-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><defs><filter id='g' x='-80%' y='-80%' width='260%' height='260%'><feGaussianBlur stdDeviation='2.2'/></filter></defs><g font-family='monospace' fill='black' text-anchor='middle' dominant-baseline='middle'><g filter='url(%23g)'><text x='43' y='11' font-size='12' fill-opacity='1'>0</text><text x='203' y='17' font-size='12' fill-opacity='1'>0</text><text x='12' y='91' font-size='11' fill-opacity='1'>0</text><text x='12' y='206' font-size='12' fill-opacity='1'>1</text><text x='226' y='154' font-size='10' fill-opacity='1'>1</text><text x='229' y='108' font-size='13' fill-opacity='1'>1</text><text x='40' y='229' font-size='12' fill-opacity='1'>1</text><text x='175' y='218' font-size='10' fill-opacity='1'>1</text><text x='179' y='18' font-size='10' fill-opacity='1'>0</text><text x='16' y='108' font-size='13' fill-opacity='1'>0</text></g><g filter='url(%23g)'><text x='43' y='11' font-size='12' fill-opacity='1'>0</text><text x='203' y='17' font-size='12' fill-opacity='1'>0</text><text x='12' y='91' font-size='11' fill-opacity='1'>0</text><text x='12' y='206' font-size='12' fill-opacity='1'>1</text><text x='226' y='154' font-size='10' fill-opacity='1'>1</text><text x='229' y='108' font-size='13' fill-opacity='1'>1</text><text x='40' y='229' font-size='12' fill-opacity='1'>1</text><text x='175' y='218' font-size='10' fill-opacity='1'>1</text><text x='179' y='18' font-size='10' fill-opacity='1'>0</text><text x='16' y='108' font-size='13' fill-opacity='1'>0</text></g><g><text x='43' y='11' font-size='12' fill-opacity='1'>0</text><text x='203' y='17' font-size='12' fill-opacity='1'>0</text><text x='12' y='91' font-size='11' fill-opacity='1'>0</text><text x='12' y='206' font-size='12' fill-opacity='1'>1</text><text x='226' y='154' font-size='10' fill-opacity='1'>1</text><text x='229' y='108' font-size='13' fill-opacity='1'>1</text><text x='40' y='229' font-size='12' fill-opacity='1'>1</text><text x='175' y='218' font-size='10' fill-opacity='1'>1</text><text x='179' y='18' font-size='10' fill-opacity='1'>0</text><text x='16' y='108' font-size='13' fill-opacity='1'>0</text></g></g></svg>");
+  }
+
+  .layout-surface-matrix::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    background-color: hsl(var(--primary) / var(--layout-matrix-opacity));
+    -webkit-mask-image: var(--layout-matrix-mask);
+    mask-image: var(--layout-matrix-mask);
+    -webkit-mask-repeat: repeat;
+    mask-repeat: repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-size: var(--layout-matrix-size);
+    mask-size: var(--layout-matrix-size);
+  }
+
+  /* Sparse edge-glow accents: the glow glyph mask (repeating) intersected with a
+   * radial edge-vignette so the lit digits appear only toward the layout edges
+   * and fade out behind centered content (`hindari di tengah`). `intersect`
+   * (std) / `source-in` (-webkit-) keep both masks ANDed. */
+  .layout-surface-matrix::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    background-color: hsl(var(--primary) / var(--layout-matrix-glow-opacity));
+    -webkit-mask-image: var(--layout-matrix-glow-mask),
+      radial-gradient(ellipse 78% 78% at center, transparent 36%, #000 80%);
+    mask-image: var(--layout-matrix-glow-mask),
+      radial-gradient(ellipse 78% 78% at center, transparent 36%, #000 80%);
+    -webkit-mask-repeat: repeat, no-repeat;
+    mask-repeat: repeat, no-repeat;
+    -webkit-mask-position: center, center;
+    mask-position: center, center;
+    -webkit-mask-size: var(--layout-matrix-size), 100% 100%;
+    mask-size: var(--layout-matrix-size), 100% 100%;
+    -webkit-mask-composite: source-in;
+    mask-composite: intersect;
+  }
+
+  /* Layout `grid-line` surface — a dark mosaic of 2rem square cells; a richer
+   * cousin of `grid`. A faint uniform grid with scattered BRIGHT highlight
+   * squares + L-corners and a few subtly-lit cells, all painted as ONE
+   * token-colored mask layer (same mechanism as `.layout-surface-honeycomb` /
+   * `.layout-surface-matrix`). EVERYTHING lives in the single mask — base
+   * grid, glows, and cell fills — so the layers stay pixel-aligned. The glow
+   * FOLLOWS THE ACCENT: the ::before paints with the accent hue+saturation (from
+   * --accent-foreground) but pins lightness to --layout-grid-highlight-l, so the
+   * surface tracks the active theme-color while its brightness stays put (in the
+   * base/neutral theme the accent is achromatic → the same grayscale as before).
+   * --layout-grid-highlight-opacity is the global faintness knob. Every fill /
+   * stroke is white (%23fff) and serves only as an ALPHA mask: low alpha = faint
+   * grid/cell, high alpha = bright glow. `vector-effect: non-scaling-stroke`
+   * pins every line to a fixed 1px regardless of cell size.
+   *
+   * The tile is 6x6 cells (viewBox 0 0 192 192 = 32 units/cell) so mask-size is
+   * 9.96rem (one cell ≈ 1.66rem — 17% smaller than the 2rem `grid` family size;
+   * tune via --layout-grid-line-size). SEAMLESS: the grid is drawn
+   * at 0..192 on BOTH edges. A 1px non-scaling stroke centered on a tile edge has
+   * its outer half clipped by the SVG viewBox, so under `mask-repeat: repeat` each
+   * seam gets one half-stroke from the tile on each side ([191.5,192] + [192,192.5])
+   * which combine into a single full 1px line — an even grid with no doubling and
+   * no thinned seam. Every highlight/fill stays in the interior (>=32, <=160) so
+   * no glow is ever clipped at a tile edge. Edit the pattern here, not per-theme. */
+  .layout-surface-grid-line {
+    position: relative;
+    --layout-grid-line-size: 9.96rem 9.96rem;
+    --layout-grid-line-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'><path d='M0 0V192M32 0V192M64 0V192M96 0V192M128 0V192M160 0V192M192 0V192M0 0H192M0 32H192M0 64H192M0 96H192M0 128H192M0 160H192M0 192H192' fill='none' stroke='%23fff' stroke-width='1' stroke-opacity='0.25' vector-effect='non-scaling-stroke'/><g fill='%23fff'><rect x='66' y='34' width='28' height='28' fill-opacity='0.1'/><rect x='130' y='34' width='28' height='28' fill-opacity='0.06'/><rect x='34' y='66' width='28' height='28' fill-opacity='0.12'/><rect x='98' y='66' width='28' height='28' fill-opacity='0.07'/><rect x='66' y='98' width='28' height='28' fill-opacity='0.09'/><rect x='130' y='98' width='28' height='28' fill-opacity='0.05'/><rect x='34' y='130' width='28' height='28' fill-opacity='0.11'/><rect x='98' y='130' width='28' height='28' fill-opacity='0.06'/></g><g fill='none' stroke='%23fff' stroke-width='1' vector-effect='non-scaling-stroke'><rect x='32' y='32' width='32' height='32' stroke-opacity='0.85'/><rect x='128' y='64' width='32' height='32' stroke-opacity='0.8'/><rect x='32' y='96' width='32' height='32' stroke-opacity='0.9'/><rect x='128' y='128' width='32' height='32' stroke-opacity='0.82'/><path d='M128 32L96 32L96 64' stroke-opacity='0.7'/><path d='M64 96L96 96L96 64' stroke-opacity='0.75'/><path d='M96 96L128 96L128 128' stroke-opacity='0.72'/><path d='M64 128L64 160L96 160' stroke-opacity='0.68'/></g></svg>");
+  }
+
+  .layout-surface-grid-line::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    /* Accent-tinted glow: take the accent hue+saturation (from --accent-foreground)
+     * but PIN the lightness to --layout-grid-highlight-l, so the surface follows
+     * the active theme-color while its brightness stays exactly as before. In the
+     * base/neutral theme the accent is achromatic, so it resolves to the same
+     * grayscale. The first declaration is a grayscale fallback for browsers without
+     * CSS relative color; the second tints it where supported. */
+    background-color: hsl(0 0% var(--layout-grid-highlight-l) / var(--layout-grid-highlight-opacity));
+    background-color: hsl(
+      from hsl(var(--accent-foreground)) h s var(--layout-grid-highlight-l) /
+        var(--layout-grid-highlight-opacity)
+    );
+    -webkit-mask-image: var(--layout-grid-line-mask);
+    mask-image: var(--layout-grid-line-mask);
+    -webkit-mask-repeat: repeat;
+    mask-repeat: repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-size: var(--layout-grid-line-size);
+    mask-size: var(--layout-grid-line-size);
+  }
+
+  /* Layout `circuit` surface — a tileable PCB / circuit-board texture: routed
+   * copper traces with 45° chamfered bends, via nodes, and concentric ring pads,
+   * echoing a printed circuit board. Built as the same kind of token-colored mask
+   * layer as `.layout-surface-honeycomb` / `.layout-surface-matrix`, but with TWO
+   * stacked layers because a mask only carries ALPHA (one color per layer):
+   *   ::before — the neutral copper TRACES, painted in --layout-grid-line (the
+   *              same neutral the grid family uses, so the board recolors per
+   *              theme + dark mode). Faintness = --layout-circuit-opacity × the
+   *              per-trace alpha baked into the SVG (ghost 0.22 · trace 0.55-0.6 ·
+   *              trunk 0.9), giving the copper-weight variation of a real board.
+   *   ::after  — the via NODES + concentric pads, painted in the brand --primary
+   *              accent (like `matrix`) so the connection points GLOW with the
+   *              theme while the traces stay grayscale. Faintness =
+   *              --layout-circuit-node-opacity (toned down for dark mode in
+   *              base/tokens.css, since --primary inverts to near-white and blooms).
+   * Both layers share ONE tile geometry (--layout-circuit-size) and `mask-position:
+   * center`, so traces and nodes stay pixel-aligned. `vector-effect:
+   * non-scaling-stroke` pins every line to its authored px width at any scale.
+   *
+   * SEAMLESS BY CONSTRUCTION (240x240 tile): every horizontal bus enters at x=0
+   * and exits at x=240 at the SAME y (wraps left/right) and every vertical bus
+   * enters at y=0 / exits at y=240 at the SAME x (wraps top/bottom); the long
+   * buses bridge each seam so the board reads continuous. All interior branches,
+   * vias, and rings stay inside an 18px edge keep-out, so tiling never clips a
+   * node. Edit the board in scratchpad/circuit-gen.mjs (the parametric generator
+   * with a built-in seam check), not by hand. */
+  .layout-surface-circuit {
+    position: relative;
+    --layout-circuit-size: 240px;
+    --layout-circuit-traces: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><path d='M20 70L38 70L48.24 65.76L56 58' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.22' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M210 150L210 172L205.76 182.24L196 192' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.22' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M28 150L28 176' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.22' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M212 40L224 40' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.22' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M0 40L54 40L64.24 35.76L75.76 24.24L86 20L114 20L124.24 24.24L135.76 35.76L146 40L240 40' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.6' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M0 120L34 120L44.24 115.76L55.76 104.24L66 100L94 100L104.24 104.24L115.76 115.76L126 120L154 120L164.24 124.24L175.76 135.76L186 140L194 140L204.24 135.76L215.76 124.24L226 120L240 120' fill='none' stroke='%23000' stroke-width='1.5' stroke-opacity='0.9' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M0 200L94 200L104.24 204.24L115.76 215.76L126 220L154 220L164.24 215.76L175.76 204.24L186 200L240 200' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.6' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M60 0L60 54L64.24 64.24L75.76 75.76L80 86L80 154L75.76 164.24L64.24 175.76L60 186L60 240' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.55' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M180 0L180 64L175.76 74.24L164.24 85.76L160 96L160 144L164.24 154.24L175.76 165.76L180 176L180 240' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.55' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M100 100L100 64' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.4' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M160 120L194 120L200 114L200 84' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.4' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M80 120L80 96' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.4' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M140 200L140 164' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.4' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
+    --layout-circuit-nodes: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><circle cx='60' cy='40' r='3' fill='%23000' fill-opacity='0.85'/><circle cx='140' cy='40' r='3' fill='%23000' fill-opacity='0.85'/><circle cx='100' cy='200' r='3' fill='%23000' fill-opacity='0.85'/><circle cx='180' cy='200' r='3' fill='%23000' fill-opacity='0.85'/><circle cx='60' cy='100' r='3' fill='%23000' fill-opacity='0.85'/><circle cx='120' cy='120' r='3.2' fill='%23000' fill-opacity='0.85'/><circle cx='180' cy='140' r='3' fill='%23000' fill-opacity='0.85'/><circle cx='80' cy='80' r='3' fill='%23000' fill-opacity='0.85'/><circle cx='80' cy='160' r='3' fill='%23000' fill-opacity='0.85'/><circle cx='160' cy='90' r='3' fill='%23000' fill-opacity='0.85'/><circle cx='160' cy='150' r='3' fill='%23000' fill-opacity='0.85'/><circle cx='100' cy='100' r='2.6' fill='%23000' fill-opacity='0.85'/><circle cx='200' cy='120' r='2.6' fill='%23000' fill-opacity='0.85'/><circle cx='140' cy='200' r='2.6' fill='%23000' fill-opacity='0.85'/><circle cx='100' cy='60' r='6' fill='none' stroke='%23000' stroke-width='1.2' stroke-opacity='0.7' vector-effect='non-scaling-stroke'/><circle cx='100' cy='60' r='2' fill='%23000' fill-opacity='0.85'/><circle cx='200' cy='80' r='6' fill='none' stroke='%23000' stroke-width='1.2' stroke-opacity='0.7' vector-effect='non-scaling-stroke'/><circle cx='200' cy='80' r='2' fill='%23000' fill-opacity='0.85'/><circle cx='140' cy='160' r='6' fill='none' stroke='%23000' stroke-width='1.2' stroke-opacity='0.7' vector-effect='non-scaling-stroke'/><circle cx='140' cy='160' r='2' fill='%23000' fill-opacity='0.85'/><circle cx='40' cy='160' r='4.5' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.55' vector-effect='non-scaling-stroke'/><circle cx='215' cy='40' r='4' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.55' vector-effect='non-scaling-stroke'/><circle cx='25' cy='200' r='4' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.55' vector-effect='non-scaling-stroke'/></svg>");
+  }
+
+  .layout-surface-circuit::before,
+  .layout-surface-circuit::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    -webkit-mask-repeat: repeat;
+    mask-repeat: repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-size: var(--layout-circuit-size);
+    mask-size: var(--layout-circuit-size);
+  }
+
+  .layout-surface-circuit::before {
+    background-color: hsl(var(--layout-grid-line) / var(--layout-circuit-opacity));
+    -webkit-mask-image: var(--layout-circuit-traces);
+    mask-image: var(--layout-circuit-traces);
+  }
+
+  .layout-surface-circuit::after {
+    background-color: hsl(var(--primary) / var(--layout-circuit-node-opacity));
+    -webkit-mask-image: var(--layout-circuit-nodes);
+    mask-image: var(--layout-circuit-nodes);
+  }
 }

package/styles/css/base/theme.css

@@ -160,9 +160,82 @@
     /* --layout-grid-line is defined per-mode in base/tokens.css and per-neutral
      * by the generated theme-neutral CSS, so the surface grid keeps constant
      * contrast across every neutral — not just base. Opacity is the global
-     * subtlety knob shared by all grid surfaces (grid / honeycome / line-*). */
-    --layout-grid-line-opacity: 0.18;
-    --layout-grid-dot-opacity: 0.22;
+     * visibility knob shared by all grid surfaces:
+     *   --layout-grid-line-opacity → the `grid` + `honeycomb` surfaces
+     *                                (multi-axis patterns)
+     *   --layout-grid-dot-opacity  → `line-vertical` / `line-horizontal`
+     *                                (single-axis rules)
+     * The multi-axis patterns are denser so they sit a step below the
+     * single-axis lines. Raised from 0.18/0.22 so the pattern actually reads
+     * on-screen against the ~16-point line/background lightness gap. */
+    --layout-grid-line-opacity: 0.4;
+    --layout-grid-dot-opacity: 0.5;
+
+    /* `grid` surface line color. DEFAULT (fallback) = the neutral --layout-grid-line
+     * at --layout-grid-line-opacity (unchanged behavior). Where CSS relative color
+     * is supported it's overridden below to FOLLOW THE ACCENT: accent hue+saturation
+     * (from --accent-foreground) at the grid's own lightness (82% light / 24% dark,
+     * pinned so brightness stays put — grayscale in the base theme, tinted under a
+     * color theme). Only the `grid` surface uses this; honeycomb/line-* stay neutral. */
+    --layout-grid-color: hsl(var(--layout-grid-line) / var(--layout-grid-line-opacity));
+
+    /* `grid-line` surface — global faintness of its accent-tinted glow (accent hue
+     * from --accent-foreground at lightness --layout-grid-highlight-l, composed in
+     * base/components.css). Per-element alpha (faint base grid, faint cell fills,
+     * bright glow squares) is baked into the SVG mask, so this multiplies it: lower
+     * for a quieter surface, raise for a more assertive glow. */
+    --layout-grid-highlight-opacity: 0.55;
+
+    /* `grid-line` frame border opacity. The square layout frame borders with the
+     * accent color (--accent-foreground — the STRONG member of the accent family,
+     * so it follows the active theme-color and inverts dark-on-light / light-on-
+     * dark). Now that the SURFACE also tints with the accent, the border was too
+     * strong — toned down to 0.484, but kept ABOVE the surface's strongest line
+     * (≈ --layout-grid-highlight-opacity 0.55 × the brightest baked stroke 0.9 ≈
+     * 0.5) so the layout edge still reads as the strongest line. */
+    --layout-grid-line-border-opacity: 0.484;
+
+    /* border-rail appearance — color, opacity, and THICKNESS of the layout's rail
+     * lines AND its frame border (all read these). Color/opacity follow the ACCENT
+     * (--accent-foreground) globally, so every border-rail layout picks up the
+     * active theme-color and reads bright, not the soft neutral --border.
+     * --accent-foreground inverts dark-on-light / light-on-dark automatically.
+     * --layout-rail-width is the single thickness knob for the layout rails. */
+    --layout-rail-color: var(--accent-foreground);
+    --layout-rail-opacity: 0.9;
+    --layout-rail-width: 1.21px;
+
+    /* `matrix` surface — a scattered binary (0/1) field tinted with the brand
+     * --primary accent (not the neutral --layout-grid-line), so it reads as a soft
+     * "digital" signature that recolors with the active theme. Two knobs:
+     *   --layout-matrix-opacity → global faintness of the field. Per-glyph opacity
+     *                             is baked into the SVG mask, so this multiplies it;
+     *                             toned down for dark mode in base/tokens.css so the
+     *                             inverted (near-white) accent never shouts.
+     *   --layout-matrix-size    → the SVG tile period (square). Larger = sparser.
+     *   --layout-matrix-glow-opacity → brightness of the sparse edge-glow accents
+     *                             (the `::after` lit digits). Sits ABOVE the field
+     *                             opacity so the ~10% lit digits read as a glow;
+     *                             raised in dark mode (base/tokens.css) so the
+     *                             inverted accent actually blooms. */
+    --layout-matrix-opacity: 0.26;
+    --layout-matrix-size: 240px;
+
+    /* `circuit` surface — a tileable PCB / circuit-board texture drawn as two
+     * mask layers (base/components.css). Two faintness knobs, one per layer:
+     *   --layout-circuit-opacity      → the neutral copper TRACES (--layout-grid-line).
+     *                                   Per-trace alpha (ghost/trace/trunk) is baked
+     *                                   into the SVG, so this multiplies it. Sits in
+     *                                   the dense multi-axis tier (like `honeycomb`),
+     *                                   so it matches --layout-grid-line-opacity.
+     *   --layout-circuit-node-opacity → the accent via NODES / pads (--primary).
+     *                                   Toned down for dark mode in base/tokens.css
+     *                                   (the inverted near-white accent blooms). Kept
+     *                                   a touch above the trace tier so the sparse
+     *                                   nodes read as quiet glints, not noise. */
+    --layout-circuit-opacity: 0.4;
+    --layout-circuit-node-opacity: 0.5;
+    --layout-matrix-glow-opacity: 0.55;
 
     --overlay-backdrop: 0 0% 3.9% / 0.5;
     --overlay-backdrop-strong: 0 0% 3.9% / 0.4;
@@ -187,6 +260,21 @@
     --theme-shadow-xl: var(--shadow-xl-base);
   }
 
+  /* `grid` surface accent tint — applied only where CSS relative color is
+   * supported (otherwise the neutral fallback set on :root above stands). Follows
+   * the accent hue+saturation (from --accent-foreground) at the grid's own
+   * lightness (--layout-grid-l, per-mode), so brightness is unchanged while the
+   * tint tracks the theme-color. --layout-grid-l is per-mode, so this single rule
+   * covers light + dark. */
+  @supports (color: hsl(from white h s l)) {
+    :root {
+      --layout-grid-color: hsl(
+        from hsl(var(--accent-foreground)) h s var(--layout-grid-l) /
+          var(--layout-grid-line-opacity)
+      );
+    }
+  }
+
   :root,
   [data-mode='light'] {
     color-scheme: light;

package/styles/css/base/tokens.css

@@ -28,6 +28,19 @@
      * grid keeps the same ~16-point lightness gap vs --background that every
      * generated neutral targets — base is no longer a special case. */
     --layout-grid-line: 0 0% 82%;
+    /* LIGHTNESS of the `grid` surface lines — used to pin lightness when the grid
+     * follows the accent (see --layout-grid-color in base/theme.css), so the tint
+     * tracks the theme-color while brightness stays at the current ~82% (light). */
+    --layout-grid-l: 82%;
+
+    /* `grid-line` surface highlight LIGHTNESS. The glow now FOLLOWS the accent:
+     * the surface paints with the accent hue+saturation (from --accent-foreground,
+     * via CSS relative color in base/components.css) but pins lightness to this
+     * value, so the brightness stays exactly as before while the tint tracks the
+     * active theme-color. Medium-dark in light mode so the mosaic reads as soft
+     * darker lines on a light surface; inverts to near-white in dark (dark block).
+     * Global faintness lives in --layout-grid-highlight-opacity (base/theme.css). */
+    --layout-grid-highlight-l: 45%;
 
     /* Base accent = near-black neutral (FluxUI "base"); inverts to near-white in
      * dark mode (see :root[data-mode='dark'] below). Accent palettes
@@ -85,21 +98,28 @@
     --line-height-base: 1.5;
     --control-height-base: 2.25rem;
     --nav-font-family: var(--font-sans);
-    --nav-text-size: calc(var(--text-base) - 0.125rem);
-    --nav-text-line-height: var(--text-base--line-height);
+    /* Item labels — the nav baseline tier (14px, snug line-height). */
+    --nav-text-size: var(--text-sm);
+    --nav-text-line-height: var(--text-sm--line-height);
     --nav-heading-font-family: var(--font-sans);
-    --nav-heading-size: var(--text-sm);
-    --nav-heading-line-height: var(--text-sm--line-height);
+    /* Section/group headings — a distinct micro-label tier *below* item labels:
+     * smaller (11px), uppercase, heavier weight, restrained tracking. Keeping it
+     * smaller than --nav-text-size is what gives the sidebar a clear hierarchy. */
+    --nav-heading-size: var(--text-2xs-plus);
+    --nav-heading-line-height: var(--text-2xs-plus--line-height);
     --nav-heading-weight: 600;
-    --nav-heading-letter-spacing: 0.12em;
+    --nav-heading-letter-spacing: 0.08em;
     --nav-badge-font-family: var(--font-sans);
-    --nav-badge-size: var(--text-sm);
-    --nav-badge-line-height: var(--text-sm--line-height);
+    /* Badges/counters — compact pill tier (11px), aligned with the heading tier. */
+    --nav-badge-size: var(--text-2xs-plus);
+    --nav-badge-line-height: var(--text-2xs-plus--line-height);
     --nav-badge-weight: 500;
     --letter-spacing: 0;
     --spacing-base: 0.25rem;
     --space-unit: var(--spacing-base);
-    --layout-topbar-height: 3.25rem;
+    /* Matches the actual shell bar height (h-12 = 3rem) used by the navigation
+     * header/footer/navbar and page header/footer. */
+    --layout-topbar-height: 3rem;
 
     --layout-shell-padding: clamp(1rem, 2vw, 2rem);
     --layout-frame-radius: var(--radius-lg);
@@ -138,6 +158,28 @@
 
     /* Surface-grid line for the base neutral (dark). See light block. */
     --layout-grid-line: 0 0% 24%;
+    /* `grid` surface line lightness (dark) — see light block. */
+    --layout-grid-l: 24%;
+
+    /* `grid-line` highlight lightness inverts to near-white so the glow squares
+     * read bright on the dark surface, matching the dark mosaic reference; the
+     * accent hue is mixed in via relative color (see light block). */
+    --layout-grid-highlight-l: 88%;
+
+    /* `matrix` is tinted with --primary, which inverts to near-white on dark
+     * — so tone the field down here to keep it as faint behind content as it is in
+     * light mode (see --layout-matrix-opacity in base/theme.css). The edge-glow
+     * accents are raised instead: near-white on near-black actually blooms, so the
+     * lit digits read as a glow against the dark surface. */
+    --layout-matrix-opacity: 0.19;
+    --layout-matrix-glow-opacity: 0.7;
+
+    /* `circuit` via nodes are tinted with --primary, which inverts to near-white
+     * on dark and blooms — so tone the node layer down here to keep the glints as
+     * quiet as they are in light mode (same treatment as --layout-matrix-opacity).
+     * The neutral traces use --layout-grid-line (already per-mode), so they need
+     * no dark override. */
+    --layout-circuit-node-opacity: 0.4;
 
     /* Base accent inverts: near-white primary on dark. */
     --primary: 0 0% 98%;

package/styles/css/space/index.css

@@ -9,16 +9,19 @@
  * html[theme-space='x'] (0,1,1) beats the :root default (0,1,0).
  */
 @layer tokens {
+  /* Even ~16% steps around the 0.25rem baseline so each preset is a perceptible,
+   * proportional change rather than an uneven nudge. normal stays the Tailwind
+   * default (no-op). */
   html[theme-space='compact'] {
-    --spacing-base: 0.2rem;
+    --spacing-base: 0.215rem;
   }
   html[theme-space='normal'] {
     --spacing-base: 0.25rem;
   }
   html[theme-space='relaxed'] {
-    --spacing-base: 0.28rem;
+    --spacing-base: 0.29rem;
   }
   html[theme-space='spacious'] {
-    --spacing-base: 0.32rem;
+    --spacing-base: 0.33rem;
   }
 }

package/types/ojiepermana-angular-theme-layout-services.d.ts

@@ -11,7 +11,7 @@ declare class LayoutService {
     private readonly typeState;
     private readonly appearanceState;
     private readonly widthState;
-    readonly surface: _angular_core.Signal<"flat" | "grid" | "honeycome" | "line-vertical" | "line-horizontal">;
+    readonly surface: _angular_core.Signal<"flat" | "grid" | "grid-line" | "honeycomb" | "matrix" | "circuit" | "line-vertical" | "line-horizontal">;
     readonly type: _angular_core.Signal<"vertical" | "horizontal" | "empty" | "fluid">;
     readonly appearance: _angular_core.Signal<"flat" | "border-rail">;
     readonly width: _angular_core.Signal<"fluid" | "full" | "wide" | "container">;

package/types/ojiepermana-angular-theme-layout-types.d.ts

@@ -1,7 +1,7 @@
 import { Signal } from '@angular/core';
 
 declare const LAYOUT_TYPES: readonly ["vertical", "horizontal", "empty", "fluid"];
-declare const LAYOUT_SURFACES: readonly ["flat", "grid", "honeycome", "line-vertical", "line-horizontal"];
+declare const LAYOUT_SURFACES: readonly ["flat", "grid", "grid-line", "honeycomb", "matrix", "circuit", "line-vertical", "line-horizontal"];
 declare const LAYOUT_APPEARANCES: readonly ["flat", "border-rail"];
 declare const LAYOUT_WIDTHS: readonly ["full", "wide", "container", "fluid"];
 type LayoutType = (typeof LAYOUT_TYPES)[number];

package/types/ojiepermana-angular-theme-layout-wrapper.d.ts

@@ -178,7 +178,7 @@ type NavKind = NavigationType | 'brand';
  */
 declare class LayoutWrapperDefault {
     /** Surface latar shell (mis. `grid`, `flat`). */
-    readonly surface: _angular_core.InputSignal<"flat" | "grid" | "honeycome" | "line-vertical" | "line-horizontal">;
+    readonly surface: _angular_core.InputSignal<"flat" | "grid" | "grid-line" | "honeycomb" | "matrix" | "circuit" | "line-vertical" | "line-horizontal">;
     /** Appearance shell & nav (`flat | border-rail`). */
     readonly appearance: _angular_core.InputSignal<"flat" | "border-rail">;
     /** Lebar frame (`full`, `container`, dst.). */

package/types/ojiepermana-angular-theme-layout.d.ts

@@ -6,7 +6,7 @@ export { LAYOUT_APPEARANCES, LAYOUT_APPEARANCE_STORAGE_KEY, LAYOUT_DEFAULT_APPEA
 
 declare class LayoutComponent {
     protected readonly layout: LayoutService;
-    readonly surface: _angular_core.InputSignal<"flat" | "grid" | "honeycome" | "line-vertical" | "line-horizontal" | null>;
+    readonly surface: _angular_core.InputSignal<"flat" | "grid" | "grid-line" | "honeycomb" | "matrix" | "circuit" | "line-vertical" | "line-horizontal" | null>;
     readonly appearance: _angular_core.InputSignal<"flat" | "border-rail" | null>;
     readonly layoutAppearanceAttribute: _angular_core.InputSignal<"flat" | "border-rail" | null>;
     readonly width: _angular_core.InputSignal<"full" | "wide" | "container" | "fluid" | null>;
@@ -17,13 +17,14 @@ declare class LayoutComponent {
     readonly type: _angular_core.InputSignal<"fluid" | "vertical" | "horizontal" | "empty" | null>;
     readonly class: _angular_core.InputSignal<string>;
     protected readonly appearanceInput: _angular_core.Signal<"flat" | "border-rail" | null>;
-    protected readonly resolvedSurface: _angular_core.Signal<"flat" | "grid" | "honeycome" | "line-vertical" | "line-horizontal">;
+    protected readonly resolvedSurface: _angular_core.Signal<"flat" | "grid" | "grid-line" | "honeycomb" | "matrix" | "circuit" | "line-vertical" | "line-horizontal">;
     protected readonly resolvedAppearance: _angular_core.Signal<"flat" | "border-rail">;
     protected readonly resolvedWidth: _angular_core.Signal<"full" | "wide" | "container" | "fluid">;
     protected readonly resolvedType: _angular_core.Signal<"fluid" | "vertical" | "horizontal" | "empty">;
     protected readonly isBorderRail: _angular_core.Signal<boolean>;
     protected readonly isFluidFrame: _angular_core.Signal<boolean>;
     protected readonly isFullFlat: _angular_core.Signal<boolean>;
+    protected readonly isGridLineSurface: _angular_core.Signal<boolean>;
     protected readonly showsInsetRails: _angular_core.Signal<boolean>;
     protected readonly frameStageClasses: _angular_core.Signal<string>;
     protected readonly railAnchorClasses: _angular_core.Signal<string>;