@teleporthq/teleport-plugin-next-workflows 0.45.9 → 0.45.13

package/__tests__/component-scope-interval.test.ts

@@ -0,0 +1,120 @@
+// An interval bound to a component runs INSIDE that component: its timer lives
+// in the component's own effect, where the component's state setters are, and
+// stops when the component is torn down. A page-scoped interval can do neither
+// for a component — its writes to component state are skipped — which is why
+// "switch the photo every 5 seconds" inside a component never worked.
+
+import { createNextWorkflowPlugin } from '../src/workflow-component-plugin'
+
+const rotationWorkflow = (scope: 'component' | 'page', config: Record<string, unknown>) => ({
+  id: 'wf-rotation',
+  name: 'Photo Rotation',
+  trigger: {
+    type: 'event-interval',
+    nodeId: 'trigger-interval',
+    scope,
+    config: { intervalMs: 5000, autoStart: true, ...config },
+  },
+  nodes: [
+    {
+      id: 'advance',
+      type: 'state-update-local-state',
+      config: { property: 'currentIndex', value: 1 },
+      stepNumber: 1,
+      label: 'Advance',
+    },
+  ],
+  edges: [{ id: 'e1', source: 'trigger-interval', target: 'advance' }],
+})
+
+const jsxComponentChunk = () => ({
+  type: 'chunk-type-ast',
+  name: 'jsx-component',
+  content: {
+    type: 'VariableDeclaration',
+    declarations: [
+      {
+        type: 'VariableDeclarator',
+        init: {
+          type: 'ArrowFunctionExpression',
+          body: {
+            type: 'BlockStatement',
+            body: [{ type: 'ReturnStatement', argument: null }],
+          },
+        },
+      },
+    ],
+  },
+})
+
+const getWorkflowModule = async (
+  uidl: Record<string, unknown>,
+  workflow: any,
+  isPage: boolean
+): Promise<string | null> => {
+  const plugin = createNextWorkflowPlugin({ isPage })
+  const structure: any = {
+    uidl: {
+      node: { type: 'element', content: { elementType: 'container', name: 'Container' } },
+      stateDefinitions: { currentIndex: { type: 'number', defaultValue: 0 } },
+      ...uidl,
+    },
+    chunks: [jsxComponentChunk()],
+    options: { workflows: { workflows: { [workflow.id]: workflow }, customNodes: {} } },
+    dependencies: {},
+  }
+  await plugin(structure)
+  const moduleChunk = structure.chunks.find((c: any) => c.name === 'workflow-module')
+  return moduleChunk ? String(moduleChunk.content) : null
+}
+
+describe('an interval bound to a component', () => {
+  const bound = { componentId: 'TQ_oneOfOne', componentName: 'One of One' }
+
+  it('is generated into that component, with its timer and its teardown', async () => {
+    const code = await getWorkflowModule(
+      { name: 'OneOfOne' },
+      rotationWorkflow('component', bound),
+      false
+    )
+
+    expect(code).not.toBeNull()
+    expect(code).toContain('Interval 5000ms')
+    expect(code).toContain('__iv_start_wf_rotation();')
+    expect(code).toContain('__iv_stop_wf_rotation();')
+    // The component's own handler factory, the one given its state setters.
+    expect(code).toContain('function __createWorkflowHandlers(stateSetters')
+  })
+
+  it('is generated into no page and no other component', async () => {
+    const intoPage = await getWorkflowModule(
+      { name: 'Home', outputOptions: { pageId: 'page-1', fileName: 'home' } },
+      rotationWorkflow('component', bound),
+      true
+    )
+    const intoOther = await getWorkflowModule(
+      { name: 'Footer' },
+      rotationWorkflow('component', bound),
+      false
+    )
+
+    expect(intoPage).toBeNull()
+    expect(intoOther).toBeNull()
+  })
+
+  it('leaves a page interval where it was: in its page, never in a component', async () => {
+    const intoPage = await getWorkflowModule(
+      { name: 'Home', outputOptions: { pageId: 'page-1', fileName: 'home' } },
+      rotationWorkflow('page', { pageId: 'page-1' }),
+      true
+    )
+    const intoComponent = await getWorkflowModule(
+      { name: 'OneOfOne' },
+      rotationWorkflow('page', { pageId: 'page-1' }),
+      false
+    )
+
+    expect(intoPage).toContain('Interval 5000ms')
+    expect(intoComponent).toBeNull()
+  })
+})

