From cffda9a5a771ec328c6f226f267211fa8d4d81c8 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Wed, 18 Mar 2026 23:08:27 +0100
Subject: [PATCH] feat: add InlineEdit, ConfirmDialog, MultiSelect to Inventory
 demos

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../Inventory/sections/CompositesSection.tsx  | 45 +++++++++++++++++++
 .../Inventory/sections/PrimitivesSection.tsx  | 13 ++++++
 2 files changed, 58 insertions(+)

diff --git a/src/pages/Inventory/sections/CompositesSection.tsx b/src/pages/Inventory/sections/CompositesSection.tsx
index a3f8cfb..c2c8d44 100644
--- a/src/pages/Inventory/sections/CompositesSection.tsx
+++ b/src/pages/Inventory/sections/CompositesSection.tsx
@@ -8,6 +8,7 @@ import {
   BarChart,
   Breadcrumb,
   CommandPalette,
+  ConfirmDialog,
   DataTable,
   DetailPanel,
   Dropdown,
@@ -17,6 +18,7 @@ import {
   LineChart,
   MenuItem,
   Modal,
+  MultiSelect,
   Popover,
   ProcessorTimeline,
   ShortcutsBar,
@@ -208,6 +210,13 @@ export function CompositesSection() {
   ]
   const [activeFilters, setActiveFilters] = useState([{ label: 'Live', value: 'live' }])
 
+  // ConfirmDialog
+  const [confirmOpen, setConfirmOpen] = useState(false)
+  const [confirmDone, setConfirmDone] = useState(false)
+
+  // MultiSelect
+  const [multiValue, setMultiValue] = useState<string[]>(['admin'])
+
   // 15. Modal
   const [modalOpen, setModalOpen] = useState(false)
 
@@ -294,6 +303,21 @@ export function CompositesSection() {
           />
         </DemoCard>
 
+        {/* 2b. ConfirmDialog */}
+        <DemoCard id="confirm-dialog" title="ConfirmDialog" description="Type-to-confirm destructive action dialog. Built on Modal.">
+          <Button size="sm" variant="danger" onClick={() => { setConfirmOpen(true); setConfirmDone(false) }}>
+            Delete project
+          </Button>
+          {confirmDone && <span style={{ color: 'var(--success)', fontSize: 12, marginLeft: 8 }}>Deleted!</span>}
+          <ConfirmDialog
+            open={confirmOpen}
+            onClose={() => setConfirmOpen(false)}
+            onConfirm={() => { setConfirmOpen(false); setConfirmDone(true) }}
+            message={'Delete project "my-project"? This cannot be undone.'}
+            confirmText="my-project"
+          />
+        </DemoCard>
+
         {/* 3. AreaChart */}
         <DemoCard
           id="areachart"
@@ -511,6 +535,27 @@ export function CompositesSection() {
           </Modal>
         </DemoCard>
 
+        {/* 15b. MultiSelect */}
+        <DemoCard id="multi-select" title="MultiSelect" description="Dropdown with searchable checkbox list and Apply action.">
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxWidth: 260 }}>
+            <MultiSelect
+              options={[
+                { value: 'admin', label: 'ADMIN' },
+                { value: 'editor', label: 'EDITOR' },
+                { value: 'viewer', label: 'VIEWER' },
+                { value: 'operator', label: 'OPERATOR' },
+                { value: 'auditor', label: 'AUDITOR' },
+              ]}
+              value={multiValue}
+              onChange={setMultiValue}
+              placeholder="Add roles..."
+            />
+            <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>
+              Selected: {multiValue.join(', ') || 'none'}
+            </span>
+          </div>
+        </DemoCard>
+
         {/* 16. Popover */}
         <DemoCard
           id="popover"
diff --git a/src/pages/Inventory/sections/PrimitivesSection.tsx b/src/pages/Inventory/sections/PrimitivesSection.tsx
index 148bb60..6625305 100644
--- a/src/pages/Inventory/sections/PrimitivesSection.tsx
+++ b/src/pages/Inventory/sections/PrimitivesSection.tsx
@@ -15,6 +15,7 @@ import {
   FilterPill,
   FormField,
   InfoCallout,
+  InlineEdit,
   Input,
   KeyboardHint,
   Label,
@@ -95,6 +96,9 @@ export function PrimitivesSection() {
     end: new Date('2026-03-18T23:59'),
   })
 
+  // InlineEdit state
+  const [inlineValue, setInlineValue] = useState('Alice Johnson')
+
   return (
     <section id="primitives" className={styles.section}>
       <h2 className={styles.sectionTitle}>Primitives</h2>
@@ -328,6 +332,15 @@ export function PrimitivesSection() {
         <Input icon="🔍" placeholder="With icon" />
       </DemoCard>
 
+      {/* 15b. InlineEdit */}
+      <DemoCard id="inline-edit" title="InlineEdit" description="Click-to-edit text field. Enter saves, Escape/blur cancels.">
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          <InlineEdit value={inlineValue} onSave={setInlineValue} />
+          <InlineEdit value="" onSave={() => {}} placeholder="Click to add name..." />
+          <InlineEdit value="Read only" onSave={() => {}} disabled />
+        </div>
+      </DemoCard>
+
       {/* 16. KeyboardHint */}
       <DemoCard
         id="keyboardhint"