@dxos/react-ui-canvas 0.13.0 → 0.14.0

package/src/utils/testing.ts

@@ -7,16 +7,17 @@ import { portId } from './ports.ts';
 import { DEFAULT_SIZES } from './shapes.ts';
 
 //
-// A three-level class diagram: the fixture for anything that needs a scene tree to look like a real
-// model rather than one of every element type. The domain is invented — a document editor — so it
-// stays readable without tracking any package's actual classes.
+// A three-level model diagram, one box per class: the fixture for anything that needs a scene tree to look
+// like a real model rather than one of every element type. The domain is invented — a document editor —
+// so it stays readable without tracking any package's actual classes. (The UML class shape itself is
+// plugin-uml's; the engine fixture draws each class as a labelled rectangle.)
 //
 
 /** The class fixture's unit: a major cell, so every box lands on the grid move and resize snap to. */
 const cell = (units: number) => units * 64;
 
 const CLASS_SIZE = { width: cell(4), height: cell(3) };
-const PORTAL_SIZE = DEFAULT_SIZES.scene;
+const PORTAL_SIZE = DEFAULT_SIZES.frame;
 
 type ClassDef = { key: string; name: string; attributes: string[]; methods: string[] };
 type LevelDef = { key: string; title: string; classes: ClassDef[]; children?: LevelDef[] };
@@ -73,26 +74,24 @@ const MODEL: LevelDef = {
 };
 
 /**
- * A three-level class diagram over {@link MODEL}: one scene per subsystem, each holding its classes
+ * A three-level model diagram over {@link MODEL}: one scene per subsystem, each holding a box per class
  * in a row joined by an association, with a portal per child subsystem below them. Ids are
  * deterministic (`scene:app/editor`, `scene:app/editor/view`) so tests and stories can name elements.
  */
