@fluixi/devtools 0.2.0-alpha.2 → 0.2.0-alpha.4

package/dist/float.js

@@ -0,0 +1,256 @@
+/**
+ * Taking a pane out of the layout and putting it back.
+ *
+ * The inspector, the timeline and the tree each live in a fixed corner of the panel. Reading
+ * one of them properly means giving it room, and the room has to come from the others. So
+ * each carries a button that lifts it into a card over everything, and the same button puts
+ * it back exactly where it was.
+ *
+ * The pane element itself is moved rather than re-rendered. Whatever drew into it keeps its
+ * handle on it, its listeners, and its scroll position — a floated timeline is the same
+ * timeline, not a copy of one.
+ */
+/** So a card cannot be dragged or resized into something unreadable. */
+const MIN_W = 240;
+const MIN_H = 160;
+/**
+ * Pointer capture, for the reason the splitters need it: without it the events stop arriving
+ * once the pointer crosses the graph or an iframe, the release is never seen, and the card
+ * keeps following the mouse.
+ */
+function draggable(handle, 
+/** Total travel since the press, not the step since the last event. */
+onMove, onStart) {
+    handle.addEventListener('pointerdown', (event) => {
+        if (event.button !== 0)
+            return;
+        // Capture retargets the click that follows onto the handle, so a button inside it would
+        // never hear its own click.
+        if (event.target.closest('button'))
+            return;
+        event.preventDefault();
+        handle.setPointerCapture(event.pointerId);
+        const fromX = event.clientX;
+        const fromY = event.clientY;
+        onStart?.();
+        // Measured from where the press began. Adding up each step instead loses whatever a
+        // clamp refused, so dragging back out of a minimum grows the card immediately rather
+        // than when the pointer returns to where it stopped shrinking.
+        const move = (e) => onMove(e.clientX - fromX, e.clientY - fromY);
+        const stop = () => {
+            handle.removeEventListener('pointermove', move);
+            handle.removeEventListener('pointerup', stop);
+            handle.removeEventListener('pointercancel', stop);
+            handle.removeEventListener('lostpointercapture', stop);
+            if (handle.hasPointerCapture(event.pointerId))
+                handle.releasePointerCapture(event.pointerId);
+        };
+        handle.addEventListener('pointermove', move);
+        handle.addEventListener('pointerup', stop);
+        handle.addEventListener('pointercancel', stop);
+        handle.addEventListener('lostpointercapture', stop);
+    });
+}
+/** Enough of a cascade that two cards opened together do not sit on top of each other. */
+let opened = 0;
+/**
+ * The moving and resizing, on its own.
+ *
+ * Both a floated pane and the value pane want the same card, and writing the drag twice is
+ * how two of them end up behaving differently.
+ */
+export function floatCard(doc, title, at) {
+    const card = doc.createElement('div');
+    card.className = 'fx-float';
+    const spot = at ?? {
+        x: 60 + (opened % 4) * 28,
+        y: 60 + (opened % 4) * 28,
+        width: 360,
+        height: 280,
+    };
+    opened += 1;
+    const bar = doc.createElement('div');
+    bar.className = 'fx-float-bar';
+    const name = doc.createElement('span');
+    name.textContent = title;
+    bar.append(name);
+    card.append(bar);
+    // Kept here rather than read back from the element each move. offsetWidth is what the
+    // card ended up at, so once a size clamps, every further move measures from the clamp
+    // and the card grows when the pointer is still travelling the other way.
+    let x = spot.x;
+    let y = spot.y;
+    let w = spot.width;
+    let h = spot.height;
+    const apply = () => {
+        const view = doc.defaultView;
+        const vw = view?.innerWidth ?? w;
+        const vh = view?.innerHeight ?? h;
+        w = Math.min(Math.max(MIN_W, w), vw);
+        h = Math.min(Math.max(MIN_H, h), vh);
+        // Fully on screen: a card wider than the window puts its own resize handles past the
+        // edge, and then there is no way to make it smaller again.
+        x = Math.min(Math.max(0, x), Math.max(0, vw - w));
+        y = Math.min(Math.max(0, y), Math.max(0, vh - h));
+        card.style.left = `${x}px`;
+        card.style.top = `${y}px`;
+        card.style.width = `${w}px`;
+        card.style.height = `${h}px`;
+    };
+    // Every edge and corner, so a card against one side of the window can still be resized
+    // from the other.
+    let from = { x, y, w, h };
+    const remember = () => {
+        from = { x, y, w, h };
+    };
+    for (const edge of ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw']) {
+        const handle = doc.createElement('div');
+        handle.className = `fx-float-h fx-float-${edge}`;
+        card.append(handle);
+        draggable(handle, (dx, dy) => {
+            if (edge.includes('e'))
+                w = from.w + dx;
+            if (edge.includes('s'))
+                h = from.h + dy;
+            // A top or left edge leaves the opposite one where it is, so the card only moves
+            // by as much as the size actually gave.
+            if (edge.includes('w')) {
+                w = Math.max(MIN_W, from.w - dx);
+                x = from.x + from.w - w;
+            }
+            if (edge.includes('n')) {
+                h = Math.max(MIN_H, from.h - dy);
+                y = from.y + from.h - h;
+            }
+            apply();
+        }, remember);
+    }
+    draggable(bar, (dx, dy) => {
+        x = from.x + dx;
+        y = from.y + dy;
+        apply();
+    }, remember);
+    apply();
+    return { card, bar, remove: () => card.remove() };
+}
+export function makeFloatable(pane, options) {
+    const doc = pane.ownerDocument;
+    let card = null;
+    /** Where the pane came from, so it goes back there rather than at the end. */
+    let home = null;
+    const button = doc.createElement('button');
+    button.type = 'button';
+    button.className = 'fx-float-btn';
+    button.textContent = '⇱';
+    button.title = `Float ${options.title}`;
+    pane.classList.add('fx-floatable');
+    pane.append(button);
+    /**
+     * The panes rewrite their own contents — the inspector replaces its markup whenever the
+     * selection changes — which takes the button with it. Rather than asking each of them to
+     * leave it alone, it is put back when it goes.
+     */
+    const keep = new MutationObserver(() => {
+        if (button.parentNode !== pane)
+            pane.append(button);
+    });
+    keep.observe(pane, { childList: true });
+    function dock() {
+        if (!card || !home)
+            return;
+        home.parent.insertBefore(pane, home.before);
+        card.remove();
+        card = null;
+        home = null;
+        pane.classList.remove('fx-floated');
+        button.textContent = '⇱';
+        button.title = `Float ${options.title}`;
+        options.onChange?.(false);
+    }
+    function float() {
+        if (card || !pane.parentNode)
+            return;
+        home = { parent: pane.parentNode, before: pane.nextSibling };
+        const built = floatCard(doc, options.title, options.at);
+        card = built.card;
+        card.append(pane);
+        doc.body.appendChild(card);
+        pane.classList.add('fx-floated');
+        button.textContent = '⇲';
+        button.title = `Put ${options.title} back`;
+        options.onChange?.(true);
+    }
+    button.addEventListener('click', (event) => {
+        event.stopPropagation();
+        if (card)
+            dock();
+        else
+            float();
+    });
+    return {
+        get floating() {
+            return card !== null;
+        },
+        toggle() {
+            if (card)
+                dock();
+            else
+                float();
+            return card !== null;
+        },
+        dock,
+        destroy() {
+            keep.disconnect();
+            dock();
+            button.remove();
+            pane.classList.remove('fx-floatable');
+        },
+    };
+}
+export const FLOAT_CSS = `
+.fx-floatable { position: relative; }
+.fx-float-btn {
+  position: absolute; top: 2px; right: 2px; z-index: 5;
+  width: 18px; height: 18px; padding: 0; line-height: 1;
+  font-size: 11px; color: var(--fx-muted, #8a90a2);
+  background: var(--fx-panel, #14161c);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 4px;
+  cursor: pointer; opacity: 0; transition: opacity .12s;
+}
+.fx-floatable:hover .fx-float-btn, .fx-float-btn:focus-visible { opacity: 1; }
+.fx-float-btn:hover { color: var(--fx-accent, #5eead4); border-color: var(--fx-accent, #5eead4); }
+
+.fx-float {
+  position: fixed; z-index: 60; display: flex; flex-direction: column;
+  background: var(--fx-panel, #14161c);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 8px;
+  box-shadow: 0 12px 34px rgba(0, 0, 0, .5); overflow: hidden;
+}
+.fx-float-bar {
+  display: flex; align-items: center; padding: 4px 8px; cursor: move;
+  font-size: 11px; color: var(--fx-muted, #8a90a2);
+  background: var(--fx-bg, #0f1115); border-bottom: 1px solid var(--fx-line, #262a35);
+  user-select: none;
+}
+/* The pane fills the card, whatever it was sized to in the layout it came from. */
+.fx-float > .fx-floated {
+  flex: 1; min-height: 0; width: auto; height: auto; overflow: auto;
+}
+/* Edges and corners. Thin, and over everything, so a card can be resized from whichever
+   side is reachable. */
+.fx-float-h { position: absolute; z-index: 1; }
+.fx-float-n, .fx-float-s { left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
+.fx-float-e, .fx-float-w { top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
+.fx-float-n { top: -3px; }
+.fx-float-s { bottom: -3px; }
+.fx-float-e { right: -3px; }
+.fx-float-w { left: -3px; }
+.fx-float-ne, .fx-float-nw, .fx-float-se, .fx-float-sw { width: 14px; height: 14px; }
+.fx-float-nw { top: -3px; left: -3px; cursor: nwse-resize; }
+.fx-float-ne { top: -3px; right: -3px; cursor: nesw-resize; }
+.fx-float-sw { bottom: -3px; left: -3px; cursor: nesw-resize; }
+.fx-float-se {
+  bottom: 0; right: 0; cursor: nwse-resize;
+  background: linear-gradient(135deg, transparent 50%, var(--fx-line, #262a35) 50%);
+}
+`;

