@korajs/devtools 0.1.0

package/dist/extension/panel.cjs

@@ -0,0 +1,220 @@
+"use strict";
+
+// src/ui/panel-state.ts
+function buildPanelModel(events2) {
+  const timeline = events2.map((entry) => ({
+    id: entry.id,
+    type: entry.event.type,
+    label: timelineLabel(entry.event),
+    color: timelineColor(entry.event.type),
+    receivedAt: entry.receivedAt,
+    dependsOn: extractCausalDependencies(entry.event)
+  }));
+  const conflicts = events2.flatMap((entry) => {
+    if (entry.event.type !== "merge:completed" && entry.event.type !== "merge:conflict") {
+      return [];
+    }
+    const trace = entry.event.trace;
+    return [
+      {
+        id: entry.id,
+        timestamp: entry.receivedAt,
+        collection: trace.operationA.collection,
+        field: trace.field,
+        strategy: trace.strategy,
+        tier: trace.tier,
+        inputA: trace.inputA,
+        inputB: trace.inputB,
+        output: trace.output,
+        constraintViolated: trace.constraintViolated
+      }
+    ];
+  });
+  const operations = events2.map((entry) => {
+    const operation = extractOperation(entry.event);
+    if (!operation) return null;
+    return {
+      id: entry.id,
+      timestamp: entry.receivedAt,
+      operationId: operation.id,
+      collection: operation.collection,
+      recordId: operation.recordId,
+      opType: operation.type,
+      data: operation.data,
+      causalDeps: operation.causalDeps,
+      nodeId: operation.nodeId,
+      sequenceNumber: operation.sequenceNumber
+    };
+  }).filter((item) => item !== null);
+  const network = buildNetworkStatus(events2, operations);
+  return {
+    timeline,
+    conflicts,
+    operations,
+    network
+  };
+}
+function buildNetworkStatus(events2, operations) {
+  let connected = false;
+  let quality = null;
+  let pendingAcks = 0;
+  let lastSyncAt = null;
+  let sentOps = 0;
+  let receivedOps = 0;
+  for (const entry of events2) {
+    switch (entry.event.type) {
+      case "sync:connected":
+        connected = true;
+        lastSyncAt = entry.receivedAt;
+        break;
+      case "sync:disconnected":
+        connected = false;
+        break;
+      case "connection:quality":
+        quality = entry.event.quality;
+        break;
+      case "sync:sent":
+        sentOps += entry.event.operations.length;
+        pendingAcks += entry.event.operations.length;
+        lastSyncAt = entry.receivedAt;
+        break;
+      case "sync:received":
+        receivedOps += entry.event.operations.length;
+        lastSyncAt = entry.receivedAt;
+        break;
+      case "sync:acknowledged":
+        pendingAcks = Math.max(0, pendingAcks - 1);
+        lastSyncAt = entry.receivedAt;
+        break;
+    }
+  }
+  const vector = /* @__PURE__ */ new Map();
+  for (const operation of operations) {
+    const current = vector.get(operation.nodeId) ?? 0;
+    if (operation.sequenceNumber > current) {
+      vector.set(operation.nodeId, operation.sequenceNumber);
+    }
+  }
+  return {
+    connected,
+    quality,
+    pendingAcks,
+    lastSyncAt,
+    sentOps,
+    receivedOps,
+    versionVector: [...vector.entries()].map(([nodeId, sequenceNumber]) => ({ nodeId, sequenceNumber })).sort((left, right) => left.nodeId.localeCompare(right.nodeId))
+  };
+}
+function timelineLabel(event) {
+  switch (event.type) {
+    case "operation:created":
+    case "operation:applied":
+      return `${event.operation.type} ${event.operation.collection}/${event.operation.recordId}`;
+    case "merge:started":
+      return `merge start ${event.operationA.collection}`;
+    case "merge:completed":
+      return `merge complete ${event.trace.field}`;
+    case "merge:conflict":
+      return `merge conflict ${event.trace.field}`;
+    case "constraint:violated":
+      return `constraint ${event.constraint}`;
+    case "sync:connected":
+      return `sync connected ${event.nodeId}`;
+    case "sync:disconnected":
+      return `sync disconnected`;
+    case "sync:sent":
+      return `sync sent ${event.batchSize}`;
+    case "sync:received":
+      return `sync received ${event.batchSize}`;
+    case "sync:acknowledged":
+      return `sync ack ${event.sequenceNumber}`;
+    case "query:subscribed":
+      return `query subscribed ${event.collection}`;
+    case "query:invalidated":
+      return `query invalidated ${event.queryId}`;
+    case "query:executed":
+      return `query executed ${event.queryId}`;
+    case "connection:quality":
+      return `connection ${event.quality}`;
+  }
+}
+function timelineColor(type) {
+  if (type.startsWith("operation:")) return "#22c55e";
+  if (type.startsWith("sync:")) return "#a855f7";
+  if (type.startsWith("merge:") || type.startsWith("constraint:")) return "#f59e0b";
+  if (type.startsWith("query:")) return "#0ea5e9";
+  return "#64748b";
+}
+function extractCausalDependencies(event) {
+  const operation = extractOperation(event);
+  return operation?.causalDeps ?? [];
+}
+function extractOperation(event) {
+  switch (event.type) {
+    case "operation:created":
+    case "operation:applied":
+      return event.operation;
+    case "query:invalidated":
+      return event.trigger;
+    default:
+      return null;
+  }
+}
+
+// src/ui/panel.ts
+function renderDevtoolsPanel(target, events2) {
+  const model = buildPanelModel(events2);
+  target.innerHTML = [
+    '<section data-panel="timeline"><h2>Sync Timeline</h2>',
+    `<p>Total events: ${model.timeline.length}</p>`,
+    "<ul>",
+    ...model.timeline.slice(-20).map(
+      (item) => `<li><span style="color:${item.color}">${item.type}</span> \xB7 ${escapeHtml(item.label)}</li>`
+    ),
+    "</ul></section>",
+    '<section data-panel="conflicts"><h2>Conflict Inspector</h2>',
+    `<p>Conflicts: ${model.conflicts.length}</p>`,
+    "<ul>",
+    ...model.conflicts.slice(-20).map(
+      (item) => `<li>${escapeHtml(item.collection)}.${escapeHtml(item.field)} \xB7 ${escapeHtml(item.strategy)} \xB7 tier ${item.tier}</li>`
+    ),
+    "</ul></section>",
+    '<section data-panel="operations"><h2>Operation Log</h2>',
+    `<p>Operations: ${model.operations.length}</p>`,
+    "<ul>",
+    ...model.operations.slice(-20).map(
+      (item) => `<li>${escapeHtml(item.opType)} ${escapeHtml(item.collection)}/${escapeHtml(item.recordId)} (${escapeHtml(item.operationId)})</li>`
+    ),
+    "</ul></section>",
+    '<section data-panel="network"><h2>Network Status</h2>',
+    `<p>Connected: ${model.network.connected ? "yes" : "no"}</p>`,
+    `<p>Pending ACKs: ${model.network.pendingAcks}</p>`,
+    `<p>Sent ops: ${model.network.sentOps}</p>`,
+    `<p>Received ops: ${model.network.receivedOps}</p>`,
+    "</section>"
+  ].join("");
+}
+function escapeHtml(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+
+// src/extension/panel.ts
+var extensionRoot = document.getElementById("kora-devtools-root");
+if (!extensionRoot) {
+  throw new Error("Missing #kora-devtools-root element");
+}
+var runtime = globalThis.chrome?.runtime;
+var devtools = globalThis.chrome?.devtools;
+var events = [];
+if (runtime && devtools) {
+  const port = runtime.connect({ name: "kora-panel" });
+  port.postMessage({ type: "panel-init", tabId: devtools.inspectedWindow.tabId });
+  port.onMessage.addListener((message) => {
+    const typed = message;
+    if (!typed || typed.type !== "kora-event" || !typed.payload) return;
+    events.push(typed.payload);
+    renderDevtoolsPanel(extensionRoot, events);
+  });
+}
+renderDevtoolsPanel(extensionRoot, events);
+//# sourceMappingURL=panel.cjs.map

package/dist/extension/panel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/panel-state.ts","../../src/ui/panel.ts","../../src/extension/panel.ts"],"sourcesContent":["import type { KoraEvent, Operation } from '@korajs/core'\nimport type { TimestampedEvent } from '../types'\n\nexport interface TimelineItem {\n\tid: number\n\ttype: KoraEvent['type']\n\tlabel: string\n\tcolor: string\n\treceivedAt: number\n\tdependsOn: string[]\n}\n\nexport interface ConflictItem {\n\tid: number\n\ttimestamp: number\n\tcollection: string\n\tfield: string\n\tstrategy: string\n\ttier: 1 | 2 | 3\n\tinputA: unknown\n\tinputB: unknown\n\toutput: unknown\n\tconstraintViolated: string | null\n}\n\nexport interface OperationItem {\n\tid: number\n\ttimestamp: number\n\toperationId: string\n\tcollection: string\n\trecordId: string\n\topType: Operation['type']\n\tdata: Record<string, unknown> | null\n\tcausalDeps: string[]\n\tnodeId: string\n\tsequenceNumber: number\n}\n\nexport interface NetworkStatusModel {\n\tconnected: boolean\n\tquality: string | null\n\tpendingAcks: number\n\tlastSyncAt: number | null\n\tsentOps: number\n\treceivedOps: number\n\tversionVector: Array<{ nodeId: string; sequenceNumber: number }>\n}\n\nexport interface DevtoolsPanelModel {\n\ttimeline: TimelineItem[]\n\tconflicts: ConflictItem[]\n\toperations: OperationItem[]\n\tnetwork: NetworkStatusModel\n}\n\nexport function buildPanelModel(events: readonly TimestampedEvent[]): DevtoolsPanelModel {\n\tconst timeline = events.map((entry) => ({\n\t\tid: entry.id,\n\t\ttype: entry.event.type,\n\t\tlabel: timelineLabel(entry.event),\n\t\tcolor: timelineColor(entry.event.type),\n\t\treceivedAt: entry.receivedAt,\n\t\tdependsOn: extractCausalDependencies(entry.event),\n\t}))\n\n\tconst conflicts = events\n\t\t.flatMap((entry) => {\n\t\t\tif (entry.event.type !== 'merge:completed' && entry.event.type !== 'merge:conflict') {\n\t\t\t\treturn []\n\t\t\t}\n\n\t\t\tconst trace = entry.event.trace\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tid: entry.id,\n\t\t\t\t\ttimestamp: entry.receivedAt,\n\t\t\t\t\tcollection: trace.operationA.collection,\n\t\t\t\t\tfield: trace.field,\n\t\t\t\t\tstrategy: trace.strategy,\n\t\t\t\t\ttier: trace.tier,\n\t\t\t\t\tinputA: trace.inputA,\n\t\t\t\t\tinputB: trace.inputB,\n\t\t\t\t\toutput: trace.output,\n\t\t\t\t\tconstraintViolated: trace.constraintViolated,\n\t\t\t\t},\n\t\t\t]\n\t\t})\n\n\tconst operations = events\n\t\t.map((entry) => {\n\t\t\tconst operation = extractOperation(entry.event)\n\t\t\tif (!operation) return null\n\n\t\t\treturn {\n\t\t\t\tid: entry.id,\n\t\t\t\ttimestamp: entry.receivedAt,\n\t\t\t\toperationId: operation.id,\n\t\t\t\tcollection: operation.collection,\n\t\t\t\trecordId: operation.recordId,\n\t\t\t\topType: operation.type,\n\t\t\t\tdata: operation.data,\n\t\t\t\tcausalDeps: operation.causalDeps,\n\t\t\t\tnodeId: operation.nodeId,\n\t\t\t\tsequenceNumber: operation.sequenceNumber,\n\t\t\t}\n\t\t})\n\t\t.filter((item): item is OperationItem => item !== null)\n\n\tconst network = buildNetworkStatus(events, operations)\n\n\treturn {\n\t\ttimeline,\n\t\tconflicts,\n\t\toperations,\n\t\tnetwork,\n\t}\n}\n\nfunction buildNetworkStatus(\n\tevents: readonly TimestampedEvent[],\n\toperations: readonly OperationItem[],\n): NetworkStatusModel {\n\tlet connected = false\n\tlet quality: string | null = null\n\tlet pendingAcks = 0\n\tlet lastSyncAt: number | null = null\n\tlet sentOps = 0\n\tlet receivedOps = 0\n\n\tfor (const entry of events) {\n\t\tswitch (entry.event.type) {\n\t\t\tcase 'sync:connected':\n\t\t\t\tconnected = true\n\t\t\t\tlastSyncAt = entry.receivedAt\n\t\t\t\tbreak\n\t\t\tcase 'sync:disconnected':\n\t\t\t\tconnected = false\n\t\t\t\tbreak\n\t\t\tcase 'connection:quality':\n\t\t\t\tquality = entry.event.quality\n\t\t\t\tbreak\n\t\t\tcase 'sync:sent':\n\t\t\t\tsentOps += entry.event.operations.length\n\t\t\t\tpendingAcks += entry.event.operations.length\n\t\t\t\tlastSyncAt = entry.receivedAt\n\t\t\t\tbreak\n\t\t\tcase 'sync:received':\n\t\t\t\treceivedOps += entry.event.operations.length\n\t\t\t\tlastSyncAt = entry.receivedAt\n\t\t\t\tbreak\n\t\t\tcase 'sync:acknowledged':\n\t\t\t\tpendingAcks = Math.max(0, pendingAcks - 1)\n\t\t\t\tlastSyncAt = entry.receivedAt\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tconst vector = new Map<string, number>()\n\tfor (const operation of operations) {\n\t\tconst current = vector.get(operation.nodeId) ?? 0\n\t\tif (operation.sequenceNumber > current) {\n\t\t\tvector.set(operation.nodeId, operation.sequenceNumber)\n\t\t}\n\t}\n\n\treturn {\n\t\tconnected,\n\t\tquality,\n\t\tpendingAcks,\n\t\tlastSyncAt,\n\t\tsentOps,\n\t\treceivedOps,\n\t\tversionVector: [...vector.entries()]\n\t\t\t.map(([nodeId, sequenceNumber]) => ({ nodeId, sequenceNumber }))\n\t\t\t.sort((left, right) => left.nodeId.localeCompare(right.nodeId)),\n\t}\n}\n\nfunction timelineLabel(event: KoraEvent): string {\n\tswitch (event.type) {\n\t\tcase 'operation:created':\n\t\tcase 'operation:applied':\n\t\t\treturn `${event.operation.type} ${event.operation.collection}/${event.operation.recordId}`\n\t\tcase 'merge:started':\n\t\t\treturn `merge start ${event.operationA.collection}`\n\t\tcase 'merge:completed':\n\t\t\treturn `merge complete ${event.trace.field}`\n\t\tcase 'merge:conflict':\n\t\t\treturn `merge conflict ${event.trace.field}`\n\t\tcase 'constraint:violated':\n\t\t\treturn `constraint ${event.constraint}`\n\t\tcase 'sync:connected':\n\t\t\treturn `sync connected ${event.nodeId}`\n\t\tcase 'sync:disconnected':\n\t\t\treturn `sync disconnected`\n\t\tcase 'sync:sent':\n\t\t\treturn `sync sent ${event.batchSize}`\n\t\tcase 'sync:received':\n\t\t\treturn `sync received ${event.batchSize}`\n\t\tcase 'sync:acknowledged':\n\t\t\treturn `sync ack ${event.sequenceNumber}`\n\t\tcase 'query:subscribed':\n\t\t\treturn `query subscribed ${event.collection}`\n\t\tcase 'query:invalidated':\n\t\t\treturn `query invalidated ${event.queryId}`\n\t\tcase 'query:executed':\n\t\t\treturn `query executed ${event.queryId}`\n\t\tcase 'connection:quality':\n\t\t\treturn `connection ${event.quality}`\n\t}\n}\n\nfunction timelineColor(type: KoraEvent['type']): string {\n\tif (type.startsWith('operation:')) return '#22c55e'\n\tif (type.startsWith('sync:')) return '#a855f7'\n\tif (type.startsWith('merge:') || type.startsWith('constraint:')) return '#f59e0b'\n\tif (type.startsWith('query:')) return '#0ea5e9'\n\treturn '#64748b'\n}\n\nfunction extractCausalDependencies(event: KoraEvent): string[] {\n\tconst operation = extractOperation(event)\n\treturn operation?.causalDeps ?? []\n}\n\nfunction extractOperation(event: KoraEvent): Operation | null {\n\tswitch (event.type) {\n\t\tcase 'operation:created':\n\t\tcase 'operation:applied':\n\t\t\treturn event.operation\n\t\tcase 'query:invalidated':\n\t\t\treturn event.trigger\n\t\tdefault:\n\t\t\treturn null\n\t}\n}\n","import type { TimestampedEvent } from '../types'\nimport { buildPanelModel } from './panel-state'\n\nexport function renderDevtoolsPanel(target: HTMLElement, events: readonly TimestampedEvent[]): void {\n\tconst model = buildPanelModel(events)\n\n\ttarget.innerHTML = [\n\t\t'<section data-panel=\"timeline\"><h2>Sync Timeline</h2>',\n\t\t`<p>Total events: ${model.timeline.length}</p>`,\n\t\t'<ul>',\n\t\t...model.timeline.slice(-20).map(\n\t\t\t(item) =>\n\t\t\t\t`<li><span style=\"color:${item.color}\">${item.type}</span> · ${escapeHtml(item.label)}</li>`,\n\t\t),\n\t\t'</ul></section>',\n\t\t'<section data-panel=\"conflicts\"><h2>Conflict Inspector</h2>',\n\t\t`<p>Conflicts: ${model.conflicts.length}</p>`,\n\t\t'<ul>',\n\t\t...model.conflicts\n\t\t\t.slice(-20)\n\t\t\t.map(\n\t\t\t\t(item) =>\n\t\t\t\t\t`<li>${escapeHtml(item.collection)}.${escapeHtml(item.field)} · ${escapeHtml(item.strategy)} · tier ${item.tier}</li>`,\n\t\t\t),\n\t\t'</ul></section>',\n\t\t'<section data-panel=\"operations\"><h2>Operation Log</h2>',\n\t\t`<p>Operations: ${model.operations.length}</p>`,\n\t\t'<ul>',\n\t\t...model.operations.slice(-20).map(\n\t\t\t(item) =>\n\t\t\t\t`<li>${escapeHtml(item.opType)} ${escapeHtml(item.collection)}/${escapeHtml(item.recordId)} (${escapeHtml(item.operationId)})</li>`,\n\t\t),\n\t\t'</ul></section>',\n\t\t'<section data-panel=\"network\"><h2>Network Status</h2>',\n\t\t`<p>Connected: ${model.network.connected ? 'yes' : 'no'}</p>`,\n\t\t`<p>Pending ACKs: ${model.network.pendingAcks}</p>`,\n\t\t`<p>Sent ops: ${model.network.sentOps}</p>`,\n\t\t`<p>Received ops: ${model.network.receivedOps}</p>`,\n\t\t'</section>',\n\t].join('')\n}\n\nfunction escapeHtml(value: string): string {\n\treturn value.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')\n}\n","import type { TimestampedEvent } from '../types'\nimport { renderDevtoolsPanel } from '../ui/panel'\n\ninterface RuntimePort {\n\tonMessage: {\n\t\taddListener(callback: (message: unknown) => void): void\n\t}\n\tpostMessage(message: unknown): void\n}\n\ninterface RuntimeLike {\n\tconnect(info: { name: string }): RuntimePort\n}\n\ninterface DevtoolsLike {\n\tinspectedWindow: { tabId: number }\n}\n\nconst extensionRoot = document.getElementById('kora-devtools-root')\nif (!extensionRoot) {\n\tthrow new Error('Missing #kora-devtools-root element')\n}\n\nconst runtime = (globalThis as { chrome?: { runtime?: RuntimeLike } }).chrome?.runtime\nconst devtools = (globalThis as { chrome?: { devtools?: DevtoolsLike } }).chrome?.devtools\n\nconst events: TimestampedEvent[] = []\n\nif (runtime && devtools) {\n\tconst port = runtime.connect({ name: 'kora-panel' })\n\tport.postMessage({ type: 'panel-init', tabId: devtools.inspectedWindow.tabId })\n\n\tport.onMessage.addListener((message) => {\n\t\tconst typed = message as { type?: string; payload?: TimestampedEvent } | undefined\n\t\tif (!typed || typed.type !== 'kora-event' || !typed.payload) return\n\n\t\tevents.push(typed.payload)\n\t\trenderDevtoolsPanel(extensionRoot, events)\n\t})\n}\n\nrenderDevtoolsPanel(extensionRoot, events)\n"],"mappings":"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","names":["events","events"]}

package/dist/extension/panel.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/extension/panel.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/extension/panel.js

@@ -0,0 +1,24 @@
+import {
+  renderDevtoolsPanel
+} from "../chunk-4ZQ2RTZM.js";
+
+// src/extension/panel.ts
+var extensionRoot = document.getElementById("kora-devtools-root");
+if (!extensionRoot) {
+  throw new Error("Missing #kora-devtools-root element");
+}
+var runtime = globalThis.chrome?.runtime;
+var devtools = globalThis.chrome?.devtools;
+var events = [];
+if (runtime && devtools) {
+  const port = runtime.connect({ name: "kora-panel" });
+  port.postMessage({ type: "panel-init", tabId: devtools.inspectedWindow.tabId });
+  port.onMessage.addListener((message) => {
+    const typed = message;
+    if (!typed || typed.type !== "kora-event" || !typed.payload) return;
+    events.push(typed.payload);
+    renderDevtoolsPanel(extensionRoot, events);
+  });
+}
+renderDevtoolsPanel(extensionRoot, events);
+//# sourceMappingURL=panel.js.map

package/dist/extension/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/extension/panel.ts"],"sourcesContent":["import type { TimestampedEvent } from '../types'\nimport { renderDevtoolsPanel } from '../ui/panel'\n\ninterface RuntimePort {\n\tonMessage: {\n\t\taddListener(callback: (message: unknown) => void): void\n\t}\n\tpostMessage(message: unknown): void\n}\n\ninterface RuntimeLike {\n\tconnect(info: { name: string }): RuntimePort\n}\n\ninterface DevtoolsLike {\n\tinspectedWindow: { tabId: number }\n}\n\nconst extensionRoot = document.getElementById('kora-devtools-root')\nif (!extensionRoot) {\n\tthrow new Error('Missing #kora-devtools-root element')\n}\n\nconst runtime = (globalThis as { chrome?: { runtime?: RuntimeLike } }).chrome?.runtime\nconst devtools = (globalThis as { chrome?: { devtools?: DevtoolsLike } }).chrome?.devtools\n\nconst events: TimestampedEvent[] = []\n\nif (runtime && devtools) {\n\tconst port = runtime.connect({ name: 'kora-panel' })\n\tport.postMessage({ type: 'panel-init', tabId: devtools.inspectedWindow.tabId })\n\n\tport.onMessage.addListener((message) => {\n\t\tconst typed = message as { type?: string; payload?: TimestampedEvent } | undefined\n\t\tif (!typed || typed.type !== 'kora-event' || !typed.payload) return\n\n\t\tevents.push(typed.payload)\n\t\trenderDevtoolsPanel(extensionRoot, events)\n\t})\n}\n\nrenderDevtoolsPanel(extensionRoot, events)\n"],"mappings":";;;;;AAkBA,IAAM,gBAAgB,SAAS,eAAe,oBAAoB;AAClE,IAAI,CAAC,eAAe;AACnB,QAAM,IAAI,MAAM,qCAAqC;AACtD;AAEA,IAAM,UAAW,WAAsD,QAAQ;AAC/E,IAAM,WAAY,WAAwD,QAAQ;AAElF,IAAM,SAA6B,CAAC;AAEpC,IAAI,WAAW,UAAU;AACxB,QAAM,OAAO,QAAQ,QAAQ,EAAE,MAAM,aAAa,CAAC;AACnD,OAAK,YAAY,EAAE,MAAM,cAAc,OAAO,SAAS,gBAAgB,MAAM,CAAC;AAE9E,OAAK,UAAU,YAAY,CAAC,YAAY;AACvC,UAAM,QAAQ;AACd,QAAI,CAAC,SAAS,MAAM,SAAS,gBAAgB,CAAC,MAAM,QAAS;AAE7D,WAAO,KAAK,MAAM,OAAO;AACzB,wBAAoB,eAAe,MAAM;AAAA,EAC1C,CAAC;AACF;AAEA,oBAAoB,eAAe,MAAM;","names":[]}