@vizel/svelte 0.0.1-alpha.1

package/dist/components/VizelBubbleMenuDefault.svelte

@@ -0,0 +1,111 @@
+<script lang="ts" module>
+import type { Editor } from "@vizel/core";
+
+export interface VizelBubbleMenuDefaultProps {
+  /** The editor instance */
+  editor: Editor;
+  /** Custom class name */
+  class?: string;
+  /** Enable embed option in link editor (requires Embed extension) */
+  enableEmbed?: boolean;
+}
+</script>
+
+<script lang="ts">
+import { createVizelState } from "../runes/createVizelState.svelte.ts";
+import VizelBubbleMenuButton from "./VizelBubbleMenuButton.svelte";
+import VizelBubbleMenuColorPicker from "./VizelBubbleMenuColorPicker.svelte";
+import VizelLinkEditor from "./VizelLinkEditor.svelte";
+import VizelIcon from "./VizelIcon.svelte";
+import VizelNodeSelector from "./VizelNodeSelector.svelte";
+
+let { editor, class: className, enableEmbed }: VizelBubbleMenuDefaultProps = $props();
+let showLinkEditor = $state(false);
+
+// Subscribe to editor state changes to update active states
+const editorState = createVizelState(() => editor);
+
+// Create derived values that depend on editorState.current to trigger re-renders
+const isBoldActive = $derived.by(() => {
+  void editorState.current; // Trigger reactivity
+  return editor.isActive("bold");
+});
+const isItalicActive = $derived.by(() => {
+  void editorState.current;
+  return editor.isActive("italic");
+});
+const isStrikeActive = $derived.by(() => {
+  void editorState.current;
+  return editor.isActive("strike");
+});
+const isUnderlineActive = $derived.by(() => {
+  void editorState.current;
+  return editor.isActive("underline");
+});
+const isCodeActive = $derived.by(() => {
+  void editorState.current;
+  return editor.isActive("code");
+});
+const isLinkActive = $derived.by(() => {
+  void editorState.current;
+  return editor.isActive("link");
+});
+</script>
+
+{#if showLinkEditor}
+  <VizelLinkEditor {editor} {...(enableEmbed ? { enableEmbed } : {})} onclose={() => (showLinkEditor = false)} />
+{:else}
+  <div class="vizel-bubble-menu-toolbar {className ?? ''}">
+    <VizelNodeSelector {editor} />
+    <VizelBubbleMenuButton
+      action="bold"
+      isActive={isBoldActive}
+      title="Bold (Cmd+B)"
+      onclick={() => editor.chain().focus().toggleBold().run()}
+    >
+      <VizelIcon name="bold" />
+    </VizelBubbleMenuButton>
+    <VizelBubbleMenuButton
+      action="italic"
+      isActive={isItalicActive}
+      title="Italic (Cmd+I)"
+      onclick={() => editor.chain().focus().toggleItalic().run()}
+    >
+      <VizelIcon name="italic" />
+    </VizelBubbleMenuButton>
+    <VizelBubbleMenuButton
+      action="strike"
+      isActive={isStrikeActive}
+      title="Strikethrough"
+      onclick={() => editor.chain().focus().toggleStrike().run()}
+    >
+      <VizelIcon name="strikethrough" />
+    </VizelBubbleMenuButton>
+    <VizelBubbleMenuButton
+      action="underline"
+      isActive={isUnderlineActive}
+      title="Underline (Cmd+U)"
+      onclick={() => editor.chain().focus().toggleUnderline().run()}
+    >
+      <VizelIcon name="underline" />
+    </VizelBubbleMenuButton>
+    <VizelBubbleMenuButton
+      action="code"
+      isActive={isCodeActive}
+      title="Code (Cmd+E)"
+      onclick={() => editor.chain().focus().toggleCode().run()}
+    >
+      <VizelIcon name="code" />
+    </VizelBubbleMenuButton>
+    <VizelBubbleMenuButton
+      action="link"
+      isActive={isLinkActive}
+      title="Link (Cmd+K)"
+      onclick={() => (showLinkEditor = true)}
+    >
+      <VizelIcon name="link" />
+    </VizelBubbleMenuButton>
+    <VizelBubbleMenuColorPicker {editor} type="textColor" />
+    <VizelBubbleMenuColorPicker {editor} type="highlight" />
+  </div>
+{/if}

package/dist/components/VizelBubbleMenuDefault.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Editor } from "@vizel/core";
+export interface VizelBubbleMenuDefaultProps {
+    /** The editor instance */
+    editor: Editor;
+    /** Custom class name */
+    class?: string;
+    /** Enable embed option in link editor (requires Embed extension) */
+    enableEmbed?: boolean;
+}
+declare const VizelBubbleMenuDefault: import("svelte").Component<VizelBubbleMenuDefaultProps, {}, "">;
+type VizelBubbleMenuDefault = ReturnType<typeof VizelBubbleMenuDefault>;
+export default VizelBubbleMenuDefault;
+//# sourceMappingURL=VizelBubbleMenuDefault.svelte.d.ts.map

