php-forge · terabytesoftw · Sep 14, 2026 · Sep 14, 2026 · Sep 14, 2026
diff --git a/composer.json b/composer.json
@@ -24,7 +24,7 @@
         "ext-intl": "*",
         "ext-mbstring": "*",
         "ui-awesome/html": "^0.6",
-        "ui-awesome/html-core-component": "^0.5@dev",
+        "ui-awesome/html-core-component": "^0.4",
         "ui-awesome/html-helper": "^0.7",
         "ui-awesome/html-interop": "^0.4",
         "ui-awesome/html-mixin": "^0.8.2",

diff --git a/package.json b/package.json
@@ -18,6 +18,8 @@
     "check:size": "node tools/check-asset-size.mjs",
     "check:contrast": "node tools/check-token-contrast.mjs",
     "check:contrast:strict": "node tools/check-token-contrast.mjs --strict",
+    "check:css-vocabulary": "node tools/check-css-vocabulary.mjs",
+    "contact-sheet": "node tools/contact-sheet.mjs",
     "test:events": "DEBUG_UI_SEED_FIXTURES=0 playwright test e2e/events.spec.js",
     "test:e2e": "playwright test e2e/smoke.spec.js e2e/security.spec.js e2e/db-controls.spec.js e2e/history-layout.spec.js",
     "test:e2e:list": "DEBUG_UI_SEED_FIXTURES=0 playwright test --list",

diff --git a/resources/assets/dist/css/debug.min.css b/resources/assets/dist/css/debug.min.css
diff --git a/resources/src/styles/main.css b/resources/src/styles/main.css
@@ -4753,6 +4753,162 @@
     text-transform: lowercase;
   }
 