-export const createClassSceneTree = (prefix = 'app'): SceneTree => classLevel(MODEL, prefix).build();
+export const createModelSceneTree = (prefix = 'app'): SceneTree => classLevel(MODEL, prefix).build();
 
 const classLevel = (level: LevelDef, path: string): SceneElement => {
   const id = `scene:${path}`;
   // Classes sit in a row; each child subsystem gets a portal in the row below, under its own column.
-  const classes = level.classes.map(({ key, name, attributes, methods }, index) =>
-    SceneBuilder.class(`${id}/${key}`, { x: cell(2) + index * cell(6), y: cell(2), ...CLASS_SIZE }).properties({
-      name,
-      attributes,
-      methods,
+  const classes = level.classes.map(({ key, name }, index) =>
+    SceneBuilder.rect(`${id}/${key}`, { x: cell(2) + index * cell(6), y: cell(2), ...CLASS_SIZE }).properties({
+      label: name,
     }),
   );
   const associations = level.classes.slice(1).map((current, index) =>
     SceneBuilder.link('line', `${id}/${level.classes[index].key}#${portId('e')}`, `${id}/${current.key}#${portId('w')}`)
       .id(`${id}/assoc${index + 1}`)
-      .properties({ directed: true }),
+      .properties({ ends: { end: 'arrow' } }),
   );
   const children = (level.children ?? []).map((child, index) =>
     classLevel(child, `${path}/${child.key}`).at({ x: cell(2) + index * cell(10), y: cell(7), ...PORTAL_SIZE }),
@@ -114,7 +113,7 @@ export const createSceneTree = (depth: number, prefix = 'root'): SceneTree => tr
 /** The fixture's unit: every point and size is written as a count of these, never as raw pixels. */
 const scale = (units: number) => units * 32;
 
-const PORTAL = DEFAULT_SIZES.scene;
+const PORTAL = DEFAULT_SIZES.frame;
 
 /** Child scene variants, chosen by nesting level and side so siblings differ. */
 const VARIANTS = ['flow', 'model', 'cycle', 'note'] as const;
@@ -161,13 +160,11 @@ const rootElements = (name: string, elementId: (suffix: string) => string): Buil
   SceneBuilder.note(elementId('t'), units(-10, 8, 12, 4)).properties({
     text: `Scene "${name}". Pinch to zoom, drag to pan, double-click a portal.`,
   }),
-  SceneBuilder.class(elementId('c'), units(-22, 6, 8, 6)).properties({
-    name: `${name} · C`,
-    attributes: ['id: string', 'name: string'],
-    methods: ['save(): void'],
-  }),
+  labelled(SceneBuilder.rect, elementId('c'), units(-22, 6, 8, 6), `${name} · C`),
   SceneBuilder.link('curve', elementId('a'), elementId('b')).id(elementId('ab')),
-  SceneBuilder.link('line', elementId('a'), elementId('c')).id(elementId('ac')).properties({ directed: true }),
+  SceneBuilder.link('line', elementId('a'), elementId('c'))
+    .id(elementId('ac'))
+    .properties({ ends: { end: 'arrow' } }),
   // Pinned ports rather than automatic ones, so the spline leaves and arrives where its corners turn.
   SceneBuilder.link('spline', `${elementId('b')}#${portId('s')}`, `${elementId('c')}#${portId('n', 3)}`)
     .id(elementId('bc'))
@@ -181,7 +178,9 @@ const rootElements = (name: string, elementId: (suffix: string) => string): Buil
 
 const childElements = (name: string, elementId: (suffix: string) => string, variant: Variant): BuilderElement[] => {
   const directed = (id: string, from: string, to: string) =>
-    SceneBuilder.link('line', from, to).id(elementId(id)).properties({ directed: true });
+    SceneBuilder.link('line', from, to)
+      .id(elementId(id))
+      .properties({ ends: { end: 'arrow' } });
   switch (variant) {
     case 'flow':
       return [
@@ -193,16 +192,8 @@ const childElements = (name: string, elementId: (suffix: string) => string, vari
       ];
     case 'model':
       return [
-        SceneBuilder.class(elementId('person'), units(-20, -4, 8, 8)).properties({
-          name: 'Person',
-          attributes: ['name: string'],
-          methods: ['greet()'],
-        }),
-        SceneBuilder.class(elementId('org'), units(-4, -4, 8, 8)).properties({
-          name: 'Organization',
-          attributes: ['title: string'],
-          methods: ['hire(person)'],
-        }),
+        labelled(SceneBuilder.rect, elementId('person'), units(-20, -4, 8, 8), 'Person'),
+        labelled(SceneBuilder.rect, elementId('org'), units(-4, -4, 8, 8), 'Organization'),
         SceneBuilder.link('curve', `${elementId('person')}#e2`, `${elementId('org')}#w2`).id(elementId('works')),
       ];
     case 'cycle':

package/src/utils/undo.test.ts

@@ -9,8 +9,9 @@ import { describe, test } from 'vitest';
 import { createFreehandProjection } from '../model/projection.ts';
 import { type ConstrainedModel, createConstrainedProjection } from '../model/projections/constrained.ts';
 import { createMemoryStore } from '../model/store.ts';
+import { groupIntoScene } from './group.ts';
 import { createSceneTree } from './testing.ts';
-import { type UndoState, emptyUndo, redo, undo, withUndo } from './undo.ts';
+import { type UndoState, emptyUndo, recordScenes, redo, undo, withUndo } from './undo.ts';
 
 const setup = () => {
   const registry = Registry.make();
@@ -19,7 +20,7 @@ const setup = () => {
   const atom = Atom.keepAlive(Atom.make<UndoState>(emptyUndo()));
   const projection = withUndo(createFreehandProjection({ registry, store, sceneId: root }), registry, atom, root);
   const centerOf = (id: string) => registry.get(projection.scene).nodes[id]?.center;
-  return { registry, root, atom, projection, centerOf };
+  return { registry, root, store, atom, projection, centerOf };
 };
 
 describe('undo', () => {
@@ -55,6 +56,28 @@ describe('undo', () => {
     expect(undo(projection, registry, atom, root)).toBe(true);
   });
 
+  test('grouping into a new scene is one step: undo takes the scene away, redo returns it', ({ expect }) => {
+    const { registry, root, store, atom, projection } = setup();
+    const group = groupIntoScene(registry.get(projection.scene), ['scene:r/a'], 'g');
+    expect(group).toBeDefined();
+    if (!group) {
+      return;
+    }
+    const before = registry.get(store.scenes);
+    registry.set(store.scenes, { ...before, g: group.child });
+    projection.apply({ kind: 'batch', intents: group.intents });
+    recordScenes(registry, atom, root, before);
+    expect(registry.get(projection.scene).nodes.g).toBeDefined();
+
+    expect(undo(projection, registry, atom, root, store)).toBe(true);
+    expect(registry.get(store.scenes).g).toBeUndefined();
+    expect(registry.get(projection.scene).nodes['scene:r/a']).toBeDefined();
+
+    expect(redo(projection, registry, atom, root, store)).toBe(true);
+    expect(registry.get(store.scenes).g).toEqual(group.child);
+    expect(registry.get(projection.scene).nodes.g).toBeDefined();
+  });
+
   test('a constrained projection restores its constraint model', ({ expect }) => {
     const registry = Registry.make();
     const model = Atom.keepAlive(

package/src/utils/undo.ts

@@ -12,15 +12,22 @@ import type * as Atom from 'effect/reactivity/Atom';
 import type * as Registry from 'effect/reactivity/AtomRegistry';
 
 import { type Projection } from '../model/projection.ts';
+import { type SceneMap, type SceneStore } from '../model/store.ts';
 
 /** Entries older than this are dropped rather than growing without bound. */
 export const UNDO_LIMIT = 100;
 
+/**
+ * One undo step: the projection's snapshot from before it, and, for a step that also added or removed scenes (a
+ * group into a new scene), the store's scenes from before it, so undo takes the new scene away and redo returns it.
+ */
+export type UndoEntry = { model: unknown; scenes?: SceneMap };
+
 export type UndoState = {
   /** Which projection the snapshots belong to; a different one starts an empty log. */
   key: string;
-  past: unknown[];
-  future: unknown[];
+  past: UndoEntry[];
+  future: UndoEntry[];
 };
 
 export const emptyUndo = (key = ''): UndoState => ({ key, past: [], future: [] });
@@ -48,24 +55,54 @@ export const withUndo = (
       return;
     }
     const state = stateFor(registry, atom, key);
-    registry.set(atom, { key, past: [...state.past.slice(-(UNDO_LIMIT - 1)), before], future: [] });
+    registry.set(atom, { key, past: [...state.past.slice(-(UNDO_LIMIT - 1)), { model: before }], future: [] });
   },
 });
 
+/** Marks the step just recorded as one that also changed the store's scenes, which were `scenes` before it. */
+export const recordScenes = (
+  registry: Registry.AtomRegistry,
+  atom: Atom.Writable<UndoState>,
+  key: string,
+  scenes: SceneMap,
+): void => {
+  const state = stateFor(registry, atom, key);
+  const last = state.past[state.past.length - 1];
+  if (last) {
+    registry.set(atom, { ...state, past: [...state.past.slice(0, -1), { ...last, scenes }] });
+  }
+};
+
+/** Swaps the model (and the store's scenes, for a step that changed them) for `entry`, returning what it replaced. */
+const swap = (
+  projection: Projection,
+  registry: Registry.AtomRegistry,
+  store: SceneStore | undefined,
+  entry: UndoEntry,
+): UndoEntry => {
+  const scenes = entry.scenes && store ? registry.get(store.scenes) : undefined;
+  const replaced: UndoEntry = { model: projection.snapshot(), ...(scenes ? { scenes } : {}) };
+  if (entry.scenes && store) {
+    registry.set(store.scenes, entry.scenes);
+  }
+  projection.restore(entry.model);
+  return replaced;
+};
+
 export const undo = (
   projection: Projection,
   registry: Registry.AtomRegistry,
   atom: Atom.Writable<UndoState>,
   key: string,
+  store?: SceneStore,
 ): boolean => {
   const state = stateFor(registry, atom, key);
-  const snapshot = state.past[state.past.length - 1];
-  if (state.past.length === 0) {
+  const entry = state.past[state.past.length - 1];
+  if (!entry) {
     return false;
   }
-  const current = projection.snapshot();
-  projection.restore(snapshot);
-  registry.set(atom, { key, past: state.past.slice(0, -1), future: [...state.future, current] });
+  const replaced = swap(projection, registry, store, entry);
+  registry.set(atom, { key, past: state.past.slice(0, -1), future: [...state.future, replaced] });
   return true;
 };
 
@@ -74,14 +111,14 @@ export const redo = (
   registry: Registry.AtomRegistry,
   atom: Atom.Writable<UndoState>,
   key: string,
+  store?: SceneStore,
 ): boolean => {
   const state = stateFor(registry, atom, key);
-  const snapshot = state.future[state.future.length - 1];
-  if (state.future.length === 0) {
+  const entry = state.future[state.future.length - 1];
+  if (!entry) {
     return false;
   }
-  const current = projection.snapshot();
-  projection.restore(snapshot);
-  registry.set(atom, { key, past: [...state.past, current], future: state.future.slice(0, -1) });
+  const replaced = swap(projection, registry, store, entry);
+  registry.set(atom, { key, past: [...state.past, replaced], future: state.future.slice(0, -1) });
   return true;
 };

package/dist/lib/chunk-Grid.mjs

@@ -1,99 +0,0 @@
-import { forwardRef, useId, useMemo } from "react";
-import { mx } from "@dxos/ui-theme";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import * as Hooks from "@dxos/react-ui/Hooks";
-//#region src/components/Grid/Grid.tsx
-var gridRatios = [
-	1 / 4,
-	1,
-	4,
-	16
-];
-var defaultGridSize = 16;
-var defaultOffset = {
-	x: 0,
-	y: 0
-};
-var defaultRange = [defaultGridSize, 128];
-var createId = (parent, grid) => `dx-canvas-grid-${parent}-${grid}`;
-/**
-* A level's line opacity from its on-screen spacing alone: faint at the finest drawn spacing, a step
-* darker per fourfold. A level then fades in as the view zooms rather than popping, and a scene swap
-* that keeps every spacing (drilling through a grid-aligned portal) keeps every line as it was. The
-* step is small and the ceiling low: the grid is a guide under the diagram, so the coarse levels in
-* particular must not read as content.
-*/
-var levelOpacity = (size, min) => Math.min(.12, .04 + .02 * Math.log(size / min) / Math.log(4));
-/** Multi-level grid in screen space, fed the camera's scale and offset. */
-var GridComponent = forwardRef(({ size: gridSize = defaultGridSize, scale = 1, offset = defaultOffset, showAxes = true, ratios = gridRatios, range = defaultRange, classNames }, forwardedRef) => {
-	const svgRef = Hooks.useForwardedRef(forwardedRef);
-	const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};
-	const instanceId = useId();
-	const [min, max] = range;
-	const grids = useMemo(() => ratios.map((ratio) => ({
-		id: ratio,
-		size: ratio * gridSize * scale
-	})).filter(({ size }) => size >= min && size <= max), [
-		ratios,
-		gridSize,
-		scale,
-		min,
-		max
-	]);
-	return /* @__PURE__ */ jsxs("svg", {
-		"data-testid": "dx-canvas-grid",
-		ref: svgRef,
-		className: mx("dx-cover w-full h-full pointer-events-none touch-none select-none", "stroke-neutral-500", classNames),
-		children: [
-			/* @__PURE__ */ jsx("defs", { children: grids.map(({ id, size }) => /* @__PURE__ */ jsx(GridPattern, {
-				id: createId(instanceId, id),
-				offset,
-				size
-			}, id)) }),
-			showAxes && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("line", {
-				x1: 0,
-				y1: offset.y,
-				x2: width,
-				y2: offset.y,
-				className: "stroke-neutral-500 opacity-40"
-			}), /* @__PURE__ */ jsx("line", {
-				x1: offset.x,
-				y1: 0,
-				x2: offset.x,
-				y2: height,
-				className: "stroke-neutral-500 opacity-40"
-			})] }),
-			/* @__PURE__ */ jsx("g", { children: grids.map(({ id, size }) => /* @__PURE__ */ jsx("rect", {
-				opacity: levelOpacity(size, min),
-				fill: `url(#${createId(instanceId, id)})`,
-				width: "100%",
-				height: "100%"
-			}, id)) })
-		]
-	});
-});
-GridComponent.displayName = "GridComponent";
-/** One grid level as an SVG pattern of crossing lines, offset so a line sits on the origin. */
-var GridPattern = ({ id, size, offset }) => /* @__PURE__ */ jsxs("pattern", {
-	id,
-	x: (size / 2 + offset.x) % size,
-	y: (size / 2 + offset.y) % size,
-	width: size,
-	height: size,
-	patternUnits: "userSpaceOnUse",
-	children: [/* @__PURE__ */ jsx("line", {
-		x1: 0,
-		y1: size / 2,
-		x2: size,
-		y2: size / 2
-	}), /* @__PURE__ */ jsx("line", {
-		x1: size / 2,
-		y1: 0,
-		x2: size / 2,
-		y2: size
-	})]
-});
-//#endregion
-export { GridComponent as t };
-
-//# sourceMappingURL=chunk-Grid.mjs.map

package/dist/lib/chunk-Grid.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"chunk-Grid.mjs","names":[],"sources":["../../src/components/Grid/Grid.tsx"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { forwardRef, useId, useMemo } from 'react';\n\nimport * as Hooks from '@dxos/react-ui/Hooks';\nimport type * as Util from '@dxos/react-ui/Util';\nimport { mx } from '@dxos/ui-theme';\n\nimport { type Point } from '../../model/types.ts';\n\nconst gridRatios = [1 / 4, 1, 4, 16];\n\nconst defaultGridSize = 16;\nconst defaultOffset: Point = { x: 0, y: 0 };\nconst defaultRange = [defaultGridSize, 128] as const;\n\nconst createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;\n\n/**\n * A level's line opacity from its on-screen spacing alone: faint at the finest drawn spacing, a step\n * darker per fourfold. A level then fades in as the view zooms rather than popping, and a scene swap\n * that keeps every spacing (drilling through a grid-aligned portal) keeps every line as it was. The\n * step is small and the ceiling low: the grid is a guide under the diagram, so the coarse levels in\n * particular must not read as content.\n */\nconst levelOpacity = (size: number, min: number) => Math.min(0.12, 0.04 + (0.02 * Math.log(size / min)) / Math.log(4));\n\nexport type GridProps = Util.ThemedClassName<{\n  size?: number;\n  scale?: number;\n  offset?: Point;\n  showAxes?: boolean;\n  /** Grid levels as multiples of `size`, finest first. */\n  ratios?: readonly number[];\n  /** On-screen cell size (px) outside which a level is not drawn. */\n  range?: readonly [min: number, max: number];\n}>;\n\n/** Multi-level grid in screen space, fed the camera's scale and offset. */\nexport const GridComponent = forwardRef<SVGSVGElement, GridProps>(\n  (\n    {\n      size: gridSize = defaultGridSize,\n      scale = 1,\n      offset = defaultOffset,\n      showAxes = true,\n      ratios = gridRatios,\n      range = defaultRange,\n      classNames,\n    },\n    forwardedRef,\n  ) => {\n    const svgRef = Hooks.useForwardedRef(forwardedRef);\n    const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};\n\n    const instanceId = useId();\n    const [min, max] = range;\n    const grids = useMemo(\n      () =>\n        ratios\n          .map((ratio) => ({ id: ratio, size: ratio * gridSize * scale }))\n          .filter(({ size }) => size >= min && size <= max),\n      [ratios, gridSize, scale, min, max],\n    );\n\n    return (\n      <svg\n        data-testid='dx-canvas-grid'\n        ref={svgRef}\n        // `dx-cover` (absolute inset-0) does not stretch a replaced <svg> element — without an explicit\n        // size it falls back to the intrinsic 300x150, clipping the 100%-sized grid rects. Force full size.\n        className={mx(\n          'dx-cover w-full h-full pointer-events-none touch-none select-none',\n          'stroke-neutral-500',\n          classNames,\n        )}\n      >\n        {/* NOTE: The pattern is offset so that the middle of the pattern aligns with the grid. */}\n        <defs>\n          {grids.map(({ id, size }) => (\n            <GridPattern key={id} id={createId(instanceId, id)} offset={offset} size={size} />\n          ))}\n        </defs>\n        {showAxes && (\n          <>\n            <line x1={0} y1={offset.y} x2={width} y2={offset.y} className='stroke-neutral-500 opacity-40' />\n            <line x1={offset.x} y1={0} x2={offset.x} y2={height} className='stroke-neutral-500 opacity-40' />\n          </>\n        )}\n        <g>\n          {grids.map(({ id, size }) => (\n            <rect\n              key={id}\n              opacity={levelOpacity(size, min)}\n              fill={`url(#${createId(instanceId, id)})`}\n              width='100%'\n              height='100%'\n            />\n          ))}\n        </g>\n      </svg>\n    );\n  },\n);\n\nGridComponent.displayName = 'GridComponent';\n\n/** One grid level as an SVG pattern of crossing lines, offset so a line sits on the origin. */\nconst GridPattern = ({ id, size, offset }: { id: string; size: number; offset: Point }) => (\n  <pattern\n    id={id}\n    x={(size / 2 + offset.x) % size}\n    y={(size / 2 + offset.y) % size}\n    width={size}\n    height={size}\n    patternUnits='userSpaceOnUse'\n  >\n    <line x1={0} y1={size / 2} x2={size} y2={size / 2} />\n    <line x1={size / 2} y1={0} x2={size / 2} y2={size} />\n  </pattern>\n);\n"],"mappings":";;;;;AAYA,IAAM,aAAa;CAAC,IAAI;CAAG;CAAG;CAAG;AAAE;AAEnC,IAAM,kBAAkB;AACxB,IAAM,gBAAuB;CAAE,GAAG;CAAG,GAAG;AAAE;AAC1C,IAAM,eAAe,CAAC,iBAAiB,GAAG;AAE1C,IAAM,YAAY,QAAgB,SAAiB,kBAAkB,OAAO,GAAG;;;;;;;;AAS/E,IAAM,gBAAgB,MAAc,QAAgB,KAAK,IAAI,KAAM,MAAQ,MAAO,KAAK,IAAI,OAAO,GAAG,IAAK,KAAK,IAAI,CAAC,CAAC;;AAcrH,IAAa,gBAAgB,YAEzB,EACE,MAAM,WAAW,iBACjB,QAAQ,GACR,SAAS,eACT,WAAW,MACX,SAAS,YACT,QAAQ,cACR,cAEF,iBACG;CACH,MAAM,SAAS,MAAM,gBAAgB,YAAY;CACjD,MAAM,EAAE,QAAQ,GAAG,SAAS,MAAM,OAAO,SAAS,sBAAsB,KAAK,CAAC;CAE9E,MAAM,aAAa,MAAM;CACzB,MAAM,CAAC,KAAK,OAAO;CACnB,MAAM,QAAQ,cAEV,OACG,KAAK,WAAW;EAAE,IAAI;EAAO,MAAM,QAAQ,WAAW;CAAM,EAAE,CAAA,CAC9D,QAAQ,EAAE,WAAW,QAAQ,OAAO,QAAQ,GAAG,GACpD;EAAC;EAAQ;EAAU;EAAO;EAAK;CAAG,CACpC;CAEA,OACE,qBAAC,OAAD;EACE,eAAY;EACZ,KAAK;EAGL,WAAW,GACT,qEACA,sBACA,UACF;EATF,UAAA;GAYE,oBAAC,QAAD,EAAA,UACG,MAAM,KAAK,EAAE,IAAI,WAChB,oBAAC,aAAD;IAAsB,IAAI,SAAS,YAAY,EAAE;IAAW;IAAc;GAAO,GAA/D,EAA+D,CAClF,EACG,CAAA;GACL,YACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;IAAM,IAAI;IAAG,IAAI,OAAO;IAAG,IAAI;IAAO,IAAI,OAAO;IAAG,WAAU;GAAiC,CAAA,GAC/F,oBAAC,QAAD;IAAM,IAAI,OAAO;IAAG,IAAI;IAAG,IAAI,OAAO;IAAG,IAAI;IAAQ,WAAU;GAAiC,CAAA,CAChG,EAAA,CAAA;GAEJ,oBAAC,KAAD,EAAA,UACG,MAAM,KAAK,EAAE,IAAI,WAChB,oBAAC,QAAD;IAEE,SAAS,aAAa,MAAM,GAAG;IAC/B,MAAM,QAAQ,SAAS,YAAY,EAAE,EAAE;IACvC,OAAM;IACN,QAAO;GACR,GALM,EAKN,CACF,EACA,CAAA;EACA;;AAET,CACF;AAEA,cAAc,cAAc;;AAG5B,IAAM,eAAe,EAAE,IAAI,MAAM,aAC/B,qBAAC,WAAD;CACM;CACJ,IAAI,OAAO,IAAI,OAAO,KAAK;CAC3B,IAAI,OAAO,IAAI,OAAO,KAAK;CAC3B,OAAO;CACP,QAAQ;CACR,cAAa;CANf,UAAA,CAQE,oBAAC,QAAD;EAAM,IAAI;EAAG,IAAI,OAAO;EAAG,IAAI;EAAM,IAAI,OAAO;CAAI,CAAA,GACpD,oBAAC,QAAD;EAAM,IAAI,OAAO;EAAG,IAAI;EAAG,IAAI,OAAO;EAAG,IAAI;CAAO,CAAA,CAC7C"}