From d8992408fa88e2c6e3395eabc3533f786863cb8c Mon Sep 17 00:00:00 2001
From: Dreamodus <info@dreamodus.software>
Date: Sun, 12 Jul 2026 14:49:26 -0700
Subject: [PATCH] Docs: add all-digital LED console below the analog mixer

---
 apps/docs/src/sections/Console.tsx | 60 +++++++++++++++++++++++++++++-
 1 file changed, 59 insertions(+), 1 deletion(-)

diff --git a/apps/docs/src/sections/Console.tsx b/apps/docs/src/sections/Console.tsx
index c0e3deb..745b4a8 100644
--- a/apps/docs/src/sections/Console.tsx
+++ b/apps/docs/src/sections/Console.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import { Fader, FlatKnob, SegmentDisplay } from 'dreamknob';
+import { Fader, FlatKnob, LEDFader, LEDKnob, SegmentDisplay } from 'dreamknob';
+
+const METER_ZONES = [
+  { upTo: 0.62, color: '#3df2ad' },
+  { upTo: 0.85, color: '#ffd23e' },
+  { upTo: 1, color: '#ff4d6b' },
+];
 
 const CHANNELS = [
   { name: 'Kick', color: '#4cc2ff', level: -4 },
@@ -56,6 +62,49 @@ const Channel: React.FC<{ name: string; color: string; level: number }> = ({
   );
 };
 
+const LEDChannel: React.FC<{ name: string; color: string; level: number }> = ({
+  name,
+  color,
+  level,
+}) => (
+  <div className="channel">
+    <span className="ch-name">{name}</span>
+    <LEDKnob
+      size={56}
+      defaultValue={0}
+      min={-50}
+      max={50}
+      step={1}
+      segments={16}
+      color={color}
+      label="Pan"
+      aria-label={`${name} pan`}
+    />
+    <LEDKnob
+      size={56}
+      defaultValue={20}
+      step={1}
+      segments={16}
+      color={color}
+      label="Send"
+      aria-label={`${name} send`}
+    />
+    <LEDFader
+      length={150}
+      breadth={30}
+      defaultValue={level}
+      min={-60}
+      max={12}
+      step={0.5}
+      segments={26}
+      zones={METER_ZONES}
+      displayDecimals={1}
+      label="Level"
+      aria-label={`${name} level`}
+    />
+  </div>
+);
+
 export const Console: React.FC = () => (
   <section className="block" id="console">
     <div className="container">
@@ -70,6 +119,15 @@ export const Console: React.FC = () => (
           <Channel key={ch.name} {...ch} />
         ))}
       </div>
+      <p className="section-sub" style={{ margin: '28px 0 16px' }}>
+        …and the same desk, all-digital: <code>LEDKnob</code> + <code>LEDFader</code> with
+        meter zones.
+      </p>
+      <div className="console">
+        {CHANNELS.map(ch => (
+          <LEDChannel key={ch.name} {...ch} />
+        ))}
+      </div>
     </div>
   </section>
 );