package/__tests__/element-trigger-context-fields.test.ts

@@ -0,0 +1,279 @@
+// What an element trigger hands its workflow, on both ways a handler reaches
+// the element: the React prop placed on it in the JSX, and the native listener
+// attached by id when the element is not in the component's own JSX.
+//
+// A click delivers the bound element's `data-*` attributes under the names the
+// static HTML export resolves (`data-tab-index` is `dataTabIndex`): a tab strip
+// repeats one authored button per tab, and the attribute is the only thing
+// that tells the buttons apart.
+
+import type { UIDLWorkflow } from '@teleporthq/teleport-types'
+import {
+  generateElementHandler,
+  generateUnmatchedElementFallback,
+} from '../src/workflow-component-plugin'
+
+const ELEMENT_ID = 'tab-button'
+const SAFE_ID = 'wf_tabs'
+
+const triggerInfo = (type: string, config: Record<string, unknown> = {}) => ({
+  workflow: {
+    id: 'wf-tabs',
+    name: 'Switch tab',
+    trigger: { nodeId: 'trigger', type, scope: 'element', config },
+    nodes: [],
+    edges: [],
+  } as unknown as UIDLWorkflow,
+  elementId: ELEMENT_ID,
+  reactProp: 'onClick',
+  triggerConfig: config,
+})
+
+type TriggerContext = Record<string, unknown>
+type Listener = (event: FakeEvent) => void
+
+interface FakeEvent {
+  type: string
+  target: FakeElement
+  currentTarget: FakeElement | null
+  clientX?: number
+  preventDefault: () => void
+  stopPropagation: () => void
+}
+
+/* The few things a handler touches on an element, behaving as a browser's do:
+   `dataset` holds the `data-*` attributes under camelCased keys, an event
+   bubbles to every ancestor with `currentTarget` set to the one being visited,
+   and `currentTarget` is null once the dispatch is over. */
+class FakeElement {
+  public dataset: Record<string, string> = {}
+  public parent: FakeElement | null = null
+  public formFields: Record<string, string> = {}
+  public value?: string
+  private listeners: Record<string, Listener[]> = {}
+
+  constructor(public id: string, dataAttributes: Record<string, string> = {}) {
+    for (const name of Object.keys(dataAttributes)) {
+      const key = name
+        .replace(/^data-/, '')
+        .replace(/-([a-z])/g, (_match, letter: string) => letter.toUpperCase())
+      this.dataset[key] = dataAttributes[name]
+    }
+  }
+
+  public append(child: FakeElement): FakeElement {
+    child.parent = this
+    return this
+  }
+
+  public addEventListener(type: string, listener: Listener): void {
+    this.listeners[type] = [...(this.listeners[type] || []), listener]
+  }
+
+  public removeEventListener(): void {
+    return undefined
+  }
+
+  public selfAndAncestors(): FakeElement[] {
+    return [this as FakeElement].concat(this.parent ? this.parent.selfAndAncestors() : [])
+  }
+
+  public dispatch(type: string, init: { clientX?: number } = {}): void {
+    const event: FakeEvent = {
+      type,
+      target: this,
+      currentTarget: null,
+      preventDefault: () => undefined,
+      stopPropagation: () => undefined,
+      ...init,
+    }
+    for (const visited of this.selfAndAncestors()) {
+      event.currentTarget = visited
+      ;(visited.listeners[type] || []).forEach((listener) => listener(event))
+    }
+    event.currentTarget = null
+  }
+}
+
+class FakeFormData {
+  constructor(private form: FakeElement) {}
+  public forEach(visit: (value: string, key: string) => void): void {
+    Object.keys(this.form.formFields).forEach((key) => visit(this.form.formFields[key], key))
+  }
+}
+
+const page = (bound: FakeElement, child: FakeElement) => {
+  bound.append(child)
+  const byId: Record<string, FakeElement> = { [bound.id]: bound, [child.id]: child }
+  const received: TriggerContext[] = []
+  const execWf = (_config: unknown, triggerContext: TriggerContext) => {
+    received.push(triggerContext)
+    return Promise.resolve({})
+  }
+  const document = { getElementById: (id: string) => byId[id] || null }
+  return { bound, child, document, received, execWf }
+}
+
+/** The React-prop handler, attached the way React attaches it: on the bound element. */
+const attachJsxHandler = (
+  site: ReturnType<typeof page>,
+  type: string,
+  domEvent: string,
+  config: Record<string, unknown> = {}
+) => {
+  const source = generateElementHandler(triggerInfo(type, config))
+  // eslint-disable-next-line @typescript-eslint/no-implied-eval
+  const handler = new Function(
+    '__execWf',
+    `__wfConfig_${SAFE_ID}`,
+    `__wfServerUrls_${SAFE_ID}`,
+    'FormData',
+    'window',
+    `return ${source};`
+  )(site.execWf, {}, {}, FakeFormData, {})
+  site.bound.addEventListener(domEvent, handler)
+  return source
+}
+
+const attachFallback = (
+  site: ReturnType<typeof page>,
+  type: string,
+  _domEvent: string,
+  config: Record<string, unknown> = {}
+) => {
+  const source = generateUnmatchedElementFallback(triggerInfo(type, config), SAFE_ID)
+  // eslint-disable-next-line @typescript-eslint/no-implied-eval
+  new Function(
+    'document',
+    'cleanups',
+    '__execWf',
+    `__wfConfig_${SAFE_ID}`,
+    `__wfServerUrls_${SAFE_ID}`,
+    'FormData',
+    source
+  )(site.document, [], site.execWf, {}, {}, FakeFormData)
+  return source
+}
+
+const tabPage = (dataAttributes: Record<string, string>) =>
+  page(new FakeElement(ELEMENT_ID, dataAttributes), new FakeElement('label'))
+
+const TAB_ATTRIBUTES = {
+  'data-tab-index': '2',
+  'data-panel-group-name': 'plans',
+  'data-element-id': 'shadow',
+}
+
+const clickLabel = (site: ReturnType<typeof page>) => site.child.dispatch('click', { clientX: 7 })
+
+describe('a click trigger delivers the bound element data attributes', () => {
+  const DATASET_MAPPING = `fields['data' + key.charAt(0).toUpperCase() + key.slice(1)]`
+
+  it.each([
+    ['the React prop', attachJsxHandler],
+    ['the native-listener fallback', attachFallback],
+  ])('through %s, read off the bound element when a child is clicked', (_name, attach) => {
+    const site = tabPage(TAB_ATTRIBUTES)
+    const source = attach(site, 'event-element-clicked', 'click')
+    expect(source).toContain(DATASET_MAPPING)
+
+    clickLabel(site)
+
+    expect(site.received).toHaveLength(1)
+    const [context] = site.received
+    expect(context.dataTabIndex).toBe('2')
+    expect(context.dataPanelGroupName).toBe('plans')
+    expect(context.elementId).toBe(ELEMENT_ID)
+    expect(context.clientX).toBe(7)
+    expect(typeof context.timestamp).toBe('number')
+  })
+
+  it.each([
+    ['the React prop', attachJsxHandler],
+    ['the native-listener fallback', attachFallback],
+  ])('through %s, an attribute never replaces a field of the trigger', (_name, attach) => {
+    // `data-element-id` is delivered as `dataElementId`; the trigger's own
+    // `elementId` is assigned after the attributes and stays what it was.
+    const site = tabPage(TAB_ATTRIBUTES)
+    attach(site, 'event-element-clicked', 'click')
+
+    clickLabel(site)
+
+    expect(site.received[0].dataElementId).toBe('shadow')
+    expect(site.received[0].elementId).toBe(ELEMENT_ID)
+  })
+
+  it('a debounced click still reads the bound element, after the event is over', async () => {
+    const site = tabPage(TAB_ATTRIBUTES)
+    attachJsxHandler(site, 'event-element-clicked', 'click', { debounce: 5 })
+
+    clickLabel(site)
+    await new Promise((resolve) => setTimeout(resolve, 30))
+
+    expect(site.received).toHaveLength(1)
+    expect(site.received[0].dataTabIndex).toBe('2')
+    expect(site.received[0].element).toBe(site.bound)
+  })
+
+  it('an element with no data attribute delivers the six trigger fields alone', () => {
+    const site = tabPage({})
+    attachJsxHandler(site, 'event-element-clicked', 'click')
+
+    clickLabel(site)
+
+    expect(Object.keys(site.received[0]).sort()).toEqual(
+      ['clientX', 'clientY', 'element', 'elementId', 'timestamp', 'triggerElement'].sort()
+    )
+  })
+})
+
+describe('the native-listener fallback delivers what the React prop delivers', () => {
+  it('a submitted form: every field at the top level, and under fields and formData', () => {
+    const formPage = () => {
+      const form = new FakeElement(ELEMENT_ID)
+      form.formFields = { email: 'a@b.co', plan: 'pro' }
+      return page(form, new FakeElement('email'))
+    }
+
+    const viaProp = formPage()
+    attachJsxHandler(viaProp, 'event-form-submitted', 'submit')
+    viaProp.bound.dispatch('submit')
+
+    const viaFallback = formPage()
+    const source = attachFallback(viaFallback, 'event-form-submitted', 'submit')
+    viaFallback.bound.dispatch('submit')
+
+    expect(source).toContain('Object.assign({}, formData, { fields: formData, formData: formData')
+    const [context] = viaFallback.received
+    expect(context.email).toBe('a@b.co')
+    expect(context.plan).toBe('pro')
+    expect(context.fields).toEqual({ email: 'a@b.co', plan: 'pro' })
+    expect(context.formData).toEqual({ email: 'a@b.co', plan: 'pro' })
+    expect(context.formId).toBe(ELEMENT_ID)
+    expect(Object.keys(context).sort()).toEqual(Object.keys(viaProp.received[0]).sort())
+  })
+
+  it('an element event: the control that fired as target, the bound element as currentTarget', () => {
+    const config = { eventType: 'change' }
+    const radioPage = () => {
+      const radio = new FakeElement('choice')
+      radio.value = 'b'
+      return page(new FakeElement(ELEMENT_ID), radio)
+    }
+
+    const viaProp = radioPage()
+    attachJsxHandler(viaProp, 'event-element-event', 'change', config)
+    viaProp.child.dispatch('change')
+
+    const viaFallback = radioPage()
+    const source = attachFallback(viaFallback, 'event-element-event', 'change', config)
+    viaFallback.child.dispatch('change')
+
+    expect(source).toContain(`target: event.target, currentTarget: __el_${SAFE_ID}`)
+    const [context] = viaFallback.received
+    expect(context.target).toBe(viaFallback.child)
+    expect(context.currentTarget).toBe(viaFallback.bound)
+    expect(context.value).toBe('b')
+    expect(Object.keys(context).sort()).toEqual(Object.keys(viaProp.received[0]).sort())
+  })
+})

