@workflow/web-shared 5.0.0-beta.26 → 5.0.0-beta.27

package/src/components/sidebar/events-list.tsx

@@ -1,8 +1,18 @@
 'use client';
 
-import { EVENT_DATA_REF_FIELDS, type Event } from '@workflow/world';
+import type { Event } from '@workflow/world';
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { hasEncryptedFields, isExpiredMarker } from '../../lib/hydration';
+import {
+  getEventDataRefFields,
+  hasEncryptedFields,
+  isExpiredMarker,
+} from '../../lib/hydration';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+} from '../ui/collapsible';
 import { RunClickContext, StreamClickContext } from '../ui/data-inspector';
 import { ErrorCard } from '../ui/error-card';
 import { ErrorStackBlock, isStructuredError } from '../ui/error-stack-block';
@@ -10,7 +20,6 @@ import { Skeleton } from '../ui/skeleton';
 import { TimestampTooltip } from '../ui/timestamp-tooltip';
 import { AttrSetEventBlock } from './attributes-block';
 import { CopyableDataBlock, EncryptedDataBlock } from './copyable-data-block';
-import { DetailCard } from './detail-card';
 
 /**
  * Event types whose eventData contains an error field with a StructuredError.
@@ -143,20 +152,9 @@ function EventItem({
   const displayPayload = isLoading ? loadedData : mergedDisplay;
 
   return (
-    <DetailCard
+    <CollapsibleRoot
       variant="card"
-      summaryClassName="px-3 py-2"
-      summary={
-        <div className="flex w-full items-center justify-between gap-3">
-          <span className="text-gray-1000 text-label-12 font-mono">
-            {event.eventType}
-          </span>
-          <span className="shrink-0 text-label-13 text-gray-900">
-            {displayedCreatedAtTime}
-          </span>
-        </div>
-      }
-      onToggle={
+      onOpenChange={
         canHaveData
           ? (open) => {
               if (open) handleExpand();
@@ -164,65 +162,79 @@ function EventItem({
           : undefined
       }
     >
-      {/* Event attributes */}
-      <div className="flex flex-col bg-background-200 [&:has(+_*)]:border-b [&:has(+_*)]:border-gray-alpha-400">
-        {showSeparateEventOccurrenceTimestamps && occurredAt && (
-          <div className="flex items-center justify-between gap-2 py-2 px-3">
-            <span className="text-label-12 text-gray-900">Occurred</span>
-            <TimestampTooltip date={occurredAt}>
-              <span className="max-w-[70%] truncate text-right text-label-12 font-mono">
-                {formatEventTimestamp(occurredAt)}
-              </span>
-            </TimestampTooltip>
-          </div>
-        )}
-        <div className="flex items-center justify-between gap-2 py-2 px-3">
-          <span className="text-label-12 text-gray-900">Event ID</span>
-          <span className="max-w-[70%] truncate text-right text-label-12 font-mono">
-            {event.eventId}
+      <CollapsibleTrigger className="px-3 py-2">
+        <div className="flex w-full items-center justify-between gap-3">
+          <span className="text-gray-1000 text-label-12 font-mono">
+            {event.eventType}
+          </span>
+          <span className="shrink-0 text-label-13 text-gray-900">
+            {displayedCreatedAtTime}
           </span>
         </div>
