dialkit 1.2.0 → 1.3.0

package/README.md

@@ -1,4 +1,6 @@
-# dialkit
+# dialkit v1.2.0
+
+<img src="https://joshpuckett.me/images/dialkit.png" width="100%" />
 
 Real-time parameter tweaking for React, Solid, Svelte, and Vue, created by Josh Puckett.
 
@@ -70,6 +72,8 @@ const params = useDialKit(name, config, options?)
 |-------|------|-------------|
 | `name` | `string` | Panel title displayed in the UI |
 | `config` | `DialConfig` | Parameter definitions (see Control Types below) |
+| `options.id` | `string` | Stable logical id for sharing values across remounts/pages |
+| `options.persist` | `DialKitPersistOptions` | Persist values to browser storage |
 | `options.onAction` | `(path: string) => void` | Callback when action buttons are clicked |
 | `options.shortcuts` | `Record<string, ShortcutConfig>` | Keyboard shortcuts for controls (see [Keyboard Shortcuts](#keyboard-shortcuts)) |
 
@@ -77,6 +81,122 @@ Returns a fully typed object matching your config shape with live values. Updati
 
 ---
 
+## Stable IDs and Persistence
+
+By default, a DialKit panel is tied to the lifecycle of the component that calls `useDialKit`. Pass `id` when multiple mounts should reconnect to the same logical panel, and pass `persist: true` when values should survive reloads and browser sessions.
+
+```tsx
+// dials/useOnboardingDials.ts
+import { useDialKit } from 'dialkit';
+
+export function useOnboardingDials() {
+  return useDialKit('Onboarding', {
+    name: { type: 'text', default: 'Avery', placeholder: 'Name' },
+    avatarScale: [1, 0.6, 1.6, 0.01],
+    accent: { type: 'color', default: '#6C5CE7' },
+  }, {
+    id: 'onboarding',
+    persist: true,
+  });
+}
+```
+
+Use that helper anywhere the shared values are needed:
+
+```tsx
+function PageTwo() {
+  const onboarding = useOnboardingDials();
+
+  const page = useDialKit('Page Two', {
+    cardRadius: [16, 0, 64],
+  });
+
+  return (
+    <Card
+      name={onboarding.name}
+      radius={page.cardRadius}
+      accent={onboarding.accent}
+    />
+  );
+}
+```
+
+When `PageTwo` is mounted, the single `<DialRoot />` shows both `Onboarding` and `Page Two` as top-level sections. If another page calls `useOnboardingDials()`, DialKit reconnects to the same `id` and keeps the shared values.
+
+`persist: true` stores values, presets, and the active preset in `localStorage` using `dialkit:${id}` as the key. Use the object form to customize storage:
+
+```tsx
+useDialKit('Onboarding', config, {
+  id: 'onboarding',
+  persist: {
+    key: 'my-app:onboarding-dials',
+    storage: 'sessionStorage',
+    presets: false,
+  },
+});
+```
+
+The `id` string has no special format; it only needs to be reused wherever you want the same logical panel. Without `id` or `persist`, DialKit behaves exactly as before.
+
+---
+
+## useDialKitController
+
+Use the controller API when your app code also needs to update DialKit values, such as reset buttons, URL sync, or app-defined preset buttons.
+
+```tsx
+import { useDialKitController } from 'dialkit';
+
+function Card() {
+  const dial = useDialKitController('Card', {
+    blur: [24, 0, 100],
+    scale: 1.2,
+    color: '#ff5500',
+    visible: true,
+    shadow: {
+      radius: [16, 0, 64],
+    },
+  });
+
+  return (
+    <>
+      <button onClick={() => dial.setValues({
+        blur: 48,
+        scale: 1,
+        shadow: { radius: 28 },
+      })}>
+        Apply preset
+      </button>
+      <button onClick={() => dial.resetValues()}>Reset</button>
+
+      <div style={{
+        filter: `blur(${dial.values.blur}px)`,
+        transform: `scale(${dial.values.scale})`,
+        color: dial.values.color,
+        opacity: dial.values.visible ? 1 : 0,
+        borderRadius: dial.values.shadow.radius,
+      }}>
+        ...
+      </div>
+    </>
+  );
+}
+```
+
+Controller methods:
+
+| Method | Description |
+|--------|-------------|
+| `values` | The same live resolved values returned by `useDialKit` |
+| `setValue(path, value)` | Updates one control by dot path, like `'shadow.radius'` |
+| `setValues(values)` | Updates multiple controls with a typed nested partial object |
+| `resetValues()` | Restores the current config defaults and clears the active preset |
+| `getValues()` | Reads the latest resolved values outside render callbacks |
+
+Programmatic updates use the same state as panel edits. If a saved preset is active, updates are saved into that preset; otherwise they update the base "Version 1" values. Action controls are triggers, so they are not set by `setValues`.
+
+---
+
 ## Control Types
 
 ### Slider
@@ -267,9 +387,47 @@ const values = useDialKit('Controls', {
 | `defaultOpen` | `boolean` | `true` |
 | `mode` | `'popover' \| 'inline'` | `'popover'` |
 | `productionEnabled` | `boolean` | `false` in production, `true` otherwise |
+| `onOpenChange` | `(open: boolean) => void` | `undefined` |
 
 Mount once at your app root. In the default `popover` mode, the panel renders via a portal on `document.body`. It collapses to a small icon button and expands to 280px wide on click.
 
+### Multiple panels
+
+If multiple `useDialKit` calls are registered under the same root, DialKit renders one shared shell and shows each panel as a collapsible top-level section. No extra API is needed:
+
+```tsx
+function PhotoStack() {
+  const photo = useDialKit('Photo Stack', {
+    blur: [12, 0, 40],
+    scale: [1, 0.5, 2],
+  });
+
+  const stage = useDialKit('Stage', {
+    pagePadding: [40, 16, 96],
+    background: '#ffffff',
+  });
+
+  return (
+    <div style={{ padding: stage.pagePadding, background: stage.background }}>
+      <img style={{ filter: `blur(${photo.blur}px)`, transform: `scale(${photo.scale})` }} />
+    </div>
+  );
+}
+```
+
+The mounted `<DialRoot />` stays the same. With a single registered panel, the panel title and layout stay unchanged. This behavior works the same way in React, Solid, Svelte, and Vue.
+
+Use `onOpenChange` when you need to persist whether the floating panel is open or collapsed:
+
+```tsx
+<DialRoot
+  defaultOpen={localStorage.getItem('dialkit-open') !== '0'}
+  onOpenChange={(open) => {
+    localStorage.setItem('dialkit-open', open ? '1' : '0');
+  }}
+/>
+```
+
 DialKit is automatically hidden in production builds. To enable it in production, pass `productionEnabled`:
 
 ```tsx
@@ -511,7 +669,22 @@ function Card() {
 }
 ```
 
-`createDialKit` returns an accessor — call `params()` to read the current values. All control types, config shapes, and panel features (presets, copy, folders) work identically to the React version.
+`createDialKit` returns an accessor — call `params()` to read the current values. All control types, config shapes, and panel features (presets, copy, folders, and `DialRoot` props like `onOpenChange`) work identically to the React version.
+
+Use `createDialKitController` when Solid code needs to update values:
+
+```tsx
+import { createDialKitController } from 'dialkit/solid';
+
+const dial = createDialKitController('Card', {
+  blur: [24, 0, 100],
+  shadow: { radius: [16, 0, 64] },
+});
+
+dial.setValues({ blur: 48, shadow: { radius: 28 } });
+dial.resetValues();
+dial.values().blur;
+```
 
 ---
 
@@ -552,7 +725,30 @@ npm install dialkit
 </div>
 ```
 
-`createDialKit` returns a reactive object — access values directly (e.g. `params.blur`). Styles are injected automatically by `DialRoot` (no CSS import needed). Cleanup is automatic when the component unmounts. All control types, presets, folders, and transitions match the React/Solid entries.
+`createDialKit` returns a reactive object — access values directly (e.g. `params.blur`). Styles are injected automatically by `DialRoot` (no CSS import needed). Cleanup is automatic when the component unmounts. All control types, presets, folders, transitions, and `DialRoot` props like `onOpenChange` match the React/Solid entries.
+
+Use `createDialKitController` when Svelte code needs to update values:
+
+```svelte
+<script>
+  import { createDialKitController } from 'dialkit/svelte';
+
+  const dial = createDialKitController('Card', {
+    blur: [24, 0, 100],
+    shadow: { radius: [16, 0, 64] }
+  });
+
+  const params = dial.values;
+</script>
+
+<button onclick={() => dial.setValues({ blur: 48, shadow: { radius: 28 } })}>
+  Apply preset
+</button>
+
+<div style:filter={`blur(${params.blur}px)`} style:border-radius={`${params.shadow.radius}px`}>
+  ...
+</div>
+```
 
 ---
 
@@ -584,7 +780,7 @@ import Card from './Card.vue';
 
 <template>
   <Card />
-  <DialRoot />
+  <DialRoot @open-change="(open) => localStorage.setItem('dialkit-open', open ? '1' : '0')" />
 </template>
 ```
 
@@ -615,6 +811,25 @@ const params = useDialKit('Card', {
 
 `useDialKit` returns a reactive object. All control types, presets, folders, keyboard shortcuts, and transitions work identically to the other frameworks.
 
+Use `useDialKitController` when Vue code needs to update values:
+
+```vue
+<script setup>
+import { useDialKitController } from 'dialkit/vue';
+
+const { values, setValues, resetValues } = useDialKitController('Card', {
+  blur: [24, 0, 100],
+  shadow: { radius: [16, 0, 64] },
+});
+</script>
+
+<template>
+  <button @click="setValues({ blur: 48, shadow: { radius: 28 } })">Apply preset</button>
+  <button @click="resetValues()">Reset</button>
+  <div :style="{ filter: `blur(${values.blur}px)`, borderRadius: `${values.shadow.radius}px` }" />
+</template>
+```
+
 ---
 
 ## Types
@@ -624,6 +839,8 @@ All config and value types are exported:
 ```tsx
 import type {
   SpringConfig,
+  EasingConfig,
+  TransitionConfig,
   ActionConfig,
   SelectConfig,
   ColorConfig,
@@ -632,6 +849,8 @@ import type {
   ShortcutMode,
   DialConfig,
   DialValue,
+  DialKitController,
+  DialKitValueUpdates,
   ResolvedValues,
   ControlMeta,
   PanelConfig,

package/dist/dropdown-position.d.ts

@@ -0,0 +1,15 @@
+type DropdownPosition = {
+    top: number;
+    left: number;
+    width: number;
+    above: boolean;
+};
+type DropdownPositionOptions = {
+    dropdownHeight?: number;
+    gap?: number;
+    allowAbove?: boolean;
+};
+declare function getDropdownPosition(trigger: HTMLElement, portalRoot: HTMLElement, options?: DropdownPositionOptions): DropdownPosition;
+declare function getDialKitPortalRoot(trigger: HTMLElement | null | undefined): HTMLElement | null;
+
+export { type DropdownPosition, type DropdownPositionOptions, getDialKitPortalRoot, getDropdownPosition };

package/dist/dropdown-position.js

@@ -0,0 +1,22 @@
+// src/dropdown-position.ts
+function getDropdownPosition(trigger, portalRoot, options = {}) {
+  const { dropdownHeight = 0, gap = 4, allowAbove = true } = options;
+  const triggerRect = trigger.getBoundingClientRect();
+  const rootRect = portalRoot.getBoundingClientRect();
+  const spaceBelow = window.innerHeight - triggerRect.bottom - gap;
+  const above = allowAbove && spaceBelow < dropdownHeight && triggerRect.top > spaceBelow;
+  return {
+    top: above ? triggerRect.top - rootRect.top - dropdownHeight - gap : triggerRect.bottom - rootRect.top + gap,
+    left: triggerRect.left - rootRect.left,
+    width: triggerRect.width,
+    above
+  };
+}
+function getDialKitPortalRoot(trigger) {
+  return trigger?.closest(".dialkit-root") ?? null;
+}
+export {
+  getDialKitPortalRoot,
+  getDropdownPosition
+};
+//# sourceMappingURL=dropdown-position.js.map

package/dist/dropdown-position.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dropdown-position.ts"],"sourcesContent":["export type DropdownPosition = {\n  top: number;\n  left: number;\n  width: number;\n  above: boolean;\n};\n\nexport type DropdownPositionOptions = {\n  dropdownHeight?: number;\n  gap?: number;\n  allowAbove?: boolean;\n};\n\nexport function getDropdownPosition(\n  trigger: HTMLElement,\n  portalRoot: HTMLElement,\n  options: DropdownPositionOptions = {}\n): DropdownPosition {\n  const { dropdownHeight = 0, gap = 4, allowAbove = true } = options;\n  const triggerRect = trigger.getBoundingClientRect();\n  const rootRect = portalRoot.getBoundingClientRect();\n  const spaceBelow = window.innerHeight - triggerRect.bottom - gap;\n  const above = allowAbove && spaceBelow < dropdownHeight && triggerRect.top > spaceBelow;\n\n  return {\n    top: above\n      ? triggerRect.top - rootRect.top - dropdownHeight - gap\n      : triggerRect.bottom - rootRect.top + gap,\n    left: triggerRect.left - rootRect.left,\n    width: triggerRect.width,\n    above,\n  };\n}\n\nexport function getDialKitPortalRoot(trigger: HTMLElement | null | undefined): HTMLElement | null {\n  return (trigger?.closest('.dialkit-root') as HTMLElement | null) ?? null;\n}\n"],"mappings":";AAaO,SAAS,oBACd,SACA,YACA,UAAmC,CAAC,GAClB;AAClB,QAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,aAAa,KAAK,IAAI;AAC3D,QAAM,cAAc,QAAQ,sBAAsB;AAClD,QAAM,WAAW,WAAW,sBAAsB;AAClD,QAAM,aAAa,OAAO,cAAc,YAAY,SAAS;AAC7D,QAAM,QAAQ,cAAc,aAAa,kBAAkB,YAAY,MAAM;AAE7E,SAAO;AAAA,IACL,KAAK,QACD,YAAY,MAAM,SAAS,MAAM,iBAAiB,MAClD,YAAY,SAAS,SAAS,MAAM;AAAA,IACxC,MAAM,YAAY,OAAO,SAAS;AAAA,IAClC,OAAO,YAAY;AAAA,IACnB;AAAA,EACF;AACF;AAEO,SAAS,qBAAqB,SAA6D;AAChG,SAAQ,SAAS,QAAQ,eAAe,KAA4B;AACtE;","names":[]}

package/dist/icons.d.ts

@@ -0,0 +1,19 @@
+declare const ICON_CHEVRON = "M6 9.5L12 15.5L18 9.5";
+declare const ICON_CHECK = "M5 12.75L10 19L19 5";
+declare const ICON_CLIPBOARD: {
+    board: string;
+    sparkle: string;
+    body: string;
+};
+declare const ICON_ADD_PRESET: string[];
+declare const ICON_TRASH: string[];
+declare const ICON_PANEL: {
+    path: string;
+    circles: {
+        cx: string;
+        cy: string;
+        r: string;
+    }[];
+};
+
+export { ICON_ADD_PRESET, ICON_CHECK, ICON_CHEVRON, ICON_CLIPBOARD, ICON_PANEL, ICON_TRASH };

package/dist/icons.js

@@ -0,0 +1,39 @@
+// src/icons.ts
+var ICON_CHEVRON = "M6 9.5L12 15.5L18 9.5";
+var ICON_CHECK = "M5 12.75L10 19L19 5";
+var ICON_CLIPBOARD = {
+  board: "M8 6C8 4.34315 9.34315 3 11 3H13C14.6569 3 16 4.34315 16 6V7H8V6Z",
+  sparkle: "M19.2405 16.1852L18.5436 14.3733C18.4571 14.1484 18.241 14 18 14C17.759 14 17.5429 14.1484 17.4564 14.3733L16.7595 16.1852C16.658 16.4493 16.4493 16.658 16.1852 16.7595L14.3733 17.4564C14.1484 17.5429 14 17.759 14 18C14 18.241 14.1484 18.4571 14.3733 18.5436L16.1852 19.2405C16.4493 19.342 16.658 19.5507 16.7595 19.8148L17.4564 21.6267C17.5429 21.8516 17.759 22 18 22C18.241 22 18.4571 21.8516 18.5436 21.6267L19.2405 19.8148C19.342 19.5507 19.5507 19.342 19.8148 19.2405L21.6267 18.5436C21.8516 18.4571 22 18.241 22 18C22 17.759 21.8516 17.5429 21.6267 17.4564L19.8148 16.7595C19.5507 16.658 19.342 16.4493 19.2405 16.1852Z",
+  body: "M16 5H17C18.6569 5 20 6.34315 20 8V11M8 5H7C5.34315 5 4 6.34315 4 8V18C4 19.6569 5.34315 21 7 21H12"
+};
+var ICON_ADD_PRESET = [
+  "M4 6H20",
+  "M4 12H10",
+  "M15 15L21 15",
+  "M18 12V18",
+  "M4 18H10"
+];
+var ICON_TRASH = [
+  "M5 6.5L5.80734 18.2064C5.91582 19.7794 7.22348 21 8.80023 21H15.1998C16.7765 21 18.0842 19.7794 18.1927 18.2064L19 6.5",
+  "M10 11V16",
+  "M14 11V16",
+  "M3.5 6H20.5",
+  "M8.07092 5.74621C8.42348 3.89745 10.0485 2.5 12 2.5C13.9515 2.5 15.5765 3.89745 15.9291 5.74621"
+];
+var ICON_PANEL = {
+  path: "M6.84766 11.75C6.78583 11.9899 6.75 12.2408 6.75 12.5C6.75 12.7592 6.78583 13.0101 6.84766 13.25H2C1.58579 13.25 1.25 12.9142 1.25 12.5C1.25 12.0858 1.58579 11.75 2 11.75H6.84766ZM14 11.75C14.4142 11.75 14.75 12.0858 14.75 12.5C14.75 12.9142 14.4142 13.25 14 13.25H12.6523C12.7142 13.0101 12.75 12.7592 12.75 12.5C12.75 12.2408 12.7142 11.9899 12.6523 11.75H14ZM3.09766 7.25C3.03583 7.48994 3 7.74075 3 8C3 8.25925 3.03583 8.51006 3.09766 8.75H2C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25H3.09766ZM14 7.25C14.4142 7.25 14.75 7.58579 14.75 8C14.75 8.41421 14.4142 8.75 14 8.75H8.90234C8.96417 8.51006 9 8.25925 9 8C9 7.74075 8.96417 7.48994 8.90234 7.25H14ZM7.59766 2.75C7.53583 2.98994 7.5 3.24075 7.5 3.5C7.5 3.75925 7.53583 4.01006 7.59766 4.25H2C1.58579 4.25 1.25 3.91421 1.25 3.5C1.25 3.08579 1.58579 2.75 2 2.75H7.59766ZM14 2.75C14.4142 2.75 14.75 3.08579 14.75 3.5C14.75 3.91421 14.4142 4.25 14 4.25H13.4023C13.4642 4.01006 13.5 3.75925 13.5 3.5C13.5 3.24075 13.4642 2.98994 13.4023 2.75H14Z",
+  circles: [
+    { cx: "6", cy: "8", r: "0.998596" },
+    { cx: "10.4999", cy: "3.5", r: "0.998657" },
+    { cx: "9.75015", cy: "12.5", r: "0.997986" }
+  ]
+};
+export {
+  ICON_ADD_PRESET,
+  ICON_CHECK,
+  ICON_CHEVRON,
+  ICON_CLIPBOARD,
+  ICON_PANEL,
+  ICON_TRASH
+};
+//# sourceMappingURL=icons.js.map

package/dist/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icons.ts"],"sourcesContent":["// Shared SVG icon geometry — single source of truth across all framework adapters.\n\nexport const ICON_CHEVRON = 'M6 9.5L12 15.5L18 9.5';\n\nexport const ICON_CHECK = 'M5 12.75L10 19L19 5';\n\nexport const ICON_CLIPBOARD = {\n  board: 'M8 6C8 4.34315 9.34315 3 11 3H13C14.6569 3 16 4.34315 16 6V7H8V6Z',\n  sparkle: 'M19.2405 16.1852L18.5436 14.3733C18.4571 14.1484 18.241 14 18 14C17.759 14 17.5429 14.1484 17.4564 14.3733L16.7595 16.1852C16.658 16.4493 16.4493 16.658 16.1852 16.7595L14.3733 17.4564C14.1484 17.5429 14 17.759 14 18C14 18.241 14.1484 18.4571 14.3733 18.5436L16.1852 19.2405C16.4493 19.342 16.658 19.5507 16.7595 19.8148L17.4564 21.6267C17.5429 21.8516 17.759 22 18 22C18.241 22 18.4571 21.8516 18.5436 21.6267L19.2405 19.8148C19.342 19.5507 19.5507 19.342 19.8148 19.2405L21.6267 18.5436C21.8516 18.4571 22 18.241 22 18C22 17.759 21.8516 17.5429 21.6267 17.4564L19.8148 16.7595C19.5507 16.658 19.342 16.4493 19.2405 16.1852Z',\n  body: 'M16 5H17C18.6569 5 20 6.34315 20 8V11M8 5H7C5.34315 5 4 6.34315 4 8V18C4 19.6569 5.34315 21 7 21H12',\n};\n\nexport const ICON_ADD_PRESET = [\n  'M4 6H20',\n  'M4 12H10',\n  'M15 15L21 15',\n  'M18 12V18',\n  'M4 18H10',\n];\n\nexport const ICON_TRASH = [\n  'M5 6.5L5.80734 18.2064C5.91582 19.7794 7.22348 21 8.80023 21H15.1998C16.7765 21 18.0842 19.7794 18.1927 18.2064L19 6.5',\n  'M10 11V16',\n  'M14 11V16',\n  'M3.5 6H20.5',\n  'M8.07092 5.74621C8.42348 3.89745 10.0485 2.5 12 2.5C13.9515 2.5 15.5765 3.89745 15.9291 5.74621',\n];\n\nexport const ICON_PANEL = {\n  path: 'M6.84766 11.75C6.78583 11.9899 6.75 12.2408 6.75 12.5C6.75 12.7592 6.78583 13.0101 6.84766 13.25H2C1.58579 13.25 1.25 12.9142 1.25 12.5C1.25 12.0858 1.58579 11.75 2 11.75H6.84766ZM14 11.75C14.4142 11.75 14.75 12.0858 14.75 12.5C14.75 12.9142 14.4142 13.25 14 13.25H12.6523C12.7142 13.0101 12.75 12.7592 12.75 12.5C12.75 12.2408 12.7142 11.9899 12.6523 11.75H14ZM3.09766 7.25C3.03583 7.48994 3 7.74075 3 8C3 8.25925 3.03583 8.51006 3.09766 8.75H2C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25H3.09766ZM14 7.25C14.4142 7.25 14.75 7.58579 14.75 8C14.75 8.41421 14.4142 8.75 14 8.75H8.90234C8.96417 8.51006 9 8.25925 9 8C9 7.74075 8.96417 7.48994 8.90234 7.25H14ZM7.59766 2.75C7.53583 2.98994 7.5 3.24075 7.5 3.5C7.5 3.75925 7.53583 4.01006 7.59766 4.25H2C1.58579 4.25 1.25 3.91421 1.25 3.5C1.25 3.08579 1.58579 2.75 2 2.75H7.59766ZM14 2.75C14.4142 2.75 14.75 3.08579 14.75 3.5C14.75 3.91421 14.4142 4.25 14 4.25H13.4023C13.4642 4.01006 13.5 3.75925 13.5 3.5C13.5 3.24075 13.4642 2.98994 13.4023 2.75H14Z',\n  circles: [\n    { cx: '6', cy: '8', r: '0.998596' },\n    { cx: '10.4999', cy: '3.5', r: '0.998657' },\n    { cx: '9.75015', cy: '12.5', r: '0.997986' },\n  ],\n};\n"],"mappings":";AAEO,IAAM,eAAe;AAErB,IAAM,aAAa;AAEnB,IAAM,iBAAiB;AAAA,EAC5B,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACR;AAEO,IAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAM,aAAa;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,SAAS;AAAA,IACP,EAAE,IAAI,KAAK,IAAI,KAAK,GAAG,WAAW;AAAA,IAClC,EAAE,IAAI,WAAW,IAAI,OAAO,GAAG,WAAW;AAAA,IAC1C,EAAE,IAAI,WAAW,IAAI,QAAQ,GAAG,WAAW;AAAA,EAC7C;AACF;","names":[]}