package/__tests__/interval-control-event.test.ts

@@ -0,0 +1,217 @@
+// A timer with a control event is steered by the "Emit Custom Event" node,
+// which dispatches `workflow:custom:<name>`. The timer used to listen for the
+// bare name only, so an emitted control event reached nothing; and it could
+// only toggle, while workflows emit the event with a "start" or "stop" command.
+
+import type { UIDLWorkflow } from '@teleporthq/teleport-types'
+import { generateLifecycleTrigger } from '../src/workflow-component-plugin'
+import { generateTriggerCode } from '../src/trigger-generator'
+
+const CONTROL_EVENT = 'rotation-control'
+const EMITTED = `workflow:custom:${CONTROL_EVENT}`
+const SAFE_ID = 'wf_rotation'
+
+const intervalWorkflow = (config: Record<string, unknown> = {}): UIDLWorkflow =>
+  ({
+    id: 'wf-rotation',
+    name: 'Photo Rotation',
+    trigger: {
+      type: 'event-interval',
+      nodeId: 'trigger-interval',
+      scope: 'component',
+      config: {
+        intervalMs: 1000,
+        autoStart: true,
+        runWhileHidden: true,
+        controlEventName: CONTROL_EVENT,
+        componentId: 'TQ_card',
+        ...config,
+      },
+    },
+    nodes: [],
+    edges: [],
+  } as unknown as UIDLWorkflow)
+
+type Listener = (event: { detail?: unknown }) => void
+
+const fakeWindow = () => {
+  const listeners: Record<string, Listener[]> = {}
+  return {
+    listeners,
+    addEventListener: (type: string, listener: Listener) => {
+      listeners[type] = [...(listeners[type] || []), listener]
+    },
+    removeEventListener: (type: string, listener: Listener) => {
+      listeners[type] = (listeners[type] || []).filter((registered) => registered !== listener)
+    },
+    emit: (type: string, detail?: unknown) =>
+      (listeners[type] || []).forEach((listener) => listener({ detail })),
+    listenerCount: () =>
+      Object.keys(listeners).reduce((count, type) => count + listeners[type].length, 0),
+  }
+}
+
+interface RunningTimer {
+  source: string
+  window: ReturnType<typeof fakeWindow>
+  ticks: () => number
+  teardown: () => void
+}
+
+/** The timer as a component sets it up in its effect. */
+const inComponent = (config: Record<string, unknown> = {}): RunningTimer => {
+  const window = fakeWindow()
+  const cleanups: Array<() => void> = []
+  let ticks = 0
+  const source = generateLifecycleTrigger(intervalWorkflow(config), SAFE_ID)
+  // eslint-disable-next-line @typescript-eslint/no-implied-eval
+  new Function(
+    'window',
+    'document',
+    'cleanups',
+    '__execWf',
+    `__wfConfig_${SAFE_ID}`,
+    `__wfServerUrls_${SAFE_ID}`,
+    source
+  )(window, {}, cleanups, () => ticks++, {}, {})
+  return {
+    source,
+    window,
+    ticks: () => ticks,
+    teardown: () => cleanups.forEach((cleanup) => cleanup()),
+  }
+}
+
+/** The same timer in its native-listener form, whose statements return the teardown. */
+const asNativeTrigger = (config: Record<string, unknown> = {}): RunningTimer => {
+  const window = fakeWindow()
+  let ticks = 0
+  const source = generateTriggerCode(intervalWorkflow(config), 'runWorkflow')
+  // eslint-disable-next-line @typescript-eslint/no-implied-eval
+  const teardown = new Function('window', 'document', 'runWorkflow', source)(
+    window,
+    {},
+    () => ticks++
+  )
+  return { source, window, ticks: () => ticks, teardown }
+}
+
+describe.each([
+  ['in a component', inComponent],
+  ['as a native trigger', asNativeTrigger],
+])('a timer with a control event, %s', (_name, start) => {
+  beforeEach(() => jest.useFakeTimers())
+  afterEach(() => jest.useRealTimers())
+
+  it('hears the event the emit node dispatches, and the bare name', () => {
+    const timer = start()
+
+    expect(Object.keys(timer.window.listeners).sort()).toEqual([CONTROL_EVENT, EMITTED].sort())
+    expect(timer.source).toContain(`window.addEventListener("${EMITTED}", `)
+    timer.teardown()
+  })
+
+  it('stops ticking on "stop" and resumes on "start"', () => {
+    const timer = start()
+    jest.advanceTimersByTime(3000)
+    expect(timer.ticks()).toBe(3)
+
+    timer.window.emit(EMITTED, 'stop')
+    jest.advanceTimersByTime(3000)
+    expect(timer.ticks()).toBe(3)
+
+    timer.window.emit(EMITTED, 'start')
+    jest.advanceTimersByTime(2000)
+    expect(timer.ticks()).toBe(5)
+    timer.teardown()
+  })
+
+  it('"start" while running, twice over, leaves one timer; "stop" while stopped stays stopped', () => {
+    const timer = start()
+    timer.window.emit(EMITTED, 'start')
+    timer.window.emit(EMITTED, 'start')
+    jest.advanceTimersByTime(3000)
+    expect(timer.ticks()).toBe(3)
+
+    timer.window.emit(EMITTED, 'stop')
+    timer.window.emit(EMITTED, 'stop')
+    jest.advanceTimersByTime(3000)
+    expect(timer.ticks()).toBe(3)
+    timer.teardown()
+  })
+
+  it.each([
+    ['action', { action: 'stop' }, { action: 'start' }],
+    ['command', { command: 'stop' }, { command: 'start' }],
+  ])('reads the command from an object detail: %s', (_key, stop, resume) => {
+    const timer = start({ autoStart: false })
+    jest.advanceTimersByTime(2000)
+    expect(timer.ticks()).toBe(0)
+
+    timer.window.emit(EMITTED, resume)
+    timer.window.emit(EMITTED, resume)
+    jest.advanceTimersByTime(2000)
+    expect(timer.ticks()).toBe(2)
+
+    timer.window.emit(EMITTED, stop)
+    jest.advanceTimersByTime(2000)
+    expect(timer.ticks()).toBe(2)
+    timer.teardown()
+  })
+
+  it.each([
+    ['no detail', undefined],
+    ['the emit node default, an empty object', {}],
+    ['a detail that names no command', { photo: 3 }],
+    ['an unknown word', 'pause'],
+  ])('toggles on an event with %s', (_case, detail) => {
+    const timer = start()
+
+    timer.window.emit(EMITTED, detail)
+    jest.advanceTimersByTime(2000)
+    expect(timer.ticks()).toBe(0)
+
+    timer.window.emit(EMITTED, detail)
+    jest.advanceTimersByTime(2000)
+    expect(timer.ticks()).toBe(2)
+    timer.teardown()
+  })
+
+  it('still answers the bare event name, and one dispatch is handled once', () => {
+    const timer = start()
+
+    // Handled twice, a toggle would leave the timer running.
+    timer.window.emit(CONTROL_EVENT)
+    jest.advanceTimersByTime(2000)
+    expect(timer.ticks()).toBe(0)
+
+    timer.window.emit(CONTROL_EVENT, 'start')
+    jest.advanceTimersByTime(1000)
+    expect(timer.ticks()).toBe(1)
+    timer.teardown()
+  })
+
+  it('teardown removes both listeners and stops the timer for good', () => {
+    const timer = start()
+    const [emitted] = timer.window.listeners[EMITTED]
+    expect(timer.window.listenerCount()).toBe(2)
+
+    timer.teardown()
+
+    expect(timer.window.listenerCount()).toBe(0)
+    jest.advanceTimersByTime(3000)
+    expect(timer.ticks()).toBe(0)
+    // A late event, delivered to the handler it once had, starts nothing.
+    emitted({ detail: 'start' })
+    jest.advanceTimersByTime(3000)
+    expect(timer.ticks()).toBe(0)
+  })
+
+  it('a timer without a control event listens for nothing', () => {
+    const timer = start({ controlEventName: undefined })
+
+    expect(timer.window.listenerCount()).toBe(0)
+    expect(timer.source).not.toContain('__iv_ctrlHandler_')
+    timer.teardown()
+  })
+})