package/dist/components/VizelBubbleMenuDefault.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizelBubbleMenuDefault.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelBubbleMenuDefault.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAE1C,MAAM,WAAW,2BAA2B;IAC1C,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAmFD,QAAA,MAAM,sBAAsB,iEAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/components/VizelBubbleMenuDivider.svelte

@@ -0,0 +1,12 @@
+<script lang="ts" module>
+export interface VizelBubbleMenuDividerProps {
+  /** Custom class name */
+  class?: string;
+}
+</script>
+
+<script lang="ts">
+let { class: className }: VizelBubbleMenuDividerProps = $props();
+</script>
+
+<span class="vizel-bubble-menu-divider {className ?? ''}"></span>

package/dist/components/VizelBubbleMenuDivider.svelte.d.ts

@@ -0,0 +1,8 @@
+export interface VizelBubbleMenuDividerProps {
+    /** Custom class name */
+    class?: string;
+}
+declare const VizelBubbleMenuDivider: import("svelte").Component<VizelBubbleMenuDividerProps, {}, "">;
+type VizelBubbleMenuDivider = ReturnType<typeof VizelBubbleMenuDivider>;
+export default VizelBubbleMenuDivider;
+//# sourceMappingURL=VizelBubbleMenuDivider.svelte.d.ts.map

package/dist/components/VizelBubbleMenuDivider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizelBubbleMenuDivider.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelBubbleMenuDivider.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,2BAA2B;IAC1C,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAYD,QAAA,MAAM,sBAAsB,iEAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/components/VizelColorPicker.svelte