-        {event.correlationId && (
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        {/* Event attributes */}
+        <div className="flex flex-col bg-background-200 [&:has(+_*)]:border-b [&:has(+_*)]:border-gray-alpha-400">
+          {showSeparateEventOccurrenceTimestamps && occurredAt && (
+            <div className="flex items-center justify-between gap-2 py-2 px-3">
+              <span className="text-label-12 text-gray-900">Occurred</span>
+              <TimestampTooltip date={occurredAt}>
+                <span className="max-w-[70%] truncate text-right text-label-12 font-mono">
+                  {formatEventTimestamp(occurredAt)}
+                </span>
+              </TimestampTooltip>
+            </div>
+          )}
           <div className="flex items-center justify-between gap-2 py-2 px-3">
-            <span className="text-label-12 text-gray-900">Correlation ID</span>
+            <span className="text-label-12 text-gray-900">Event ID</span>
             <span className="max-w-[70%] truncate text-right text-label-12 font-mono">
-              {event.correlationId}
+              {event.eventId}
             </span>
           </div>
-        )}
-      </div>
-
-      {/* Loading state */}
-      {isLoading && (
-        <div className="p-3">
-          <Skeleton className="h-4 w-[35%]" />
-          <Skeleton className="mt-2 h-4 w-[90%]" />
-          <Skeleton className="mt-2 h-4 w-[75%]" />
+          {event.correlationId && (
+            <div className="flex items-center justify-between gap-2 py-2 px-3">
+              <span className="text-label-12 text-gray-900">
+                Correlation ID
+              </span>
+              <span className="max-w-[70%] truncate text-right text-label-12 font-mono">
+                {event.correlationId}
+              </span>
+            </div>
+          )}
         </div>
-      )}
 
-      {/* Error state */}
-      {loadError && (
-        <ErrorCard
-          title="Failed to load event data"
-          details={loadError}
-          className="mt-2"
-        />
-      )}
+        {/* Loading state */}
+        {isLoading && (
+          <div className="p-3">
+            <Skeleton className="h-4 w-[35%]" />
+            <Skeleton className="mt-2 h-4 w-[90%]" />
+            <Skeleton className="mt-2 h-4 w-[75%]" />
+          </div>
+        )}
 
