docs: add COMPONENT_GUIDE entries and Inventory demos for KpiStrip, SplitPane, EntityList, LogViewer, StatusText, Card title

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/pages/Inventory/sections/PrimitivesSection.tsx

@@ -32,6 +32,7 @@ import {
   Spinner,
   StatCard,
   StatusDot,
+  StatusText,
   Tag,
   Textarea,
   Toggle,
@@ -204,12 +205,18 @@ export function PrimitivesSection() {
       <DemoCard
         id="card"
         title="Card"
-        description="Surface container with optional left-border accent colour."
+        description="Surface container with optional left-border accent colour and title header."
       >
         <Card><div style={{ padding: '8px 12px', fontSize: 13 }}>Plain card</div></Card>
         <Card accent="amber"><div style={{ padding: '8px 12px', fontSize: 13 }}>Amber accent</div></Card>
         <Card accent="success"><div style={{ padding: '8px 12px', fontSize: 13 }}>Success accent</div></Card>
         <Card accent="error"><div style={{ padding: '8px 12px', fontSize: 13 }}>Error accent</div></Card>
+        <Card title="Throughput (msg/s)">
+          <div style={{ padding: '8px 12px', fontSize: 13 }}>Card with title header and separator</div>
+        </Card>
+        <Card accent="amber" title="Error Rate">
+          <div style={{ padding: '8px 12px', fontSize: 13 }}>Title + accent combined</div>
+        </Card>
       </DemoCard>
 
       {/* 6. Checkbox */}
@@ -559,7 +566,31 @@ export function PrimitivesSection() {
         </div>
       </DemoCard>
 
-      {/* 29. Tag */}
+      {/* 29. StatusText */}
+      <DemoCard
+        id="statustext"
+        title="StatusText"
+        description="Inline coloured text for status values — five semantic variants with optional bold."
+      >
+        <div className={styles.demoAreaColumn} style={{ width: '100%' }}>
+          <div className={styles.demoAreaRow}>
+            <StatusText variant="success">99.8% uptime</StatusText>
+            <StatusText variant="warning">SLA at risk</StatusText>
+            <StatusText variant="error">BREACH</StatusText>
+            <StatusText variant="running">Processing</StatusText>
+            <StatusText variant="muted">N/A</StatusText>
+          </div>
+          <div className={styles.demoAreaRow}>
+            <StatusText variant="success" bold>99.8% uptime</StatusText>
+            <StatusText variant="warning" bold>SLA at risk</StatusText>
+            <StatusText variant="error" bold>BREACH</StatusText>
+            <StatusText variant="running" bold>Processing</StatusText>
+            <StatusText variant="muted" bold>N/A</StatusText>
+          </div>
+        </div>
+      </DemoCard>
+
+      {/* 30. Tag */}
       <DemoCard
         id="tag"
         title="Tag"
@@ -573,7 +604,7 @@ export function PrimitivesSection() {
         <Tag label="removable" color="primary" onRemove={() => undefined} />
       </DemoCard>
 
-      {/* 30. Textarea */}
+      {/* 31. Textarea */}
       <DemoCard
         id="textarea"
         title="Textarea"
@@ -582,7 +613,7 @@ export function PrimitivesSection() {
         <Textarea placeholder="Enter a description…" style={{ width: 280 }} />
       </DemoCard>
 
-      {/* 31. Toggle */}
+      {/* 32. Toggle */}
       <DemoCard
         id="toggle"
         title="Toggle"
@@ -602,7 +633,7 @@ export function PrimitivesSection() {
         <Toggle label="Locked off" disabled />
       </DemoCard>
 
-      {/* 32. Tooltip */}
+      {/* 33. Tooltip */}
       <DemoCard
         id="tooltip"
         title="Tooltip"