npm - @ojiepermana/angular-theme - Versions diffs - 22.0.41 → 22.0.43 - Mend

@ojiepermana/angular-theme 22.0.41 → 22.0.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/fesm2022/ojiepermana-angular-theme-layout-types.mjs +10 -1
package/fesm2022/ojiepermana-angular-theme-layout.mjs +112 -52
package/layout/README.md +20 -17
package/package.json +3 -3
package/styles/css/base/components.css +212 -0
package/styles/css/base/theme.css +91 -3
package/styles/css/base/tokens.css +50 -8
package/styles/css/space/index.css +6 -3
package/types/ojiepermana-angular-theme-layout-services.d.ts +1 -1
package/types/ojiepermana-angular-theme-layout-types.d.ts +1 -1
package/types/ojiepermana-angular-theme-layout-wrapper.d.ts +1 -1
package/types/ojiepermana-angular-theme-layout.d.ts +3 -2

package/fesm2022/ojiepermana-angular-theme-layout-types.mjs CHANGED Viewed

@@ -1,5 +1,14 @@
 const LAYOUT_TYPES = ['vertical', 'horizontal', 'empty', 'fluid'];
-const LAYOUT_SURFACES = ['flat', 'grid', 'honeycome', 'line-vertical', 'line-horizontal'];
+const LAYOUT_SURFACES = [
+    'flat',
+    'grid',
+    'grid-line',
+    'honeycomb',
+    'matrix',
+    'circuit',
+    'line-vertical',
+    'line-horizontal',
+];
 const LAYOUT_APPEARANCES = ['flat', 'border-rail'];
 const LAYOUT_WIDTHS = ['full', 'wide', 'container', 'fluid'];
 const LAYOUT_DEFAULT_SURFACE = 'flat';

package/fesm2022/ojiepermana-angular-theme-layout.mjs CHANGED Viewed