package/dist/float.mjs

@@ -0,0 +1,211 @@
+// src/float.ts
+var MIN_W = 240;
+var MIN_H = 160;
+function draggable(handle, onMove, onStart) {
+  handle.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0) return;
+    if (event.target.closest("button")) return;
+    event.preventDefault();
+    handle.setPointerCapture(event.pointerId);
+    const fromX = event.clientX;
+    const fromY = event.clientY;
+    onStart?.();
+    const move = (e) => onMove(e.clientX - fromX, e.clientY - fromY);
+    const stop = () => {
+      handle.removeEventListener("pointermove", move);
+      handle.removeEventListener("pointerup", stop);
+      handle.removeEventListener("pointercancel", stop);
+      handle.removeEventListener("lostpointercapture", stop);
+      if (handle.hasPointerCapture(event.pointerId)) handle.releasePointerCapture(event.pointerId);
+    };
+    handle.addEventListener("pointermove", move);
+    handle.addEventListener("pointerup", stop);
+    handle.addEventListener("pointercancel", stop);
+    handle.addEventListener("lostpointercapture", stop);
+  });
+}
+var opened = 0;
+function floatCard(doc, title, at) {
+  const card = doc.createElement("div");
+  card.className = "fx-float";
+  const spot = at ?? {
+    x: 60 + opened % 4 * 28,
+    y: 60 + opened % 4 * 28,
+    width: 360,
+    height: 280
+  };
+  opened += 1;
+  const bar = doc.createElement("div");
+  bar.className = "fx-float-bar";
+  const name = doc.createElement("span");
+  name.textContent = title;
+  bar.append(name);
+  card.append(bar);
+  let x = spot.x;
+  let y = spot.y;
+  let w = spot.width;
+  let h = spot.height;
+  const apply = () => {
+    const view = doc.defaultView;
+    const vw = view?.innerWidth ?? w;
+    const vh = view?.innerHeight ?? h;
+    w = Math.min(Math.max(MIN_W, w), vw);
+    h = Math.min(Math.max(MIN_H, h), vh);
+    x = Math.min(Math.max(0, x), Math.max(0, vw - w));
+    y = Math.min(Math.max(0, y), Math.max(0, vh - h));
+    card.style.left = `${x}px`;
+    card.style.top = `${y}px`;
+    card.style.width = `${w}px`;
+    card.style.height = `${h}px`;
+  };
+  let from = { x, y, w, h };
+  const remember = () => {
+    from = { x, y, w, h };
+  };
+  for (const edge of ["n", "s", "e", "w", "ne", "nw", "se", "sw"]) {
+    const handle = doc.createElement("div");
+    handle.className = `fx-float-h fx-float-${edge}`;
+    card.append(handle);
+    draggable(
+      handle,
+      (dx, dy) => {
+        if (edge.includes("e")) w = from.w + dx;
+        if (edge.includes("s")) h = from.h + dy;
+        if (edge.includes("w")) {
+          w = Math.max(MIN_W, from.w - dx);
+          x = from.x + from.w - w;
+        }
+        if (edge.includes("n")) {
+          h = Math.max(MIN_H, from.h - dy);
+          y = from.y + from.h - h;
+        }
+        apply();
+      },
+      remember
+    );
+  }
+  draggable(
+    bar,
+    (dx, dy) => {
+      x = from.x + dx;
+      y = from.y + dy;
+      apply();
+    },
+    remember
+  );
+  apply();
+  return { card, bar, remove: () => card.remove() };
+}
+function makeFloatable(pane, options) {
+  const doc = pane.ownerDocument;
+  let card = null;
+  let home = null;
+  const button = doc.createElement("button");
+  button.type = "button";
+  button.className = "fx-float-btn";
+  button.textContent = "⇱";
+  button.title = `Float ${options.title}`;
+  pane.classList.add("fx-floatable");
+  pane.append(button);
+  const keep = new MutationObserver(() => {
+    if (button.parentNode !== pane) pane.append(button);
+  });
+  keep.observe(pane, { childList: true });
+  function dock() {
+    if (!card || !home) return;
+    home.parent.insertBefore(pane, home.before);
+    card.remove();
+    card = null;
+    home = null;
+    pane.classList.remove("fx-floated");
+    button.textContent = "⇱";
+    button.title = `Float ${options.title}`;
+    options.onChange?.(false);
+  }
+  function float() {
+    if (card || !pane.parentNode) return;
+    home = { parent: pane.parentNode, before: pane.nextSibling };
+    const built = floatCard(doc, options.title, options.at);
+    card = built.card;
+    card.append(pane);
+    doc.body.appendChild(card);
+    pane.classList.add("fx-floated");
+    button.textContent = "⇲";
+    button.title = `Put ${options.title} back`;
+    options.onChange?.(true);
+  }
+  button.addEventListener("click", (event) => {
+    event.stopPropagation();
+    if (card) dock();
+    else float();
+  });
+  return {
+    get floating() {
+      return card !== null;
+    },
+    toggle() {
+      if (card) dock();
+      else float();
+      return card !== null;
+    },
+    dock,
+    destroy() {
+      keep.disconnect();
+      dock();
+      button.remove();
+      pane.classList.remove("fx-floatable");
+    }
+  };
+}
+var FLOAT_CSS = `
+.fx-floatable { position: relative; }
+.fx-float-btn {
+  position: absolute; top: 2px; right: 2px; z-index: 5;
+  width: 18px; height: 18px; padding: 0; line-height: 1;
+  font-size: 11px; color: var(--fx-muted, #8a90a2);
+  background: var(--fx-panel, #14161c);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 4px;
+  cursor: pointer; opacity: 0; transition: opacity .12s;
+}
+.fx-floatable:hover .fx-float-btn, .fx-float-btn:focus-visible { opacity: 1; }
+.fx-float-btn:hover { color: var(--fx-accent, #5eead4); border-color: var(--fx-accent, #5eead4); }
+
+.fx-float {
+  position: fixed; z-index: 60; display: flex; flex-direction: column;
+  background: var(--fx-panel, #14161c);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 8px;
+  box-shadow: 0 12px 34px rgba(0, 0, 0, .5); overflow: hidden;
+}
+.fx-float-bar {
+  display: flex; align-items: center; padding: 4px 8px; cursor: move;
+  font-size: 11px; color: var(--fx-muted, #8a90a2);
+  background: var(--fx-bg, #0f1115); border-bottom: 1px solid var(--fx-line, #262a35);
+  user-select: none;
+}
+/* The pane fills the card, whatever it was sized to in the layout it came from. */
+.fx-float > .fx-floated {
+  flex: 1; min-height: 0; width: auto; height: auto; overflow: auto;
+}
+/* Edges and corners. Thin, and over everything, so a card can be resized from whichever
+   side is reachable. */
+.fx-float-h { position: absolute; z-index: 1; }
+.fx-float-n, .fx-float-s { left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
+.fx-float-e, .fx-float-w { top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
+.fx-float-n { top: -3px; }
+.fx-float-s { bottom: -3px; }
+.fx-float-e { right: -3px; }
+.fx-float-w { left: -3px; }
+.fx-float-ne, .fx-float-nw, .fx-float-se, .fx-float-sw { width: 14px; height: 14px; }
+.fx-float-nw { top: -3px; left: -3px; cursor: nwse-resize; }
+.fx-float-ne { top: -3px; right: -3px; cursor: nesw-resize; }
+.fx-float-sw { bottom: -3px; left: -3px; cursor: nesw-resize; }
+.fx-float-se {
+  bottom: 0; right: 0; cursor: nwse-resize;
+  background: linear-gradient(135deg, transparent 50%, var(--fx-line, #262a35) 50%);
+}
+`;
+export {
+  FLOAT_CSS,
+  floatCard,
+  makeFloatable
+};

