Issue 460/sdui skipped components

v2/sdui/demo-lit/src/AgSduiDemo.ts

@@ -4,9 +4,11 @@ import 'agnosticui-core/header';
 import './components/WorkflowPicker';
 import './components/StreamingOutput';
 import './components/AdaptiveOutput';
+import './components/CollapsibleDemo';
 import './SkinSwitcher';
 
 const ADAPTIVE_WORKFLOW = 'adaptive-questionnaire';
+const COLLAPSIBLE_WORKFLOW = 'collapsible-demo';
 
 export class AgSduiDemo extends LitElement {
   static styles = css`
@@ -84,6 +86,10 @@ export class AgSduiDemo extends LitElement {
     return this.workflow === ADAPTIVE_WORKFLOW;
   }
 
+  private get isCollapsible() {
+    return this.workflow === COLLAPSIBLE_WORKFLOW;
+  }
+
   private handleSelect(e: Event) {
     this.workflow = (e as CustomEvent<string>).detail;
     this.seed = 0;
@@ -120,10 +126,12 @@ export class AgSduiDemo extends LitElement {
           <div class="demo-output-body">
             ${this.isAdaptive
               ? html`<ag-adaptive-output></ag-adaptive-output>`
-              : html`<ag-streaming-output
-                  .workflow=${this.workflow}
-                  .seed=${this.seed}
-                ></ag-streaming-output>`}
+              : this.isCollapsible
+                ? html`<ag-collapsible-demo .seed=${this.seed}></ag-collapsible-demo>`
+                : html`<ag-streaming-output
+                    .workflow=${this.workflow}
+                    .seed=${this.seed}
+                  ></ag-streaming-output>`}
           </div>
         </section>
       </div>

v2/sdui/demo-lit/src/components/CollapsibleDemo.ts

@@ -0,0 +1,151 @@
+import { LitElement, html, css } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import '@agnosticui/render-lit';
+import 'agnosticui-core/collapsible';
+import type { CollapsibleToggleEvent } from 'agnosticui-core/collapsible';
+import type { AgNode } from '@agnosticui/schema';
+import { collapsibleFixture } from '../../../demo/src/fixtures/collapsible-demo';
+import { streamFixture } from '../../../demo/src/lib/stream';
+
+const PANEL_AUTO_CLOSE_MS = 8000;
+
+export class CollapsibleDemo extends LitElement {
+  static styles = css`
+    :host { display: block; }
+
+    ag-dynamic-renderer {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ag-space-4, 1rem);
+    }
+
+    ag-collapsible.node-panel {
+      display: block;
+      border: 1px solid var(--ag-border, #e5e7eb);
+      border-radius: 6px;
+      overflow: hidden;
+      margin-block-end: 1rem;
+    }
+
+    ag-collapsible.node-panel::part(ag-collapsible-summary) {
+      padding: 0.4rem 0.75rem;
+      background: var(--ag-background-secondary, #f3f4f6);
+      font-size: 0.7rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: var(--ag-text-muted, #666);
+      font-family: monospace;
+    }
+
+    ag-collapsible.node-panel::part(ag-collapsible-indicator) {
+      color: var(--ag-text-muted, #666);
+    }
+
+    ag-collapsible.node-panel::part(ag-collapsible-content) {
+      padding: 0;
+      border-top: 1px solid var(--ag-border, #e5e7eb);
+      max-height: 320px;
+      overflow-y: auto;
+    }
+
+    .node-panel-pre {
+      margin: 0;
+      padding: 0.75rem;
+      font-family: monospace;
+      font-size: 0.72rem;
+      line-height: 1.5;
+      color: var(--ag-text-primary, #111);
+      background: var(--ag-background-primary, #fff);
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+  `;
+
+  @property({ type: Number }) seed = 0;
+  @state() private nodes: AgNode[] = [];
+  @state() private panelOpen = false;
+  private cancelStream: (() => void) | null = null;
+  private fadeTimer: ReturnType<typeof setTimeout> | null = null;
+
+  private openPanel() {
+    this.panelOpen = true;
+    if (this.fadeTimer) clearTimeout(this.fadeTimer);
+    this.fadeTimer = setTimeout(() => { this.panelOpen = false; }, PANEL_AUTO_CLOSE_MS);
+  }
+
+  private _onCollapsibleToggle(e: CollapsibleToggleEvent) {
+    const nowOpen = e.detail.open;
+    this.panelOpen = nowOpen;
+    if (nowOpen) {
+      if (this.fadeTimer) clearTimeout(this.fadeTimer);
+      this.fadeTimer = setTimeout(() => { this.panelOpen = false; }, PANEL_AUTO_CLOSE_MS);
+    } else {
+      if (this.fadeTimer) clearTimeout(this.fadeTimer);
+    }
+  }
+
+  private actions = {
+    COLLAPSIBLE_TOGGLE: (payload: unknown) => {
+      const { id, value } = payload as { id: string; value: boolean };
+      this.nodes = this.nodes.map(n => {
+        if (n.component !== 'AgCollapsible') return n;
+        const raw = n as unknown as Record<string, unknown>;
+        const newOpen = n.id === id ? value : (value ? false : raw['open'] as boolean);
+        return { ...n, open: newOpen } as AgNode;
+      });
+    },
+    SLIDER_CHANGE: (payload: unknown) => {
+      const { value } = payload as { id: string; value: number };
+      this.nodes = this.nodes.map(n =>
+        n.id === 'slider-value' ? { ...n, text: `Count: ${value}` } as AgNode : n
+      );
+    },
+  };
+
+  private async runStream() {
+    if (this.cancelStream) this.cancelStream();
+    let cancelled = false;
+    this.cancelStream = () => { cancelled = true; };
+    this.nodes = [];
+    for await (const node of streamFixture(collapsibleFixture)) {
+      if (cancelled) break;
+      this.nodes = [...this.nodes, node];
+    }
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.openPanel();
+    this.runStream();
+  }
+
+  override updated(changed: Map<string, unknown>) {
+    if (changed.has('seed') && changed.get('seed') !== undefined) {
+      this.openPanel();
+      this.runStream();
+    }
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.cancelStream) this.cancelStream();
+    if (this.fadeTimer) clearTimeout(this.fadeTimer);
+  }
+
+  render() {
+    return html`
+      <ag-collapsible
+        class="node-panel"
+        .open=${this.panelOpen}
+        .onToggle=${(e: CollapsibleToggleEvent) => this._onCollapsibleToggle(e)}
+      >
+        <span slot="summary">Node array</span>
+        <pre class="node-panel-pre">${JSON.stringify(this.nodes, null, 2)}</pre>
+      </ag-collapsible>
+      <ag-dynamic-renderer .nodes=${this.nodes} .actions=${this.actions}></ag-dynamic-renderer>
+    `;
+  }
+}
+
+customElements.define('ag-collapsible-demo', CollapsibleDemo);

v2/sdui/demo-lit/src/components/WorkflowPicker.ts

@@ -5,7 +5,14 @@ import { pickerFixture } from '../../../demo/src/fixtures/picker';
 import type { AgNode } from '@agnosticui/schema';
 
 export class WorkflowPicker extends LitElement {
-  static styles = css`:host { display: block; }`;
+  static styles = css`
+    :host { display: block; }
+
+    ag-selection-card::part(ag-selection-card-container) {
+      box-sizing: border-box;
+      min-height: 276px;
+    }
+  `;
 
   @state() private selected = 'contact-form';
 

v2/sdui/demo-vue/src/App.vue

@@ -4,14 +4,17 @@ import { VueHeader } from 'agnosticui-core/header/vue';
 import WorkflowPicker from './components/WorkflowPicker.vue';
 import StreamingOutput from './components/StreamingOutput.vue';
 import AdaptiveOutput from './components/AdaptiveOutput.vue';
+import CollapsibleDemo from './components/CollapsibleDemo.vue';
 import SkinSwitcher from './SkinSwitcher.vue';
 
 const ADAPTIVE_WORKFLOW = 'adaptive-questionnaire';
+const COLLAPSIBLE_WORKFLOW = 'collapsible-demo';
 
 const workflow = ref('contact-form');
 const seed = ref(0);
 
 const isAdaptive = computed(() => workflow.value === ADAPTIVE_WORKFLOW);
+const isCollapsible = computed(() => workflow.value === COLLAPSIBLE_WORKFLOW);
 
 const handleSelect = (next: string) => {
   workflow.value = next;
@@ -48,6 +51,7 @@ const handleRegenerate = () => {
       </div>
       <div class="demo-output-body">
         <AdaptiveOutput v-if="isAdaptive" :key="seed" />
+        <CollapsibleDemo v-else-if="isCollapsible" :key="seed" />
         <StreamingOutput v-else :workflow="workflow" :seed="seed" />
       </div>
     </section>
@@ -141,4 +145,9 @@ const handleRegenerate = () => {
   display: block;
   margin-block-end: var(--ag-space-4, 1rem);
 }
+
+ag-selection-card::part(ag-selection-card-container) {
+  box-sizing: border-box;
+  min-height: 276px;
+}
 </style>

v2/sdui/demo-vue/src/components/CollapsibleDemo.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import type { AgNode } from '@agnosticui/schema';
+import { AgDynamicRenderer } from '@agnosticui/render-vue';
+import { VueCollapsible } from 'agnosticui-core/collapsible/vue';
+import type { CollapsibleToggleEvent } from 'agnosticui-core/collapsible';
+import { collapsibleFixture } from '../../../demo/src/fixtures/collapsible-demo';
+import { streamFixture } from '../../../demo/src/lib/stream';
+
+const PANEL_AUTO_CLOSE_MS = 8000;
+
+const nodes = ref<AgNode[]>([]);
+const panelOpen = ref(false);
+let fadeTimer: ReturnType<typeof setTimeout> | null = null;
+let cancelCurrentStream: () => void = () => {};
+
+function openPanel() {
+  panelOpen.value = true;
+  if (fadeTimer) clearTimeout(fadeTimer);
+  fadeTimer = setTimeout(() => { panelOpen.value = false; }, PANEL_AUTO_CLOSE_MS);
+}
+
+function handleCollapsibleToggle(e: CollapsibleToggleEvent) {
+  const nowOpen = e.detail.open;
+  panelOpen.value = nowOpen;
+  if (nowOpen) {
+    if (fadeTimer) clearTimeout(fadeTimer);
+    fadeTimer = setTimeout(() => { panelOpen.value = false; }, PANEL_AUTO_CLOSE_MS);
+  } else {
+    if (fadeTimer) clearTimeout(fadeTimer);
+  }
+}
+
+async function runStream(fixture: AgNode[]) {
+  cancelCurrentStream();
+  let cancelled = false;
+  cancelCurrentStream = () => { cancelled = true; };
+  nodes.value = [];
+  for await (const node of streamFixture(fixture)) {
+    if (cancelled) break;
+    nodes.value = [...nodes.value, node];
+  }
+}
+
+onMounted(() => { openPanel(); runStream(collapsibleFixture); });
+onUnmounted(() => { cancelCurrentStream(); if (fadeTimer) clearTimeout(fadeTimer); });
+
+const actions = {
+  COLLAPSIBLE_TOGGLE: (payload: unknown) => {
+    const { id, value } = payload as { id: string; value: boolean };
+    nodes.value = nodes.value.map(n => {
+      if (n.component !== 'AgCollapsible') return n;
+      const raw = n as unknown as Record<string, unknown>;
+      const newOpen = n.id === id ? value : (value ? false : raw['open'] as boolean);
+      return { ...n, open: newOpen } as AgNode;
+    });
+  },
+  SLIDER_CHANGE: (payload: unknown) => {
+    const { value } = payload as { id: string; value: number };
+    nodes.value = nodes.value.map(n =>
+      n.id === 'slider-value' ? { ...n, text: `Count: ${value}` } as AgNode : n
+    );
+  },
+};
+</script>
+
+<template>
+  <VueCollapsible
+    class="node-panel"
+    :open="panelOpen"
+    :onToggle="handleCollapsibleToggle"
+  >
+    <template #summary>Node array</template>
+    <pre class="node-panel-pre">{{ JSON.stringify(nodes, null, 2) }}</pre>
+  </VueCollapsible>
+  <AgDynamicRenderer :nodes="nodes" :actions="actions" />
+</template>
+
+<style>
+ag-collapsible.node-panel {
+  display: block;
+  border: 1px solid var(--ag-border, #e5e7eb);
+  border-radius: 6px;
+  overflow: hidden;
+  margin-block-end: 1rem;
+}
+
+ag-collapsible.node-panel::part(ag-collapsible-summary) {
+  padding: 0.4rem 0.75rem;
+  background: var(--ag-background-secondary, #f3f4f6);
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ag-text-muted, #666);
+  font-family: monospace;
+}
+
+ag-collapsible.node-panel::part(ag-collapsible-indicator) {
+  color: var(--ag-text-muted, #666);
+}
+
+ag-collapsible.node-panel::part(ag-collapsible-content) {
+  padding: 0;
+  border-top: 1px solid var(--ag-border, #e5e7eb);
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.node-panel-pre {
+  margin: 0;
+  padding: 0.75rem;
+  font-family: monospace;
+  font-size: 0.72rem;
+  line-height: 1.5;
+  color: var(--ag-text-primary, #111);
+  background: var(--ag-background-primary, #fff);
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>

v2/sdui/demo/src/App.css

@@ -83,3 +83,8 @@
   display: block;
   margin-block-end: var(--ag-space-4, 1rem);
 }
+
+ag-selection-card::part(ag-selection-card-container) {
+  box-sizing: border-box;
+  min-height: 276px;
+}