@stephen-netu/design-system 0.1.0 → 0.2.0

package/dist/fabric/layout/CollapsiblePanel.svelte

@@ -0,0 +1,378 @@
+<script lang="ts" module>
+  export type PanelPosition = 'left' | 'right';
+  export type PanelMode = 'overlay' | 'scoot';
+  export type PanelSnap = 'closed' | 'peek' | 'full';
+</script>
+
+<script lang="ts">
+  /**
+   * CollapsiblePanel — Reusable side panel with toggle handle
+   *
+   * Based on Ryu's BoardDrawer pattern (wt-XXX).
+   * Provides a vertical handle bar that can toggle/resize the panel.
+   *
+   * Modes:
+   *   - 'overlay': Panel slides over content (z-index above)
+   *   - 'scoot': Panel pushes content (grid/flex layout shifts)
+   *
+   * Snap states:
+   *   - 'closed': Panel hidden, handle visible at edge
+   *   - 'peek': Panel partially visible (configurable width)
+   *   - 'full': Panel fully expanded
+   *
+   * Features:
+   *   - Click handle to cycle through states
+   *   - Double-click handle to toggle full/closed
+   *   - Drag handle to resize (optional)
+   *   - Keyboard shortcut support via onToggle callback
+   *
+   * @example
+   * ```svelte
+   * <CollapsiblePanel
+   *   position="left"
+   *   mode="scoot"
+   *   bind:snap
+   *   fullWidth={280}
+   *   peekWidth={60}
+   * >
+   *   {#snippet content()}
+   *     <SidebarContent />
+   *   {/snippet}
+   * </CollapsiblePanel>
+   * ```
+   */
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Panel position - left or right side */
+    position?: PanelPosition;
+    /** Display mode - overlay (floats) or scoot (pushes content) */
+    mode?: PanelMode;
+    /** Current snap state */
+    snap?: PanelSnap;
+    /** Full expanded width in pixels */
+    fullWidth?: number;
+    /** Peek (partial) width in pixels */
+    peekWidth?: number;
+    /** Handle width in pixels (visible when closed) */
+    handleWidth?: number;
+    /** Enable drag-to-resize */
+    resizable?: boolean;
+    /** Minimum width when resizing */
+    minWidth?: number;
+    /** Maximum width when resizing */
+    maxWidth?: number;
+    /** Panel content */
+    content: Snippet;
+    /** Called when snap state changes */
+    onSnapChange?: (snap: PanelSnap) => void;
+    /** Called when panel is toggled (for keyboard shortcuts) */
+    onToggle?: () => void;
+    /** Called when width changes from resize */
+    onResize?: (width: number) => void;
+    /** Additional CSS class for the panel */
+    class?: string;
+  }
+
+  let {
+    position = 'left',
+    mode = 'overlay',
+    snap = $bindable('closed'),
+    fullWidth = 280,
+    peekWidth = 60,
+    handleWidth = 16,
+    resizable = false,
+    minWidth = 60,
+    maxWidth = 600,
+    content,
+    onSnapChange,
+    onToggle,
+    onResize,
+    class: className = '',
+  }: Props = $props();
+
+  // ── Derived dimensions ───────────────────────────────────────────────────
+
+  let currentWidth = $derived.by(() => {
+    switch (snap) {
+      case 'full': return fullWidth;
+      case 'peek': return peekWidth;
+      case 'closed': return 0;
+      default: return 0;
+    }
+  });
+
+  let isVisible = $derived(snap !== 'closed');
+  let isFull = $derived(snap === 'full');
+
+  // ── Drag resize state ─────────────────────────────────────────────────────
+
+  let isDragging = $state(false);
+  let dragStartX = $state(0);
+  let dragStartWidth = $state(0);
+
+  // ── Handle interactions ───────────────────────────────────────────────────
+
+  function handleClick() {
+    // Cycle: closed -> peek -> full -> closed
+    const next: Record<PanelSnap, PanelSnap> = {
+      closed: 'peek',
+      peek: 'full',
+      full: 'closed',
+    };
+    snap = next[snap];
+    onSnapChange?.(snap);
+    onToggle?.();
+  }
+
+  function handleDblClick() {
+    // Toggle between full and closed (skip peek)
+    snap = snap === 'full' ? 'closed' : 'full';
+    onSnapChange?.(snap);
+    onToggle?.();
+  }
+
+  // ── Drag resize handlers ─────────────────────────────────────────────────
+
+  function handlePointerDown(e: PointerEvent) {
+    if (!resizable || snap === 'closed') return;
+    e.preventDefault();
+    isDragging = true;
+    dragStartX = e.clientX;
+    dragStartWidth = currentWidth;
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  }
+
+  function handlePointerMove(e: PointerEvent) {
+    if (!isDragging) return;
+    e.preventDefault();
+
+    const delta = position === 'left'
+      ? e.clientX - dragStartX
+      : dragStartX - e.clientX;
+
+    let newWidth = dragStartWidth + delta;
+    newWidth = Math.max(minWidth, Math.min(maxWidth, newWidth));
+
+    // Auto-snap based on width thresholds
+    if (newWidth < minWidth + 20) {
+      snap = 'closed';
+    } else if (newWidth < (peekWidth + fullWidth) / 2) {
+      snap = 'peek';
+    } else {
+      snap = 'full';
+    }
+
+    onResize?.(newWidth);
+  }
+
+  function handlePointerUp(e: PointerEvent) {
+    if (!isDragging) return;
+    isDragging = false;
+    (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+    onSnapChange?.(snap);
+  }
+
+  // ── Keyboard support ───────────────────────────────────────────────────────
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleClick();
+    }
+  }
+</script>
+
+<div
+  class="collapsible-panel"
+  class:collapsible-panel--left={position === 'left'}
+  class:collapsible-panel--right={position === 'right'}
+  class:collapsible-panel--overlay={mode === 'overlay'}
+  class:collapsible-panel--scoot={mode === 'scoot'}
+  class:collapsible-panel--visible={isVisible}
+  class:collapsible-panel--full={isFull}
+  class:collapsible-panel--dragging={isDragging}
+  style:--panel-width="{currentWidth}px"
+  style:--full-width="{fullWidth}px"
+  style:--peek-width="{peekWidth}px"
+  style:--handle-width="{handleWidth}px"
+>
+  <!-- Panel content area -->
+  <div
+    class="panel-content"
+    class:panel-content--visible={isVisible}
+    style:width="{isVisible ? currentWidth : 0}px"
+  >
+    {#if isVisible}
+      {@render content()}
+    {/if}
+  </div>
+
+  <!-- Toggle/resize handle -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="panel-handle"
+    class:panel-handle--left={position === 'left'}
+    class:panel-handle--right={position === 'right'}
+    class:panel-handle--resizable={resizable && isVisible}
+    class:panel-handle--expanded={isVisible}
+    onclick={handleClick}
+    ondblclick={handleDblClick}
+    onpointerdown={handlePointerDown}
+    onpointermove={handlePointerMove}
+    onpointerup={handlePointerUp}
+    onpointercancel={handlePointerUp}
+    onkeydown={handleKeydown}
+    role="button"
+    tabindex="0"
+    aria-label="{position} panel {isVisible ? 'collapse' : 'expand'}"
+    aria-pressed={isVisible}
+  >
+    <div class="panel-handle__bar"></div>
+  </div>
+</div>
+
+<style>
+  .collapsible-panel {
+    --panel-bg: var(--color-bg-panel, #1a1a1a);
+    --panel-border: var(--border-subtle, 1px solid rgba(255, 255, 255, 0.06));
+    --handle-bg: var(--color-bg-inset, #0f0f0f);
+    --handle-hover-bg: var(--color-bg-canvas, #141414);
+    --accent-color: var(--color-accent, #00ff41);
+    --transition-duration: 300ms;
+
+    display: flex;
+    align-items: stretch;
+    height: 100%;
+    position: relative;
+  }
+
+  /* Position variants */
+  .collapsible-panel--left {
+    flex-direction: row;
+  }
+
+  .collapsible-panel--right {
+    flex-direction: row-reverse;
+  }
+
+  /* Overlay mode: panel floats above content */
+  .collapsible-panel--overlay {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+  }
+
+  .collapsible-panel--overlay.collapsible-panel--left {
+    left: 0;
+  }
+
+  .collapsible-panel--overlay.collapsible-panel--right {
+    right: 0;
+  }
+
+  /* Scoot mode: panel is in-flow */
+  .collapsible-panel--scoot {
+    position: relative;
+    flex-shrink: 0;
+    min-width: 0;
+    width: auto;
+  }
+
+  .collapsible-panel--scoot:not(.collapsible-panel--visible) {
+    width: var(--handle-width);
+  }
+
+  /* Panel content container */
+  .panel-content {
+    background: var(--panel-bg);
+    border-right: var(--panel-border);
+    border-left: var(--panel-border);
+    overflow: hidden;
+    transition: width var(--transition-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
+    flex-shrink: 0;
+  }
+
+  .collapsible-panel--right .panel-content {
+    border-right: none;
+    border-left: var(--panel-border);
+  }
+
+  .panel-content--visible {
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  /* Handle */
+  .panel-handle {
+    width: var(--handle-width);
+    min-width: var(--handle-width);
+    background: var(--handle-bg);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+    transition: background 0.15s ease;
+    min-height: 100%;
+  }
+
+  .panel-handle:hover {
+    background: var(--handle-hover-bg);
+  }
+
+  .panel-handle--resizable {
+    cursor: ew-resize;
+  }
+
+  .panel-handle--left {
+    border-right: var(--panel-border);
+  }
+
+  .panel-handle--right {
+    border-left: var(--panel-border);
+  }
+
+  /* Simple vertical bar handle - full height visual */
+  .panel-handle__bar {
+    width: 2px;
+    height: 64px;
+    background: var(--color-text-muted, #555);
+    border-radius: var(--shape-border-radius, 1px);
+    transition: all 0.15s ease;
+    flex-shrink: 0;
+  }
+
+  .panel-handle:hover .panel-handle__bar {
+    background: var(--color-text-primary, #ccc);
+    box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
+  }
+
+  .panel-handle--expanded .panel-handle__bar {
+    background: var(--accent-color);
+    box-shadow: 0 0 6px var(--accent-color);
+    opacity: 0.6;
+  }
+
+  .collapsible-panel--dragging .panel-handle__bar {
+    background: var(--accent-color);
+    box-shadow: 0 0 8px var(--accent-color);
+    opacity: 1;
+  }
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .panel-content {
+      transition: none;
+    }
+  }
+
+  /* Focus visible for accessibility */
+  .panel-handle:focus-visible {
+    outline: 2px solid var(--accent-color);
+    outline-offset: -2px;
+  }
+</style>

package/dist/fabric/layout/CollapsiblePanel.svelte.d.ts

@@ -0,0 +1,74 @@
+export type PanelPosition = 'left' | 'right';
+export type PanelMode = 'overlay' | 'scoot';
+export type PanelSnap = 'closed' | 'peek' | 'full';
+/**
+   * CollapsiblePanel — Reusable side panel with toggle handle
+   *
+   * Based on Ryu's BoardDrawer pattern (wt-XXX).
+   * Provides a vertical handle bar that can toggle/resize the panel.
+   *
+   * Modes:
+   *   - 'overlay': Panel slides over content (z-index above)
+   *   - 'scoot': Panel pushes content (grid/flex layout shifts)
+   *
+   * Snap states:
+   *   - 'closed': Panel hidden, handle visible at edge
+   *   - 'peek': Panel partially visible (configurable width)
+   *   - 'full': Panel fully expanded
+   *
+   * Features:
+   *   - Click handle to cycle through states
+   *   - Double-click handle to toggle full/closed
+   *   - Drag handle to resize (optional)
+   *   - Keyboard shortcut support via onToggle callback
+   *
+   * @example
+   * ```svelte
+   * <CollapsiblePanel
+   *   position="left"
+   *   mode="scoot"
+   *   bind:snap
+   *   fullWidth={280}
+   *   peekWidth={60}
+   * >
+   *   {#snippet content()}
+   *     <SidebarContent />
+   *   {/snippet}
+   * </CollapsiblePanel>
+   * ```
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Panel position - left or right side */
+    position?: PanelPosition;
+    /** Display mode - overlay (floats) or scoot (pushes content) */
+    mode?: PanelMode;
+    /** Current snap state */
+    snap?: PanelSnap;
+    /** Full expanded width in pixels */
+    fullWidth?: number;
+    /** Peek (partial) width in pixels */
+    peekWidth?: number;
+    /** Handle width in pixels (visible when closed) */
+    handleWidth?: number;
+    /** Enable drag-to-resize */
+    resizable?: boolean;
+    /** Minimum width when resizing */
+    minWidth?: number;
+    /** Maximum width when resizing */
+    maxWidth?: number;
+    /** Panel content */
+    content: Snippet;
+    /** Called when snap state changes */
+    onSnapChange?: (snap: PanelSnap) => void;
+    /** Called when panel is toggled (for keyboard shortcuts) */
+    onToggle?: () => void;
+    /** Called when width changes from resize */
+    onResize?: (width: number) => void;
+    /** Additional CSS class for the panel */
+    class?: string;
+}
+declare const CollapsiblePanel: import("svelte").Component<Props, {}, "snap">;
+type CollapsiblePanel = ReturnType<typeof CollapsiblePanel>;
+export default CollapsiblePanel;
+//# sourceMappingURL=CollapsiblePanel.svelte.d.ts.map

package/dist/fabric/layout/CollapsiblePanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsiblePanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/layout/CollapsiblePanel.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAC5C,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAGrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,gEAAgE;IAChE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yBAAyB;IACzB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oBAAoB;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwIH,QAAA,MAAM,gBAAgB,+CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/fabric/layout/GlassBox.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+  /**
+   * GlassBox - Fabric Component
+   * 
+   * A modal overlay for agent handoff scenarios.
+   * Decoupled from shell stores - uses props/callbacks for all state.
+   * 
+   * @package @kos/design-system/fabric/layout
+   * @adr 2026-04-12-leap-substrate-refactor-001
+   */
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    active: boolean;
+    reason: string | null;
+    taskId?: string | null;
+    description?: string;
+    ondone?: () => void;
+    onabandon?: () => void;
+    children?: Snippet;
+  }
+
+  let { active, reason, taskId, description, ondone, onabandon, children }: Props = $props();
+
+  function reasonLabel(r: string | null): string {
+    switch (r) {
+      case 'Captcha': return 'A CAPTCHA IS BLOCKING THE AGENT.';
+      case 'AuthWall': return 'A LOGIN WALL IS BLOCKING THE AGENT.';
+      case 'PaymentRequired': return 'PAYMENT IS REQUIRED TO CONTINUE.';
+      case 'ConsentGate': return 'A CONSENT OR AGE GATE IS BLOCKING THE AGENT.';
+      case 'InteractiveForm': return description || 'AN INTERACTIVE FORM REQUIRES YOUR INPUT.';
+      default: return 'THE AGENT NEEDS YOUR HELP TO CONTINUE.';
+    }
+  }
+</script>
+
+{#if active}
+  <div class="glass-box-overlay scanlines" role="dialog" aria-modal="true" aria-label="Agent handoff required">
+    <div class="glass-box-panel">
+      <div class="glass-box-header">
+        <span class="glass-box-icon">⬡</span>
+        <span class="glass-box-title">AGENT NEEDS YOU</span>
+        {#if taskId}
+          <span class="glass-box-task-id">{taskId}</span>
+        {/if}
+      </div>
+
+      <p class="glass-box-reason">{reasonLabel(reason)}</p>
+
+      {#if description && reason !== 'InteractiveForm'}
+        <p class="glass-box-description">{description}</p>
+      {/if}
+
+      <div class="glass-box-viewport">
+        {@render children?.()}
+      </div>
+
+      <div class="glass-box-actions">
+        <button
+          class="glass-box-abandon"
+          onclick={() => onabandon?.()}
+        >
+          ABANDON RESEARCH
+        </button>
+        <button
+          class="glass-box-done"
+          onclick={() => ondone?.()}
+        >
+          DONE — CONTINUE →
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .glass-box-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9000;
+  }
+
+  .glass-box-panel {
+    width: min(720px, 90vw);
+    max-height: 80vh;
+    background: var(--color-bg-panel);
+    border: 2px solid var(--color-accent);
+    border-radius: 0; /* Military sharp edges */
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-shadow: var(--shadow-accent-glow);
+  }
+
+  .glass-box-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 14px 18px;
+    border-bottom: 2px solid var(--border-default);
+    background: var(--color-bg-panel-elevated);
+  }
+
+  .glass-box-icon {
+    color: var(--color-accent);
+    font-size: 16px;
+  }
+
+  .glass-box-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    flex: 1;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .glass-box-task-id {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--color-text-secondary);
+    background: var(--color-bg-canvas);
+    padding: 2px 8px;
+    border-radius: 0;
+  }
+
+  .glass-box-reason {
+    margin: 14px 18px 6px;
+    font-size: 13px;
+    color: var(--color-text-primary);
+    line-height: 1.5;
+  }
+
+  .glass-box-description {
+    margin: 0 18px 14px;
+    font-size: 12px;
+    color: var(--color-text-secondary);
+  }
+
+  .glass-box-viewport {
+    flex: 1;
+    overflow: auto;
+    margin: 0 18px;
+    background: var(--color-bg-canvas);
+    border: 2px solid var(--border-default);
+    border-radius: 0;
+    min-height: 200px;
+  }
+
+  .glass-box-actions {
+    display: flex;
+    justify-content: space-between;
+    padding: 14px 18px;
+    border-top: 2px solid var(--border-default);
+    gap: 10px;
+  }
+
+  .glass-box-abandon {
+    padding: 8px 16px;
+    background: transparent;
+    border: 2px solid var(--border-default);
+    border-radius: 0;
+    color: var(--color-text-secondary);
+    font-size: 13px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+    transition: border-color 0.15s, color 0.15s, background 0.15s;
+  }
+
+  .glass-box-abandon:hover {
+    border-color: var(--color-error);
+    color: var(--color-error);
+    background: rgba(248, 81, 73, 0.1);
+  }
+
+  .glass-box-done {
+    padding: 8px 20px;
+    background: var(--color-accent);
+    border: 2px solid var(--color-accent);
+    border-radius: 0;
+    color: #0d1117;
+    font-size: 13px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+
+  .glass-box-done:hover {
+    background: var(--color-accent-hover);
+    border-color: var(--color-accent-hover);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .glass-box-panel { transition: none; }
+    .glass-box-abandon:hover { background: none; }
+    .glass-box-done:hover { background: none; }
+  }
+</style>

package/dist/fabric/layout/GlassBox.svelte.d.ts

@@ -0,0 +1,23 @@
+/**
+   * GlassBox - Fabric Component
+   *
+   * A modal overlay for agent handoff scenarios.
+   * Decoupled from shell stores - uses props/callbacks for all state.
+   *
+   * @package @kos/design-system/fabric/layout
+   * @adr 2026-04-12-leap-substrate-refactor-001
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    active: boolean;
+    reason: string | null;
+    taskId?: string | null;
+    description?: string;
+    ondone?: () => void;
+    onabandon?: () => void;
+    children?: Snippet;
+}
+declare const GlassBox: import("svelte").Component<Props, {}, "">;
+type GlassBox = ReturnType<typeof GlassBox>;
+export default GlassBox;
+//# sourceMappingURL=GlassBox.svelte.d.ts.map

package/dist/fabric/layout/GlassBox.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlassBox.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/layout/GlassBox.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;KAQK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAwDH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}