package/dist/format.cjs

@@ -0,0 +1,175 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/format.ts
+var format_exports = {};
+__export(format_exports, {
+  formatValue: () => formatValue,
+  indentValue: () => indentValue,
+  shorten: () => shorten
+});
+module.exports = __toCommonJS(format_exports);
+var MAX_DEPTH = 3;
+var MAX_ENTRIES = 8;
+function domName(v) {
+  if (typeof v?.nodeType !== "number" || typeof v.nodeName !== "string") return null;
+  return v.tagName ? `<${v.tagName.toLowerCase()}>` : `#${v.nodeName.toLowerCase()}`;
+}
+function fnName(v) {
+  return v.name ? `ƒ ${v.name}()` : "ƒ";
+}
+function className(v) {
+  const name = v.constructor?.name;
+  return name && name !== "Object" ? `${name} ` : "";
+}
+function primitive(v) {
+  if (v === null) return "null";
+  switch (typeof v) {
+    case "undefined":
+      return "undefined";
+    case "string":
+      return JSON.stringify(v);
+    case "number":
+    case "boolean":
+      return String(v);
+    case "bigint":
+      return `${v}n`;
+    case "symbol":
+      return v.toString();
+    case "function":
+      return fnName(v);
+    default:
+      return null;
+  }
+}
+function walk(value, depth, seen) {
+  const simple = primitive(value);
+  if (simple !== null) return simple;
+  const object = value;
+  if (seen.has(object)) return "[circular]";
+  const dom = domName(object);
+  if (dom) return dom;
+  if (object instanceof Date) return Number.isNaN(object.getTime()) ? "Invalid Date" : object.toISOString();
+  if (object instanceof RegExp) return String(object);
+  if (object instanceof Error) return `${object.name}: ${object.message}`;
+  if (object instanceof Promise) return "Promise";
+  if (ArrayBuffer.isView(object)) {
+    return `${className(object).trim()}(${object.length ?? ""})`;
+  }
+  if (depth >= MAX_DEPTH) return Array.isArray(object) ? "[…]" : "{…}";
+  seen.add(object);
+  try {
+    if (Array.isArray(object)) {
+      const shown2 = object.slice(0, MAX_ENTRIES).map((item) => walk(item, depth + 1, seen));
+      if (object.length > MAX_ENTRIES) shown2.push("…");
+      return `[${shown2.join(", ")}]`;
+    }
+    if (object instanceof Map) {
+      const shown2 = [];
+      for (const [k, v] of object) {
+        if (shown2.length === MAX_ENTRIES) {
+          shown2.push("…");
+          break;
+        }
+        shown2.push(`${walk(k, depth + 1, seen)} => ${walk(v, depth + 1, seen)}`);
+      }
+      return `Map(${object.size}) {${shown2.join(", ")}}`;
+    }
+    if (object instanceof Set) {
+      const shown2 = [];
+      for (const item of object) {
+        if (shown2.length === MAX_ENTRIES) {
+          shown2.push("…");
+          break;
+        }
+        shown2.push(walk(item, depth + 1, seen));
+      }
+      return `Set(${object.size}) {${shown2.join(", ")}}`;
+    }
+    const keys = Object.keys(object);
+    const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
+      let read;
+      try {
+        read = walk(object[key], depth + 1, seen);
+      } catch {
+        read = "[unreadable]";
+      }
+      return `${key}: ${read}`;
+    });
+    if (keys.length > MAX_ENTRIES) shown.push("…");
+    return `${className(object)}{${shown.join(", ")}}`;
+  } finally {
+    seen.delete(object);
+  }
+}
+function formatValue(value, limit = 240) {
+  let text;
+  try {
+    text = walk(value, 0, /* @__PURE__ */ new Set());
+  } catch {
+    text = "[unreadable]";
+  }
+  return text.length > limit ? `${text.slice(0, limit - 1)}…` : text;
+}
+function shorten(text, limit = 18) {
+  return text.length > limit ? `${text.slice(0, limit - 1)}…` : text;
+}
+function indentValue(text, pad = "  ") {
+  const out = [];
+  let depth = 0;
+  let quote = null;
+  let line = "";
+  const flush = () => {
+    if (line.trim()) out.push(pad.repeat(depth) + line.trim());
+    line = "";
+  };
+  for (let i = 0; i < text.length; i++) {
+    const c = text[i];
+    if (quote) {
+      line += c;
+      if (c === quote && text[i - 1] !== "\\") quote = null;
+      continue;
+    }
+    if (c === '"' || c === "'") {
+      quote = c;
+      line += c;
+      continue;
+    }
+    if (c === "{" || c === "[") {
+      line += c;
+      flush();
+      depth++;
+      continue;
+    }
+    if (c === "}" || c === "]") {
+      flush();
+      depth = Math.max(0, depth - 1);
+      line = c;
+      continue;
+    }
+    if (c === ",") {
+      line += c;
+      flush();
+      continue;
+    }
+    line += c;
+  }
+  flush();
+  return out.join("\n");
+}

package/dist/format.d.ts

@@ -0,0 +1,16 @@
+/**
+ * A printable rendering of any value. Never throws, never leaves `[object Object]`.
+ *
+ * `limit` caps the result; what is cut ends in an ellipsis.
+ */
+export declare function formatValue(value: unknown, limit?: number): string;
+/** The short form a node card has room for. */
+export declare function shorten(text: string, limit?: number): string;
+/**
+ * The same text across lines, so a value too wide to read is readable.
+ *
+ * Works on what `formatValue` produced rather than on the value itself: a panel elsewhere
+ * has only the string. Quotes are tracked so a brace inside one is left alone.
+ */
+export declare function indentValue(text: string, pad?: string): string;
+//# sourceMappingURL=format.d.ts.map

package/dist/format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../src/format.ts"],"names":[],"mappings":"AAoHA;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,SAAM,GAAG,MAAM,CAQ/D;AAED,+CAA+C;AAC/C,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,SAAK,GAAG,MAAM,CAExD;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,SAAO,GAAG,MAAM,CA4C5D"}