+  /* -- Readout card grid container ------------------------------------ */
+
+  .yii-debug-readout-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+    gap: var(--yii-debug-space-3);
+    margin-bottom: var(--yii-debug-space-6);
+  }
+
+  /*
+   * Overview tables inside a schematic section drop the dashboard card look and
+   * adopt the manifest rhythm: mono type, a muted label column, and hairline
+   * row rules instead of a heavy surface.
+   */
+  .yii-debug-section .yii-debug-table-wrap {
+    border-radius: var(--yii-debug-radius-md);
+  }
+
+  .yii-debug-section .yii-debug-table-overview {
+    th,
+    td {
+      padding: 9px var(--yii-debug-space-4);
+      border-bottom: 1px solid
+        color-mix(in srgb, var(--yii-debug-panel-border), transparent 45%);
+      font-family: var(--yii-debug-font-mono);
+      font-size: var(--yii-debug-fs-xs);
+      text-align: left;
+      vertical-align: baseline;
+    }
+
+    th {
+      width: 34%;
+      color: var(--yii-debug-panel-muted);
+      font-weight: 500;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+    }
+
+    td {
+      color: var(--yii-debug-panel-text);
+    }
+
+    tr:last-child {
+      th,
+      td {
+        border-bottom: 0;
+      }
+    }
+  }
+
+  /*
+   * Fact strip: label and value pairs spread across the full width, one hairline
+   * apart. The 1px grid gap exposes the container colour as the rule, so the
+   * separators survive the wrap to a second row on narrow viewports.
+   */
+  .yii-debug-fact-strip {
+    display: grid;
+    overflow: hidden;
+    margin: 0;
+    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+    border: var(--yii-debug-border);
+    border-radius: var(--yii-debug-radius-md);
+    background: var(--yii-debug-panel-border);
+    gap: 1px;
+  }
+
+  .yii-debug-fact {
+    min-width: 0;
+    padding: var(--yii-debug-space-3) var(--yii-debug-space-4);
+    background: var(--yii-debug-panel-surface-muted);
+  }
+
+  .yii-debug-fact-label {
+    margin-bottom: 2px;
+    color: var(--yii-debug-panel-muted);
+    font-family: var(--yii-debug-font-sans);
+    font-size: 0.6875rem;
+    font-weight: 700;
+    letter-spacing: 0.07em;
+    text-transform: uppercase;
+  }
+
+  .yii-debug-fact-value {
+    overflow: hidden;
+    margin: 0;
+    color: var(--yii-debug-panel-text);
+    font-family: var(--yii-debug-font-mono);
+    font-size: var(--yii-debug-fs-sm);
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* -- Package manifest ------------------------------------------------ */
+
+  .yii-debug-manifest {
+    display: flex;
+    flex-direction: column;
+    border: var(--yii-debug-border);
+    border-radius: var(--yii-debug-radius-md);
+    background: var(--yii-debug-panel-surface);
+    overflow: hidden;
+  }
+
+  .yii-debug-manifest-head {
+    display: flex;
+    align-items: center;
+    gap: var(--yii-debug-space-2);
+    padding: var(--yii-debug-space-3) var(--yii-debug-space-4);
+    border-bottom: var(--yii-debug-border);
+    color: var(--yii-debug-panel-primary);
+    font-family: var(--yii-debug-font-mono);
+    font-size: var(--yii-debug-fs-xs);
+    font-weight: 700;
+    letter-spacing: 0.08em;
+  }
+
+  .yii-debug-manifest-count {
+    margin-left: auto;
+    color: var(--yii-debug-panel-muted);
+    font-weight: 500;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+  }
+
+  /* Dense, typewriter-flavored roster: as many columns as the width allows. */
+  .yii-debug-manifest-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+  }
+
+  .yii-debug-manifest-item {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--yii-debug-space-3);
+    min-width: 0;
+    padding: 7px var(--yii-debug-space-4);
+    border-bottom: 1px solid
+      color-mix(in srgb, var(--yii-debug-panel-border), transparent 45%);
+    font-family: var(--yii-debug-font-mono);
+    font-size: var(--yii-debug-fs-xs);
+  }
+
+  .yii-debug-manifest-name {
+    color: var(--yii-debug-panel-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .yii-debug-manifest-version {
+    flex: none;
+    color: var(--yii-debug-panel-primary);
+  }
+
   /* -- Extension status strip ----------------------------------------- */
 
   .yii-debug-ext-strip {

diff --git a/src/Helper/Badge.php b/src/Helper/Badge.php
@@ -4,25 +4,27 @@
 
 namespace PHPForge\Debug\Helper;
 
+use PHPForge\Debug\Theme\Css;
+use PHPForge\Debug\Tone;
 use UIAwesome\Html\Phrasing\Span;
 
 /**
- * Renders the shared `yii-debug-badge` chip carrying a semantic variant.
+ * Renders the shared badge chip carrying a semantic tone.
  */
 final class Badge
 {
     /**
      * Renders one badge chip.
      *
      * @param string $label Text shown inside the chip.
-     * @param string $variant Semantic suffix appended to `yii-debug-badge-` (`success`, `muted`, `warning`, ...).
-     * @param string $modifier Extra CSS classes appended after the variant class, or `''` to add none.
+     * @param Tone $tone Semantic tone selecting the chip hue.
+     * @param string $modifier Extra CSS classes appended after the tone class, or `''` to add none.
      *
      * @return Span Badge chip element.
      */
-    public static function render(string $label, string $variant, string $modifier = ''): Span
+    public static function render(string $label, Tone $tone, string $modifier = ''): Span
     {
-        $class = "yii-debug-badge yii-debug-badge-{$variant}";
+        $class = Css::badge($tone);
 
         return Span::tag()
             ->class($modifier === '' ? $class : "{$class} {$modifier}")

diff --git a/src/Helper/CellMore.php b/src/Helper/CellMore.php
@@ -4,6 +4,7 @@
 
 namespace PHPForge\Debug\Helper;
 
+use PHPForge\Debug\Theme\Css;
 use UIAwesome\Html\Flow\Div;
 use UIAwesome\Html\Form\Button;
 use UIAwesome\Html\Form\Values\ButtonType;
@@ -53,15 +54,15 @@ public static function clamp(string $content, string $source): string
     public static function wrap(string $content): string
     {
         return Div::tag()
-            ->class('yii-debug-cell-more')
+            ->class(Css::CELL_MORE)
             ->html(
                 Div::tag()
-                    ->class('yii-debug-cell-more-body')
+                    ->class(Css::CELL_MORE_BODY)
                     ->html($content),
                 Button::tag()
                     ->addAriaAttribute('expanded', 'false')
                     ->addAttribute('data-yii-debug-toggle', 'cell-more')
-                    ->class('yii-debug-cell-more-toggle')
+                    ->class(Css::CELL_MORE_TOGGLE)
                     ->content('Show more')
                     ->type(ButtonType::BUTTON),
             )

diff --git a/src/Helper/Disclosure.php b/src/Helper/Disclosure.php
@@ -4,6 +4,7 @@
 
 namespace PHPForge\Debug\Helper;
 
+use PHPForge\Debug\Theme\Css;
 use UIAwesome\Html\Flow\Div;
 use UIAwesome\Html\Interactive\{Details, Summary};
 use UIAwesome\Html\Phrasing\Span;
@@ -25,7 +26,7 @@ public static function hint(): Span
     {
         return Span::tag()
             ->addAriaAttribute('hidden', 'true')
-            ->class('yii-debug-disclosure-hint')
+            ->class(Css::DISCLOSURE_HINT)
             ->html(
                 Span::tag()
                     ->addDataAttribute('yii-debug-hint', 'collapsed')
@@ -49,18 +50,18 @@ public static function render(string $title, string $body, bool $open = false):
     {
         return Details::tag()
             ->open($open)
-            ->class('yii-debug-disclosure')
+            ->class(Css::DISCLOSURE)
             ->html(
                 Summary::tag()
-                    ->class('yii-debug-disclosure-summary')
+                    ->class(Css::DISCLOSURE_SUMMARY)
                     ->html(
                         Span::tag()
-                            ->class('yii-debug-disclosure-title')
+                            ->class(Css::DISCLOSURE_TITLE)
                             ->content($title),
                         self::hint(),
                     ),
                 Div::tag()
-                    ->class('yii-debug-disclosure-body')
+                    ->class(Css::DISCLOSURE_BODY)
                     ->html($body),
             )
             ->render();

diff --git a/src/Helper/EmptyState.php b/src/Helper/EmptyState.php
@@ -4,6 +4,7 @@
 
 namespace PHPForge\Debug\Helper;
 
+use PHPForge\Debug\Theme\Css;
 use Stringable;
 use UIAwesome\Html\Flow\Div;
 use UIAwesome\Html\Heading\H2;
@@ -26,7 +27,7 @@ final class EmptyState
     public static function card(string $headline, string|Stringable ...$body): string
     {
         return Div::tag()
-            ->class('yii-debug-empty-state')
+            ->class(Css::EMPTY_STATE)
             ->html(
                 H2::tag()->content($headline),
                 ...$body,

diff --git a/src/Helper/ExtensionPill.php b/src/Helper/ExtensionPill.php
@@ -4,6 +4,7 @@
 
 namespace PHPForge\Debug\Helper;
 
+use PHPForge\Debug\Theme\Css;
 use UIAwesome\Html\Phrasing\Span;
 
 /**
@@ -26,23 +27,23 @@ public static function render(string $label, string $state, bool $enabled, strin
         $children = [
             Span::tag()
                 ->addAriaAttribute('hidden', 'true')
-                ->class('yii-debug-ext-pill-dot'),
+                ->class(Css::EXT_PILL_DOT),
             Span::tag()
-                ->class('yii-debug-ext-pill-label')
+                ->class(Css::EXT_PILL_LABEL)
                 ->content($label),
             Span::tag()
-                ->class('yii-debug-ext-pill-state')
+                ->class(Css::EXT_PILL_STATE)
                 ->content($state),
         ];
 
         if ($summary !== '') {
             $children[] = Span::tag()
-                ->class('yii-debug-sr-only')
+                ->class(Css::SR_ONLY)
                 ->content($summary);
         }
 
         return Span::tag()
-            ->class('yii-debug-ext-pill ' . ($enabled ? 'is-on' : 'is-off'))
+            ->class(Css::EXT_PILL . ' ' . ($enabled ? 'is-on' : 'is-off'))
             ->html(...$children);
     }
 }
diff --git a/src/Helper/Fqcn.php b/src/Helper/Fqcn.php
@@ -4,6 +4,7 @@
 
 namespace PHPForge\Debug\Helper;
 
+use PHPForge\Debug\Theme\Css;
 use UIAwesome\Html\Phrasing\{Span, Strong};
 
 use function strrpos;
@@ -54,7 +55,7 @@ public static function renderLabel(string $value): string
             ->html(
                 $namespace !== ''
                     ? Span::tag()
-                        ->class('yii-debug-muted')
+                        ->class(Css::MUTED)
                         ->content("{$namespace}\\")
                         ->render() . '<wbr>'
                     : '',

diff --git a/src/Helper/Gauge.php b/src/Helper/Gauge.php
@@ -4,6 +4,7 @@
 
 namespace PHPForge\Debug\Helper;
 
+use PHPForge\Debug\Theme\Css;
 use UIAwesome\Html\Phrasing\Span;
 
 use function max;
@@ -32,14 +33,14 @@ public static function render(string $value, float $current, float $max): string
         $percent = max(0.0, min(100.0, $current / $max * 100));
 
         return Span::tag()
-            ->class('yii-debug-gauge')
+            ->class(Css::GAUGE)
             ->style(['--yii-debug-gauge' => Format::cssPercent($percent)])
             ->html(
                 Span::tag()
-                    ->class('yii-debug-gauge-value')
+                    ->class(Css::GAUGE_VALUE)
                     ->content($value),
                 Span::tag()
-                    ->class('yii-debug-gauge-bar')
+                    ->class(Css::GAUGE_BAR)
                     ->addAttribute('aria-hidden', 'true'),
             )
             ->render();