feat: add demo mode

src/components/ChannelGroup/ChannelGroup.css

@@ -0,0 +1,41 @@
+.channel-group {
+  position: relative;
+  flex: 1 1 0;
+  min-height: 0;
+
+  display: flex;
+
+  border: var(--border-width) solid var(--border-hairline);
+  border-radius: var(--radius-md);
+
+  padding: 6cqh var(--space-3) 1cqh;
+  margin-bottom: 1cqh;
+  margin-top: 1cqh;
+  box-sizing: border-box;
+  overflow: visible; /* in case something upstream set hidden */
+}
+
+.channel-group__label {
+  position: absolute;
+  top: 1cqh;
+  left: 50%;
+  transform: translateX(-50%);
+
+  padding: 0 var(--space-2);
+
+  font-family: var(--font-ui);
+  font-size: 4cqh;
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-muted);
+
+  white-space: nowrap;
+  line-height: 1;
+}
+
+.channel-group__items {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  height: 100%;
+  gap: var(--space-1);
+}

src/components/ChannelGroup/ChannelGroup.tsx

@@ -0,0 +1,13 @@
+// ChannelGroup.tsx
+import './ChannelGroup.css';
+
+function ChannelGroup({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="channel-group">
+      <div className="channel-group__label">{title}</div>
+      <div className="channel-group__items">{children}</div>
+    </div>
+  );
+}
+
+export default ChannelGroup;