package/dist/cjs/trigger-generator.d.ts

@@ -20,6 +20,8 @@ import { UIDLWorkflow } from '@teleporthq/teleport-types';
  *   `addEventListener` fallbacks).
  */
 export declare const formControlPropertyReads: (elementRef: string) => string;
+export declare const intervalControlListenerSource: (safeId: string, controlEventName: string) => string;
+export declare const intervalControlTeardownSource: (safeId: string, controlEventName: string) => string;
 export declare const generateTriggerCode: (workflow: UIDLWorkflow, workflowVarName: string) => string;
 export declare const TRACKER_IDS_EXPRESSION = "(typeof window !== 'undefined' && window.tpAnalytics && typeof window.tpAnalytics.ids === 'function' ? window.tpAnalytics.ids() : null)";
 export declare const TRACK_LEAD_SOURCE: (formId: string) => string;

package/dist/cjs/trigger-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"trigger-generator.d.ts","sourceRoot":"","sources":["../../src/trigger-generator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAGzD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,wBAAwB,eAAgB,MAAM,KAAG,MAC4B,CAAA;AAE1F,eAAO,MAAM,mBAAmB,aAAc,YAAY,mBAAmB,MAAM,KAAG,MA0DrF,CAAA;AAQD,eAAO,MAAM,sBAAsB,4IACwG,CAAA;AAI3I,eAAO,MAAM,iBAAiB,WAAY,MAAM,KAAG,MAC4H,CAAA"}
+{"version":3,"file":"trigger-generator.d.ts","sourceRoot":"","sources":["../../src/trigger-generator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAGzD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,wBAAwB,eAAgB,MAAM,KAAG,MAC4B,CAAA;AAiB1F,eAAO,MAAM,6BAA6B,WAAY,MAAM,oBAAoB,MAAM,KAAG,MAc5E,CAAA;AAEb,eAAO,MAAM,6BAA6B,WAAY,MAAM,oBAAoB,MAAM,KAAG,MAM5E,CAAA;AAEb,eAAO,MAAM,mBAAmB,aAAc,YAAY,mBAAmB,MAAM,KAAG,MA0DrF,CAAA;AAQD,eAAO,MAAM,sBAAsB,4IACwG,CAAA;AAI3I,eAAO,MAAM,iBAAiB,WAAY,MAAM,KAAG,MAC4H,CAAA"}