-      {/* Event data */}
-      {displayPayload != null && (
-        <div className="[&>div]:border-none [&>div]:rounded-none">
-          <EventDataBlock eventType={event.eventType} data={displayPayload} />
-        </div>
-      )}
-    </DetailCard>
+        {/* Error state */}
+        {loadError && (
+          <ErrorCard
+            title="Failed to load event data"
+            details={loadError}
+            className="mt-2"
+          />
+        )}
+
+        {/* Event data */}
+        {displayPayload != null && (
+          <div className="[&>div]:border-none [&>div]:rounded-none">
+            <EventDataBlock eventType={event.eventType} data={displayPayload} />
+          </div>
+        )}
+      </CollapsibleContent>
+    </CollapsibleRoot>
   );
 }
 
 /**
  * Check if an eventData object has only expired marker values in ref/payload
- * fields for this event type (see {@link EVENT_DATA_REF_FIELDS}). Other keys
+ * fields for this event type (see {@link getEventDataRefFields}). Other keys
  * (e.g. `resumeAt`, `stepName`) are ignored.
  */
 function hasOnlyExpiredFields(data: unknown, eventType: string): boolean {
@@ -230,7 +242,7 @@ function hasOnlyExpiredFields(data: unknown, eventType: string): boolean {
     return false;
   }
   const record = data as Record<string, unknown>;
-  const refKeys = EVENT_DATA_REF_FIELDS[eventType] ?? [];
+  const refKeys = getEventDataRefFields(eventType);
   const presentKeys = refKeys.filter((k) => k in record);
   return (
     presentKeys.length > 0 &&
@@ -341,41 +353,44 @@ export function EventsList({
   const hasEvents = sortedEvents.length > 0 && !error;
 
   if (!hasEvents && !isLoading) {
-    return <DetailCard summary="Events" disabled />;
+    return <Collapsible label="Events" disabled />;
   }
 
   return (
     <RunClickContext.Provider value={onRunClick}>
       <StreamClickContext.Provider value={onStreamClick}>
-        <DetailCard summary="Events" contentClassName="mb-0" defaultOpen>
-          {isLoading ? (
-            <div className="flex flex-col -mx-4">
-              {[0, 1, 2].map((i) => (
-                <div
-                  key={i}
-                  className="flex items-center justify-between gap-3 bg-background-200 px-4 py-2"
-                >
-                  <Skeleton className="h-4 w-32 rounded" />
-                  <Skeleton className="h-3 w-16 rounded" />
-                </div>
-              ))}
-            </div>
-          ) : (
-            <div className="flex flex-col -mx-4">
-              {sortedEvents.map((event) => (
-                <EventItem
-                  key={event.eventId}
-                  event={event}
-                  onLoadEventData={onLoadEventData}
-                  encryptionKey={encryptionKey}
-                  showSeparateEventOccurrenceTimestamps={
-                    showSeparateEventOccurrenceTimestamps
-                  }
-                />
-              ))}
-            </div>
-          )}
-        </DetailCard>
+        <CollapsibleRoot defaultOpen>
+          <CollapsibleTrigger>Events</CollapsibleTrigger>
+          <CollapsibleContent className="mb-0">
+            {isLoading ? (
+              <div className="flex flex-col -mx-4">
+                {[0, 1, 2].map((i) => (
+                  <div
+                    key={i}
+                    className="flex items-center justify-between gap-3 bg-background-200 px-4 py-2"
+                  >
+                    <Skeleton className="h-4 w-32 rounded" />
+                    <Skeleton className="h-3 w-16 rounded" />
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="flex flex-col -mx-4">
+                {sortedEvents.map((event) => (
+                  <EventItem
+                    key={event.eventId}
+                    event={event}
+                    onLoadEventData={onLoadEventData}
+                    encryptionKey={encryptionKey}
+                    showSeparateEventOccurrenceTimestamps={
+                      showSeparateEventOccurrenceTimestamps
+                    }
+                  />
+                ))}
+              </div>
+            )}
+          </CollapsibleContent>
+        </CollapsibleRoot>
       </StreamClickContext.Provider>
     </RunClickContext.Provider>
   );

package/src/components/ui/collapsible.tsx

@@ -0,0 +1,219 @@
+'use client';
+
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import {
+  createContext,
+  type ReactNode,
+  type SyntheticEvent,
+  useContext,
+  useState,
+} from 'react';
+import { cn } from '../../lib/cn';
+
+type CollapsibleVariant = 'section' | 'card';
+
+type CollapsibleContextValue = {
+  variant: CollapsibleVariant;
+  disabled: boolean;
+};
+
+const CollapsibleContext = createContext<CollapsibleContextValue | null>(null);
+
+function useCollapsibleContext(part: string): CollapsibleContextValue {
+  const context = useContext(CollapsibleContext);
+  if (!context) {
+    throw new Error(
+      `<Collapsible${part}> must be rendered inside <CollapsibleRoot>`
+    );
+  }
+  return context;
+}
+
+type CollapsibleRootProps = {
+  children: ReactNode;
+  variant?: CollapsibleVariant;
+  disabled?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+};
+
+/**
+ * Low-level collapsible container. Use this together with `CollapsibleTrigger`
+ * and `CollapsibleContent` when you need to override the styling of individual
+ * parts. For the common case, prefer the all-in-one `Collapsible`.
+ */
+export function CollapsibleRoot({
+  children,
+  variant = 'section',
+  disabled = false,
+  defaultOpen = false,
+  onOpenChange,
+  className,
+}: CollapsibleRootProps) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  const handleToggle = (event: SyntheticEvent<HTMLDetailsElement>) => {
+    // React bubbles the `toggle` event even though the native one doesn't, so
+    // a nested <details> (e.g. an event card inside the Events section)
+    // collapsing would otherwise flip this card. Only react to direct toggles.
+    if (event.target !== event.currentTarget) return;
+    const next = event.currentTarget.open;
+    setOpen(next);
+    onOpenChange?.(next);
+  };
+
+  const details = (
+    <details
+      data-slot="collapsible"
+      data-state={open ? 'open' : 'closed'}
+      open={open}
+      onToggle={disabled ? undefined : handleToggle}
+      className={cn(
+        variant === 'card'
+          ? 'group/card border-gray-alpha-400 last:border-b'
+          : 'group',
+        className
+      )}
+    >
+      <CollapsibleContext.Provider value={{ variant, disabled }}>
+        {children}
+      </CollapsibleContext.Provider>
+    </details>
+  );
+
+  if (variant === 'card') {
+    return details;
+  }
+
+  return (
+    <section className="-mx-4 border-t border-gray-alpha-400 px-4 py-2">
+      {details}
+    </section>
+  );
+}
+
+type CollapsibleTriggerProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+/** The clickable header of a `CollapsibleRoot`. */
+export function CollapsibleTrigger({
+  children,
+  className,
+}: CollapsibleTriggerProps) {
+  const { variant, disabled } = useCollapsibleContext('Trigger');
+
+  if (variant === 'card') {
+    return (
+      <summary
+        data-slot="collapsible-trigger"
+        className={cn(
+          'flex cursor-pointer list-none items-center gap-1.5 border-t border-gray-alpha-400 bg-background-200 px-3 py-4 hover:bg-gray-100 [&::-webkit-details-marker]:hidden',
+          className
+        )}
+      >
+        <ChevronRight
+          size={14}
+          className="shrink-0 text-gray-700 group-hover/card:text-gray-1000 group-open/card:rotate-90"
+        />
+        {children}
+      </summary>
+    );
+  }
+
+  // Shared row metrics keep every header the same height regardless of variant.
+  const row =
+    'flex h-9 items-center gap-2 -mx-2 px-2 text-heading-14 font-medium list-none [&::-webkit-details-marker]:hidden';
+
+  if (disabled) {
+    return (
+      <summary
+        data-slot="collapsible-trigger"
+        className={cn(row, 'pointer-events-none text-gray-700', className)}
+      >
+        <span className="min-w-0 flex-1">{children}</span>
+      </summary>
+    );
+  }
+
+  return (
+    <summary
+      data-slot="collapsible-trigger"
+      className={cn(
+        row,
+        'group/trigger cursor-pointer rounded hover:bg-gray-alpha-100',
+        className
+      )}
+    >
+      <span className="relative isolate h-3.5 w-3.5 shrink-0 text-gray-700 group-hover/trigger:text-gray-1000">
+        <ChevronRight
+          size={14}
+          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-100 group-open:opacity-0"
+        />
+        <ChevronDown
+          size={14}
+          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 group-open:opacity-100"
+        />
+      </span>
+      <span className="min-w-0 flex-1">{children}</span>
+    </summary>
+  );
+}
+
+type CollapsibleContentProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+/** The collapsible body of a `CollapsibleRoot`. */
+export function CollapsibleContent({
+  children,
+  className,
+}: CollapsibleContentProps) {
+  const { variant } = useCollapsibleContext('Content');
+  return (
+    <div
+      data-slot="collapsible-content"
+      className={cn(variant === 'section' && 'mt-2 mb-3', className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+type CollapsibleProps = {
+  /** Header content shown in the trigger row. */
+  label: ReactNode;
+  /** Body content. Omit for a header-only (e.g. disabled or skeleton) row. */
+  children?: ReactNode;
+  disabled?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+
+/**
+ * All-in-one collapsible section: a labeled header plus body content. This is
+ * the component to reach for in most cases. When you need to override the
+ * styling of a specific part, compose `CollapsibleRoot`, `CollapsibleTrigger`,
+ * and `CollapsibleContent` directly instead.
+ */
+export function Collapsible({
+  label,
+  children,
+  disabled,
+  defaultOpen,
+  onOpenChange,
+}: CollapsibleProps) {
+  return (
+    <CollapsibleRoot
+      disabled={disabled}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      <CollapsibleTrigger>{label}</CollapsibleTrigger>
+      {children != null && <CollapsibleContent>{children}</CollapsibleContent>}
+    </CollapsibleRoot>
+  );
+}

package/src/index.ts

@@ -14,13 +14,6 @@ export {
   waitEventsToWaitEntity,
 } from './components/workflow-traces/trace-span-construction';
 export type { EventAnalysis } from './lib/event-analysis';
-export {
-  parseExactWorkflowSearchId,
-  looksLikeWorkflowIdSearchInput,
-  type ExactWorkflowSearchId,
-  type ExactWorkflowSearchIdKind,
-  type ExactIdSearchResult,
-} from './lib/exact-event-search-id';
 export {
   analyzeEvents,
   hasPendingHooksFromEvents,
@@ -40,6 +33,13 @@ export {
   materializeSteps,
   materializeWaits,
 } from './lib/event-materialization';
+export {
+  type ExactIdSearchResult,
+  type ExactWorkflowSearchId,
+  type ExactWorkflowSearchIdKind,
+  looksLikeWorkflowIdSearchInput,
+  parseExactWorkflowSearchId,
+} from './lib/exact-event-search-id';
 export type { Revivers, StreamRef } from './lib/hydration';
 export {
   CLASS_INSTANCE_REF_TYPE,
@@ -49,6 +49,7 @@ export {
   getWebRevivers,
   hasEncryptedFields,
   hydrateResourceIO,
+  hydrateResourceIOAsync,
   hydrateResourceIOWithKey,
   isClassInstanceRef,
   isEncryptedMarker,

package/src/lib/hydration.ts

@@ -18,6 +18,20 @@ import {
 } from '@workflow/core/serialization-format';
 import { EVENT_DATA_REF_FIELDS } from '@workflow/world';
 
+const V4_EXTRA_EVENT_DATA_REF_FIELDS: Record<string, string[]> = {
+  run_started: ['input'],
+  step_started: ['input'],
+};
+
+export function getEventDataRefFields(eventType: string): string[] {
+  return [
+    ...new Set([
+      ...(EVENT_DATA_REF_FIELDS[eventType] ?? []),
+      ...(V4_EXTRA_EVENT_DATA_REF_FIELDS[eventType] ?? []),
+    ]),
+  ];
+}
+
 // Re-export types and utilities that consumers need
 export {
   CLASS_INSTANCE_REF_TYPE,
@@ -446,7 +460,7 @@ function replaceEncryptedAndExpiredWithMarkers<T>(resource: T): T {
   if (result.eventData && typeof result.eventData === 'object') {
     const eventType =
       typeof result.eventType === 'string' ? result.eventType : '';
-    const refKeys = EVENT_DATA_REF_FIELDS[eventType] ?? [];
+    const refKeys = getEventDataRefFields(eventType);
     const ed = { ...(result.eventData as Record<string, unknown>) };
     for (const key of refKeys) {
       if (key in ed) {
@@ -465,17 +479,31 @@ function replaceEncryptedAndExpiredWithMarkers<T>(resource: T): T {
  * When a key is provided, encrypted fields are decrypted before hydration.
  * This is the async version used when the user clicks "Decrypt" in the web UI.
  *
- * Handles both top-level fields (input, output, metadata) and nested
- * eventData subfields per `EVENT_DATA_REF_FIELDS` from `@workflow/world` for that event type.
+ * Handles both top-level fields (input, output, metadata) and nested eventData
+ * payload fields for that event type.
  */
 export async function hydrateResourceIOWithKey<T>(
   resource: T,
   key: Uint8Array
+): Promise<T> {
+  return hydrateResourceIOAsync(resource, key);
+}
+
+/**
+ * Async hydration for web display.
+ *
+ * This follows the same resource-field mapping as {@link hydrateResourceIO},
+ * but can also inflate compressed browser payloads through the registered
+ * zstd WASM decoder. When a key is provided, encrypted fields are decrypted
+ * first and then inflated/hydrated.
+ */
+export async function hydrateResourceIOAsync<T>(
+  resource: T,
+  key?: Uint8Array
 ): Promise<T> {
   const { hydrateDataWithKey } = await import(
     '@workflow/core/serialization-format'
   );
-  const { importKey } = await import('@workflow/core/encryption');
   // Payloads may be zstd-compressed (the Web DecompressionStream has no zstd);
   // register the WASM-backed browser decoder before hydrating. Idempotent and
   // lazy — the WASM is only compiled when a zstd payload is actually decoded.
@@ -483,25 +511,24 @@ export async function hydrateResourceIOWithKey<T>(
     './zstd-browser-decoder.js'
   );
   ensureZstdDecoderRegistered();
-  const cryptoKey = await importKey(key);
+  const cryptoKey = key
+    ? await import('@workflow/core/encryption').then(({ importKey }) =>
+        importKey(key)
+      )
+    : undefined;
   const revivers = getRevivers();
 
-  /** Extract original encrypted bytes from a marker or raw Uint8Array, then decrypt + hydrate */
-  async function decryptField(
-    value: unknown,
-    rev: Revivers,
-    k: Awaited<ReturnType<typeof importKey>>
-  ): Promise<unknown> {
+  async function hydrateField(value: unknown): Promise<unknown> {
     // Already-hydrated: encrypted marker with stored bytes
     if (isEncryptedMarker(value)) {
       const raw = (value as any).__encryptedData as Uint8Array;
-      return hydrateDataWithKey(raw, rev, k);
+      return cryptoKey ? hydrateDataWithKey(raw, revivers, cryptoKey) : value;
     }
-    // Raw encrypted Uint8Array (not yet hydrated)
+    // Raw Uint8Array: may be encrypted, compressed, or plain devalue.
     if (value instanceof Uint8Array) {
-      return hydrateDataWithKey(value, rev, k);
+      return hydrateDataWithKey(value, revivers, cryptoKey);
     }
-    // Not encrypted — return as-is
+    // Not serialized — return as-is.
     return value;
   }
 
@@ -511,29 +538,25 @@ export async function hydrateResourceIOWithKey<T>(
   // Decrypt + hydrate top-level serialized fields (runs, steps, hooks)
   for (const field of ['input', 'output', 'metadata', 'error']) {
     if (field in result) {
-      result[field] = await decryptField(result[field], revivers, cryptoKey);
+      result[field] = await hydrateField(result[field]);
     }
   }
 
-  // Decrypt + hydrate eventData subfields (events)
+  // Hydrate eventData subfields (events)
   if (result.eventData && typeof result.eventData === 'object') {
     const eventType =
       typeof result.eventType === 'string' ? result.eventType : '';
-    const refKeys = EVENT_DATA_REF_FIELDS[eventType] ?? [];
+    const refKeys = getEventDataRefFields(eventType);
     const eventData = { ...(result.eventData as Record<string, unknown>) };
     for (const field of refKeys) {
       if (field in eventData) {
-        eventData[field] = await decryptField(
-          eventData[field],
-          revivers,
-          cryptoKey
-        );
+        eventData[field] = await hydrateField(eventData[field]);
       }
     }
     result.eventData = eventData;
   }
 
-  return result as T;
+  return replaceEncryptedAndExpiredWithMarkers(result as T);
 }
 
 /**
@@ -552,7 +575,7 @@ export function hasEncryptedFields(resource: unknown): boolean {
 
   if (r.eventData && typeof r.eventData === 'object') {
     const eventType = typeof r.eventType === 'string' ? r.eventType : '';
-    const refKeys = EVENT_DATA_REF_FIELDS[eventType] ?? [];
+    const refKeys = getEventDataRefFields(eventType);
     const ed = r.eventData as Record<string, unknown>;
     for (const key of refKeys) {
       if (key in ed && isEncryptedMarker(ed[key])) return true;

package/dist/components/sidebar/detail-card.d.ts

@@ -1,13 +0,0 @@
-import { type ReactNode } from 'react';
-export declare function DetailCard({ summary, children, onToggle, disabled, defaultOpen, variant, trailing, summaryClassName, contentClassName, }: {
-    summary: ReactNode;
-    children?: ReactNode;
-    onToggle?: (open: boolean) => void;
-    disabled?: boolean;
-    defaultOpen?: boolean;
-    variant?: 'section' | 'card';
-    trailing?: ReactNode;
-    summaryClassName?: string;
-    contentClassName?: string;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=detail-card.d.ts.map

package/dist/components/sidebar/detail-card.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"detail-card.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/detail-card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAGjD,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,WAAmB,EACnB,OAAmB,EACnB,QAAQ,EACR,gBAAgB,EAChB,gBAAgB,GACjB,EAAE;IACD,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,2CAsHA"}