@@ -118,6 +118,11 @@ class LayoutComponent {
     ...(ngDevMode ? [{ debugName: "isFluidFrame" }] : /* istanbul ignore next */ []));
     isFullFlat = computed(() => this.resolvedWidth() === 'full' && !this.isBorderRail(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isFullFlat" }] : /* istanbul ignore next */ []));
+    // The `grid-line` surface forces square frame corners (like `border-rail`) so
+    // the mosaic grid runs cleanly to the edges instead of being clipped by the
+    // theme-radius curve.
+    isGridLineSurface = computed(() => this.resolvedSurface() === 'grid-line', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isGridLineSurface" }] : /* istanbul ignore next */ []));
     showsInsetRails = computed(() => {
         const layoutType = this.resolvedType();
         return this.isBorderRail() && (layoutType === 'horizontal' || layoutType === 'vertical');
@@ -131,15 +136,35 @@ class LayoutComponent {
     ...(ngDevMode ? [{ debugName: "contentShellClasses" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => cn('relative isolate h-dvh w-full min-w-0 box-border overflow-hidden text-foreground', this.isFluidFrame() ? 'grid place-items-center' : 'block', this.surfaceClasses(), this.widthPaddingClasses(), this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    frameClasses = computed(() => cn('relative min-h-0 min-w-0 border-border bg-background/55 backdrop-blur-xs', this.frameSizeClasses(),
-    // flat: the outer frame rounds with the active theme-radius
-    // (--layout-frame-radius → --radius-lg → --radius-base). border-rail keeps
-    // square corners for its grid-rail aesthetic.
-    this.isBorderRail()
-        ? 'overflow-visible border-[1.5px]'
-        : this.isFullFlat()
-            ? 'overflow-hidden'
-            : 'overflow-hidden border rounded-[var(--layout-frame-radius)]'), /* @ts-ignore */
+    frameClasses = computed(() => {
+        const gridLine = this.isGridLineSurface();
+        return cn('relative min-h-0 min-w-0 bg-background/55 backdrop-blur-xs', this.frameSizeClasses(),
+        // Frame border color:
+        // • border-rail → the rail color var (--layout-rail-color / -opacity), so the
+        //   1.5px frame border matches the rail lines. Defaults resolve to --border
+        //   at full opacity (unchanged for most surfaces); the `grid-line` host
+        //   raises them to the accent (see [data-surface='grid-line'] in
+        //   base/components.css), so grid-line's rails read brighter + theme-tinted.
+        // • grid-line flat → the accent at --layout-grid-line-border-opacity (~0.666).
+        // • everything else → --border.
+        this.isBorderRail()
+            ? 'border-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]'
+            : gridLine
+                ? 'border-[hsl(var(--accent-foreground)/var(--layout-grid-line-border-opacity))]'
+                : 'border-border',
+        // flat: the outer frame rounds with the active theme-radius
+        // (--layout-frame-radius → --radius-lg → --radius-base). border-rail keeps
+        // square corners for its grid-rail aesthetic. `grid-line` is always a clearly
+        // bordered square box (rounded-none + a visible border in every width) so the
+        // mosaic reads as a framed panel.
+        this.isBorderRail()
+            ? 'overflow-visible border-[length:var(--layout-rail-width)]'
+            : gridLine
+                ? 'overflow-hidden border rounded-none'
+                : this.isFullFlat()
+                    ? 'overflow-hidden'
+                    : 'overflow-hidden border rounded-[var(--layout-frame-radius)]');
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []));
     frameLayerClasses = computed(() => cn('col-start-1 row-start-1', this.frameClasses()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "frameLayerClasses" }] : /* istanbul ignore next */ []));
@@ -178,9 +203,44 @@ class LayoutComponent {
     surfaceClasses() {
         switch (this.resolvedSurface()) {
             case 'grid':
-                return '[--layout-grid-size:2rem] bg-background bg-[linear-gradient(hsl(var(--layout-grid-line)/var(--layout-grid-line-opacity))_1px,transparent_1px),linear-gradient(to_right,hsl(var(--layout-grid-line)/var(--layout-grid-line-opacity))_1px,transparent_1px)] bg-position-[center_center] bg-size-[var(--layout-grid-size)_var(--layout-grid-size)]';
-            case 'honeycome':
-                return 'bg-background bg-[radial-gradient(circle_at_0_0,hsl(var(--layout-grid-line)/var(--layout-grid-dot-opacity))_1px,transparent_1.5px)] bg-position-[center_center] bg-size-[1.25rem_1.25rem]';
+                // `grid`: two-axis 1px gradient. The line color is --layout-grid-color,
+                // which follows the accent (hue from --accent-foreground at the grid's
+                // pinned lightness) where CSS relative color is supported, else falls back
+                // to the neutral --layout-grid-line — both at --layout-grid-line-opacity
+                // (see base/theme.css). So the grid stays as faint as before but tints with
+                // the theme-color.
+                return '[--layout-grid-size:2rem] bg-background bg-[linear-gradient(var(--layout-grid-color)_1px,transparent_1px),linear-gradient(to_right,var(--layout-grid-color)_1px,transparent_1px)] bg-position-[center_center] bg-size-[var(--layout-grid-size)_var(--layout-grid-size)]';
+            case 'grid-line':
+                // `grid-line`: a richer "mosaic" cousin of `grid`, painted by the
+                // `.layout-surface-grid-line` mask layer (base/components.css). One mask
+                // carries the faint uniform grid PLUS scattered bright highlight squares
+                // and a few subtly-lit cells, so the layers stay pixel-aligned. The glow
+                // FOLLOWS THE ACCENT (accent hue from --accent-foreground, lightness pinned
+                // to --layout-grid-highlight-l so brightness stays put — grayscale in the
+                // base theme, tinted under a color theme), like the frame border.
+                return 'bg-background layout-surface-grid-line';
+            case 'honeycomb':
+                // True honeycomb: tileable hexagon outline painted by the
+                // `.layout-surface-honeycomb` mask layer (base/components.css), so it
+                // stays token-colored across themes. `bg-background` is the base.
+                return 'bg-background layout-surface-honeycomb';
+            case 'matrix':
+                // `matrix`: a scattered binary (0/1) field painted by the
+                // `.layout-surface-matrix` mask layer (base/components.css). Unlike
+                // the neutral grid surfaces, the glyphs are tinted with the brand
+                // `--primary` accent and carry baked-in per-glyph opacity, so the field
+                // reads as a soft "digital" signature that recolors with the theme.
+                return 'bg-background layout-surface-matrix';
+            case 'circuit':
+                // `circuit`: a tileable PCB / circuit-board texture — routed traces with
+                // 45° bends, via nodes, and concentric ring pads. Painted by the
+                // `.layout-surface-circuit` class (base/components.css) as TWO stacked,
+                // pixel-aligned mask layers (a single mask only carries alpha, so two
+                // colors need two layers): `::before` strokes the neutral copper traces
+                // (`--layout-grid-line`) and `::after` paints the via nodes/pads in the
+                // brand `--primary` accent — so the board is grayscale but its nodes glow
+                // with the theme. Both recolor across themes + dark mode.
+                return 'bg-background layout-surface-circuit';
             case 'line-vertical':
                 return 'bg-background bg-[linear-gradient(to_right,hsl(var(--layout-grid-line)/var(--layout-grid-dot-opacity))_1px,transparent_1px)] bg-position-[center_center] bg-size-[2rem_2rem]';
             case 'line-horizontal':
@@ -225,86 +285,86 @@ class LayoutComponent {
           <div data-layout-rail-anchor [class]="railAnchorClasses()">
             <div
               data-layout-rail-top-left-horizontal
-              class="absolute top-0 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+              class="absolute top-0 right-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
             ></div>
             <div
               data-layout-rail-top-left-vertical
-              class="absolute bottom-full left-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+              class="absolute bottom-full left-0 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
             ></div>
             <div
               data-layout-rail-top-right-horizontal
-              class="absolute top-0 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+              class="absolute top-0 left-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
             ></div>
             <div
               data-layout-rail-top-right-vertical
-              class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+              class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
             ></div>
             <div
               data-layout-rail-bottom-left-horizontal
-              class="absolute bottom-0 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+              class="absolute bottom-0 right-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
             ></div>
             <div
               data-layout-rail-bottom-left-vertical
-              class="absolute top-full left-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+              class="absolute top-full left-0 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
             ></div>
             <div
               data-layout-rail-bottom-right-horizontal
-              class="absolute bottom-0 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+              class="absolute bottom-0 left-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
             ></div>
             <div
               data-layout-rail-bottom-right-vertical
-              class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+              class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
             ></div>
             @if (showsInsetRails()) {
               <div
                 data-layout-horizontal-top-rail
-                class="absolute inset-x-0 top-12 h-[1.5px] bg-border"
+                class="absolute inset-x-0 top-12 h-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-horizontal-top-left-extension
-                class="absolute top-12 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+                class="absolute top-12 right-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-horizontal-top-right-extension
-                class="absolute top-12 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+                class="absolute top-12 left-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-horizontal-bottom-rail
-                class="absolute inset-x-0 bottom-12 h-[1.5px] bg-border"
+                class="absolute inset-x-0 bottom-12 h-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-horizontal-bottom-left-extension
-                class="absolute bottom-12 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+                class="absolute bottom-12 right-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-horizontal-bottom-right-extension
-                class="absolute bottom-12 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+                class="absolute bottom-12 left-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-vertical-left-rail
-                class="absolute inset-y-0 -left-4 w-[1.5px] bg-border"
+                class="absolute inset-y-0 -left-4 w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-vertical-left-top-extension
-                class="absolute bottom-full -left-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+                class="absolute bottom-full -left-4 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-vertical-left-bottom-extension
-                class="absolute top-full -left-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+                class="absolute top-full -left-4 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-vertical-right-rail
-                class="absolute inset-y-0 -right-4 w-[1.5px] bg-border"
+                class="absolute inset-y-0 -right-4 w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-vertical-right-top-extension
-                class="absolute bottom-full -right-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+                class="absolute bottom-full -right-4 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-vertical-right-bottom-extension
-                class="absolute top-full -right-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+                class="absolute top-full -right-4 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
             }
           </div>
@@ -345,86 +405,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
           <div data-layout-rail-anchor [class]="railAnchorClasses()">
             <div
               data-layout-rail-top-left-horizontal
-              class="absolute top-0 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+              class="absolute top-0 right-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
             ></div>
             <div
               data-layout-rail-top-left-vertical
-              class="absolute bottom-full left-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+              class="absolute bottom-full left-0 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
             ></div>
             <div
               data-layout-rail-top-right-horizontal
-              class="absolute top-0 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+              class="absolute top-0 left-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
             ></div>
             <div
               data-layout-rail-top-right-vertical
-              class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+              class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
             ></div>
             <div
               data-layout-rail-bottom-left-horizontal
-              class="absolute bottom-0 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+              class="absolute bottom-0 right-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
             ></div>
             <div
               data-layout-rail-bottom-left-vertical
-              class="absolute top-full left-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+              class="absolute top-full left-0 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
             ></div>
             <div
               data-layout-rail-bottom-right-horizontal
-              class="absolute bottom-0 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+              class="absolute bottom-0 left-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
             ></div>
             <div
               data-layout-rail-bottom-right-vertical
-              class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+              class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
             ></div>
             @if (showsInsetRails()) {
               <div
                 data-layout-horizontal-top-rail
-                class="absolute inset-x-0 top-12 h-[1.5px] bg-border"
+                class="absolute inset-x-0 top-12 h-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-horizontal-top-left-extension
-                class="absolute top-12 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+                class="absolute top-12 right-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-horizontal-top-right-extension
-                class="absolute top-12 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+                class="absolute top-12 left-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-horizontal-bottom-rail
-                class="absolute inset-x-0 bottom-12 h-[1.5px] bg-border"
+                class="absolute inset-x-0 bottom-12 h-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-horizontal-bottom-left-extension
-                class="absolute bottom-12 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+                class="absolute bottom-12 right-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-horizontal-bottom-right-extension
-                class="absolute bottom-12 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+                class="absolute bottom-12 left-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-vertical-left-rail
-                class="absolute inset-y-0 -left-4 w-[1.5px] bg-border"
+                class="absolute inset-y-0 -left-4 w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-vertical-left-top-extension
-                class="absolute bottom-full -left-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+                class="absolute bottom-full -left-4 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-vertical-left-bottom-extension
-                class="absolute top-full -left-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+                class="absolute top-full -left-4 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-vertical-right-rail
-                class="absolute inset-y-0 -right-4 w-[1.5px] bg-border"
+                class="absolute inset-y-0 -right-4 w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-vertical-right-top-extension
-                class="absolute bottom-full -right-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+                class="absolute bottom-full -right-4 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
               <div
                 data-layout-vertical-right-bottom-extension
-                class="absolute top-full -right-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+                class="absolute top-full -right-4 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
               ></div>
             }
           </div>

package/layout/README.md CHANGED Viewed

@@ -324,8 +324,11 @@ Nilai `surface` yang tersedia berasal dari `LAYOUT_SURFACES`.
 | Nilai               | Efek visual                                                                |
 | ------------------- | -------------------------------------------------------------------------- |
 | `'flat'`            | Background polos `bg-background`.                                          |
-| `'grid'`            | Pola grid tipis dua arah.                                                  |
-| `'honeycome'`       | Pola radial rapat. Nama API dieja `honeycome` agar sesuai export saat ini. |
+| `'grid'`            | Pola grid tipis dua arah; warna garis (`--layout-grid-color`) mengikuti Accent dengan kecerahan tetap (fallback neutral). |
+| `'grid-line'`       | Mosaik kotak: grid tipis + kotak highlight menyala. Mengikuti warna Accent (hue dari `--accent-foreground`, kecerahan dikunci `--layout-grid-highlight-l`), invert light/dark. Memaksa sudut frame kotak (`rounded-none`, seperti `border-rail`) + border frame warna Accent. Pada appearance `border-rail`, garis rail + border frame (tebal `--layout-rail-width` = 1.21px) ikut warna Accent (`--layout-rail-color`) dengan kecerahan dinaikkan (`--layout-rail-opacity`), bukan `--border` yang soft. |
+| `'honeycomb'`       | Pola heksagon honeycomb tipis (outline), token-colored mengikuti tema.     |
+| `'matrix'`     | Field biner (0/1) acak tipis, tinted brand `--primary`, recolor mengikuti tema. |
+| `'circuit'`         | Tekstur PCB / papan sirkuit yang ter-tile: jalur (trace) berbelok 45°, node via, dan pad cincin konsentris. Dua lapisan mask — trace tembaga netral (`--layout-grid-line`) + node aksen brand (`--primary`) — jadi papannya grayscale tapi node-nya menyala mengikuti tema; recolor light/dark. |
 | `'line-vertical'`   | Garis vertikal berulang.                                                   |
 | `'line-horizontal'` | Garis horizontal berulang.                                                 |
@@ -431,27 +434,27 @@ Seluruh symbol berikut diekspor dari `@ojiepermana/angular-theme/layout/types`.
 | Symbol               | Nilai                                                                                              |
 | -------------------- | -------------------------------------------------------------------------------------------------- |
 | `LayoutType`         | `vertical`, `horizontal`, `empty`, `fluid`                                                         |
-| `LayoutSurface`      | `flat`, `grid`, `honeycome`, `line-vertical`, `line-horizontal`                                    |
+| `LayoutSurface`      | `flat`, `grid`, `grid-line`, `honeycomb`, `matrix`, `circuit`, `line-vertical`, `line-horizontal`  |
 | `LayoutAppearance`   | `flat`, `border-rail`                                                                              |
 | `LayoutWidth`        | `full`, `wide`, `container`, `fluid`                                                               |
 | `LayoutContextValue` | Objekt berbentuk `{ surface, type, appearance, width }` yang masing-masing berupa readonly signal. |
 ### Constants
-| Symbol                          | Nilai                                                               |
-| ------------------------------- | ------------------------------------------------------------------- |
-| `LAYOUT_TYPES`                  | `['vertical', 'horizontal', 'empty', 'fluid']`                      |
-| `LAYOUT_SURFACES`               | `['flat', 'grid', 'honeycome', 'line-vertical', 'line-horizontal']` |
-| `LAYOUT_APPEARANCES`            | `['flat', 'border-rail']`                                           |
-| `LAYOUT_WIDTHS`                 | `['full', 'wide', 'container', 'fluid']`                            |
-| `LAYOUT_DEFAULT_SURFACE`        | `'flat'`                                                            |
-| `LAYOUT_DEFAULT_TYPE`           | `'vertical'`                                                        |
-| `LAYOUT_DEFAULT_APPEARANCE`     | `'flat'`                                                            |
-| `LAYOUT_DEFAULT_WIDTH`          | `'full'`                                                            |
-| `LAYOUT_SURFACE_STORAGE_KEY`    | `'layout-surface'`                                                  |
-| `LAYOUT_APPEARANCE_STORAGE_KEY` | `'layout-appearance'`                                               |
-| `LAYOUT_TYPE_STORAGE_KEY`       | `'layout-type'`                                                     |
-| `LAYOUT_WIDTH_STORAGE_KEY`      | `'layout-width'`                                                    |
+| Symbol                          | Nilai                                                                                      |
+| ------------------------------- | ------------------------------------------------------------------------------------------ |
+| `LAYOUT_TYPES`                  | `['vertical', 'horizontal', 'empty', 'fluid']`                                             |
+| `LAYOUT_SURFACES`               | `['flat', 'grid', 'grid-line', 'honeycomb', 'matrix', 'circuit', 'line-vertical', 'line-horizontal']` |
+| `LAYOUT_APPEARANCES`            | `['flat', 'border-rail']`                                                                  |
+| `LAYOUT_WIDTHS`                 | `['full', 'wide', 'container', 'fluid']`                                                   |
+| `LAYOUT_DEFAULT_SURFACE`        | `'flat'`                                                                                   |
+| `LAYOUT_DEFAULT_TYPE`           | `'vertical'`                                                                               |
+| `LAYOUT_DEFAULT_APPEARANCE`     | `'flat'`                                                                                   |
+| `LAYOUT_DEFAULT_WIDTH`          | `'full'`                                                                                   |
+| `LAYOUT_SURFACE_STORAGE_KEY`    | `'layout-surface'`                                                                         |
+| `LAYOUT_APPEARANCE_STORAGE_KEY` | `'layout-appearance'`                                                                      |
+| `LAYOUT_TYPE_STORAGE_KEY`       | `'layout-type'`                                                                            |
+| `LAYOUT_WIDTH_STORAGE_KEY`      | `'layout-width'`                                                                           |
 ### Guards

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular-theme",
-  "version": "22.0.41",
+  "version": "22.0.43",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edsis/angular.git"
@@ -13,8 +13,8 @@
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",
     "@angular/router": ">=22.0.0",
-    "@ojiepermana/angular-navigation": "^22.0.41",
-    "@ojiepermana/angular-component": "^22.0.41",
+    "@ojiepermana/angular-navigation": "^22.0.43",
+    "@ojiepermana/angular-component": "^22.0.43",
     "rxjs": ">=7.8.0"
   },
   "dependencies": {

package/styles/css/base/components.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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>;