@@ -0,0 +1,269 @@
+<script lang="ts" module>
+import type { VizelColorDefinition } from "@vizel/core";
+
+export interface VizelColorPickerProps {
+  /** Color palette to display */
+  colors: VizelColorDefinition[];
+  /** Currently selected color */
+  value?: string;
+  /** Callback when color is selected */
+  onchange: (color: string) => void;
+  /** Label for accessibility */
+  label?: string;
+  /** Custom class name */
+  class?: string;
+  /** Enable custom HEX input (default: true) */
+  allowCustomColor?: boolean;
+  /** Recent colors to display */
+  recentColors?: string[];
+  /** Show recent colors section (default: true) */
+  showRecentColors?: boolean;
+  /** "None" option color values (e.g., ["transparent", "inherit"]) */
+  noneValues?: string[];
+}
+</script>
+
+<script lang="ts">
+import { isVizelValidHexColor, normalizeVizelHexColor } from "@vizel/core";
+import VizelIcon from "./VizelIcon.svelte";
+
+const GRID_COLUMNS = 4;
+
+let {
+  colors,
+  value,
+  onchange,
+  label = "Color palette",
+  class: className,
+  allowCustomColor = true,
+  recentColors = [],
+  showRecentColors = true,
+  noneValues = ["transparent", "inherit"],
+}: VizelColorPickerProps = $props();
+
+let inputValue = $state("");
+let focusedIndex = $state(-1);
+let swatchRefs: (HTMLButtonElement | null)[] = $state([]);
+let inputRef: HTMLInputElement | null = $state(null);
+
+// Clean up swatchRefs when colors decrease
+$effect(() => {
+  const length = allColors.length;
+  if (swatchRefs.length > length) {
+    swatchRefs.length = length;
+  }
+});
+
+// Build flat list of all selectable colors for keyboard navigation
+const allColors = $derived([
+  ...(showRecentColors ? recentColors : []),
+  ...colors.map((c) => c.color),
+]);
+
+// Calculate the offset for color palette indices (after recent colors)
+const paletteOffset = $derived(showRecentColors ? recentColors.length : 0);
+
+// Find color definition by color value
+function findColorDef(color: string): VizelColorDefinition | undefined {
+  return colors.find((c) => c.color === color);
+}
+
+// Get display name for a color
+function getColorName(color: string): string {
+  const def = findColorDef(color);
+  return def?.name ?? color;
+}
+
+// Check if a color is a "none" value
+function isNoneValue(color: string): boolean {
+  return noneValues.includes(color);
+}
+
+// Handle swatch selection
+function handleSelect(color: string) {
+  onchange(color);
+  inputValue = "";
+}
+
+// Handle custom color input submit
+function handleInputSubmit() {
+  const normalized = normalizeVizelHexColor(inputValue);
+  if (isVizelValidHexColor(normalized)) {
+    onchange(normalized);
+    inputValue = "";
+  }
+}
+
+// Handle input keydown
+function handleInputKeyDown(e: KeyboardEvent) {
+  if (e.key === "Enter") {
+    e.preventDefault();
+    handleInputSubmit();
+  }
+}
+
+// Keyboard navigation handler
+function handleKeyDown(e: KeyboardEvent, currentIndex: number) {
+  const totalColors = allColors.length;
+  if (totalColors === 0) return;
+
+  let newIndex = currentIndex;
+  let handled = false;
+
+  switch (e.key) {
+    case "ArrowRight":
+      newIndex = (currentIndex + 1) % totalColors;
+      handled = true;
+      break;
+    case "ArrowLeft":
+      newIndex = (currentIndex - 1 + totalColors) % totalColors;
+      handled = true;
+      break;
+    case "ArrowDown":
+      newIndex = Math.min(currentIndex + GRID_COLUMNS, totalColors - 1);
+      handled = true;
+      break;
+    case "ArrowUp":
+      newIndex = Math.max(currentIndex - GRID_COLUMNS, 0);
+      handled = true;
+      break;
+    case "Home":
+      newIndex = 0;
+      handled = true;
+      break;
+    case "End":
+      newIndex = totalColors - 1;
+      handled = true;
+      break;
+    case "Enter":
+    case " ": {
+      e.preventDefault();
+      const selectedColor = allColors[currentIndex];
+      if (selectedColor) {
+        handleSelect(selectedColor);
+      }
+      return;
+    }
+  }
+
+  if (handled) {
+    e.preventDefault();
+    focusedIndex = newIndex;
+    swatchRefs[newIndex]?.focus();
+  }
+}
+
+// Update input value when value prop changes
+$effect(() => {
+  if (value && !isNoneValue(value)) {
+    inputValue = value;
+  } else {
+    inputValue = "";
+  }
+});
+
+// Focus first swatch or current value on mount (run only once)
+$effect(() => {
+  const currentIndex = value ? allColors.indexOf(value) : -1;
+  if (currentIndex >= 0) {
+    focusedIndex = currentIndex;
+  } else if (allColors.length > 0) {
+    focusedIndex = 0;
+  }
+});
+
+const isInputValid = $derived(isVizelValidHexColor(normalizeVizelHexColor(inputValue)));
+const previewColor = $derived(isInputValid ? normalizeVizelHexColor(inputValue) : undefined);
+</script>
+
+<div
+  class="vizel-color-picker-content {className ?? ''}"
+  role="listbox"
+  aria-label={label}
+>
+  <!-- Recent colors -->
+  {#if showRecentColors && recentColors.length > 0}
+    <div class="vizel-color-picker-section">
+      <div class="vizel-color-picker-label">Recent</div>
+      <div class="vizel-color-picker-recent">
+        {#each recentColors as color, idx}
+          <button
+            bind:this={swatchRefs[idx]}
+            type="button"
+            role="option"
+            aria-selected={value === color}
+            aria-label={color}
+            tabindex={focusedIndex === idx ? 0 : -1}
+            class="vizel-color-picker-swatch {value === color ? 'is-active' : ''}"
+            style="background-color: {isNoneValue(color) ? 'transparent' : color}"
+            data-color={color}
+            onclick={() => handleSelect(color)}
+            onkeydown={(e) => handleKeyDown(e, idx)}
+          >
+            {#if isNoneValue(color)}
+              <span class="vizel-color-picker-none"><VizelIcon name="x" /></span>
+            {/if}
+          </button>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  <!-- Color palette -->
+  <div class="vizel-color-picker-section">
+    <div class="vizel-color-picker-grid">
+      {#each colors as colorDef, i}
+        {@const idx = paletteOffset + i}
+        <button
+          bind:this={swatchRefs[idx]}
+          type="button"
+          role="option"
+          aria-selected={value === colorDef.color}
+          aria-label={colorDef.name}
+          tabindex={focusedIndex === idx ? 0 : -1}
+          class="vizel-color-picker-swatch {value === colorDef.color ? 'is-active' : ''}"
+          style="background-color: {isNoneValue(colorDef.color) ? 'transparent' : colorDef.color}"
+          data-color={colorDef.color}
+          onclick={() => handleSelect(colorDef.color)}
+          onkeydown={(e) => handleKeyDown(e, idx)}
+        >
+          {#if isNoneValue(colorDef.color)}
+            <span class="vizel-color-picker-none"><VizelIcon name="x" /></span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  </div>
+
+  <!-- HEX input with preview -->
+  {#if allowCustomColor}
+    <div class="vizel-color-picker-input-row">
+      <span
+        class="vizel-color-picker-preview"
+        style="background-color: {previewColor || 'transparent'}"
+        aria-hidden="true"
+      ></span>
+      <input
+        bind:this={inputRef}
+        type="text"
+        class="vizel-color-picker-input"
+        placeholder="#000000"
+        value={inputValue}
+        maxlength={7}
+        aria-label="Custom color hex value"
+        oninput={(e) => (inputValue = (e.target as HTMLInputElement).value)}
+        onkeydown={handleInputKeyDown}
+      />
+      <button
+        type="button"
+        class="vizel-color-picker-apply"
+        disabled={!isInputValid}
+        title="Apply"
+        aria-label="Apply custom color"
+        onclick={handleInputSubmit}
+      >
+        <VizelIcon name="check" />
+      </button>
+    </div>
+  {/if}
+</div>

package/dist/components/VizelColorPicker.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { VizelColorDefinition } from "@vizel/core";
+export interface VizelColorPickerProps {
+    /** Color palette to display */
+    colors: VizelColorDefinition[];
+    /** Currently selected color */
+    value?: string;
+    /** Callback when color is selected */
+    onchange: (color: string) => void;
+    /** Label for accessibility */
+    label?: string;
+    /** Custom class name */
+    class?: string;
+    /** Enable custom HEX input (default: true) */
+    allowCustomColor?: boolean;
+    /** Recent colors to display */
+    recentColors?: string[];
+    /** Show recent colors section (default: true) */
+    showRecentColors?: boolean;
+    /** "None" option color values (e.g., ["transparent", "inherit"]) */
+    noneValues?: string[];
+}
+declare const VizelColorPicker: import("svelte").Component<VizelColorPickerProps, {}, "">;
+type VizelColorPicker = ReturnType<typeof VizelColorPicker>;
+export default VizelColorPicker;
+//# sourceMappingURL=VizelColorPicker.svelte.d.ts.map

package/dist/components/VizelColorPicker.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizelColorPicker.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelColorPicker.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,WAAW,qBAAqB;IACpC,+BAA+B;IAC/B,MAAM,EAAE,oBAAoB,EAAE,CAAC;IAC/B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AA8MD,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/VizelContext.d.ts

@@ -0,0 +1,27 @@
+import type { Editor } from "@vizel/core";
+export declare const VIZEL_CONTEXT_KEY: unique symbol;
+/**
+ * Get the editor instance from VizelProvider context.
+ *
+ * @throws Error if used outside of VizelProvider
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { getVizelContext } from '@vizel/svelte';
+ *
+ * const getEditor = getVizelContext();
+ * </script>
+ *
+ * <button onclick={() => getEditor()?.chain().focus().toggleBold().run()}>
+ *   Bold
+ * </button>
+ * ```
+ */
+export declare function getVizelContext(): () => Editor | null;
+/**
+ * Get the editor instance from context.
+ * Returns undefined if used outside of VizelProvider (does not throw).
+ */
+export declare function getVizelContextSafe(): (() => Editor | null) | undefined;
+//# sourceMappingURL=VizelContext.d.ts.map

package/dist/components/VizelContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizelContext.d.ts","sourceRoot":"","sources":["../../src/components/VizelContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAG1C,eAAO,MAAM,iBAAiB,eAAyB,CAAC;AAExD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,eAAe,IAAI,MAAM,MAAM,GAAG,IAAI,CAMrD;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,CAAC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,SAAS,CAEvE"}

package/dist/components/VizelContext.js

@@ -0,0 +1,34 @@
+import { getContext } from "svelte";
+export const VIZEL_CONTEXT_KEY = Symbol("vizel-editor");
+/**
+ * Get the editor instance from VizelProvider context.
+ *
+ * @throws Error if used outside of VizelProvider
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { getVizelContext } from '@vizel/svelte';
+ *
+ * const getEditor = getVizelContext();
+ * </script>
+ *
+ * <button onclick={() => getEditor()?.chain().focus().toggleBold().run()}>
+ *   Bold
+ * </button>
+ * ```
+ */
+export function getVizelContext() {
+    const getEditor = getContext(VIZEL_CONTEXT_KEY);
+    if (!getEditor) {
+        throw new Error("getVizelContext must be used within a VizelProvider");
+    }
+    return getEditor;
+}
+/**
+ * Get the editor instance from context.
+ * Returns undefined if used outside of VizelProvider (does not throw).
+ */
+export function getVizelContextSafe() {
+    return getContext(VIZEL_CONTEXT_KEY);
+}

package/dist/components/VizelEditor.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" module>
+import type { Editor } from "@vizel/core";
+
+export interface VizelEditorProps {
+  /** Override the editor from context */
+  editor?: Editor | null;
+  /** Custom class name */
+  class?: string;
+}
+
+export interface VizelExposed {
+  /** The container DOM element */
+  container: HTMLDivElement | null;
+}
+</script>
+
+<script lang="ts">
+import { getVizelContextSafe } from "./VizelContext.ts";
+
+let { editor: editorProp, class: className }: VizelEditorProps = $props();
+
+const contextEditor = getVizelContextSafe();
+const editor = $derived(editorProp ?? contextEditor?.());
+
+let element: HTMLDivElement | null = $state(null);
+
+// Expose container element to parent component
+export function getExposed(): VizelExposed {
+  return {
+    get container() {
+      return element;
+    },
+  };
+}
+
+$effect(() => {
+  if (!editor || !element) {
+    return;
+  }
+
+  const currentEditor = editor;
+  const currentElement = element;
+
+  // Mount the editor's DOM view to the container element
+  currentElement.appendChild(currentEditor.view.dom);
+
+  // Update editable state
+  currentEditor.view.setProps({
+    editable: () => currentEditor?.isEditable ?? false,
+  });
+
+  // Cleanup: remove DOM element when editor changes or unmounts
+  return () => {
+    if (currentEditor.view.dom.parentNode === currentElement) {
+      currentElement.removeChild(currentEditor.view.dom);
+    }
+  };
+});
+</script>
+
+<div bind:this={element} class={className} data-vizel-content></div>

package/dist/components/VizelEditor.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Editor } from "@vizel/core";
+export interface VizelEditorProps {
+    /** Override the editor from context */
+    editor?: Editor | null;
+    /** Custom class name */
+    class?: string;
+}
+export interface VizelExposed {
+    /** The container DOM element */
+    container: HTMLDivElement | null;
+}
+declare const VizelEditor: import("svelte").Component<VizelEditorProps, {
+    getExposed: () => VizelExposed;
+}, "">;
+type VizelEditor = ReturnType<typeof VizelEditor>;
+export default VizelEditor;
+//# sourceMappingURL=VizelEditor.svelte.d.ts.map

package/dist/components/VizelEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizelEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAE1C,MAAM,WAAW,gBAAgB;IAC/B,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,YAAY;IAC3B,gCAAgC;IAChC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAC;CAClC;AAuDD,QAAA,MAAM,WAAW;sBAvCO,YAAY;MAuCqB,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}