likec4 1.11.0 → 1.12.0

package/dist/__app__/src/chunks/{main-OEl3ruxE.js → main-Bc_PC5BH.js}

@@ -2,11 +2,11 @@ import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import * as React from "react";
 import { createContext as createContext$1, useLayoutEffect as useLayoutEffect$1, useEffect as useEffect$1, useContext as useContext$1, useRef as useRef$1, useInsertionEffect, useCallback as useCallback$1, useMemo as useMemo$1, forwardRef as forwardRef$1, Fragment, createElement as createElement$1, useId as useId$1, Children, isValidElement, useState as useState$1, memo as memo$1, Suspense, lazy, Component, useSyncExternalStore, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { L as Link, c as createRootRouteWithContext, S as ScrollRestoration, O as Outlet, a as createFileRoute, u as useRouter, b as useParams, d as useRouterState, i as isNotFound, n as notFound, R as RouterProvider, e as createRouter$1, f as createHashHistory, g as createBrowserHistory } from "./tanstack-router-Mzh8n5Lx.js";
-import { e as Container, f as Title, a as Text$1, G as Group, g as Button, M as MantineContext, h as useHotkeys, i as Tooltip$3, j as Menu, k as MenuTarget, l as MenuDropdown, m as MenuLabel, n as MenuDivider, S as Stack, c as clsx, o as TooltipGroup, p as Space, A as ActionIcon$2, B as Box, q as MenuItem, r as Popover, s as PopoverTarget, t as PopoverDropdown, v as ScrollAreaAutosize, w as CloseButton, H as HoverCard, x as HoverCardTarget, U as UnstyledButton, y as HoverCardDropdown, z as Anchor, D as CopyButton$1, E as useLocalStorage, C as Card, b as CardSection, F as Spoiler, J as Badge, K as ButtonGroup, T as ThemeIcon, P as Paper, L as Tabs, N as TabsList, O as TabsTab, Q as TabsPanel, R as rem, V as Divider, W as Flex, X as ColorSwatch, Y as CheckIcon, Z as Select, _ as Slider, $ as SegmentedControl, a0 as FloatingIndicator, a1 as Notification, a2 as Code, a3 as createTheme, a4 as MantineProvider, a5 as useInViewport, a6 as SimpleGrid, u as useMantineColorScheme, a7 as useTree, a8 as useComputedColorScheme, a9 as Tree, aa as Drawer, ab as ScrollArea, ac as Alert, ad as ModalRoot, ae as ModalOverlay, af as ModalContent, ag as ModalBody, ah as useMantineTheme, ai as useMediaQuery, aj as useDisclosure, ak as LoadingOverlay, al as useCallbackRef, am as Burger, an as Loader } from "./mantine-BqgMLMPH.js";
-import { withOverviewGraph, ComponentName, isDevelopment, basepath, useHashHistory } from "../const.js";
+import { L as Link, c as createRootRouteWithContext, S as ScrollRestoration, O as Outlet, a as createFileRoute, u as useRouter, b as useParams, d as useRouterState, i as isNotFound, n as notFound, R as RouterProvider, e as createRouter$1, f as createHashHistory, g as createBrowserHistory } from "./tanstack-router-CU5V4Ll-.js";
+import { e as Container, f as Title, a as Text$1, G as Group, g as Button, t as themeToVars, M as MantineContext, h as useHotkeys, i as Tooltip$2, j as Menu, k as MenuTarget, l as MenuDropdown, m as MenuLabel, n as MenuDivider, S as Stack$1, c as clsx, o as TooltipGroup, p as Space, A as ActionIcon$1, B as Box, q as MenuItem, r as Popover, s as PopoverTarget, v as PopoverDropdown, w as ScrollAreaAutosize, x as CloseButton, H as HoverCard, y as HoverCardTarget, U as UnstyledButton, z as HoverCardDropdown, D as Anchor, E as CopyButton$1, F as useLocalStorage, C as Card, b as CardSection, J as Spoiler, K as Badge, L as ButtonGroup, T as ThemeIcon, P as Paper, N as Tabs, O as TabsList, Q as TabsTab, R as TabsPanel, V as rem, W as Divider, X as Flex, Y as ColorSwatch, Z as CheckIcon, _ as Select, $ as Slider, a0 as SegmentedControl, a1 as FloatingIndicator, a2 as ActionIconGroup, a3 as Overlay, a4 as Notification, a5 as Code, a6 as createTheme, a7 as MantineProvider, a8 as useInViewport, a9 as SimpleGrid, u as useMantineColorScheme, aa as useTree, ab as useComputedColorScheme, ac as Tree, ad as Drawer, ae as ScrollArea, af as Alert, ag as ModalRoot, ah as ModalOverlay, ai as ModalContent, aj as ModalBody, ak as useMantineTheme, al as useMediaQuery, am as useDisclosure, an as LoadingOverlay, ao as useCallbackRef, ap as Burger, aq as Loader } from "./mantine-IOl1S4mZ.js";
+import { withOverviewGraph, ComponentName, isDevelopment, krokiD2SvgUrl, basepath, useHashHistory } from "../const.js";
 import { useLikeC4ModelAtom } from "virtual:likec4/model";
-import { d as useReactFlow, e as useStoreApi, f as useNodesData, g as useStore$1, h as createWithEqualityFn, j as applyNodeChanges, k as applyEdgeChanges, l as getViewportForBounds, m as getNodeDimensions, n as getBoundsOfRects, s as shallow$1, o as boxToRect, p as useStoreWithEqualityFn, E as EdgeLabelRenderer, H as Handle, P as Position, q as useOnViewportChange, i as index, r as useOnSelectionChange, b as Background, c as BackgroundVariant, C as Controls, R as ReactFlowProvider } from "./likec4-DOemzWvz.js";
+import { d as useReactFlow, e as useStoreApi, f as useNodesData, g as useStore$1, h as createWithEqualityFn, j as applyNodeChanges, k as applyEdgeChanges, l as getViewportForBounds, m as getNodeDimensions, n as getBoundsOfRects, s as shallow$1, o as boxToRect, p as useStoreWithEqualityFn, q as getDefaultExportFromCjs, E as EdgeLabelRenderer, H as Handle, P as Position, r as useOnViewportChange, i as index, t as useOnSelectionChange, b as Background, c as BackgroundVariant, C as Controls, R as ReactFlowProvider } from "./likec4-DlkyDuSp.js";
 import { RenderIcon } from "../icons.js";
 import { usePreviewUrl } from "virtual:likec4/previews";
 var content = "_1u4wf800", image = "_1u4wf801", inner = "_1u4wf802", root = "_1u4wf803", description$2 = "_1u4wf804", title$4 = "_1u4wf805";
@@ -26,7 +26,7 @@ function NotFound() {
     ] })
   ] }) });
 }
-var getOwnPropertyNames = Object.getOwnPropertyNames, getOwnPropertySymbols = Object.getOwnPropertySymbols, hasOwnProperty = Object.prototype.hasOwnProperty;
+var getOwnPropertyNames = Object.getOwnPropertyNames, getOwnPropertySymbols = Object.getOwnPropertySymbols, hasOwnProperty$1 = Object.prototype.hasOwnProperty;
 function combineComparators(comparatorA, comparatorB) {
   return function(a2, b2, state) {
     return comparatorA(a2, b2, state) && comparatorB(a2, b2, state);
@@ -44,11 +44,11 @@ function createIsCircular(areItemsEqual) {
     return cache.delete(a2), cache.delete(b2), result;
   };
 }
-function getStrictProperties(object) {
-  return getOwnPropertyNames(object).concat(getOwnPropertySymbols(object));
+function getStrictProperties(object2) {
+  return getOwnPropertyNames(object2).concat(getOwnPropertySymbols(object2));
 }
-var hasOwn = Object.hasOwn || function(object, property) {
-  return hasOwnProperty.call(object, property);
+var hasOwn = Object.hasOwn || function(object2, property) {
+  return hasOwnProperty$1.call(object2, property);
 };
 function sameValueZeroEqual(a2, b2) {
   return a2 || b2 ? a2 === b2 : a2 === b2 || a2 !== a2 && b2 !== b2;
@@ -424,10 +424,10 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
   };
   return { schedule: stepsOrder.reduce((acc, key) => {
     const step = steps2[key];
-    return acc[key] = (process, keepAlive = !1, immediate = !1) => (runNextFrame || wake(), step.schedule(process, keepAlive, immediate)), acc;
-  }, {}), cancel: (process) => {
+    return acc[key] = (process2, keepAlive = !1, immediate = !1) => (runNextFrame || wake(), step.schedule(process2, keepAlive, immediate)), acc;
+  }, {}), cancel: (process2) => {
     for (let i2 = 0; i2 < stepsOrder.length; i2++)
-      steps2[stepsOrder[i2]].cancel(process);
+      steps2[stepsOrder[i2]].cancel(process2);
   }, state, steps: steps2 };
 }
 const { schedule: frame, cancel: cancelFrame, state: frameData, steps } = createRenderBatcher(typeof requestAnimationFrame < "u" ? requestAnimationFrame : noop$1, !0), isZeroValueString = (v) => /^0[^.\s]+$/u.test(v);
@@ -3548,7 +3548,43 @@ function LazyMotion({ children, features, strict = !1 }) {
 function isLazyBundle(features) {
   return typeof features == "function";
 }
-const domAnimation = {
+const DeprecatedLayoutGroupContext = createContext$1(null);
+function useIsMounted() {
+  const isMounted = useRef$1(!1);
+  return useIsomorphicLayoutEffect$2(() => (isMounted.current = !0, () => {
+    isMounted.current = !1;
+  }), []), isMounted;
+}
+function useForceUpdate$1() {
+  const isMounted = useIsMounted(), [forcedRenderCount, setForcedRenderCount] = useState$1(0), forceRender = useCallback$1(() => {
+    isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
+  }, [forcedRenderCount]);
+  return [useCallback$1(() => frame.postRender(forceRender), [forceRender]), forcedRenderCount];
+}
+const notify = (node) => !node.isLayoutDirty && node.willUpdate(!1);
+function nodeGroup() {
+  const nodes = /* @__PURE__ */ new Set(), subscriptions = /* @__PURE__ */ new WeakMap(), dirtyAll = () => nodes.forEach(notify);
+  return {
+    add: (node) => {
+      nodes.add(node), subscriptions.set(node, node.addEventListener("willUpdate", dirtyAll));
+    },
+    remove: (node) => {
+      nodes.delete(node);
+      const unsubscribe = subscriptions.get(node);
+      unsubscribe && (unsubscribe(), subscriptions.delete(node)), dirtyAll();
+    },
+    dirty: dirtyAll
+  };
+}
+const shouldInheritGroup = (inherit) => inherit === !0, shouldInheritId = (inherit) => shouldInheritGroup(inherit === !0) || inherit === "id", LayoutGroup = ({ children, id: id2, inherit = !0 }) => {
+  const layoutGroupContext = useContext$1(LayoutGroupContext), deprecatedLayoutGroupContext = useContext$1(DeprecatedLayoutGroupContext), [forceRender, key] = useForceUpdate$1(), context = useRef$1(null), upstreamId = layoutGroupContext.id || deprecatedLayoutGroupContext;
+  context.current === null && (shouldInheritId(inherit) && upstreamId && (id2 = id2 ? upstreamId + "-" + id2 : upstreamId), context.current = {
+    id: id2,
+    group: shouldInheritGroup(inherit) && layoutGroupContext.group || nodeGroup()
+  });
+  const memoizedContext = useMemo$1(() => ({ ...context.current, forceRender }), [key]);
+  return jsx(LayoutGroupContext.Provider, { value: memoizedContext, children });
+}, domAnimation = {
   renderer: createDomVisualElement,
   ...animations,
   ...gestureAnimations
@@ -6662,75 +6698,3205 @@ function createDiagramStore(props2) {
               return vector(v).mul(scale2).add(nodeCenter);
             }
           }
-        }),
-        {
-          name: `${storeDevId} - ${props2.view.id}`,
-          enabled: DEV
-        }
-      )
-    ),
-    shallow$1
-  );
-}
-const DiagramContext = createContext$1(null);
-function DiagramContextProvider({
-  children,
-  view,
-  className,
-  keepAspectRatio,
-  whereFilter,
-  ...props2
-}) {
-  const containerRef = useRef$1(null), xystore = useXYStoreApi(), xyflow = useXYFlow(), store = useRef$1(), getContainer = useCallback$1(() => containerRef.current, [containerRef]);
-  return store.current || (store.current = createDiagramStore({
-    xystore,
-    xyflow,
-    view,
-    getContainer,
-    whereFilter: structuredClone(whereFilter),
-    ...props2
-  })), useUpdateEffect(
-    () => store.current?.setState({ xyflow, xystore, getContainer }, !1, "update xyflow and xystore"),
-    [xyflow, xystore, getContainer]
-  ), useUpdateEffect(
-    () => store.current?.setState(props2, !1, "update incoming props"),
-    [props2]
-  ), useUpdateEffect(
-    () => {
-      const current = store.current;
-      invariant(current, "DiagramContext.store.current is not defined"), deepEqual(whereFilter, current.getState().whereFilter) || current.setState({ whereFilter: structuredClone(whereFilter) }, !1, "update where filter"), current.getState().updateView(view);
-    },
-    [view, whereFilter],
-    (a2, b2) => shallowEqual(a2[0], b2[0]) && deepEqual(a2[1], b2[1])
-  ), /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: containerRef,
-      className,
-      ...keepAspectRatio && {
-        style: {
-          aspectRatio: `${Math.ceil(view.bounds.width)}/${Math.ceil(view.bounds.height)}`,
-          maxHeight: Math.ceil(view.bounds.height)
+        }),
+        {
+          name: `${storeDevId} - ${props2.view.id}`,
+          enabled: DEV
+        }
+      )
+    ),
+    shallow$1
+  );
+}
+const DiagramContext = createContext$1(null);
+function DiagramContextProvider({
+  children,
+  view,
+  className,
+  keepAspectRatio,
+  whereFilter,
+  ...props2
+}) {
+  const containerRef = useRef$1(null), xystore = useXYStoreApi(), xyflow = useXYFlow(), store = useRef$1(), getContainer = useCallback$1(() => containerRef.current, [containerRef]);
+  return store.current || (store.current = createDiagramStore({
+    xystore,
+    xyflow,
+    view,
+    getContainer,
+    whereFilter: structuredClone(whereFilter),
+    ...props2
+  })), useUpdateEffect(
+    () => store.current?.setState({ xyflow, xystore, getContainer }, !1, "update xyflow and xystore"),
+    [xyflow, xystore, getContainer]
+  ), useUpdateEffect(
+    () => store.current?.setState(props2, !1, "update incoming props"),
+    [props2]
+  ), useUpdateEffect(
+    () => {
+      const current = store.current;
+      invariant(current, "DiagramContext.store.current is not defined"), deepEqual(whereFilter, current.getState().whereFilter) || current.setState({ whereFilter: structuredClone(whereFilter) }, !1, "update where filter"), current.getState().updateView(view);
+    },
+    [view, whereFilter],
+    (a2, b2) => shallowEqual(a2[0], b2[0]) && deepEqual(a2[1], b2[1])
+  ), /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      ...keepAspectRatio && {
+        style: {
+          aspectRatio: `${Math.ceil(view.bounds.width)}/${Math.ceil(view.bounds.height)}`,
+          maxHeight: Math.ceil(view.bounds.height)
+        }
+      },
+      children: /* @__PURE__ */ jsx(DiagramContext.Provider, { value: store.current, children })
+    }
+  );
+}
+DiagramContextProvider.displayName = "DiagramContextProvider";
+function useDiagramState(selector2, equalityFn) {
+  const store = useContext$1(DiagramContext);
+  if (store === null)
+    throw new Error("useDiagramStore could be used only inside DiagramContext");
+  return useStoreWithEqualityFn(store, selector2, equalityFn ?? shallowEqual);
+}
+function useDiagramStoreApi() {
+  const store = useContext$1(DiagramContext);
+  if (store === null)
+    throw new Error("useDiagramStoreApi could be used only inside DiagramContext");
+  return store;
+}
+var stylesheets = {}, injectStyles = (_ref) => {
+  var {
+    fileScope,
+    css
+  } = _ref, fileScopeId = fileScope.packageName ? [fileScope.packageName, fileScope.filePath].join("/") : fileScope.filePath, stylesheet = stylesheets[fileScopeId];
+  if (!stylesheet) {
+    var styleEl = document.createElement("style");
+    fileScope.packageName && styleEl.setAttribute("data-package", fileScope.packageName), styleEl.setAttribute("data-file", fileScope.filePath), styleEl.setAttribute("type", "text/css"), stylesheet = stylesheets[fileScopeId] = styleEl, document.head.appendChild(styleEl);
+  }
+  stylesheet.innerHTML = css;
+};
+function getVarName(variable) {
+  var matches = variable.match(/^var\((.*)\)$/);
+  return matches ? matches[1] : variable;
+}
+function walkObject(obj, fn) {
+  var path = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : [], clone = {};
+  for (var key in obj) {
+    var _value = obj[key], currentPath = [...path, key];
+    typeof _value == "string" || typeof _value == "number" || _value == null ? clone[key] = fn(_value, currentPath) : typeof _value == "object" && !Array.isArray(_value) ? clone[key] = walkObject(_value, fn, currentPath) : console.warn('Skipping invalid key "'.concat(currentPath.join("."), '". Should be a string, number, null or object. Received: "').concat(Array.isArray(_value) ? "Array" : typeof _value, '"'));
+  }
+  return clone;
+}
+/*! https://mths.be/cssesc v3.0.0 by @mathias */
+var object = {}, hasOwnProperty = object.hasOwnProperty, merge = function(options, defaults) {
+  if (!options)
+    return defaults;
+  var result = {};
+  for (var key in defaults)
+    result[key] = hasOwnProperty.call(options, key) ? options[key] : defaults[key];
+  return result;
+}, regexAnySingleEscape = /[ -,\.\/:-@\[-\^`\{-~]/, regexSingleEscape = /[ -,\.\/:-@\[\]\^`\{-~]/, regexExcessiveSpaces = /(^|\\+)?(\\[A-F0-9]{1,6})\x20(?![a-fA-F0-9\x20])/g, cssesc = function cssesc2(string, options) {
+  options = merge(options, cssesc2.options), options.quotes != "single" && options.quotes != "double" && (options.quotes = "single");
+  for (var quote = options.quotes == "double" ? '"' : "'", isIdentifier = options.isIdentifier, firstChar = string.charAt(0), output = "", counter2 = 0, length = string.length; counter2 < length; ) {
+    var character = string.charAt(counter2++), codePoint = character.charCodeAt(), value = void 0;
+    if (codePoint < 32 || codePoint > 126) {
+      if (codePoint >= 55296 && codePoint <= 56319 && counter2 < length) {
+        var extra = string.charCodeAt(counter2++);
+        (extra & 64512) == 56320 ? codePoint = ((codePoint & 1023) << 10) + (extra & 1023) + 65536 : counter2--;
+      }
+      value = "\\" + codePoint.toString(16).toUpperCase() + " ";
+    } else
+      options.escapeEverything ? regexAnySingleEscape.test(character) ? value = "\\" + character : value = "\\" + codePoint.toString(16).toUpperCase() + " " : /[\t\n\f\r\x0B]/.test(character) ? value = "\\" + codePoint.toString(16).toUpperCase() + " " : character == "\\" || !isIdentifier && (character == '"' && quote == character || character == "'" && quote == character) || isIdentifier && regexSingleEscape.test(character) ? value = "\\" + character : value = character;
+    output += value;
+  }
+  return isIdentifier && (/^-[-\d]/.test(output) ? output = "\\-" + output.slice(1) : /\d/.test(firstChar) && (output = "\\3" + firstChar + " " + output.slice(1))), output = output.replace(regexExcessiveSpaces, function($0, $1, $2) {
+    return $1 && $1.length % 2 ? $0 : ($1 || "") + $2;
+  }), !isIdentifier && options.wrap ? quote + output + quote : output;
+};
+cssesc.options = {
+  escapeEverything: !1,
+  isIdentifier: !1,
+  quotes: "single",
+  wrap: !1
+};
+cssesc.version = "3.0.0";
+var cssesc_1 = cssesc;
+const cssesc$1 = /* @__PURE__ */ getDefaultExportFromCjs(cssesc_1);
+class AhoCorasick {
+  constructor(keywords) {
+    const { failure, gotoFn, output } = this._buildTables(keywords);
+    this.gotoFn = gotoFn, this.output = output, this.failure = failure;
+  }
+  _buildTables(keywords) {
+    const gotoFn = {
+      0: {}
+    }, output = {};
+    let state = 0;
+    for (const word of keywords) {
+      let curr = 0;
+      for (const l2 of word)
+        gotoFn[curr] && l2 in gotoFn[curr] ? curr = gotoFn[curr][l2] : (state++, gotoFn[curr][l2] = state, gotoFn[state] = {}, curr = state, output[state] = []);
+      output[curr].push(word);
+    }
+    const failure = {}, xs = [];
+    for (const l2 in gotoFn[0]) {
+      const state2 = gotoFn[0][l2];
+      failure[state2] = 0, xs.push(state2);
+    }
+    for (; xs.length > 0; ) {
+      const r2 = xs.shift();
+      if (r2 !== void 0)
+        for (const l2 in gotoFn[r2]) {
+          const s2 = gotoFn[r2][l2];
+          xs.push(s2);
+          let state2 = failure[r2];
+          for (; state2 > 0 && !(l2 in gotoFn[state2]); )
+            state2 = failure[state2];
+          if (l2 in gotoFn[state2]) {
+            const fs = gotoFn[state2][l2];
+            failure[s2] = fs, output[s2] = [...output[s2], ...output[fs]];
+          } else
+            failure[s2] = 0;
+        }
+    }
+    return {
+      gotoFn,
+      output,
+      failure
+    };
+  }
+  search(str) {
+    let state = 0;
+    const results = [];
+    for (let i2 = 0; i2 < str.length; i2++) {
+      const l2 = str[i2];
+      for (; state > 0 && !(l2 in this.gotoFn[state]); )
+        state = this.failure[state];
+      if (l2 in this.gotoFn[state] && (state = this.gotoFn[state][l2], this.output[state].length > 0)) {
+        const foundStrs = this.output[state];
+        results.push([i2, foundStrs]);
+      }
+    }
+    return results;
+  }
+}
+var mockAdapter = {
+  appendCss: () => {
+  },
+  registerClassName: () => {
+  },
+  onEndFileScope: () => {
+  },
+  registerComposition: () => {
+  },
+  markCompositionUsed: () => {
+  },
+  getIdentOption: () => "short"
+}, adapterStack = [mockAdapter], currentAdapter = () => {
+  if (adapterStack.length < 1)
+    throw new Error("No adapter configured");
+  return adapterStack[adapterStack.length - 1];
+}, hasConfiguredAdapter = !1, setAdapterIfNotSet = (newAdapter) => {
+  hasConfiguredAdapter || setAdapter(newAdapter);
+}, setAdapter = (newAdapter) => {
+  if (!newAdapter)
+    throw new Error('No adapter provided when calling "setAdapter"');
+  hasConfiguredAdapter = !0, adapterStack.push(newAdapter);
+}, markCompositionUsed = function() {
+  return currentAdapter().markCompositionUsed(...arguments);
+};
+function _taggedTemplateLiteral(strings, raw) {
+  return raw || (raw = strings.slice(0)), Object.freeze(Object.defineProperties(strings, {
+    raw: {
+      value: Object.freeze(raw)
+    }
+  }));
+}
+var SelectorType;
+(function(SelectorType2) {
+  SelectorType2.Attribute = "attribute", SelectorType2.Pseudo = "pseudo", SelectorType2.PseudoElement = "pseudo-element", SelectorType2.Tag = "tag", SelectorType2.Universal = "universal", SelectorType2.Adjacent = "adjacent", SelectorType2.Child = "child", SelectorType2.Descendant = "descendant", SelectorType2.Parent = "parent", SelectorType2.Sibling = "sibling", SelectorType2.ColumnCombinator = "column-combinator";
+})(SelectorType || (SelectorType = {}));
+var AttributeAction;
+(function(AttributeAction2) {
+  AttributeAction2.Any = "any", AttributeAction2.Element = "element", AttributeAction2.End = "end", AttributeAction2.Equals = "equals", AttributeAction2.Exists = "exists", AttributeAction2.Hyphen = "hyphen", AttributeAction2.Not = "not", AttributeAction2.Start = "start";
+})(AttributeAction || (AttributeAction = {}));
+const reName = /^[^\\#]?(?:\\(?:[\da-f]{1,6}\s?|.)|[\w\-\u00b0-\uFFFF])+/, reEscape = /\\([\da-f]{1,6}\s?|(\s)|.)/gi, actionTypes = /* @__PURE__ */ new Map([
+  [126, AttributeAction.Element],
+  [94, AttributeAction.Start],
+  [36, AttributeAction.End],
+  [42, AttributeAction.Any],
+  [33, AttributeAction.Not],
+  [124, AttributeAction.Hyphen]
+]), unpackPseudos = /* @__PURE__ */ new Set([
+  "has",
+  "not",
+  "matches",
+  "is",
+  "where",
+  "host",
+  "host-context"
+]);
+function isTraversal(selector2) {
+  switch (selector2.type) {
+    case SelectorType.Adjacent:
+    case SelectorType.Child:
+    case SelectorType.Descendant:
+    case SelectorType.Parent:
+    case SelectorType.Sibling:
+    case SelectorType.ColumnCombinator:
+      return !0;
+    default:
+      return !1;
+  }
+}
+const stripQuotesFromPseudos = /* @__PURE__ */ new Set(["contains", "icontains"]);
+function funescape(_, escaped, escapedWhitespace) {
+  const high = parseInt(escaped, 16) - 65536;
+  return high !== high || escapedWhitespace ? escaped : high < 0 ? (
+    // BMP codepoint
+    String.fromCharCode(high + 65536)
+  ) : (
+    // Supplemental Plane codepoint (surrogate pair)
+    String.fromCharCode(high >> 10 | 55296, high & 1023 | 56320)
+  );
+}
+function unescapeCSS(str) {
+  return str.replace(reEscape, funescape);
+}
+function isQuote(c) {
+  return c === 39 || c === 34;
+}
+function isWhitespace(c) {
+  return c === 32 || c === 9 || c === 10 || c === 12 || c === 13;
+}
+function parse(selector2) {
+  const subselects = [], endIndex = parseSelector(subselects, `${selector2}`, 0);
+  if (endIndex < selector2.length)
+    throw new Error(`Unmatched selector: ${selector2.slice(endIndex)}`);
+  return subselects;
+}
+function parseSelector(subselects, selector2, selectorIndex) {
+  let tokens = [];
+  function getName(offset) {
+    const match = selector2.slice(selectorIndex + offset).match(reName);
+    if (!match)
+      throw new Error(`Expected name, found ${selector2.slice(selectorIndex)}`);
+    const [name] = match;
+    return selectorIndex += offset + name.length, unescapeCSS(name);
+  }
+  function stripWhitespace(offset) {
+    for (selectorIndex += offset; selectorIndex < selector2.length && isWhitespace(selector2.charCodeAt(selectorIndex)); )
+      selectorIndex++;
+  }
+  function readValueWithParenthesis() {
+    selectorIndex += 1;
+    const start = selectorIndex;
+    let counter2 = 1;
+    for (; counter2 > 0 && selectorIndex < selector2.length; selectorIndex++)
+      selector2.charCodeAt(selectorIndex) === 40 && !isEscaped(selectorIndex) ? counter2++ : selector2.charCodeAt(selectorIndex) === 41 && !isEscaped(selectorIndex) && counter2--;
+    if (counter2)
+      throw new Error("Parenthesis not matched");
+    return unescapeCSS(selector2.slice(start, selectorIndex - 1));
+  }
+  function isEscaped(pos) {
+    let slashCount = 0;
+    for (; selector2.charCodeAt(--pos) === 92; )
+      slashCount++;
+    return (slashCount & 1) === 1;
+  }
+  function ensureNotTraversal() {
+    if (tokens.length > 0 && isTraversal(tokens[tokens.length - 1]))
+      throw new Error("Did not expect successive traversals.");
+  }
+  function addTraversal(type) {
+    if (tokens.length > 0 && tokens[tokens.length - 1].type === SelectorType.Descendant) {
+      tokens[tokens.length - 1].type = type;
+      return;
+    }
+    ensureNotTraversal(), tokens.push({ type });
+  }
+  function addSpecialAttribute(name, action) {
+    tokens.push({
+      type: SelectorType.Attribute,
+      name,
+      action,
+      value: getName(1),
+      namespace: null,
+      ignoreCase: "quirks"
+    });
+  }
+  function finalizeSubselector() {
+    if (tokens.length && tokens[tokens.length - 1].type === SelectorType.Descendant && tokens.pop(), tokens.length === 0)
+      throw new Error("Empty sub-selector");
+    subselects.push(tokens);
+  }
+  if (stripWhitespace(0), selector2.length === selectorIndex)
+    return selectorIndex;
+  loop: for (; selectorIndex < selector2.length; ) {
+    const firstChar = selector2.charCodeAt(selectorIndex);
+    switch (firstChar) {
+      case 32:
+      case 9:
+      case 10:
+      case 12:
+      case 13: {
+        (tokens.length === 0 || tokens[0].type !== SelectorType.Descendant) && (ensureNotTraversal(), tokens.push({ type: SelectorType.Descendant })), stripWhitespace(1);
+        break;
+      }
+      case 62: {
+        addTraversal(SelectorType.Child), stripWhitespace(1);
+        break;
+      }
+      case 60: {
+        addTraversal(SelectorType.Parent), stripWhitespace(1);
+        break;
+      }
+      case 126: {
+        addTraversal(SelectorType.Sibling), stripWhitespace(1);
+        break;
+      }
+      case 43: {
+        addTraversal(SelectorType.Adjacent), stripWhitespace(1);
+        break;
+      }
+      case 46: {
+        addSpecialAttribute("class", AttributeAction.Element);
+        break;
+      }
+      case 35: {
+        addSpecialAttribute("id", AttributeAction.Equals);
+        break;
+      }
+      case 91: {
+        stripWhitespace(1);
+        let name, namespace = null;
+        selector2.charCodeAt(selectorIndex) === 124 ? name = getName(1) : selector2.startsWith("*|", selectorIndex) ? (namespace = "*", name = getName(2)) : (name = getName(0), selector2.charCodeAt(selectorIndex) === 124 && selector2.charCodeAt(selectorIndex + 1) !== 61 && (namespace = name, name = getName(1))), stripWhitespace(0);
+        let action = AttributeAction.Exists;
+        const possibleAction = actionTypes.get(selector2.charCodeAt(selectorIndex));
+        if (possibleAction) {
+          if (action = possibleAction, selector2.charCodeAt(selectorIndex + 1) !== 61)
+            throw new Error("Expected `=`");
+          stripWhitespace(2);
+        } else selector2.charCodeAt(selectorIndex) === 61 && (action = AttributeAction.Equals, stripWhitespace(1));
+        let value = "", ignoreCase = null;
+        if (action !== "exists") {
+          if (isQuote(selector2.charCodeAt(selectorIndex))) {
+            const quote = selector2.charCodeAt(selectorIndex);
+            let sectionEnd = selectorIndex + 1;
+            for (; sectionEnd < selector2.length && (selector2.charCodeAt(sectionEnd) !== quote || isEscaped(sectionEnd)); )
+              sectionEnd += 1;
+            if (selector2.charCodeAt(sectionEnd) !== quote)
+              throw new Error("Attribute value didn't end");
+            value = unescapeCSS(selector2.slice(selectorIndex + 1, sectionEnd)), selectorIndex = sectionEnd + 1;
+          } else {
+            const valueStart = selectorIndex;
+            for (; selectorIndex < selector2.length && (!isWhitespace(selector2.charCodeAt(selectorIndex)) && selector2.charCodeAt(selectorIndex) !== 93 || isEscaped(selectorIndex)); )
+              selectorIndex += 1;
+            value = unescapeCSS(selector2.slice(valueStart, selectorIndex));
+          }
+          stripWhitespace(0);
+          const forceIgnore = selector2.charCodeAt(selectorIndex) | 32;
+          forceIgnore === 115 ? (ignoreCase = !1, stripWhitespace(1)) : forceIgnore === 105 && (ignoreCase = !0, stripWhitespace(1));
+        }
+        if (selector2.charCodeAt(selectorIndex) !== 93)
+          throw new Error("Attribute selector didn't terminate");
+        selectorIndex += 1;
+        const attributeSelector = {
+          type: SelectorType.Attribute,
+          name,
+          action,
+          value,
+          namespace,
+          ignoreCase
+        };
+        tokens.push(attributeSelector);
+        break;
+      }
+      case 58: {
+        if (selector2.charCodeAt(selectorIndex + 1) === 58) {
+          tokens.push({
+            type: SelectorType.PseudoElement,
+            name: getName(2).toLowerCase(),
+            data: selector2.charCodeAt(selectorIndex) === 40 ? readValueWithParenthesis() : null
+          });
+          continue;
+        }
+        const name = getName(1).toLowerCase();
+        let data = null;
+        if (selector2.charCodeAt(selectorIndex) === 40)
+          if (unpackPseudos.has(name)) {
+            if (isQuote(selector2.charCodeAt(selectorIndex + 1)))
+              throw new Error(`Pseudo-selector ${name} cannot be quoted`);
+            if (data = [], selectorIndex = parseSelector(data, selector2, selectorIndex + 1), selector2.charCodeAt(selectorIndex) !== 41)
+              throw new Error(`Missing closing parenthesis in :${name} (${selector2})`);
+            selectorIndex += 1;
+          } else {
+            if (data = readValueWithParenthesis(), stripQuotesFromPseudos.has(name)) {
+              const quot = data.charCodeAt(0);
+              quot === data.charCodeAt(data.length - 1) && isQuote(quot) && (data = data.slice(1, -1));
+            }
+            data = unescapeCSS(data);
+          }
+        tokens.push({ type: SelectorType.Pseudo, name, data });
+        break;
+      }
+      case 44: {
+        finalizeSubselector(), tokens = [], stripWhitespace(1);
+        break;
+      }
+      default: {
+        if (selector2.startsWith("/*", selectorIndex)) {
+          const endIndex = selector2.indexOf("*/", selectorIndex + 2);
+          if (endIndex < 0)
+            throw new Error("Comment was not terminated");
+          selectorIndex = endIndex + 2, tokens.length === 0 && stripWhitespace(0);
+          break;
+        }
+        let namespace = null, name;
+        if (firstChar === 42)
+          selectorIndex += 1, name = "*";
+        else if (firstChar === 124) {
+          if (name = "", selector2.charCodeAt(selectorIndex + 1) === 124) {
+            addTraversal(SelectorType.ColumnCombinator), stripWhitespace(2);
+            break;
+          }
+        } else if (reName.test(selector2.slice(selectorIndex)))
+          name = getName(0);
+        else
+          break loop;
+        selector2.charCodeAt(selectorIndex) === 124 && selector2.charCodeAt(selectorIndex + 1) !== 124 && (namespace = name, selector2.charCodeAt(selectorIndex + 1) === 42 ? (name = "*", selectorIndex += 2) : name = getName(1)), tokens.push(name === "*" ? { type: SelectorType.Universal, namespace } : { type: SelectorType.Tag, name, namespace });
+      }
+    }
+  }
+  return finalizeSubselector(), selectorIndex;
+}
+function ownKeys$1(object2, enumerableOnly) {
+  var keys2 = Object.keys(object2);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object2);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object2, sym).enumerable;
+    })), keys2.push.apply(keys2, symbols);
+  }
+  return keys2;
+}
+function _objectSpread(target) {
+  for (var i2 = 1; i2 < arguments.length; i2++) {
+    var source = arguments[i2] != null ? arguments[i2] : {};
+    i2 % 2 ? ownKeys$1(Object(source), !0).forEach(function(key) {
+      _defineProperty$1(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+function _defineProperty$1(obj, key, value) {
+  return key = _toPropertyKey(key), key in obj ? Object.defineProperty(obj, key, { value, enumerable: !0, configurable: !0, writable: !0 }) : obj[key] = value, obj;
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key == "symbol" ? key : String(key);
+}
+function _toPrimitive(input, hint) {
+  if (typeof input != "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== void 0) {
+    var res = prim.call(input, hint);
+    if (typeof res != "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(input);
+}
+const dedent = createDedent({});
+function createDedent(options) {
+  return dedent2.withOptions = (newOptions) => createDedent(_objectSpread(_objectSpread({}, options), newOptions)), dedent2;
+  function dedent2(strings, ...values) {
+    const raw = typeof strings == "string" ? [strings] : strings.raw, {
+      escapeSpecialCharacters = Array.isArray(strings)
+    } = options;
+    let result = "";
+    for (let i2 = 0; i2 < raw.length; i2++) {
+      let next = raw[i2];
+      escapeSpecialCharacters && (next = next.replace(/\\\n[ \t]*/g, "").replace(/\\`/g, "`").replace(/\\\$/g, "$").replace(/\\\{/g, "{")), result += next, i2 < values.length && (result += values[i2]);
+    }
+    const lines = result.split(`
+`);
+    let mindent = null;
+    for (const l2 of lines) {
+      const m2 = l2.match(/^(\s+)\S+/);
+      if (m2) {
+        const indent = m2[1].length;
+        mindent ? mindent = Math.min(mindent, indent) : mindent = indent;
+      }
+    }
+    if (mindent !== null) {
+      const m2 = mindent;
+      result = lines.map((l2) => l2[0] === " " || l2[0] === "	" ? l2.slice(m2) : l2).join(`
+`);
+    }
+    return result = result.trim(), escapeSpecialCharacters && (result = result.replace(/\\n/g, `
+`)), result;
+  }
+}
+/*! @license MediaQueryParser - MIT License - Tom Golden (github@tbjgolden.com) */
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function() {
+  return __assign = Object.assign || function(t2) {
+    for (var s2, i2 = 1, n2 = arguments.length; i2 < n2; i2++) {
+      s2 = arguments[i2];
+      for (var p2 in s2) Object.prototype.hasOwnProperty.call(s2, p2) && (t2[p2] = s2[p2]);
+    }
+    return t2;
+  }, __assign.apply(this, arguments);
+};
+function __rest(s2, e2) {
+  var t2 = {};
+  for (var p2 in s2) Object.prototype.hasOwnProperty.call(s2, p2) && e2.indexOf(p2) < 0 && (t2[p2] = s2[p2]);
+  if (s2 != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var i2 = 0, p2 = Object.getOwnPropertySymbols(s2); i2 < p2.length; i2++)
+      e2.indexOf(p2[i2]) < 0 && Object.prototype.propertyIsEnumerable.call(s2, p2[i2]) && (t2[p2[i2]] = s2[p2[i2]]);
+  return t2;
+}
+function __values(o2) {
+  var s2 = typeof Symbol == "function" && Symbol.iterator, m2 = s2 && o2[s2], i2 = 0;
+  if (m2) return m2.call(o2);
+  if (o2 && typeof o2.length == "number") return {
+    next: function() {
+      return o2 && i2 >= o2.length && (o2 = void 0), { value: o2 && o2[i2++], done: !o2 };
+    }
+  };
+  throw new TypeError(s2 ? "Object is not iterable." : "Symbol.iterator is not defined.");
+}
+function __read(o2, n2) {
+  var m2 = typeof Symbol == "function" && o2[Symbol.iterator];
+  if (!m2) return o2;
+  var i2 = m2.call(o2), r2, ar = [], e2;
+  try {
+    for (; (n2 === void 0 || n2-- > 0) && !(r2 = i2.next()).done; ) ar.push(r2.value);
+  } catch (error) {
+    e2 = { error };
+  } finally {
+    try {
+      r2 && !r2.done && (m2 = i2.return) && m2.call(i2);
+    } finally {
+      if (e2) throw e2.error;
+    }
+  }
+  return ar;
+}
+var weirdNewlines = /(\u000D|\u000C|\u000D\u000A)/g, nullOrSurrogates = /[\u0000\uD800-\uDFFF]/g, commentRegex = /(\/\*)[\s\S]*?(\*\/)/g, lexicalAnalysis = function(str, index2) {
+  index2 === void 0 && (index2 = 0), str = str.replace(weirdNewlines, `
+`).replace(nullOrSurrogates, "�"), str = str.replace(commentRegex, "");
+  for (var tokens = []; index2 < str.length; index2 += 1) {
+    var code = str.charCodeAt(index2);
+    if (code === 9 || code === 32 || code === 10) {
+      for (var code_1 = str.charCodeAt(++index2); code_1 === 9 || code_1 === 32 || code_1 === 10; )
+        code_1 = str.charCodeAt(++index2);
+      index2 -= 1, tokens.push({
+        type: "<whitespace-token>"
+      });
+    } else if (code === 34) {
+      var result = consumeString(str, index2);
+      if (result === null)
+        return null;
+      var _a = __read(result, 2), lastIndex = _a[0], value = _a[1];
+      tokens.push({
+        type: "<string-token>",
+        value
+      }), index2 = lastIndex;
+    } else if (code === 35) {
+      if (index2 + 1 < str.length) {
+        var nextCode = str.charCodeAt(index2 + 1);
+        if (nextCode === 95 || nextCode >= 65 && nextCode <= 90 || nextCode >= 97 && nextCode <= 122 || nextCode >= 128 || nextCode >= 48 && nextCode <= 57 || nextCode === 92 && index2 + 2 < str.length && str.charCodeAt(index2 + 2) !== 10) {
+          var flag = wouldStartIdentifier(str, index2 + 1) ? "id" : "unrestricted", result = consumeIdentUnsafe(str, index2 + 1);
+          if (result !== null) {
+            var _b = __read(result, 2), lastIndex = _b[0], value = _b[1];
+            tokens.push({
+              type: "<hash-token>",
+              value: value.toLowerCase(),
+              flag
+            }), index2 = lastIndex;
+            continue;
+          }
+        }
+      }
+      tokens.push({
+        type: "<delim-token>",
+        value: code
+      });
+    } else if (code === 39) {
+      var result = consumeString(str, index2);
+      if (result === null)
+        return null;
+      var _c = __read(result, 2), lastIndex = _c[0], value = _c[1];
+      tokens.push({
+        type: "<string-token>",
+        value
+      }), index2 = lastIndex;
+    } else if (code === 40)
+      tokens.push({
+        type: "<(-token>"
+      });
+    else if (code === 41)
+      tokens.push({
+        type: "<)-token>"
+      });
+    else if (code === 43) {
+      var plusNumeric = consumeNumeric(str, index2);
+      if (plusNumeric === null)
+        tokens.push({
+          type: "<delim-token>",
+          value: code
+        });
+      else {
+        var _d = __read(plusNumeric, 2), lastIndex = _d[0], tokenTuple = _d[1];
+        tokenTuple[0] === "<dimension-token>" ? tokens.push({
+          type: "<dimension-token>",
+          value: tokenTuple[1],
+          unit: tokenTuple[2].toLowerCase(),
+          flag: "number"
+        }) : tokenTuple[0] === "<number-token>" ? tokens.push({
+          type: tokenTuple[0],
+          value: tokenTuple[1],
+          flag: tokenTuple[2]
+        }) : tokens.push({
+          type: tokenTuple[0],
+          value: tokenTuple[1],
+          flag: "number"
+        }), index2 = lastIndex;
+      }
+    } else if (code === 44)
+      tokens.push({
+        type: "<comma-token>"
+      });
+    else if (code === 45) {
+      var minusNumeric = consumeNumeric(str, index2);
+      if (minusNumeric !== null) {
+        var _e = __read(minusNumeric, 2), lastIndex = _e[0], tokenTuple = _e[1];
+        tokenTuple[0] === "<dimension-token>" ? tokens.push({
+          type: "<dimension-token>",
+          value: tokenTuple[1],
+          unit: tokenTuple[2].toLowerCase(),
+          flag: "number"
+        }) : tokenTuple[0] === "<number-token>" ? tokens.push({
+          type: tokenTuple[0],
+          value: tokenTuple[1],
+          flag: tokenTuple[2]
+        }) : tokens.push({
+          type: tokenTuple[0],
+          value: tokenTuple[1],
+          flag: "number"
+        }), index2 = lastIndex;
+        continue;
+      }
+      if (index2 + 2 < str.length) {
+        var nextCode = str.charCodeAt(index2 + 1), nextNextCode = str.charCodeAt(index2 + 2);
+        if (nextCode === 45 && nextNextCode === 62) {
+          tokens.push({
+            type: "<CDC-token>"
+          }), index2 += 2;
+          continue;
+        }
+      }
+      var result = consumeIdentLike(str, index2);
+      if (result !== null) {
+        var _f = __read(result, 3), lastIndex = _f[0], value = _f[1], type = _f[2];
+        tokens.push({
+          type,
+          value
+        }), index2 = lastIndex;
+        continue;
+      }
+      tokens.push({
+        type: "<delim-token>",
+        value: code
+      });
+    } else if (code === 46) {
+      var minusNumeric = consumeNumeric(str, index2);
+      if (minusNumeric === null)
+        tokens.push({
+          type: "<delim-token>",
+          value: code
+        });
+      else {
+        var _g = __read(minusNumeric, 2), lastIndex = _g[0], tokenTuple = _g[1];
+        tokenTuple[0] === "<dimension-token>" ? tokens.push({
+          type: "<dimension-token>",
+          value: tokenTuple[1],
+          unit: tokenTuple[2].toLowerCase(),
+          flag: "number"
+        }) : tokenTuple[0] === "<number-token>" ? tokens.push({
+          type: tokenTuple[0],
+          value: tokenTuple[1],
+          flag: tokenTuple[2]
+        }) : tokens.push({
+          type: tokenTuple[0],
+          value: tokenTuple[1],
+          flag: "number"
+        }), index2 = lastIndex;
+        continue;
+      }
+    } else if (code === 58)
+      tokens.push({
+        type: "<colon-token>"
+      });
+    else if (code === 59)
+      tokens.push({
+        type: "<semicolon-token>"
+      });
+    else if (code === 60) {
+      if (index2 + 3 < str.length) {
+        var nextCode = str.charCodeAt(index2 + 1), nextNextCode = str.charCodeAt(index2 + 2), nextNextNextCode = str.charCodeAt(index2 + 3);
+        if (nextCode === 33 && nextNextCode === 45 && nextNextNextCode === 45) {
+          tokens.push({
+            type: "<CDO-token>"
+          }), index2 += 3;
+          continue;
+        }
+      }
+      tokens.push({
+        type: "<delim-token>",
+        value: code
+      });
+    } else if (code === 64) {
+      var result = consumeIdent(str, index2 + 1);
+      if (result !== null) {
+        var _h = __read(result, 2), lastIndex = _h[0], value = _h[1];
+        tokens.push({
+          type: "<at-keyword-token>",
+          value: value.toLowerCase()
+        }), index2 = lastIndex;
+        continue;
+      }
+      tokens.push({
+        type: "<delim-token>",
+        value: code
+      });
+    } else if (code === 91)
+      tokens.push({
+        type: "<[-token>"
+      });
+    else if (code === 92) {
+      var result = consumeEscape(str, index2);
+      if (result === null)
+        return null;
+      var _j = __read(result, 2), lastIndex = _j[0], value = _j[1];
+      str = str.slice(0, index2) + value + str.slice(lastIndex + 1), index2 -= 1;
+    } else if (code === 93)
+      tokens.push({
+        type: "<]-token>"
+      });
+    else if (code === 123)
+      tokens.push({
+        type: "<{-token>"
+      });
+    else if (code === 125)
+      tokens.push({
+        type: "<}-token>"
+      });
+    else if (code >= 48 && code <= 57) {
+      var result = consumeNumeric(str, index2), _k = __read(result, 2), lastIndex = _k[0], tokenTuple = _k[1];
+      tokenTuple[0] === "<dimension-token>" ? tokens.push({
+        type: "<dimension-token>",
+        value: tokenTuple[1],
+        unit: tokenTuple[2].toLowerCase(),
+        flag: "number"
+      }) : tokenTuple[0] === "<number-token>" ? tokens.push({
+        type: tokenTuple[0],
+        value: tokenTuple[1],
+        flag: tokenTuple[2]
+      }) : tokens.push({
+        type: tokenTuple[0],
+        value: tokenTuple[1],
+        flag: "number"
+      }), index2 = lastIndex;
+    } else if (code === 95 || code >= 65 && code <= 90 || code >= 97 && code <= 122 || code >= 128) {
+      var result = consumeIdentLike(str, index2);
+      if (result === null)
+        return null;
+      var _l = __read(result, 3), lastIndex = _l[0], value = _l[1], type = _l[2];
+      tokens.push({
+        type,
+        value
+      }), index2 = lastIndex;
+    } else
+      tokens.push({
+        type: "<delim-token>",
+        value: code
+      });
+  }
+  return tokens.push({
+    type: "<EOF-token>"
+  }), tokens;
+}, consumeString = function(str, index2) {
+  if (str.length <= index2 + 1) return null;
+  for (var firstCode = str.charCodeAt(index2), charCodes = [], i2 = index2 + 1; i2 < str.length; i2 += 1) {
+    var code = str.charCodeAt(i2);
+    if (code === firstCode)
+      return [i2, String.fromCharCode.apply(null, charCodes)];
+    if (code === 92) {
+      var result = consumeEscape(str, i2);
+      if (result === null) return null;
+      var _a = __read(result, 2), lastIndex = _a[0], charCode = _a[1];
+      charCodes.push(charCode), i2 = lastIndex;
+    } else {
+      if (code === 10)
+        return null;
+      charCodes.push(code);
+    }
+  }
+  return null;
+}, wouldStartIdentifier = function(str, index2) {
+  if (str.length <= index2) return !1;
+  var code = str.charCodeAt(index2);
+  if (code === 45) {
+    if (str.length <= index2 + 1) return !1;
+    var nextCode = str.charCodeAt(index2 + 1);
+    if (nextCode === 45 || nextCode === 95 || nextCode >= 65 && nextCode <= 90 || nextCode >= 97 && nextCode <= 122 || nextCode >= 128)
+      return !0;
+    if (nextCode === 92) {
+      if (str.length <= index2 + 2) return !1;
+      var nextNextCode = str.charCodeAt(index2 + 2);
+      return nextNextCode !== 10;
+    } else
+      return !1;
+  } else {
+    if (code === 95 || code >= 65 && code <= 90 || code >= 97 && code <= 122 || code >= 128)
+      return !0;
+    if (code === 92) {
+      if (str.length <= index2 + 1) return !1;
+      var nextCode = str.charCodeAt(index2 + 1);
+      return nextCode !== 10;
+    } else
+      return !1;
+  }
+}, consumeEscape = function(str, index2) {
+  if (str.length <= index2 + 1 || str.charCodeAt(index2) !== 92) return null;
+  var code = str.charCodeAt(index2 + 1);
+  if (code === 10)
+    return null;
+  if (code >= 48 && code <= 57 || code >= 65 && code <= 70 || code >= 97 && code <= 102) {
+    for (var hexCharCodes = [code], min2 = Math.min(index2 + 7, str.length), i2 = index2 + 2; i2 < min2; i2 += 1) {
+      var code_2 = str.charCodeAt(i2);
+      if (code_2 >= 48 && code_2 <= 57 || code_2 >= 65 && code_2 <= 70 || code_2 >= 97 && code_2 <= 102)
+        hexCharCodes.push(code_2);
+      else
+        break;
+    }
+    if (i2 < str.length) {
+      var code_3 = str.charCodeAt(i2);
+      (code_3 === 9 || code_3 === 32 || code_3 === 10) && (i2 += 1);
+    }
+    return [i2 - 1, parseInt(String.fromCharCode.apply(null, hexCharCodes), 16)];
+  } else
+    return [index2 + 1, code];
+}, consumeNumeric = function(str, index2) {
+  var numberResult = consumeNumber(str, index2);
+  if (numberResult === null) return null;
+  var _a = __read(numberResult, 3), numberEndIndex = _a[0], numberValue = _a[1], numberFlag = _a[2], identResult = consumeIdent(str, numberEndIndex + 1);
+  if (identResult !== null) {
+    var _b = __read(identResult, 2), identEndIndex = _b[0], identValue = _b[1];
+    return [identEndIndex, ["<dimension-token>", numberValue, identValue]];
+  }
+  return numberEndIndex + 1 < str.length && str.charCodeAt(numberEndIndex + 1) === 37 ? [numberEndIndex + 1, ["<percentage-token>", numberValue]] : [numberEndIndex, ["<number-token>", numberValue, numberFlag]];
+}, consumeNumber = function(str, index2) {
+  if (str.length <= index2) return null;
+  var flag = "integer", numberChars = [], firstCode = str.charCodeAt(index2);
+  for ((firstCode === 43 || firstCode === 45) && (index2 += 1, firstCode === 45 && numberChars.push(45)); index2 < str.length; ) {
+    var code = str.charCodeAt(index2);
+    if (code >= 48 && code <= 57)
+      numberChars.push(code), index2 += 1;
+    else
+      break;
+  }
+  if (index2 + 1 < str.length) {
+    var nextCode = str.charCodeAt(index2), nextNextCode = str.charCodeAt(index2 + 1);
+    if (nextCode === 46 && nextNextCode >= 48 && nextNextCode <= 57)
+      for (numberChars.push(nextCode, nextNextCode), flag = "number", index2 += 2; index2 < str.length; ) {
+        var code = str.charCodeAt(index2);
+        if (code >= 48 && code <= 57)
+          numberChars.push(code), index2 += 1;
+        else
+          break;
+      }
+  }
+  if (index2 + 1 < str.length) {
+    var nextCode = str.charCodeAt(index2), nextNextCode = str.charCodeAt(index2 + 1), nextNextNextCode = str.charCodeAt(index2 + 2);
+    if (nextCode === 69 || nextCode === 101) {
+      var nextNextIsDigit = nextNextCode >= 48 && nextNextCode <= 57;
+      if (nextNextIsDigit || (nextNextCode === 43 || nextNextCode === 45) && nextNextNextCode >= 48 && nextNextNextCode <= 57)
+        for (flag = "number", nextNextIsDigit ? (numberChars.push(69, nextNextCode), index2 += 2) : nextNextCode === 45 ? (numberChars.push(69, 45, nextNextNextCode), index2 += 3) : (numberChars.push(69, nextNextNextCode), index2 += 3); index2 < str.length; ) {
+          var code = str.charCodeAt(index2);
+          if (code >= 48 && code <= 57)
+            numberChars.push(code), index2 += 1;
+          else
+            break;
+        }
+    }
+  }
+  var numberString = String.fromCharCode.apply(null, numberChars), value = flag === "number" ? parseFloat(numberString) : parseInt(numberString);
+  return value === -0 && (value = 0), Number.isNaN(value) ? null : [index2 - 1, value, flag];
+}, consumeIdentUnsafe = function(str, index2) {
+  if (str.length <= index2)
+    return null;
+  for (var identChars = [], code = str.charCodeAt(index2); index2 < str.length; code = str.charCodeAt(++index2)) {
+    if (code === 45 || code === 95 || code >= 65 && code <= 90 || code >= 97 && code <= 122 || code >= 128 || code >= 48 && code <= 57) {
+      identChars.push(code);
+      continue;
+    } else {
+      var result = consumeEscape(str, index2);
+      if (result !== null) {
+        var _a = __read(result, 2), lastIndex = _a[0], code_4 = _a[1];
+        identChars.push(code_4), index2 = lastIndex;
+        continue;
+      }
+    }
+    break;
+  }
+  return index2 === 0 ? null : [index2 - 1, String.fromCharCode.apply(null, identChars)];
+}, consumeIdent = function(str, index2) {
+  if (str.length <= index2 || !wouldStartIdentifier(str, index2))
+    return null;
+  for (var identChars = [], code = str.charCodeAt(index2); index2 < str.length; code = str.charCodeAt(++index2)) {
+    if (code === 45 || code === 95 || code >= 65 && code <= 90 || code >= 97 && code <= 122 || code >= 128 || code >= 48 && code <= 57) {
+      identChars.push(code);
+      continue;
+    } else {
+      var result = consumeEscape(str, index2);
+      if (result !== null) {
+        var _a = __read(result, 2), lastIndex = _a[0], code_5 = _a[1];
+        identChars.push(code_5), index2 = lastIndex;
+        continue;
+      }
+    }
+    break;
+  }
+  return [index2 - 1, String.fromCharCode.apply(null, identChars)];
+}, consumeUrl = function(str, index2) {
+  for (var code = str.charCodeAt(index2); code === 9 || code === 32 || code === 10; )
+    code = str.charCodeAt(++index2);
+  for (var urlChars = [], hasFinishedWord = !1; index2 < str.length; ) {
+    if (code === 41)
+      return [index2, String.fromCharCode.apply(null, urlChars)];
+    if (code === 34 || code === 39 || code === 40)
+      return null;
+    if (code === 9 || code === 32 || code === 10)
+      !hasFinishedWord && urlChars.length !== 0 && (hasFinishedWord = !0);
+    else if (code === 92) {
+      var result = consumeEscape(str, index2);
+      if (result === null || hasFinishedWord) return null;
+      var _a = __read(result, 2), lastIndex = _a[0], value = _a[1];
+      urlChars.push(value), index2 = lastIndex;
+    } else {
+      if (hasFinishedWord) return null;
+      urlChars.push(code);
+    }
+    code = str.charCodeAt(++index2);
+  }
+  return null;
+}, consumeIdentLike = function(str, index2) {
+  var result = consumeIdent(str, index2);
+  if (result === null) return null;
+  var _a = __read(result, 2), lastIndex = _a[0], value = _a[1];
+  if (value.toLowerCase() === "url") {
+    if (str.length > lastIndex + 1) {
+      var nextCode = str.charCodeAt(lastIndex + 1);
+      if (nextCode === 40) {
+        for (var offset = 2; lastIndex + offset < str.length; offset += 1) {
+          var nextNextCode = str.charCodeAt(lastIndex + offset);
+          if (nextNextCode === 34 || nextNextCode === 39)
+            return [lastIndex + 1, value.toLowerCase(), "<function-token>"];
+          if (nextNextCode !== 9 && nextNextCode !== 32 && nextNextCode !== 10) {
+            var result_1 = consumeUrl(str, lastIndex + offset);
+            if (result_1 === null) return null;
+            var _b = __read(result_1, 2), lastUrlIndex = _b[0], value_1 = _b[1];
+            return [lastUrlIndex, value_1, "<url-token>"];
+          }
+        }
+        return [lastIndex + 1, value.toLowerCase(), "<function-token>"];
+      }
+    }
+  } else if (str.length > lastIndex + 1) {
+    var nextCode = str.charCodeAt(lastIndex + 1);
+    if (nextCode === 40)
+      return [lastIndex + 1, value.toLowerCase(), "<function-token>"];
+  }
+  return [lastIndex, value.toLowerCase(), "<ident-token>"];
+}, simplifyAST = function(ast) {
+  for (var i2 = ast.length - 1; i2 >= 0; i2--)
+    ast[i2] = simplifyMediaQuery(ast[i2]);
+  return ast;
+}, simplifyMediaQuery = function(mediaQuery) {
+  if (mediaQuery.mediaCondition === null) return mediaQuery;
+  var mediaCondition = simplifyMediaCondition(mediaQuery.mediaCondition);
+  return mediaCondition.operator === null && mediaCondition.children.length === 1 && "children" in mediaCondition.children[0] && (mediaCondition = mediaCondition.children[0]), {
+    mediaPrefix: mediaQuery.mediaPrefix,
+    mediaType: mediaQuery.mediaType,
+    mediaCondition
+  };
+}, simplifyMediaCondition = function simplifyMediaCondition2(mediaCondition) {
+  for (var i2 = mediaCondition.children.length - 1; i2 >= 0; i2--) {
+    var unsimplifiedChild = mediaCondition.children[i2];
+    if (!("context" in unsimplifiedChild)) {
+      var child = simplifyMediaCondition2(unsimplifiedChild);
+      if (child.operator === null && child.children.length === 1)
+        mediaCondition.children[i2] = child.children[0];
+      else if (child.operator === mediaCondition.operator && (child.operator === "and" || child.operator === "or")) {
+        for (var spliceArgs = [i2, 1], i_1 = 0; i_1 < child.children.length; i_1++)
+          spliceArgs.push(child.children[i_1]);
+        mediaCondition.children.splice.apply(mediaCondition.children, spliceArgs);
+      }
+    }
+  }
+  return mediaCondition;
+}, createError = function(message, err) {
+  return err instanceof Error ? new Error("".concat(err.message.trim(), `
+`).concat(message.trim())) : new Error(message.trim());
+}, toAST = function(str) {
+  return simplifyAST(toUnflattenedAST(str));
+}, toUnflattenedAST = function(str) {
+  var tokenList = lexicalAnalysis(str.trim());
+  if (tokenList === null)
+    throw createError("Failed tokenizing");
+  var startIndex = 0, endIndex = tokenList.length - 1;
+  if (tokenList[0].type === "<at-keyword-token>" && tokenList[0].value === "media") {
+    if (tokenList[1].type !== "<whitespace-token>")
+      throw createError("Expected whitespace after media");
+    startIndex = 2;
+    for (var i2 = 2; i2 < tokenList.length - 1; i2++) {
+      var token = tokenList[i2];
+      if (token.type === "<{-token>") {
+        endIndex = i2;
+        break;
+      } else if (token.type === "<semicolon-token>")
+        throw createError("Expected '{' in media query but found ';'");
+    }
+  }
+  return tokenList = tokenList.slice(startIndex, endIndex), syntacticAnalysis(tokenList);
+}, removeWhitespace = function(tokenList) {
+  for (var newTokenList = [], before = !1, i2 = 0; i2 < tokenList.length; i2++)
+    tokenList[i2].type === "<whitespace-token>" ? (before = !0, newTokenList.length > 0 && (newTokenList[newTokenList.length - 1].wsAfter = !0)) : (newTokenList.push(__assign(__assign({}, tokenList[i2]), {
+      wsBefore: before,
+      wsAfter: !1
+    })), before = !1);
+  return newTokenList;
+}, syntacticAnalysis = function(tokenList) {
+  for (var e_1, _a, mediaQueryList = [[]], i2 = 0; i2 < tokenList.length; i2++) {
+    var token = tokenList[i2];
+    token.type === "<comma-token>" ? mediaQueryList.push([]) : mediaQueryList[mediaQueryList.length - 1].push(token);
+  }
+  var mediaQueries = mediaQueryList.map(removeWhitespace);
+  if (mediaQueries.length === 1 && mediaQueries[0].length === 0)
+    return [{
+      mediaCondition: null,
+      mediaPrefix: null,
+      mediaType: "all"
+    }];
+  var mediaQueryTokens = mediaQueries.map(function(mediaQueryTokens2) {
+    return mediaQueryTokens2.length === 0 ? null : tokenizeMediaQuery(mediaQueryTokens2);
+  }), nonNullMediaQueryTokens = [];
+  try {
+    for (var mediaQueryTokens_1 = __values(mediaQueryTokens), mediaQueryTokens_1_1 = mediaQueryTokens_1.next(); !mediaQueryTokens_1_1.done; mediaQueryTokens_1_1 = mediaQueryTokens_1.next()) {
+      var mediaQueryToken = mediaQueryTokens_1_1.value;
+      mediaQueryToken !== null && nonNullMediaQueryTokens.push(mediaQueryToken);
+    }
+  } catch (e_1_1) {
+    e_1 = {
+      error: e_1_1
+    };
+  } finally {
+    try {
+      mediaQueryTokens_1_1 && !mediaQueryTokens_1_1.done && (_a = mediaQueryTokens_1.return) && _a.call(mediaQueryTokens_1);
+    } finally {
+      if (e_1) throw e_1.error;
+    }
+  }
+  if (nonNullMediaQueryTokens.length === 0)
+    throw createError("No valid media queries");
+  return nonNullMediaQueryTokens;
+}, tokenizeMediaQuery = function(tokens) {
+  var firstToken = tokens[0];
+  if (firstToken.type === "<(-token>")
+    try {
+      return {
+        mediaPrefix: null,
+        mediaType: "all",
+        mediaCondition: tokenizeMediaCondition(tokens, !0)
+      };
+    } catch (err) {
+      throw createError("Expected media condition after '('", err);
+    }
+  else if (firstToken.type === "<ident-token>") {
+    var mediaPrefix = null, mediaType = void 0, value = firstToken.value;
+    (value === "only" || value === "not") && (mediaPrefix = value);
+    var firstIndex = mediaPrefix === null ? 0 : 1;
+    if (tokens.length <= firstIndex)
+      throw createError("Expected extra token in media query");
+    var firstNonUnaryToken = tokens[firstIndex];
+    if (firstNonUnaryToken.type === "<ident-token>") {
+      var value_1 = firstNonUnaryToken.value;
+      if (value_1 === "all")
+        mediaType = "all";
+      else if (value_1 === "print" || value_1 === "screen")
+        mediaType = value_1;
+      else if (value_1 === "tty" || value_1 === "tv" || value_1 === "projection" || value_1 === "handheld" || value_1 === "braille" || value_1 === "embossed" || value_1 === "aural" || value_1 === "speech")
+        mediaPrefix = mediaPrefix === "not" ? null : "not", mediaType = "all";
+      else
+        throw createError("Unknown ident '".concat(value_1, "' in media query"));
+    } else if (mediaPrefix === "not" && firstNonUnaryToken.type === "<(-token>") {
+      var tokensWithParens = [{
+        type: "<(-token>",
+        wsBefore: !1,
+        wsAfter: !1
+      }];
+      tokensWithParens.push.apply(tokensWithParens, tokens), tokensWithParens.push({
+        type: "<)-token>",
+        wsBefore: !1,
+        wsAfter: !1
+      });
+      try {
+        return {
+          mediaPrefix: null,
+          mediaType: "all",
+          mediaCondition: tokenizeMediaCondition(tokensWithParens, !0)
+        };
+      } catch (err) {
+        throw createError("Expected media condition after '('", err);
+      }
+    } else
+      throw createError("Invalid media query");
+    if (firstIndex + 1 === tokens.length)
+      return {
+        mediaPrefix,
+        mediaType,
+        mediaCondition: null
+      };
+    if (firstIndex + 4 < tokens.length) {
+      var secondNonUnaryToken = tokens[firstIndex + 1];
+      if (secondNonUnaryToken.type === "<ident-token>" && secondNonUnaryToken.value === "and")
+        try {
+          return {
+            mediaPrefix,
+            mediaType,
+            mediaCondition: tokenizeMediaCondition(tokens.slice(firstIndex + 2), !1)
+          };
+        } catch (err) {
+          throw createError("Expected media condition after 'and'", err);
+        }
+      else
+        throw createError("Expected 'and' after media prefix");
+    } else
+      throw createError("Expected media condition after media prefix");
+  } else
+    throw createError("Expected media condition or media prefix");
+}, tokenizeMediaCondition = function tokenizeMediaCondition2(tokens, mayContainOr, previousOperator) {
+  if (previousOperator === void 0 && (previousOperator = null), tokens.length < 3 || tokens[0].type !== "<(-token>" || tokens[tokens.length - 1].type !== "<)-token>")
+    throw new Error("Invalid media condition");
+  for (var endIndexOfFirstFeature = tokens.length - 1, maxDepth = 0, count = 0, i2 = 0; i2 < tokens.length; i2++) {
+    var token = tokens[i2];
+    if (token.type === "<(-token>" ? (count += 1, maxDepth = Math.max(maxDepth, count)) : token.type === "<)-token>" && (count -= 1), count === 0) {
+      endIndexOfFirstFeature = i2;
+      break;
+    }
+  }
+  if (count !== 0)
+    throw new Error(`Mismatched parens
+Invalid media condition`);
+  var child, featureTokens = tokens.slice(0, endIndexOfFirstFeature + 1);
+  if (maxDepth === 1 ? child = tokenizeMediaFeature(featureTokens) : featureTokens[1].type === "<ident-token>" && featureTokens[1].value === "not" ? child = tokenizeMediaCondition2(featureTokens.slice(2, -1), !0, "not") : child = tokenizeMediaCondition2(featureTokens.slice(1, -1), !0), endIndexOfFirstFeature === tokens.length - 1)
+    return {
+      operator: previousOperator,
+      children: [child]
+    };
+  var nextToken = tokens[endIndexOfFirstFeature + 1];
+  if (nextToken.type !== "<ident-token>")
+    throw new Error(`Invalid operator
+Invalid media condition`);
+  if (previousOperator !== null && previousOperator !== nextToken.value)
+    throw new Error("'".concat(nextToken.value, "' and '").concat(previousOperator, `' must not be at same level
+Invalid media condition`));
+  if (nextToken.value === "or" && !mayContainOr)
+    throw new Error(`Cannot use 'or' at top level of a media query
+Invalid media condition`);
+  if (nextToken.value !== "and" && nextToken.value !== "or")
+    throw new Error("Invalid operator: '".concat(nextToken.value, `'
+Invalid media condition`));
+  var siblings = tokenizeMediaCondition2(tokens.slice(endIndexOfFirstFeature + 2), mayContainOr, nextToken.value);
+  return {
+    operator: nextToken.value,
+    children: [child].concat(siblings.children)
+  };
+}, tokenizeMediaFeature = function(rawTokens) {
+  if (rawTokens.length < 3 || rawTokens[0].type !== "<(-token>" || rawTokens[rawTokens.length - 1].type !== "<)-token>")
+    throw new Error("Invalid media feature");
+  for (var tokens = [rawTokens[0]], i2 = 1; i2 < rawTokens.length; i2++) {
+    if (i2 < rawTokens.length - 2) {
+      var a2 = rawTokens[i2], b2 = rawTokens[i2 + 1], c = rawTokens[i2 + 2];
+      if (a2.type === "<number-token>" && a2.value > 0 && b2.type === "<delim-token>" && b2.value === 47 && c.type === "<number-token>" && c.value > 0) {
+        tokens.push({
+          type: "<ratio-token>",
+          numerator: a2.value,
+          denominator: c.value,
+          wsBefore: a2.wsBefore,
+          wsAfter: c.wsAfter
+        }), i2 += 2;
+        continue;
+      }
+    }
+    tokens.push(rawTokens[i2]);
+  }
+  var nextToken = tokens[1];
+  if (nextToken.type === "<ident-token>" && tokens.length === 3)
+    return {
+      context: "boolean",
+      feature: nextToken.value
+    };
+  if (tokens.length === 5 && tokens[1].type === "<ident-token>" && tokens[2].type === "<colon-token>") {
+    var valueToken = tokens[3];
+    if (valueToken.type === "<number-token>" || valueToken.type === "<dimension-token>" || valueToken.type === "<ratio-token>" || valueToken.type === "<ident-token>") {
+      var feature = tokens[1].value, prefix = null, slice = feature.slice(0, 4);
+      slice === "min-" ? (prefix = "min", feature = feature.slice(4)) : slice === "max-" && (prefix = "max", feature = feature.slice(4)), valueToken.wsBefore, valueToken.wsAfter;
+      var value = __rest(valueToken, ["wsBefore", "wsAfter"]);
+      return {
+        context: "value",
+        prefix,
+        feature,
+        value
+      };
+    }
+  } else if (tokens.length >= 5)
+    try {
+      var range = tokenizeRange(tokens);
+      return {
+        context: "range",
+        feature: range.featureName,
+        range
+      };
+    } catch (err) {
+      throw createError("Invalid media feature", err);
+    }
+  throw new Error("Invalid media feature");
+}, tokenizeRange = function(tokens) {
+  var _a, _b, _c, _d;
+  if (tokens.length < 5 || tokens[0].type !== "<(-token>" || tokens[tokens.length - 1].type !== "<)-token>")
+    throw new Error("Invalid range");
+  var range = {
+    leftToken: null,
+    leftOp: null,
+    featureName: "",
+    rightOp: null,
+    rightToken: null
+  }, hasLeft = tokens[1].type === "<number-token>" || tokens[1].type === "<dimension-token>" || tokens[1].type === "<ratio-token>" || tokens[1].type === "<ident-token>" && tokens[1].value === "infinite";
+  if (tokens[2].type === "<delim-token>") {
+    if (tokens[2].value === 60)
+      tokens[3].type === "<delim-token>" && tokens[3].value === 61 && !tokens[3].wsBefore ? range[hasLeft ? "leftOp" : "rightOp"] = "<=" : range[hasLeft ? "leftOp" : "rightOp"] = "<";
+    else if (tokens[2].value === 62)
+      tokens[3].type === "<delim-token>" && tokens[3].value === 61 && !tokens[3].wsBefore ? range[hasLeft ? "leftOp" : "rightOp"] = ">=" : range[hasLeft ? "leftOp" : "rightOp"] = ">";
+    else if (tokens[2].value === 61)
+      range[hasLeft ? "leftOp" : "rightOp"] = "=";
+    else
+      throw new Error("Invalid range");
+    if (hasLeft)
+      range.leftToken = tokens[1];
+    else if (tokens[1].type === "<ident-token>")
+      range.featureName = tokens[1].value;
+    else
+      throw new Error("Invalid range");
+    var tokenIndexAfterFirstOp = 2 + ((_b = (_a = range[hasLeft ? "leftOp" : "rightOp"]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0), tokenAfterFirstOp = tokens[tokenIndexAfterFirstOp];
+    if (hasLeft)
+      if (tokenAfterFirstOp.type === "<ident-token>") {
+        if (range.featureName = tokenAfterFirstOp.value, tokens.length >= 7) {
+          var secondOpToken = tokens[tokenIndexAfterFirstOp + 1], followingToken = tokens[tokenIndexAfterFirstOp + 2];
+          if (secondOpToken.type === "<delim-token>") {
+            var charCode = secondOpToken.value;
+            if (charCode === 60)
+              followingToken.type === "<delim-token>" && followingToken.value === 61 && !followingToken.wsBefore ? range.rightOp = "<=" : range.rightOp = "<";
+            else if (charCode === 62)
+              followingToken.type === "<delim-token>" && followingToken.value === 61 && !followingToken.wsBefore ? range.rightOp = ">=" : range.rightOp = ">";
+            else
+              throw new Error("Invalid range");
+            var tokenAfterSecondOp = tokens[tokenIndexAfterFirstOp + 1 + ((_d = (_c = range.rightOp) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0)];
+            range.rightToken = tokenAfterSecondOp;
+          } else
+            throw new Error("Invalid range");
+        } else if (tokenIndexAfterFirstOp + 2 !== tokens.length)
+          throw new Error("Invalid range");
+      } else
+        throw new Error("Invalid range");
+    else
+      range.rightToken = tokenAfterFirstOp;
+    var validRange = null, lt = range.leftToken, leftOp = range.leftOp, featureName = range.featureName, rightOp = range.rightOp, rt = range.rightToken, leftToken = null;
+    if (lt !== null) {
+      if (lt.type === "<ident-token>") {
+        var type = lt.type, value = lt.value;
+        value === "infinite" && (leftToken = {
+          type,
+          value
+        });
+      } else if (lt.type === "<number-token>" || lt.type === "<dimension-token>" || lt.type === "<ratio-token>") {
+        lt.wsBefore, lt.wsAfter;
+        var ltNoWS = __rest(lt, ["wsBefore", "wsAfter"]);
+        leftToken = ltNoWS;
+      }
+    }
+    var rightToken = null;
+    if (rt !== null) {
+      if (rt.type === "<ident-token>") {
+        var type = rt.type, value = rt.value;
+        value === "infinite" && (rightToken = {
+          type,
+          value
+        });
+      } else if (rt.type === "<number-token>" || rt.type === "<dimension-token>" || rt.type === "<ratio-token>") {
+        rt.wsBefore, rt.wsAfter;
+        var rtNoWS = __rest(rt, ["wsBefore", "wsAfter"]);
+        rightToken = rtNoWS;
+      }
+    }
+    if (leftToken !== null && rightToken !== null)
+      if ((leftOp === "<" || leftOp === "<=") && (rightOp === "<" || rightOp === "<="))
+        validRange = {
+          leftToken,
+          leftOp,
+          featureName,
+          rightOp,
+          rightToken
+        };
+      else if ((leftOp === ">" || leftOp === ">=") && (rightOp === ">" || rightOp === ">="))
+        validRange = {
+          leftToken,
+          leftOp,
+          featureName,
+          rightOp,
+          rightToken
+        };
+      else
+        throw new Error("Invalid range");
+    else leftToken === null && leftOp === null && rightOp !== null && rightToken !== null ? validRange = {
+      leftToken,
+      leftOp,
+      featureName,
+      rightOp,
+      rightToken
+    } : leftToken !== null && leftOp !== null && rightOp === null && rightToken === null && (validRange = {
+      leftToken,
+      leftOp,
+      featureName,
+      rightOp,
+      rightToken
+    });
+    return validRange;
+  } else
+    throw new Error("Invalid range");
+};
+function toPrimitive(t2, r2) {
+  if (typeof t2 != "object" || !t2) return t2;
+  var e2 = t2[Symbol.toPrimitive];
+  if (e2 !== void 0) {
+    var i2 = e2.call(t2, r2);
+    if (typeof i2 != "object") return i2;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(t2);
+}
+function toPropertyKey(t2) {
+  var i2 = toPrimitive(t2, "string");
+  return typeof i2 == "symbol" ? i2 : String(i2);
+}
+function _defineProperty(obj, key, value) {
+  return key = toPropertyKey(key), key in obj ? Object.defineProperty(obj, key, {
+    value,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : obj[key] = value, obj;
+}
+function ownKeys(e2, r2) {
+  var t2 = Object.keys(e2);
+  if (Object.getOwnPropertySymbols) {
+    var o2 = Object.getOwnPropertySymbols(e2);
+    r2 && (o2 = o2.filter(function(r3) {
+      return Object.getOwnPropertyDescriptor(e2, r3).enumerable;
+    })), t2.push.apply(t2, o2);
+  }
+  return t2;
+}
+function _objectSpread2(e2) {
+  for (var r2 = 1; r2 < arguments.length; r2++) {
+    var t2 = arguments[r2] != null ? arguments[r2] : {};
+    r2 % 2 ? ownKeys(Object(t2), !0).forEach(function(r3) {
+      _defineProperty(e2, r3, t2[r3]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e2, Object.getOwnPropertyDescriptors(t2)) : ownKeys(Object(t2)).forEach(function(r3) {
+      Object.defineProperty(e2, r3, Object.getOwnPropertyDescriptor(t2, r3));
+    });
+  }
+  return e2;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {}, sourceKeys = Object.keys(source), key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++)
+    key = sourceKeys[i2], !(excluded.indexOf(key) >= 0) && (target[key] = source[key]);
+  return target;
+}
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded), key, i2;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i2 = 0; i2 < sourceSymbolKeys.length; i2++)
+      key = sourceSymbolKeys[i2], !(excluded.indexOf(key) >= 0) && Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]);
+  }
+  return target;
+}
+function forEach(obj, fn) {
+  for (var _key in obj)
+    fn(obj[_key], _key);
+}
+function omit(obj, omitKeys) {
+  var result = {};
+  for (var _key2 in obj)
+    omitKeys.indexOf(_key2) === -1 && (result[_key2] = obj[_key2]);
+  return result;
+}
+function mapKeys(obj, fn) {
+  var result = {};
+  for (var _key3 in obj)
+    result[fn(obj[_key3], _key3)] = obj[_key3];
+  return result;
+}
+var _templateObject$1;
+function escapeRegex(string) {
+  return string.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
+}
+var validateSelector = (selector2, targetClassName) => {
+  var replaceTarget = () => {
+    var targetRegex = new RegExp(".".concat(escapeRegex(cssesc$1(targetClassName, {
+      isIdentifier: !0
+    }))), "g");
+    return selector2.replace(targetRegex, "&");
+  }, selectorParts;
+  try {
+    selectorParts = parse(selector2);
+  } catch {
+    throw new Error("Invalid selector: ".concat(replaceTarget()));
+  }
+  selectorParts.forEach((tokens) => {
+    try {
+      for (var i2 = tokens.length - 1; i2 >= -1; i2--) {
+        if (!tokens[i2])
+          throw new Error();
+        var token = tokens[i2];
+        if (token.type === "child" || token.type === "parent" || token.type === "sibling" || token.type === "adjacent" || token.type === "descendant")
+          throw new Error();
+        if (token.type === "attribute" && token.name === "class" && token.value === targetClassName)
+          return;
+      }
+    } catch {
+      throw new Error(dedent(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral([`
+        Invalid selector: `, `
+    
+        Style selectors must target the '&' character (along with any modifiers), e.g. `, " or ", `.
+        
+        This is to ensure that each style block only affects the styling of a single class.
+        
+        If your selector is targeting another class, you should move it to the style definition for that class, e.g. given we have styles for 'parent' and 'child' elements, instead of adding a selector of `, ") to 'parent', you should add ", ` to 'child').
+        
+        If your selector is targeting something global, use the 'globalStyle' function instead, e.g. if you wanted to write `, ", you should instead write 'globalStyle(", `, { ... })'
+      `])), replaceTarget(), "`${parent} &`", "`${parent} &:hover`", "`& ${child}`", "`${parent} &`", "`& h1`", "`${parent} h1`"));
+    }
+  });
+};
+class ConditionalRuleset {
+  /**
+   * Stores information about where conditions must be in relation to other conditions
+   *
+   * e.g. mobile -> tablet, desktop
+   */
+  constructor() {
+    this.ruleset = /* @__PURE__ */ new Map(), this.precedenceLookup = /* @__PURE__ */ new Map();
+  }
+  findOrCreateCondition(conditionQuery) {
+    var targetCondition = this.ruleset.get(conditionQuery);
+    return targetCondition || (targetCondition = {
+      query: conditionQuery,
+      rules: [],
+      children: new ConditionalRuleset()
+    }, this.ruleset.set(conditionQuery, targetCondition)), targetCondition;
+  }
+  getConditionalRulesetByPath(conditionPath) {
+    var currRuleset = this;
+    for (var query of conditionPath) {
+      var condition = currRuleset.findOrCreateCondition(query);
+      currRuleset = condition.children;
+    }
+    return currRuleset;
+  }
+  addRule(rule, conditionQuery, conditionPath) {
+    var ruleset = this.getConditionalRulesetByPath(conditionPath), targetCondition = ruleset.findOrCreateCondition(conditionQuery);
+    if (!targetCondition)
+      throw new Error("Failed to add conditional rule");
+    targetCondition.rules.push(rule);
+  }
+  addConditionPrecedence(conditionPath, conditionOrder) {
+    for (var ruleset = this.getConditionalRulesetByPath(conditionPath), i2 = 0; i2 < conditionOrder.length; i2++) {
+      var _ruleset$precedenceLo, query = conditionOrder[i2], conditionPrecedence = (_ruleset$precedenceLo = ruleset.precedenceLookup.get(query)) !== null && _ruleset$precedenceLo !== void 0 ? _ruleset$precedenceLo : /* @__PURE__ */ new Set();
+      for (var lowerPrecedenceCondition of conditionOrder.slice(i2 + 1))
+        conditionPrecedence.add(lowerPrecedenceCondition);
+      ruleset.precedenceLookup.set(query, conditionPrecedence);
+    }
+  }
+  isCompatible(incomingRuleset) {
+    for (var [condition, orderPrecedence] of this.precedenceLookup.entries())
+      for (var lowerPrecedenceCondition of orderPrecedence) {
+        var _incomingRuleset$prec;
+        if ((_incomingRuleset$prec = incomingRuleset.precedenceLookup.get(lowerPrecedenceCondition)) !== null && _incomingRuleset$prec !== void 0 && _incomingRuleset$prec.has(condition))
+          return !1;
+      }
+    for (var {
+      query,
+      children
+    } of incomingRuleset.ruleset.values()) {
+      var matchingCondition = this.ruleset.get(query);
+      if (matchingCondition && !matchingCondition.children.isCompatible(children))
+        return !1;
+    }
+    return !0;
+  }
+  merge(incomingRuleset) {
+    for (var {
+      query,
+      rules,
+      children
+    } of incomingRuleset.ruleset.values()) {
+      var matchingCondition = this.ruleset.get(query);
+      matchingCondition ? (matchingCondition.rules.push(...rules), matchingCondition.children.merge(children)) : this.ruleset.set(query, {
+        query,
+        rules,
+        children
+      });
+    }
+    for (var [condition, incomingOrderPrecedence] of incomingRuleset.precedenceLookup.entries()) {
+      var _this$precedenceLooku, orderPrecedence = (_this$precedenceLooku = this.precedenceLookup.get(condition)) !== null && _this$precedenceLooku !== void 0 ? _this$precedenceLooku : /* @__PURE__ */ new Set();
+      this.precedenceLookup.set(condition, /* @__PURE__ */ new Set([...orderPrecedence, ...incomingOrderPrecedence]));
+    }
+  }
+  /**
+   * Merge another ConditionalRuleset into this one if they are compatible
+   *
+   * @returns true if successful, false if the ruleset is incompatible
+   */
+  mergeIfCompatible(incomingRuleset) {
+    return this.isCompatible(incomingRuleset) ? (this.merge(incomingRuleset), !0) : !1;
+  }
+  getSortedRuleset() {
+    var _this = this, sortedRuleset = [], _loop = function(dependents2) {
+      var conditionForQuery = _this.ruleset.get(query);
+      if (!conditionForQuery)
+        throw new Error("Can't find condition for ".concat(query));
+      var firstMatchingDependent = sortedRuleset.findIndex((condition) => dependents2.has(condition.query));
+      firstMatchingDependent > -1 ? sortedRuleset.splice(firstMatchingDependent, 0, conditionForQuery) : sortedRuleset.push(conditionForQuery);
+    };
+    for (var [query, dependents] of this.precedenceLookup.entries())
+      _loop(dependents);
+    return sortedRuleset;
+  }
+  renderToArray() {
+    var arr = [];
+    for (var {
+      query,
+      rules,
+      children
+    } of this.getSortedRuleset()) {
+      var selectors = {};
+      for (var rule of rules)
+        selectors[rule.selector] = _objectSpread2(_objectSpread2({}, selectors[rule.selector]), rule.rule);
+      Object.assign(selectors, ...children.renderToArray()), arr.push({
+        [query]: selectors
+      });
+    }
+    return arr;
+  }
+}
+var simplePseudoMap = {
+  ":-moz-any-link": !0,
+  ":-moz-full-screen": !0,
+  ":-moz-placeholder": !0,
+  ":-moz-read-only": !0,
+  ":-moz-read-write": !0,
+  ":-ms-fullscreen": !0,
+  ":-ms-input-placeholder": !0,
+  ":-webkit-any-link": !0,
+  ":-webkit-full-screen": !0,
+  "::-moz-color-swatch": !0,
+  "::-moz-list-bullet": !0,
+  "::-moz-list-number": !0,
+  "::-moz-page-sequence": !0,
+  "::-moz-page": !0,
+  "::-moz-placeholder": !0,
+  "::-moz-progress-bar": !0,
+  "::-moz-range-progress": !0,
+  "::-moz-range-thumb": !0,
+  "::-moz-range-track": !0,
+  "::-moz-scrolled-page-sequence": !0,
+  "::-moz-selection": !0,
+  "::-ms-backdrop": !0,
+  "::-ms-browse": !0,
+  "::-ms-check": !0,
+  "::-ms-clear": !0,
+  "::-ms-fill-lower": !0,
+  "::-ms-fill-upper": !0,
+  "::-ms-fill": !0,
+  "::-ms-reveal": !0,
+  "::-ms-thumb": !0,
+  "::-ms-ticks-after": !0,
+  "::-ms-ticks-before": !0,
+  "::-ms-tooltip": !0,
+  "::-ms-track": !0,
+  "::-ms-value": !0,
+  "::-webkit-backdrop": !0,
+  "::-webkit-calendar-picker-indicator": !0,
+  "::-webkit-inner-spin-button": !0,
+  "::-webkit-input-placeholder": !0,
+  "::-webkit-meter-bar": !0,
+  "::-webkit-meter-even-less-good-value": !0,
+  "::-webkit-meter-inner-element": !0,
+  "::-webkit-meter-optimum-value": !0,
+  "::-webkit-meter-suboptimum-value": !0,
+  "::-webkit-outer-spin-button": !0,
+  "::-webkit-progress-bar": !0,
+  "::-webkit-progress-inner-element": !0,
+  "::-webkit-progress-inner-value": !0,
+  "::-webkit-progress-value": !0,
+  "::-webkit-resizer": !0,
+  "::-webkit-scrollbar-button": !0,
+  "::-webkit-scrollbar-corner": !0,
+  "::-webkit-scrollbar-thumb": !0,
+  "::-webkit-scrollbar-track-piece": !0,
+  "::-webkit-scrollbar-track": !0,
+  "::-webkit-scrollbar": !0,
+  "::-webkit-search-cancel-button": !0,
+  "::-webkit-search-results-button": !0,
+  "::-webkit-slider-runnable-track": !0,
+  "::-webkit-slider-thumb": !0,
+  "::after": !0,
+  "::backdrop": !0,
+  "::before": !0,
+  "::cue": !0,
+  "::file-selector-button": !0,
+  "::first-letter": !0,
+  "::first-line": !0,
+  "::grammar-error": !0,
+  "::marker": !0,
+  "::placeholder": !0,
+  "::selection": !0,
+  "::spelling-error": !0,
+  "::target-text": !0,
+  "::view-transition-group": !0,
+  "::view-transition-image-pair": !0,
+  "::view-transition-new": !0,
+  "::view-transition-old": !0,
+  "::view-transition": !0,
+  ":active": !0,
+  ":after": !0,
+  ":any-link": !0,
+  ":before": !0,
+  ":blank": !0,
+  ":checked": !0,
+  ":default": !0,
+  ":defined": !0,
+  ":disabled": !0,
+  ":empty": !0,
+  ":enabled": !0,
+  ":first-child": !0,
+  ":first-letter": !0,
+  ":first-line": !0,
+  ":first-of-type": !0,
+  ":first": !0,
+  ":focus-visible": !0,
+  ":focus-within": !0,
+  ":focus": !0,
+  ":fullscreen": !0,
+  ":hover": !0,
+  ":in-range": !0,
+  ":indeterminate": !0,
+  ":invalid": !0,
+  ":last-child": !0,
+  ":last-of-type": !0,
+  ":left": !0,
+  ":link": !0,
+  ":only-child": !0,
+  ":only-of-type": !0,
+  ":optional": !0,
+  ":out-of-range": !0,
+  ":placeholder-shown": !0,
+  ":read-only": !0,
+  ":read-write": !0,
+  ":required": !0,
+  ":right": !0,
+  ":root": !0,
+  ":scope": !0,
+  ":target": !0,
+  ":valid": !0,
+  ":visited": !0
+}, simplePseudos = Object.keys(simplePseudoMap), simplePseudoLookup = simplePseudoMap, _templateObject, createMediaQueryError = (mediaQuery, msg) => new Error(dedent(_templateObject || (_templateObject = _taggedTemplateLiteral([`
+    Invalid media query: "`, `"
+
+    `, `
+
+    Read more on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
+  `])), mediaQuery, msg)), validateMediaQuery = (mediaQuery) => {
+  if (mediaQuery === "@media ")
+    throw createMediaQueryError(mediaQuery, "Query is empty");
+  try {
+    toAST(mediaQuery);
+  } catch (e2) {
+    throw createMediaQueryError(mediaQuery, e2.message);
+  }
+}, _excluded = ["vars"], _excluded2 = ["content"], DECLARATION = "__DECLARATION", UNITLESS = {
+  animationIterationCount: !0,
+  borderImage: !0,
+  borderImageOutset: !0,
+  borderImageSlice: !0,
+  borderImageWidth: !0,
+  boxFlex: !0,
+  boxFlexGroup: !0,
+  columnCount: !0,
+  columns: !0,
+  flex: !0,
+  flexGrow: !0,
+  flexShrink: !0,
+  fontWeight: !0,
+  gridArea: !0,
+  gridColumn: !0,
+  gridColumnEnd: !0,
+  gridColumnStart: !0,
+  gridRow: !0,
+  gridRowEnd: !0,
+  gridRowStart: !0,
+  initialLetter: !0,
+  lineClamp: !0,
+  lineHeight: !0,
+  maxLines: !0,
+  opacity: !0,
+  order: !0,
+  orphans: !0,
+  scale: !0,
+  tabSize: !0,
+  WebkitLineClamp: !0,
+  widows: !0,
+  zIndex: !0,
+  zoom: !0,
+  // svg properties
+  fillOpacity: !0,
+  floodOpacity: !0,
+  maskBorder: !0,
+  maskBorderOutset: !0,
+  maskBorderSlice: !0,
+  maskBorderWidth: !0,
+  shapeImageThreshold: !0,
+  stopOpacity: !0,
+  strokeDashoffset: !0,
+  strokeMiterlimit: !0,
+  strokeOpacity: !0,
+  strokeWidth: !0
+};
+function dashify(str) {
+  return str.replace(/([A-Z])/g, "-$1").replace(/^ms-/, "-ms-").toLowerCase();
+}
+function replaceBetweenIndexes(target, startIndex, endIndex, replacement) {
+  var start = target.slice(0, startIndex), end = target.slice(endIndex);
+  return "".concat(start).concat(replacement).concat(end);
+}
+var DOUBLE_SPACE = "  ", specialKeys = [...simplePseudos, "@layer", "@media", "@supports", "@container", "selectors"];
+class Stylesheet {
+  constructor(localClassNames2, composedClassLists2) {
+    this.rules = [], this.conditionalRulesets = [new ConditionalRuleset()], this.fontFaceRules = [], this.keyframesRules = [], this.localClassNamesMap = new Map(localClassNames2.map((localClassName) => [localClassName, localClassName])), this.localClassNamesSearch = new AhoCorasick(localClassNames2), this.layers = /* @__PURE__ */ new Map(), this.composedClassLists = composedClassLists2.map((_ref) => {
+      var {
+        identifier,
+        classList
+      } = _ref;
+      return {
+        identifier,
+        regex: RegExp("(".concat(classList, ")"), "g")
+      };
+    }).reverse();
+  }
+  processCssObj(root2) {
+    if (root2.type === "fontFace") {
+      this.fontFaceRules.push(root2.rule);
+      return;
+    }
+    if (root2.type === "keyframes") {
+      root2.rule = Object.fromEntries(Object.entries(root2.rule).map((_ref2) => {
+        var [keyframe, rule] = _ref2;
+        return [keyframe, this.transformProperties(rule)];
+      })), this.keyframesRules.push(root2);
+      return;
+    }
+    if (this.currConditionalRuleset = new ConditionalRuleset(), root2.type === "layer") {
+      var layerDefinition = "@layer ".concat(root2.name);
+      this.addLayer([layerDefinition]);
+    } else {
+      var mainRule = omit(root2.rule, specialKeys);
+      this.addRule({
+        selector: root2.selector,
+        rule: mainRule
+      }), this.transformLayer(root2, root2.rule["@layer"]), this.transformMedia(root2, root2.rule["@media"]), this.transformSupports(root2, root2.rule["@supports"]), this.transformContainer(root2, root2.rule["@container"]), this.transformSimplePseudos(root2, root2.rule), this.transformSelectors(root2, root2.rule);
+    }
+    var activeConditionalRuleset = this.conditionalRulesets[this.conditionalRulesets.length - 1];
+    activeConditionalRuleset.mergeIfCompatible(this.currConditionalRuleset) || this.conditionalRulesets.push(this.currConditionalRuleset);
+  }
+  addConditionalRule(cssRule, conditions) {
+    var rule = this.transformVars(this.transformProperties(cssRule.rule)), selector2 = this.transformSelector(cssRule.selector);
+    if (!this.currConditionalRuleset)
+      throw new Error("Couldn't add conditional rule");
+    var conditionQuery = conditions[conditions.length - 1], parentConditions = conditions.slice(0, conditions.length - 1);
+    this.currConditionalRuleset.addRule({
+      selector: selector2,
+      rule
+    }, conditionQuery, parentConditions);
+  }
+  addRule(cssRule) {
+    var rule = this.transformVars(this.transformProperties(cssRule.rule)), selector2 = this.transformSelector(cssRule.selector);
+    this.rules.push({
+      selector: selector2,
+      rule
+    });
+  }
+  addLayer(layer) {
+    var uniqueLayerKey = layer.join(" - ");
+    this.layers.set(uniqueLayerKey, layer);
+  }
+  transformProperties(cssRule) {
+    return this.transformContent(this.pixelifyProperties(cssRule));
+  }
+  pixelifyProperties(cssRule) {
+    return forEach(cssRule, (value, key) => {
+      typeof value == "number" && value !== 0 && !UNITLESS[key] && (cssRule[key] = "".concat(value, "px"));
+    }), cssRule;
+  }
+  transformVars(_ref3) {
+    var {
+      vars: vars2
+    } = _ref3, rest = _objectWithoutProperties(_ref3, _excluded);
+    return vars2 ? _objectSpread2(_objectSpread2({}, mapKeys(vars2, (_value, key) => getVarName(key))), rest) : rest;
+  }
+  transformContent(_ref4) {
+    var {
+      content: content2
+    } = _ref4, rest = _objectWithoutProperties(_ref4, _excluded2);
+    if (typeof content2 > "u")
+      return rest;
+    var contentArray = Array.isArray(content2) ? content2 : [content2];
+    return _objectSpread2({
+      content: contentArray.map((value) => (
+        // This logic was adapted from Stitches :)
+        value && (value.includes('"') || value.includes("'") || /^([A-Za-z\-]+\([^]*|[^]*-quote|inherit|initial|none|normal|revert|unset)(\s|$)/.test(value)) ? value : '"'.concat(value, '"')
+      ))
+    }, rest);
+  }
+  transformClassname(identifier) {
+    return ".".concat(cssesc$1(identifier, {
+      isIdentifier: !0
+    }));
+  }
+  transformSelector(selector2) {
+    var transformedSelector = selector2, _loop = function(identifier2) {
+      transformedSelector = transformedSelector.replace(regex, () => (markCompositionUsed(identifier2), identifier2));
+    };
+    for (var {
+      identifier,
+      regex
+    } of this.composedClassLists)
+      _loop(identifier);
+    if (this.localClassNamesMap.has(transformedSelector))
+      return this.transformClassname(transformedSelector);
+    for (var results = this.localClassNamesSearch.search(transformedSelector), lastReplaceIndex = transformedSelector.length, i2 = results.length - 1; i2 >= 0; i2--) {
+      var [endIndex, [firstMatch]] = results[i2], startIndex = endIndex - firstMatch.length + 1;
+      startIndex >= lastReplaceIndex || (lastReplaceIndex = startIndex, transformedSelector[startIndex - 1] !== "." && (transformedSelector = replaceBetweenIndexes(transformedSelector, startIndex, endIndex + 1, this.transformClassname(firstMatch))));
+    }
+    return transformedSelector;
+  }
+  transformSelectors(root2, rule, conditions) {
+    forEach(rule.selectors, (selectorRule, selector2) => {
+      if (root2.type !== "local")
+        throw new Error("Selectors are not allowed within ".concat(root2.type === "global" ? '"globalStyle"' : '"selectors"'));
+      var transformedSelector = this.transformSelector(selector2.replace(RegExp("&", "g"), root2.selector));
+      validateSelector(transformedSelector, root2.selector);
+      var rule2 = {
+        selector: transformedSelector,
+        rule: omit(selectorRule, specialKeys)
+      };
+      conditions ? this.addConditionalRule(rule2, conditions) : this.addRule(rule2);
+      var selectorRoot = {
+        type: "selector",
+        selector: transformedSelector,
+        rule: selectorRule
+      };
+      this.transformLayer(selectorRoot, selectorRule["@layer"], conditions), this.transformSupports(selectorRoot, selectorRule["@supports"], conditions), this.transformMedia(selectorRoot, selectorRule["@media"], conditions);
+    });
+  }
+  transformMedia(root2, rules) {
+    var parentConditions = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : [];
+    if (rules) {
+      var _this$currConditional;
+      (_this$currConditional = this.currConditionalRuleset) === null || _this$currConditional === void 0 || _this$currConditional.addConditionPrecedence(parentConditions, Object.keys(rules).map((query2) => "@media ".concat(query2)));
+      for (var [query, mediaRule] of Object.entries(rules)) {
+        var mediaQuery = "@media ".concat(query);
+        validateMediaQuery(mediaQuery);
+        var conditions = [...parentConditions, mediaQuery];
+        this.addConditionalRule({
+          selector: root2.selector,
+          rule: omit(mediaRule, specialKeys)
+        }, conditions), root2.type === "local" && (this.transformSimplePseudos(root2, mediaRule, conditions), this.transformSelectors(root2, mediaRule, conditions)), this.transformLayer(root2, mediaRule["@layer"], conditions), this.transformSupports(root2, mediaRule["@supports"], conditions), this.transformContainer(root2, mediaRule["@container"], conditions);
+      }
+    }
+  }
+  transformContainer(root2, rules) {
+    var parentConditions = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : [];
+    if (rules) {
+      var _this$currConditional2;
+      (_this$currConditional2 = this.currConditionalRuleset) === null || _this$currConditional2 === void 0 || _this$currConditional2.addConditionPrecedence(parentConditions, Object.keys(rules).map((query) => "@container ".concat(query))), forEach(rules, (containerRule, query) => {
+        var containerQuery = "@container ".concat(query), conditions = [...parentConditions, containerQuery];
+        this.addConditionalRule({
+          selector: root2.selector,
+          rule: omit(containerRule, specialKeys)
+        }, conditions), root2.type === "local" && (this.transformSimplePseudos(root2, containerRule, conditions), this.transformSelectors(root2, containerRule, conditions)), this.transformLayer(root2, containerRule["@layer"], conditions), this.transformSupports(root2, containerRule["@supports"], conditions), this.transformMedia(root2, containerRule["@media"], conditions);
+      });
+    }
+  }
+  transformLayer(root2, rules) {
+    var parentConditions = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : [];
+    if (rules) {
+      var _this$currConditional3;
+      (_this$currConditional3 = this.currConditionalRuleset) === null || _this$currConditional3 === void 0 || _this$currConditional3.addConditionPrecedence(parentConditions, Object.keys(rules).map((name) => "@layer ".concat(name))), forEach(rules, (layerRule, name) => {
+        var conditions = [...parentConditions, "@layer ".concat(name)];
+        this.addLayer(conditions), this.addConditionalRule({
+          selector: root2.selector,
+          rule: omit(layerRule, specialKeys)
+        }, conditions), root2.type === "local" && (this.transformSimplePseudos(root2, layerRule, conditions), this.transformSelectors(root2, layerRule, conditions)), this.transformMedia(root2, layerRule["@media"], conditions), this.transformSupports(root2, layerRule["@supports"], conditions), this.transformContainer(root2, layerRule["@container"], conditions);
+      });
+    }
+  }
+  transformSupports(root2, rules) {
+    var parentConditions = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : [];
+    if (rules) {
+      var _this$currConditional4;
+      (_this$currConditional4 = this.currConditionalRuleset) === null || _this$currConditional4 === void 0 || _this$currConditional4.addConditionPrecedence(parentConditions, Object.keys(rules).map((query) => "@supports ".concat(query))), forEach(rules, (supportsRule, query) => {
+        var conditions = [...parentConditions, "@supports ".concat(query)];
+        this.addConditionalRule({
+          selector: root2.selector,
+          rule: omit(supportsRule, specialKeys)
+        }, conditions), root2.type === "local" && (this.transformSimplePseudos(root2, supportsRule, conditions), this.transformSelectors(root2, supportsRule, conditions)), this.transformLayer(root2, supportsRule["@layer"], conditions), this.transformMedia(root2, supportsRule["@media"], conditions), this.transformContainer(root2, supportsRule["@container"], conditions);
+      });
+    }
+  }
+  transformSimplePseudos(root2, rule, conditions) {
+    for (var key of Object.keys(rule))
+      if (simplePseudoLookup[key]) {
+        if (root2.type !== "local")
+          throw new Error("Simple pseudos are not valid in ".concat(root2.type === "global" ? '"globalStyle"' : '"selectors"'));
+        conditions ? this.addConditionalRule({
+          selector: "".concat(root2.selector).concat(key),
+          rule: rule[key]
+        }, conditions) : this.addRule({
+          conditions,
+          selector: "".concat(root2.selector).concat(key),
+          rule: rule[key]
+        });
+      }
+  }
+  toCss() {
+    var css = [];
+    for (var fontFaceRule of this.fontFaceRules)
+      css.push(renderCss({
+        "@font-face": fontFaceRule
+      }));
+    for (var keyframe of this.keyframesRules)
+      css.push(renderCss({
+        ["@keyframes ".concat(keyframe.name)]: keyframe.rule
+      }));
+    for (var layer of this.layers.values()) {
+      var [definition, ...nesting] = layer.reverse(), cssObj = {
+        [definition]: DECLARATION
+      };
+      for (var part of nesting)
+        cssObj = {
+          [part]: cssObj
+        };
+      css.push(renderCss(cssObj));
+    }
+    for (var rule of this.rules)
+      css.push(renderCss({
+        [rule.selector]: rule.rule
+      }));
+    for (var conditionalRuleset of this.conditionalRulesets)
+      for (var conditionalRule of conditionalRuleset.renderToArray())
+        css.push(renderCss(conditionalRule));
+    return css.filter(Boolean);
+  }
+}
+function renderCss(v) {
+  var indent = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "", rules = [], _loop2 = function(key2) {
+    var value = v[key2];
+    if (value && Array.isArray(value))
+      rules.push(...value.map((v2) => renderCss({
+        [key2]: v2
+      }, indent)));
+    else if (value && typeof value == "object") {
+      var isEmpty = Object.keys(value).length === 0;
+      isEmpty || rules.push("".concat(indent).concat(key2, ` {
+`).concat(renderCss(value, indent + DOUBLE_SPACE), `
+`).concat(indent, "}"));
+    } else value === DECLARATION ? rules.push("".concat(indent).concat(key2, ";")) : rules.push("".concat(indent).concat(key2.startsWith("--") ? key2 : dashify(key2), ": ").concat(value, ";"));
+  };
+  for (var key of Object.keys(v))
+    _loop2(key);
+  return rules.join(`
+`);
+}
+function transformCss(_ref5) {
+  var {
+    localClassNames: localClassNames2,
+    cssObjs,
+    composedClassLists: composedClassLists2
+  } = _ref5, stylesheet = new Stylesheet(localClassNames2, composedClassLists2);
+  for (var root2 of cssObjs)
+    stylesheet.processCssObj(root2);
+  return stylesheet.toCss();
+}
+const perf = typeof performance == "object" && performance && typeof performance.now == "function" ? performance : Date, warned = /* @__PURE__ */ new Set(), PROCESS = typeof process == "object" && process ? process : {}, emitWarning = (msg, type, code, fn) => {
+  typeof PROCESS.emitWarning == "function" ? PROCESS.emitWarning(msg, type, code, fn) : console.error(`[${code}] ${type}: ${msg}`);
+};
+let AC = globalThis.AbortController, AS = globalThis.AbortSignal;
+if (typeof AC > "u") {
+  AS = class {
+    onabort;
+    _onabort = [];
+    reason;
+    aborted = !1;
+    addEventListener(_, fn) {
+      this._onabort.push(fn);
+    }
+  }, AC = class {
+    constructor() {
+      warnACPolyfill();
+    }
+    signal = new AS();
+    abort(reason) {
+      if (!this.signal.aborted) {
+        this.signal.reason = reason, this.signal.aborted = !0;
+        for (const fn of this.signal._onabort)
+          fn(reason);
+        this.signal.onabort?.(reason);
+      }
+    }
+  };
+  let printACPolyfillWarning = PROCESS.env?.LRU_CACHE_IGNORE_AC_WARNING !== "1";
+  const warnACPolyfill = () => {
+    printACPolyfillWarning && (printACPolyfillWarning = !1, emitWarning("AbortController is not defined. If using lru-cache in node 14, load an AbortController polyfill from the `node-abort-controller` package. A minimal polyfill is provided for use by LRUCache.fetch(), but it should not be relied upon in other contexts (eg, passing it to other APIs that use AbortController/AbortSignal might have undesirable effects). You may disable this with LRU_CACHE_IGNORE_AC_WARNING=1 in the env.", "NO_ABORT_CONTROLLER", "ENOTSUP", warnACPolyfill));
+  };
+}
+const shouldWarn = (code) => !warned.has(code), isPosInt = (n2) => n2 && n2 === Math.floor(n2) && n2 > 0 && isFinite(n2), getUintArray = (max2) => isPosInt(max2) ? max2 <= Math.pow(2, 8) ? Uint8Array : max2 <= Math.pow(2, 16) ? Uint16Array : max2 <= Math.pow(2, 32) ? Uint32Array : max2 <= Number.MAX_SAFE_INTEGER ? ZeroArray : null : null;
+class ZeroArray extends Array {
+  constructor(size) {
+    super(size), this.fill(0);
+  }
+}
+class Stack {
+  heap;
+  length;
+  // private constructor
+  static #constructing = !1;
+  static create(max2) {
+    const HeapCls = getUintArray(max2);
+    if (!HeapCls)
+      return [];
+    Stack.#constructing = !0;
+    const s2 = new Stack(max2, HeapCls);
+    return Stack.#constructing = !1, s2;
+  }
+  constructor(max2, HeapCls) {
+    if (!Stack.#constructing)
+      throw new TypeError("instantiate Stack using Stack.create(n)");
+    this.heap = new HeapCls(max2), this.length = 0;
+  }
+  push(n2) {
+    this.heap[this.length++] = n2;
+  }
+  pop() {
+    return this.heap[--this.length];
+  }
+}
+class LRUCache {
+  // options that cannot be changed without disaster
+  #max;
+  #maxSize;
+  #dispose;
+  #disposeAfter;
+  #fetchMethod;
+  #memoMethod;
+  /**
+   * {@link LRUCache.OptionsBase.ttl}
+   */
+  ttl;
+  /**
+   * {@link LRUCache.OptionsBase.ttlResolution}
+   */
+  ttlResolution;
+  /**
+   * {@link LRUCache.OptionsBase.ttlAutopurge}
+   */
+  ttlAutopurge;
+  /**
+   * {@link LRUCache.OptionsBase.updateAgeOnGet}
+   */
+  updateAgeOnGet;
+  /**
+   * {@link LRUCache.OptionsBase.updateAgeOnHas}
+   */
+  updateAgeOnHas;
+  /**
+   * {@link LRUCache.OptionsBase.allowStale}
+   */
+  allowStale;
+  /**
+   * {@link LRUCache.OptionsBase.noDisposeOnSet}
+   */
+  noDisposeOnSet;
+  /**
+   * {@link LRUCache.OptionsBase.noUpdateTTL}
+   */
+  noUpdateTTL;
+  /**
+   * {@link LRUCache.OptionsBase.maxEntrySize}
+   */
+  maxEntrySize;
+  /**
+   * {@link LRUCache.OptionsBase.sizeCalculation}
+   */
+  sizeCalculation;
+  /**
+   * {@link LRUCache.OptionsBase.noDeleteOnFetchRejection}
+   */
+  noDeleteOnFetchRejection;
+  /**
+   * {@link LRUCache.OptionsBase.noDeleteOnStaleGet}
+   */
+  noDeleteOnStaleGet;
+  /**
+   * {@link LRUCache.OptionsBase.allowStaleOnFetchAbort}
+   */
+  allowStaleOnFetchAbort;
+  /**
+   * {@link LRUCache.OptionsBase.allowStaleOnFetchRejection}
+   */
+  allowStaleOnFetchRejection;
+  /**
+   * {@link LRUCache.OptionsBase.ignoreFetchAbort}
+   */
+  ignoreFetchAbort;
+  // computed properties
+  #size;
+  #calculatedSize;
+  #keyMap;
+  #keyList;
+  #valList;
+  #next;
+  #prev;
+  #head;
+  #tail;
+  #free;
+  #disposed;
+  #sizes;
+  #starts;
+  #ttls;
+  #hasDispose;
+  #hasFetchMethod;
+  #hasDisposeAfter;
+  /**
+   * Do not call this method unless you need to inspect the
+   * inner workings of the cache.  If anything returned by this
+   * object is modified in any way, strange breakage may occur.
+   *
+   * These fields are private for a reason!
+   *
+   * @internal
+   */
+  static unsafeExposeInternals(c) {
+    return {
+      // properties
+      starts: c.#starts,
+      ttls: c.#ttls,
+      sizes: c.#sizes,
+      keyMap: c.#keyMap,
+      keyList: c.#keyList,
+      valList: c.#valList,
+      next: c.#next,
+      prev: c.#prev,
+      get head() {
+        return c.#head;
+      },
+      get tail() {
+        return c.#tail;
+      },
+      free: c.#free,
+      // methods
+      isBackgroundFetch: (p2) => c.#isBackgroundFetch(p2),
+      backgroundFetch: (k, index2, options, context) => c.#backgroundFetch(k, index2, options, context),
+      moveToTail: (index2) => c.#moveToTail(index2),
+      indexes: (options) => c.#indexes(options),
+      rindexes: (options) => c.#rindexes(options),
+      isStale: (index2) => c.#isStale(index2)
+    };
+  }
+  // Protected read-only members
+  /**
+   * {@link LRUCache.OptionsBase.max} (read-only)
+   */
+  get max() {
+    return this.#max;
+  }
+  /**
+   * {@link LRUCache.OptionsBase.maxSize} (read-only)
+   */
+  get maxSize() {
+    return this.#maxSize;
+  }
+  /**
+   * The total computed size of items in the cache (read-only)
+   */
+  get calculatedSize() {
+    return this.#calculatedSize;
+  }
+  /**
+   * The number of items stored in the cache (read-only)
+   */
+  get size() {
+    return this.#size;
+  }
+  /**
+   * {@link LRUCache.OptionsBase.fetchMethod} (read-only)
+   */
+  get fetchMethod() {
+    return this.#fetchMethod;
+  }
+  get memoMethod() {
+    return this.#memoMethod;
+  }
+  /**
+   * {@link LRUCache.OptionsBase.dispose} (read-only)
+   */
+  get dispose() {
+    return this.#dispose;
+  }
+  /**
+   * {@link LRUCache.OptionsBase.disposeAfter} (read-only)
+   */
+  get disposeAfter() {
+    return this.#disposeAfter;
+  }
+  constructor(options) {
+    const { max: max2 = 0, ttl, ttlResolution = 1, ttlAutopurge, updateAgeOnGet, updateAgeOnHas, allowStale, dispose, disposeAfter, noDisposeOnSet, noUpdateTTL, maxSize = 0, maxEntrySize = 0, sizeCalculation, fetchMethod, memoMethod, noDeleteOnFetchRejection, noDeleteOnStaleGet, allowStaleOnFetchRejection, allowStaleOnFetchAbort, ignoreFetchAbort } = options;
+    if (max2 !== 0 && !isPosInt(max2))
+      throw new TypeError("max option must be a nonnegative integer");
+    const UintArray = max2 ? getUintArray(max2) : Array;
+    if (!UintArray)
+      throw new Error("invalid max value: " + max2);
+    if (this.#max = max2, this.#maxSize = maxSize, this.maxEntrySize = maxEntrySize || this.#maxSize, this.sizeCalculation = sizeCalculation, this.sizeCalculation) {
+      if (!this.#maxSize && !this.maxEntrySize)
+        throw new TypeError("cannot set sizeCalculation without setting maxSize or maxEntrySize");
+      if (typeof this.sizeCalculation != "function")
+        throw new TypeError("sizeCalculation set to non-function");
+    }
+    if (memoMethod !== void 0 && typeof memoMethod != "function")
+      throw new TypeError("memoMethod must be a function if defined");
+    if (this.#memoMethod = memoMethod, fetchMethod !== void 0 && typeof fetchMethod != "function")
+      throw new TypeError("fetchMethod must be a function if specified");
+    if (this.#fetchMethod = fetchMethod, this.#hasFetchMethod = !!fetchMethod, this.#keyMap = /* @__PURE__ */ new Map(), this.#keyList = new Array(max2).fill(void 0), this.#valList = new Array(max2).fill(void 0), this.#next = new UintArray(max2), this.#prev = new UintArray(max2), this.#head = 0, this.#tail = 0, this.#free = Stack.create(max2), this.#size = 0, this.#calculatedSize = 0, typeof dispose == "function" && (this.#dispose = dispose), typeof disposeAfter == "function" ? (this.#disposeAfter = disposeAfter, this.#disposed = []) : (this.#disposeAfter = void 0, this.#disposed = void 0), this.#hasDispose = !!this.#dispose, this.#hasDisposeAfter = !!this.#disposeAfter, this.noDisposeOnSet = !!noDisposeOnSet, this.noUpdateTTL = !!noUpdateTTL, this.noDeleteOnFetchRejection = !!noDeleteOnFetchRejection, this.allowStaleOnFetchRejection = !!allowStaleOnFetchRejection, this.allowStaleOnFetchAbort = !!allowStaleOnFetchAbort, this.ignoreFetchAbort = !!ignoreFetchAbort, this.maxEntrySize !== 0) {
+      if (this.#maxSize !== 0 && !isPosInt(this.#maxSize))
+        throw new TypeError("maxSize must be a positive integer if specified");
+      if (!isPosInt(this.maxEntrySize))
+        throw new TypeError("maxEntrySize must be a positive integer if specified");
+      this.#initializeSizeTracking();
+    }
+    if (this.allowStale = !!allowStale, this.noDeleteOnStaleGet = !!noDeleteOnStaleGet, this.updateAgeOnGet = !!updateAgeOnGet, this.updateAgeOnHas = !!updateAgeOnHas, this.ttlResolution = isPosInt(ttlResolution) || ttlResolution === 0 ? ttlResolution : 1, this.ttlAutopurge = !!ttlAutopurge, this.ttl = ttl || 0, this.ttl) {
+      if (!isPosInt(this.ttl))
+        throw new TypeError("ttl must be a positive integer if specified");
+      this.#initializeTTLTracking();
+    }
+    if (this.#max === 0 && this.ttl === 0 && this.#maxSize === 0)
+      throw new TypeError("At least one of max, maxSize, or ttl is required");
+    if (!this.ttlAutopurge && !this.#max && !this.#maxSize) {
+      const code = "LRU_CACHE_UNBOUNDED";
+      shouldWarn(code) && (warned.add(code), emitWarning("TTL caching without ttlAutopurge, max, or maxSize can result in unbounded memory consumption.", "UnboundedCacheWarning", code, LRUCache));
+    }
+  }
+  /**
+   * Return the number of ms left in the item's TTL. If item is not in cache,
+   * returns `0`. Returns `Infinity` if item is in cache without a defined TTL.
+   */
+  getRemainingTTL(key) {
+    return this.#keyMap.has(key) ? 1 / 0 : 0;
+  }
+  #initializeTTLTracking() {
+    const ttls = new ZeroArray(this.#max), starts = new ZeroArray(this.#max);
+    this.#ttls = ttls, this.#starts = starts, this.#setItemTTL = (index2, ttl, start = perf.now()) => {
+      if (starts[index2] = ttl !== 0 ? start : 0, ttls[index2] = ttl, ttl !== 0 && this.ttlAutopurge) {
+        const t2 = setTimeout(() => {
+          this.#isStale(index2) && this.#delete(this.#keyList[index2], "expire");
+        }, ttl + 1);
+        t2.unref && t2.unref();
+      }
+    }, this.#updateItemAge = (index2) => {
+      starts[index2] = ttls[index2] !== 0 ? perf.now() : 0;
+    }, this.#statusTTL = (status, index2) => {
+      if (ttls[index2]) {
+        const ttl = ttls[index2], start = starts[index2];
+        if (!ttl || !start)
+          return;
+        status.ttl = ttl, status.start = start, status.now = cachedNow || getNow();
+        const age = status.now - start;
+        status.remainingTTL = ttl - age;
+      }
+    };
+    let cachedNow = 0;
+    const getNow = () => {
+      const n2 = perf.now();
+      if (this.ttlResolution > 0) {
+        cachedNow = n2;
+        const t2 = setTimeout(() => cachedNow = 0, this.ttlResolution);
+        t2.unref && t2.unref();
+      }
+      return n2;
+    };
+    this.getRemainingTTL = (key) => {
+      const index2 = this.#keyMap.get(key);
+      if (index2 === void 0)
+        return 0;
+      const ttl = ttls[index2], start = starts[index2];
+      if (!ttl || !start)
+        return 1 / 0;
+      const age = (cachedNow || getNow()) - start;
+      return ttl - age;
+    }, this.#isStale = (index2) => {
+      const s2 = starts[index2], t2 = ttls[index2];
+      return !!t2 && !!s2 && (cachedNow || getNow()) - s2 > t2;
+    };
+  }
+  // conditionally set private methods related to TTL
+  #updateItemAge = () => {
+  };
+  #statusTTL = () => {
+  };
+  #setItemTTL = () => {
+  };
+  /* c8 ignore stop */
+  #isStale = () => !1;
+  #initializeSizeTracking() {
+    const sizes = new ZeroArray(this.#max);
+    this.#calculatedSize = 0, this.#sizes = sizes, this.#removeItemSize = (index2) => {
+      this.#calculatedSize -= sizes[index2], sizes[index2] = 0;
+    }, this.#requireSize = (k, v, size, sizeCalculation) => {
+      if (this.#isBackgroundFetch(v))
+        return 0;
+      if (!isPosInt(size))
+        if (sizeCalculation) {
+          if (typeof sizeCalculation != "function")
+            throw new TypeError("sizeCalculation must be a function");
+          if (size = sizeCalculation(v, k), !isPosInt(size))
+            throw new TypeError("sizeCalculation return invalid (expect positive integer)");
+        } else
+          throw new TypeError("invalid size value (must be positive integer). When maxSize or maxEntrySize is used, sizeCalculation or size must be set.");
+      return size;
+    }, this.#addItemSize = (index2, size, status) => {
+      if (sizes[index2] = size, this.#maxSize) {
+        const maxSize = this.#maxSize - sizes[index2];
+        for (; this.#calculatedSize > maxSize; )
+          this.#evict(!0);
+      }
+      this.#calculatedSize += sizes[index2], status && (status.entrySize = size, status.totalCalculatedSize = this.#calculatedSize);
+    };
+  }
+  #removeItemSize = (_i) => {
+  };
+  #addItemSize = (_i, _s, _st) => {
+  };
+  #requireSize = (_k, _v, size, sizeCalculation) => {
+    if (size || sizeCalculation)
+      throw new TypeError("cannot set size without setting maxSize or maxEntrySize on cache");
+    return 0;
+  };
+  *#indexes({ allowStale = this.allowStale } = {}) {
+    if (this.#size)
+      for (let i2 = this.#tail; !(!this.#isValidIndex(i2) || ((allowStale || !this.#isStale(i2)) && (yield i2), i2 === this.#head)); )
+        i2 = this.#prev[i2];
+  }
+  *#rindexes({ allowStale = this.allowStale } = {}) {
+    if (this.#size)
+      for (let i2 = this.#head; !(!this.#isValidIndex(i2) || ((allowStale || !this.#isStale(i2)) && (yield i2), i2 === this.#tail)); )
+        i2 = this.#next[i2];
+  }
+  #isValidIndex(index2) {
+    return index2 !== void 0 && this.#keyMap.get(this.#keyList[index2]) === index2;
+  }
+  /**
+   * Return a generator yielding `[key, value]` pairs,
+   * in order from most recently used to least recently used.
+   */
+  *entries() {
+    for (const i2 of this.#indexes())
+      this.#valList[i2] !== void 0 && this.#keyList[i2] !== void 0 && !this.#isBackgroundFetch(this.#valList[i2]) && (yield [this.#keyList[i2], this.#valList[i2]]);
+  }
+  /**
+   * Inverse order version of {@link LRUCache.entries}
+   *
+   * Return a generator yielding `[key, value]` pairs,
+   * in order from least recently used to most recently used.
+   */
+  *rentries() {
+    for (const i2 of this.#rindexes())
+      this.#valList[i2] !== void 0 && this.#keyList[i2] !== void 0 && !this.#isBackgroundFetch(this.#valList[i2]) && (yield [this.#keyList[i2], this.#valList[i2]]);
+  }
+  /**
+   * Return a generator yielding the keys in the cache,
+   * in order from most recently used to least recently used.
+   */
+  *keys() {
+    for (const i2 of this.#indexes()) {
+      const k = this.#keyList[i2];
+      k !== void 0 && !this.#isBackgroundFetch(this.#valList[i2]) && (yield k);
+    }
+  }
+  /**
+   * Inverse order version of {@link LRUCache.keys}
+   *
+   * Return a generator yielding the keys in the cache,
+   * in order from least recently used to most recently used.
+   */
+  *rkeys() {
+    for (const i2 of this.#rindexes()) {
+      const k = this.#keyList[i2];
+      k !== void 0 && !this.#isBackgroundFetch(this.#valList[i2]) && (yield k);
+    }
+  }
+  /**
+   * Return a generator yielding the values in the cache,
+   * in order from most recently used to least recently used.
+   */
+  *values() {
+    for (const i2 of this.#indexes())
+      this.#valList[i2] !== void 0 && !this.#isBackgroundFetch(this.#valList[i2]) && (yield this.#valList[i2]);
+  }
+  /**
+   * Inverse order version of {@link LRUCache.values}
+   *
+   * Return a generator yielding the values in the cache,
+   * in order from least recently used to most recently used.
+   */
+  *rvalues() {
+    for (const i2 of this.#rindexes())
+      this.#valList[i2] !== void 0 && !this.#isBackgroundFetch(this.#valList[i2]) && (yield this.#valList[i2]);
+  }
+  /**
+   * Iterating over the cache itself yields the same results as
+   * {@link LRUCache.entries}
+   */
+  [Symbol.iterator]() {
+    return this.entries();
+  }
+  /**
+   * A String value that is used in the creation of the default string
+   * description of an object. Called by the built-in method
+   * `Object.prototype.toString`.
+   */
+  [Symbol.toStringTag] = "LRUCache";
+  /**
+   * Find a value for which the supplied fn method returns a truthy value,
+   * similar to `Array.find()`. fn is called as `fn(value, key, cache)`.
+   */
+  find(fn, getOptions = {}) {
+    for (const i2 of this.#indexes()) {
+      const v = this.#valList[i2], value = this.#isBackgroundFetch(v) ? v.__staleWhileFetching : v;
+      if (value !== void 0 && fn(value, this.#keyList[i2], this))
+        return this.get(this.#keyList[i2], getOptions);
+    }
+  }
+  /**
+   * Call the supplied function on each item in the cache, in order from most
+   * recently used to least recently used.
+   *
+   * `fn` is called as `fn(value, key, cache)`.
+   *
+   * If `thisp` is provided, function will be called in the `this`-context of
+   * the provided object, or the cache if no `thisp` object is provided.
+   *
+   * Does not update age or recenty of use, or iterate over stale values.
+   */
+  forEach(fn, thisp = this) {
+    for (const i2 of this.#indexes()) {
+      const v = this.#valList[i2], value = this.#isBackgroundFetch(v) ? v.__staleWhileFetching : v;
+      value !== void 0 && fn.call(thisp, value, this.#keyList[i2], this);
+    }
+  }
+  /**
+   * The same as {@link LRUCache.forEach} but items are iterated over in
+   * reverse order.  (ie, less recently used items are iterated over first.)
+   */
+  rforEach(fn, thisp = this) {
+    for (const i2 of this.#rindexes()) {
+      const v = this.#valList[i2], value = this.#isBackgroundFetch(v) ? v.__staleWhileFetching : v;
+      value !== void 0 && fn.call(thisp, value, this.#keyList[i2], this);
+    }
+  }
+  /**
+   * Delete any stale entries. Returns true if anything was removed,
+   * false otherwise.
+   */
+  purgeStale() {
+    let deleted = !1;
+    for (const i2 of this.#rindexes({ allowStale: !0 }))
+      this.#isStale(i2) && (this.#delete(this.#keyList[i2], "expire"), deleted = !0);
+    return deleted;
+  }
+  /**
+   * Get the extended info about a given entry, to get its value, size, and
+   * TTL info simultaneously. Returns `undefined` if the key is not present.
+   *
+   * Unlike {@link LRUCache#dump}, which is designed to be portable and survive
+   * serialization, the `start` value is always the current timestamp, and the
+   * `ttl` is a calculated remaining time to live (negative if expired).
+   *
+   * Always returns stale values, if their info is found in the cache, so be
+   * sure to check for expirations (ie, a negative {@link LRUCache.Entry#ttl})
+   * if relevant.
+   */
+  info(key) {
+    const i2 = this.#keyMap.get(key);
+    if (i2 === void 0)
+      return;
+    const v = this.#valList[i2], value = this.#isBackgroundFetch(v) ? v.__staleWhileFetching : v;
+    if (value === void 0)
+      return;
+    const entry = { value };
+    if (this.#ttls && this.#starts) {
+      const ttl = this.#ttls[i2], start = this.#starts[i2];
+      if (ttl && start) {
+        const remain = ttl - (perf.now() - start);
+        entry.ttl = remain, entry.start = Date.now();
+      }
+    }
+    return this.#sizes && (entry.size = this.#sizes[i2]), entry;
+  }
+  /**
+   * Return an array of [key, {@link LRUCache.Entry}] tuples which can be
+   * passed to {@link LRLUCache#load}.
+   *
+   * The `start` fields are calculated relative to a portable `Date.now()`
+   * timestamp, even if `performance.now()` is available.
+   *
+   * Stale entries are always included in the `dump`, even if
+   * {@link LRUCache.OptionsBase.allowStale} is false.
+   *
+   * Note: this returns an actual array, not a generator, so it can be more
+   * easily passed around.
+   */
+  dump() {
+    const arr = [];
+    for (const i2 of this.#indexes({ allowStale: !0 })) {
+      const key = this.#keyList[i2], v = this.#valList[i2], value = this.#isBackgroundFetch(v) ? v.__staleWhileFetching : v;
+      if (value === void 0 || key === void 0)
+        continue;
+      const entry = { value };
+      if (this.#ttls && this.#starts) {
+        entry.ttl = this.#ttls[i2];
+        const age = perf.now() - this.#starts[i2];
+        entry.start = Math.floor(Date.now() - age);
+      }
+      this.#sizes && (entry.size = this.#sizes[i2]), arr.unshift([key, entry]);
+    }
+    return arr;
+  }
+  /**
+   * Reset the cache and load in the items in entries in the order listed.
+   *
+   * The shape of the resulting cache may be different if the same options are
+   * not used in both caches.
+   *
+   * The `start` fields are assumed to be calculated relative to a portable
+   * `Date.now()` timestamp, even if `performance.now()` is available.
+   */
+  load(arr) {
+    this.clear();
+    for (const [key, entry] of arr) {
+      if (entry.start) {
+        const age = Date.now() - entry.start;
+        entry.start = perf.now() - age;
+      }
+      this.set(key, entry.value, entry);
+    }
+  }
+  /**
+   * Add a value to the cache.
+   *
+   * Note: if `undefined` is specified as a value, this is an alias for
+   * {@link LRUCache#delete}
+   *
+   * Fields on the {@link LRUCache.SetOptions} options param will override
+   * their corresponding values in the constructor options for the scope
+   * of this single `set()` operation.
+   *
+   * If `start` is provided, then that will set the effective start
+   * time for the TTL calculation. Note that this must be a previous
+   * value of `performance.now()` if supported, or a previous value of
+   * `Date.now()` if not.
+   *
+   * Options object may also include `size`, which will prevent
+   * calling the `sizeCalculation` function and just use the specified
+   * number if it is a positive integer, and `noDisposeOnSet` which
+   * will prevent calling a `dispose` function in the case of
+   * overwrites.
+   *
+   * If the `size` (or return value of `sizeCalculation`) for a given
+   * entry is greater than `maxEntrySize`, then the item will not be
+   * added to the cache.
+   *
+   * Will update the recency of the entry.
+   *
+   * If the value is `undefined`, then this is an alias for
+   * `cache.delete(key)`. `undefined` is never stored in the cache.
+   */
+  set(k, v, setOptions = {}) {
+    if (v === void 0)
+      return this.delete(k), this;
+    const { ttl = this.ttl, start, noDisposeOnSet = this.noDisposeOnSet, sizeCalculation = this.sizeCalculation, status } = setOptions;
+    let { noUpdateTTL = this.noUpdateTTL } = setOptions;
+    const size = this.#requireSize(k, v, setOptions.size || 0, sizeCalculation);
+    if (this.maxEntrySize && size > this.maxEntrySize)
+      return status && (status.set = "miss", status.maxEntrySizeExceeded = !0), this.#delete(k, "set"), this;
+    let index2 = this.#size === 0 ? void 0 : this.#keyMap.get(k);
+    if (index2 === void 0)
+      index2 = this.#size === 0 ? this.#tail : this.#free.length !== 0 ? this.#free.pop() : this.#size === this.#max ? this.#evict(!1) : this.#size, this.#keyList[index2] = k, this.#valList[index2] = v, this.#keyMap.set(k, index2), this.#next[this.#tail] = index2, this.#prev[index2] = this.#tail, this.#tail = index2, this.#size++, this.#addItemSize(index2, size, status), status && (status.set = "add"), noUpdateTTL = !1;
+    else {
+      this.#moveToTail(index2);
+      const oldVal = this.#valList[index2];
+      if (v !== oldVal) {
+        if (this.#hasFetchMethod && this.#isBackgroundFetch(oldVal)) {
+          oldVal.__abortController.abort(new Error("replaced"));
+          const { __staleWhileFetching: s2 } = oldVal;
+          s2 !== void 0 && !noDisposeOnSet && (this.#hasDispose && this.#dispose?.(s2, k, "set"), this.#hasDisposeAfter && this.#disposed?.push([s2, k, "set"]));
+        } else noDisposeOnSet || (this.#hasDispose && this.#dispose?.(oldVal, k, "set"), this.#hasDisposeAfter && this.#disposed?.push([oldVal, k, "set"]));
+        if (this.#removeItemSize(index2), this.#addItemSize(index2, size, status), this.#valList[index2] = v, status) {
+          status.set = "replace";
+          const oldValue = oldVal && this.#isBackgroundFetch(oldVal) ? oldVal.__staleWhileFetching : oldVal;
+          oldValue !== void 0 && (status.oldValue = oldValue);
+        }
+      } else status && (status.set = "update");
+    }
+    if (ttl !== 0 && !this.#ttls && this.#initializeTTLTracking(), this.#ttls && (noUpdateTTL || this.#setItemTTL(index2, ttl, start), status && this.#statusTTL(status, index2)), !noDisposeOnSet && this.#hasDisposeAfter && this.#disposed) {
+      const dt = this.#disposed;
+      let task;
+      for (; task = dt?.shift(); )
+        this.#disposeAfter?.(...task);
+    }
+    return this;
+  }
+  /**
+   * Evict the least recently used item, returning its value or
+   * `undefined` if cache is empty.
+   */
+  pop() {
+    try {
+      for (; this.#size; ) {
+        const val = this.#valList[this.#head];
+        if (this.#evict(!0), this.#isBackgroundFetch(val)) {
+          if (val.__staleWhileFetching)
+            return val.__staleWhileFetching;
+        } else if (val !== void 0)
+          return val;
+      }
+    } finally {
+      if (this.#hasDisposeAfter && this.#disposed) {
+        const dt = this.#disposed;
+        let task;
+        for (; task = dt?.shift(); )
+          this.#disposeAfter?.(...task);
+      }
+    }
+  }
+  #evict(free) {
+    const head = this.#head, k = this.#keyList[head], v = this.#valList[head];
+    return this.#hasFetchMethod && this.#isBackgroundFetch(v) ? v.__abortController.abort(new Error("evicted")) : (this.#hasDispose || this.#hasDisposeAfter) && (this.#hasDispose && this.#dispose?.(v, k, "evict"), this.#hasDisposeAfter && this.#disposed?.push([v, k, "evict"])), this.#removeItemSize(head), free && (this.#keyList[head] = void 0, this.#valList[head] = void 0, this.#free.push(head)), this.#size === 1 ? (this.#head = this.#tail = 0, this.#free.length = 0) : this.#head = this.#next[head], this.#keyMap.delete(k), this.#size--, head;
+  }
+  /**
+   * Check if a key is in the cache, without updating the recency of use.
+   * Will return false if the item is stale, even though it is technically
+   * in the cache.
+   *
+   * Check if a key is in the cache, without updating the recency of
+   * use. Age is updated if {@link LRUCache.OptionsBase.updateAgeOnHas} is set
+   * to `true` in either the options or the constructor.
+   *
+   * Will return `false` if the item is stale, even though it is technically in
+   * the cache. The difference can be determined (if it matters) by using a
+   * `status` argument, and inspecting the `has` field.
+   *
+   * Will not update item age unless
+   * {@link LRUCache.OptionsBase.updateAgeOnHas} is set.
+   */
+  has(k, hasOptions = {}) {
+    const { updateAgeOnHas = this.updateAgeOnHas, status } = hasOptions, index2 = this.#keyMap.get(k);
+    if (index2 !== void 0) {
+      const v = this.#valList[index2];
+      if (this.#isBackgroundFetch(v) && v.__staleWhileFetching === void 0)
+        return !1;
+      if (this.#isStale(index2))
+        status && (status.has = "stale", this.#statusTTL(status, index2));
+      else return updateAgeOnHas && this.#updateItemAge(index2), status && (status.has = "hit", this.#statusTTL(status, index2)), !0;
+    } else status && (status.has = "miss");
+    return !1;
+  }
+  /**
+   * Like {@link LRUCache#get} but doesn't update recency or delete stale
+   * items.
+   *
+   * Returns `undefined` if the item is stale, unless
+   * {@link LRUCache.OptionsBase.allowStale} is set.
+   */
+  peek(k, peekOptions = {}) {
+    const { allowStale = this.allowStale } = peekOptions, index2 = this.#keyMap.get(k);
+    if (index2 === void 0 || !allowStale && this.#isStale(index2))
+      return;
+    const v = this.#valList[index2];
+    return this.#isBackgroundFetch(v) ? v.__staleWhileFetching : v;
+  }
+  #backgroundFetch(k, index2, options, context) {
+    const v = index2 === void 0 ? void 0 : this.#valList[index2];
+    if (this.#isBackgroundFetch(v))
+      return v;
+    const ac = new AC(), { signal } = options;
+    signal?.addEventListener("abort", () => ac.abort(signal.reason), {
+      signal: ac.signal
+    });
+    const fetchOpts = {
+      signal: ac.signal,
+      options,
+      context
+    }, cb = (v2, updateCache = !1) => {
+      const { aborted } = ac.signal, ignoreAbort = options.ignoreFetchAbort && v2 !== void 0;
+      if (options.status && (aborted && !updateCache ? (options.status.fetchAborted = !0, options.status.fetchError = ac.signal.reason, ignoreAbort && (options.status.fetchAbortIgnored = !0)) : options.status.fetchResolved = !0), aborted && !ignoreAbort && !updateCache)
+        return fetchFail(ac.signal.reason);
+      const bf2 = p2;
+      return this.#valList[index2] === p2 && (v2 === void 0 ? bf2.__staleWhileFetching ? this.#valList[index2] = bf2.__staleWhileFetching : this.#delete(k, "fetch") : (options.status && (options.status.fetchUpdated = !0), this.set(k, v2, fetchOpts.options))), v2;
+    }, eb = (er) => (options.status && (options.status.fetchRejected = !0, options.status.fetchError = er), fetchFail(er)), fetchFail = (er) => {
+      const { aborted } = ac.signal, allowStaleAborted = aborted && options.allowStaleOnFetchAbort, allowStale = allowStaleAborted || options.allowStaleOnFetchRejection, noDelete = allowStale || options.noDeleteOnFetchRejection, bf2 = p2;
+      if (this.#valList[index2] === p2 && (!noDelete || bf2.__staleWhileFetching === void 0 ? this.#delete(k, "fetch") : allowStaleAborted || (this.#valList[index2] = bf2.__staleWhileFetching)), allowStale)
+        return options.status && bf2.__staleWhileFetching !== void 0 && (options.status.returnedStale = !0), bf2.__staleWhileFetching;
+      if (bf2.__returned === bf2)
+        throw er;
+    }, pcall = (res, rej) => {
+      const fmp = this.#fetchMethod?.(k, v, fetchOpts);
+      fmp && fmp instanceof Promise && fmp.then((v2) => res(v2 === void 0 ? void 0 : v2), rej), ac.signal.addEventListener("abort", () => {
+        (!options.ignoreFetchAbort || options.allowStaleOnFetchAbort) && (res(void 0), options.allowStaleOnFetchAbort && (res = (v2) => cb(v2, !0)));
+      });
+    };
+    options.status && (options.status.fetchDispatched = !0);
+    const p2 = new Promise(pcall).then(cb, eb), bf = Object.assign(p2, {
+      __abortController: ac,
+      __staleWhileFetching: v,
+      __returned: void 0
+    });
+    return index2 === void 0 ? (this.set(k, bf, { ...fetchOpts.options, status: void 0 }), index2 = this.#keyMap.get(k)) : this.#valList[index2] = bf, bf;
+  }
+  #isBackgroundFetch(p2) {
+    if (!this.#hasFetchMethod)
+      return !1;
+    const b2 = p2;
+    return !!b2 && b2 instanceof Promise && b2.hasOwnProperty("__staleWhileFetching") && b2.__abortController instanceof AC;
+  }
+  async fetch(k, fetchOptions = {}) {
+    const {
+      // get options
+      allowStale = this.allowStale,
+      updateAgeOnGet = this.updateAgeOnGet,
+      noDeleteOnStaleGet = this.noDeleteOnStaleGet,
+      // set options
+      ttl = this.ttl,
+      noDisposeOnSet = this.noDisposeOnSet,
+      size = 0,
+      sizeCalculation = this.sizeCalculation,
+      noUpdateTTL = this.noUpdateTTL,
+      // fetch exclusive options
+      noDeleteOnFetchRejection = this.noDeleteOnFetchRejection,
+      allowStaleOnFetchRejection = this.allowStaleOnFetchRejection,
+      ignoreFetchAbort = this.ignoreFetchAbort,
+      allowStaleOnFetchAbort = this.allowStaleOnFetchAbort,
+      context,
+      forceRefresh = !1,
+      status,
+      signal
+    } = fetchOptions;
+    if (!this.#hasFetchMethod)
+      return status && (status.fetch = "get"), this.get(k, {
+        allowStale,
+        updateAgeOnGet,
+        noDeleteOnStaleGet,
+        status
+      });
+    const options = {
+      allowStale,
+      updateAgeOnGet,
+      noDeleteOnStaleGet,
+      ttl,
+      noDisposeOnSet,
+      size,
+      sizeCalculation,
+      noUpdateTTL,
+      noDeleteOnFetchRejection,
+      allowStaleOnFetchRejection,
+      allowStaleOnFetchAbort,
+      ignoreFetchAbort,
+      status,
+      signal
+    };
+    let index2 = this.#keyMap.get(k);
+    if (index2 === void 0) {
+      status && (status.fetch = "miss");
+      const p2 = this.#backgroundFetch(k, index2, options, context);
+      return p2.__returned = p2;
+    } else {
+      const v = this.#valList[index2];
+      if (this.#isBackgroundFetch(v)) {
+        const stale = allowStale && v.__staleWhileFetching !== void 0;
+        return status && (status.fetch = "inflight", stale && (status.returnedStale = !0)), stale ? v.__staleWhileFetching : v.__returned = v;
+      }
+      const isStale = this.#isStale(index2);
+      if (!forceRefresh && !isStale)
+        return status && (status.fetch = "hit"), this.#moveToTail(index2), updateAgeOnGet && this.#updateItemAge(index2), status && this.#statusTTL(status, index2), v;
+      const p2 = this.#backgroundFetch(k, index2, options, context), staleVal = p2.__staleWhileFetching !== void 0 && allowStale;
+      return status && (status.fetch = isStale ? "stale" : "refresh", staleVal && isStale && (status.returnedStale = !0)), staleVal ? p2.__staleWhileFetching : p2.__returned = p2;
+    }
+  }
+  async forceFetch(k, fetchOptions = {}) {
+    const v = await this.fetch(k, fetchOptions);
+    if (v === void 0)
+      throw new Error("fetch() returned undefined");
+    return v;
+  }
+  memo(k, memoOptions = {}) {
+    const memoMethod = this.#memoMethod;
+    if (!memoMethod)
+      throw new Error("no memoMethod provided to constructor");
+    const { context, forceRefresh, ...options } = memoOptions, v = this.get(k, options);
+    if (!forceRefresh && v !== void 0)
+      return v;
+    const vv = memoMethod(k, v, {
+      options,
+      context
+    });
+    return this.set(k, vv, options), vv;
+  }
+  /**
+   * Return a value from the cache. Will update the recency of the cache
+   * entry found.
+   *
+   * If the key is not found, get() will return `undefined`.
+   */
+  get(k, getOptions = {}) {
+    const { allowStale = this.allowStale, updateAgeOnGet = this.updateAgeOnGet, noDeleteOnStaleGet = this.noDeleteOnStaleGet, status } = getOptions, index2 = this.#keyMap.get(k);
+    if (index2 !== void 0) {
+      const value = this.#valList[index2], fetching = this.#isBackgroundFetch(value);
+      return status && this.#statusTTL(status, index2), this.#isStale(index2) ? (status && (status.get = "stale"), fetching ? (status && allowStale && value.__staleWhileFetching !== void 0 && (status.returnedStale = !0), allowStale ? value.__staleWhileFetching : void 0) : (noDeleteOnStaleGet || this.#delete(k, "expire"), status && allowStale && (status.returnedStale = !0), allowStale ? value : void 0)) : (status && (status.get = "hit"), fetching ? value.__staleWhileFetching : (this.#moveToTail(index2), updateAgeOnGet && this.#updateItemAge(index2), value));
+    } else status && (status.get = "miss");
+  }
+  #connect(p2, n2) {
+    this.#prev[n2] = p2, this.#next[p2] = n2;
+  }
+  #moveToTail(index2) {
+    index2 !== this.#tail && (index2 === this.#head ? this.#head = this.#next[index2] : this.#connect(this.#prev[index2], this.#next[index2]), this.#connect(this.#tail, index2), this.#tail = index2);
+  }
+  /**
+   * Deletes a key out of the cache.
+   *
+   * Returns true if the key was deleted, false otherwise.
+   */
+  delete(k) {
+    return this.#delete(k, "delete");
+  }
+  #delete(k, reason) {
+    let deleted = !1;
+    if (this.#size !== 0) {
+      const index2 = this.#keyMap.get(k);
+      if (index2 !== void 0)
+        if (deleted = !0, this.#size === 1)
+          this.#clear(reason);
+        else {
+          this.#removeItemSize(index2);
+          const v = this.#valList[index2];
+          if (this.#isBackgroundFetch(v) ? v.__abortController.abort(new Error("deleted")) : (this.#hasDispose || this.#hasDisposeAfter) && (this.#hasDispose && this.#dispose?.(v, k, reason), this.#hasDisposeAfter && this.#disposed?.push([v, k, reason])), this.#keyMap.delete(k), this.#keyList[index2] = void 0, this.#valList[index2] = void 0, index2 === this.#tail)
+            this.#tail = this.#prev[index2];
+          else if (index2 === this.#head)
+            this.#head = this.#next[index2];
+          else {
+            const pi2 = this.#prev[index2];
+            this.#next[pi2] = this.#next[index2];
+            const ni = this.#next[index2];
+            this.#prev[ni] = this.#prev[index2];
+          }
+          this.#size--, this.#free.push(index2);
         }
-      },
-      children: /* @__PURE__ */ jsx(DiagramContext.Provider, { value: store.current, children })
     }
-  );
+    if (this.#hasDisposeAfter && this.#disposed?.length) {
+      const dt = this.#disposed;
+      let task;
+      for (; task = dt?.shift(); )
+        this.#disposeAfter?.(...task);
+    }
+    return deleted;
+  }
+  /**
+   * Clear the cache entirely, throwing away all values.
+   */
+  clear() {
+    return this.#clear("delete");
+  }
+  #clear(reason) {
+    for (const index2 of this.#rindexes({ allowStale: !0 })) {
+      const v = this.#valList[index2];
+      if (this.#isBackgroundFetch(v))
+        v.__abortController.abort(new Error("deleted"));
+      else {
+        const k = this.#keyList[index2];
+        this.#hasDispose && this.#dispose?.(v, k, reason), this.#hasDisposeAfter && this.#disposed?.push([v, k, reason]);
+      }
+    }
+    if (this.#keyMap.clear(), this.#valList.fill(void 0), this.#keyList.fill(void 0), this.#ttls && this.#starts && (this.#ttls.fill(0), this.#starts.fill(0)), this.#sizes && this.#sizes.fill(0), this.#head = 0, this.#tail = 0, this.#free.length = 0, this.#calculatedSize = 0, this.#size = 0, this.#hasDisposeAfter && this.#disposed) {
+      const dt = this.#disposed;
+      let task;
+      for (; task = dt?.shift(); )
+        this.#disposeAfter?.(...task);
+    }
+  }
 }
-DiagramContextProvider.displayName = "DiagramContextProvider";
-function useDiagramState(selector2, equalityFn) {
-  const store = useContext$1(DiagramContext);
-  if (store === null)
-    throw new Error("useDiagramStore could be used only inside DiagramContext");
-  return useStoreWithEqualityFn(store, selector2, equalityFn ?? shallowEqual);
+var isMergeableObject = function(value) {
+  return isNonNullObject(value) && !isSpecial(value);
+};
+function isNonNullObject(value) {
+  return !!value && typeof value == "object";
 }
-function useDiagramStoreApi() {
-  const store = useContext$1(DiagramContext);
-  if (store === null)
-    throw new Error("useDiagramStoreApi could be used only inside DiagramContext");
-  return store;
+function isSpecial(value) {
+  var stringValue = Object.prototype.toString.call(value);
+  return stringValue === "[object RegExp]" || stringValue === "[object Date]" || isReactElement(value);
+}
+var canUseSymbol = typeof Symbol == "function" && Symbol.for, REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for("react.element") : 60103;
+function isReactElement(value) {
+  return value.$$typeof === REACT_ELEMENT_TYPE;
+}
+function emptyTarget(val) {
+  return Array.isArray(val) ? [] : {};
+}
+function cloneUnlessOtherwiseSpecified(value, options) {
+  return options.clone !== !1 && options.isMergeableObject(value) ? deepmerge(emptyTarget(value), value, options) : value;
+}
+function defaultArrayMerge(target, source, options) {
+  return target.concat(source).map(function(element) {
+    return cloneUnlessOtherwiseSpecified(element, options);
+  });
+}
+function getMergeFunction(key, options) {
+  if (!options.customMerge)
+    return deepmerge;
+  var customMerge = options.customMerge(key);
+  return typeof customMerge == "function" ? customMerge : deepmerge;
+}
+function getEnumerableOwnPropertySymbols(target) {
+  return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(target).filter(function(symbol) {
+    return Object.propertyIsEnumerable.call(target, symbol);
+  }) : [];
+}
+function getKeys(target) {
+  return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target));
+}
+function propertyIsOnObject(object2, property) {
+  try {
+    return property in object2;
+  } catch {
+    return !1;
+  }
+}
+function propertyIsUnsafe(target, key) {
+  return propertyIsOnObject(target, key) && !(Object.hasOwnProperty.call(target, key) && Object.propertyIsEnumerable.call(target, key));
+}
+function mergeObject(target, source, options) {
+  var destination = {};
+  return options.isMergeableObject(target) && getKeys(target).forEach(function(key) {
+    destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
+  }), getKeys(source).forEach(function(key) {
+    propertyIsUnsafe(target, key) || (propertyIsOnObject(target, key) && options.isMergeableObject(source[key]) ? destination[key] = getMergeFunction(key, options)(target[key], source[key], options) : destination[key] = cloneUnlessOtherwiseSpecified(source[key], options));
+  }), destination;
+}
+function deepmerge(target, source, options) {
+  options = options || {}, options.arrayMerge = options.arrayMerge || defaultArrayMerge, options.isMergeableObject = options.isMergeableObject || isMergeableObject, options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified;
+  var sourceIsArray = Array.isArray(source), targetIsArray = Array.isArray(target), sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
+  return sourceAndTargetTypesMatch ? sourceIsArray ? options.arrayMerge(target, source, options) : mergeObject(target, source, options) : cloneUnlessOtherwiseSpecified(source, options);
+}
+deepmerge.all = function(array2, options) {
+  if (!Array.isArray(array2))
+    throw new Error("first argument should be an array");
+  return array2.reduce(function(prev, next) {
+    return deepmerge(prev, next, options);
+  }, {});
+};
+var localClassNames = /* @__PURE__ */ new Set(), composedClassLists = [], bufferedCSSObjs = [], browserRuntimeAdapter = {
+  appendCss: (cssObj) => {
+    bufferedCSSObjs.push(cssObj);
+  },
+  registerClassName: (className) => {
+    localClassNames.add(className);
+  },
+  registerComposition: (composition) => {
+    composedClassLists.push(composition);
+  },
+  markCompositionUsed: () => {
+  },
+  onEndFileScope: (fileScope) => {
+    var css = transformCss({
+      localClassNames: Array.from(localClassNames),
+      composedClassLists,
+      cssObjs: bufferedCSSObjs
+    }).join(`
+`);
+    injectStyles({
+      fileScope,
+      css
+    }), bufferedCSSObjs = [];
+  },
+  getIdentOption: () => "short"
+};
+setAdapterIfNotSet(browserRuntimeAdapter);
+var getLastSlashBeforeIndex = (path, index2) => {
+  for (var pathIndex = index2 - 1; pathIndex >= 0; ) {
+    if (path[pathIndex] === "/")
+      return pathIndex;
+    pathIndex--;
+  }
+  return -1;
+}, _getDebugFileName = (path) => {
+  var file, lastIndexOfDotCss = path.lastIndexOf(".css");
+  if (lastIndexOfDotCss === -1)
+    return "";
+  var lastSlashIndex = getLastSlashBeforeIndex(path, lastIndexOfDotCss);
+  if (file = path.slice(lastSlashIndex + 1, lastIndexOfDotCss), lastSlashIndex === -1)
+    return file;
+  var secondLastSlashIndex = getLastSlashBeforeIndex(path, lastSlashIndex - 1), dir = path.slice(secondLastSlashIndex + 1, lastSlashIndex), debugFileName = file !== "index" ? file : dir;
+  return debugFileName;
+}, memoizedGetDebugFileName = () => {
+  var cache = new LRUCache({
+    max: 500
+  });
+  return (path) => {
+    var cachedResult = cache.get(path);
+    if (cachedResult)
+      return cachedResult;
+    var result = _getDebugFileName(path);
+    return cache.set(path, result), result;
+  };
+};
+memoizedGetDebugFileName();
+function createGlobalThemeContract(tokens, mapFn) {
+  return walkObject(tokens, (value, path) => {
+    var rawVarName = typeof mapFn == "function" ? mapFn(value, path) : value, varName = typeof rawVarName == "string" ? rawVarName.replace(/^\-\-/, "") : null;
+    if (typeof varName != "string" || varName !== cssesc$1(varName, {
+      isIdentifier: !0
+    }))
+      throw new Error('Invalid variable name for "'.concat(path.join("."), '": ').concat(varName));
+    return "var(--".concat(varName, ")");
+  });
 }
-var vars = { safariAnimationHook: "var(--likec4-safari-animation-hook)", default: { font: "var(--likec4-default-font-family)" }, likec4: { font: "var(--likec4-font-family)", background: { color: "var(--likec4-background-color)", pattern: { color: "var(--likec4-background-pattern-color)" } } }, compound: { font: "var(--likec4-compound-font-family)", titleColor: "var(--likec4-compound-title-color)" }, element: { font: "var(--likec4-element-font-family)", fill: "var(--likec4-element-fill)", stroke: "var(--likec4-element-stroke)", hiContrast: "var(--likec4-element-hiContrast)", loContrast: "var(--likec4-element-loContrast)" }, relation: { lineColor: "var(--likec4-relation-lineColor)", labelColor: "var(--likec4-relation-labelColor)", labelBgColor: "var(--likec4-relation-labelBg)" }, optionsPanel: { top: "var(--likec4-options-webview-top)", right: "var(--likec4-options-webview-right)" }, navigationPanel: { top: "var(--likec4-navigation-webview-top)", left: "var(--likec4-navigation-webview-left)" } };
+const vars = createGlobalThemeContract({
+  safariAnimationHook: "safari-animation-hook",
+  default: {
+    font: "default-font-family"
+  },
+  likec4: {
+    font: "font-family",
+    background: {
+      color: "background-color",
+      pattern: {
+        color: "background-pattern-color"
+      }
+    }
+  },
+  compound: {
+    font: "compound-font-family",
+    titleColor: "compound-title-color"
+  },
+  element: {
+    font: "element-font-family",
+    fill: "element-fill",
+    stroke: "element-stroke",
+    hiContrast: "element-hiContrast",
+    loContrast: "element-loContrast"
+  },
+  relation: {
+    lineColor: "relation-lineColor",
+    labelColor: "relation-labelColor",
+    labelBgColor: "relation-labelBg"
+  },
+  optionsPanel: {
+    top: "options-webview-top",
+    right: "options-webview-right"
+  },
+  navigationPanel: {
+    top: "navigation-webview-top",
+    left: "navigation-webview-left"
+  }
+}, (value) => `likec4-${value}`);
+createGlobalThemeContract({
+  background: {
+    color: "background-color",
+    pattern: {
+      color: "background-pattern-color"
+      // dots: 'background-pattern-dots-color',
+      // lines: 'background-pattern-lines-color',
+      // cross: 'background-pattern-cross-color'
+    }
+  },
+  edge: {
+    stroke: "edge-stroke",
+    strokeSelected: "edge-stroke-selected",
+    labelColor: "edge-label-color",
+    labelBgColor: "edge-label-background-color",
+    strokeWidth: "edge-stroke-width"
+  },
+  node: {
+    color: "node-color",
+    border: "node-border",
+    backgroundColor: "node-background-color",
+    groupBackgroundColor: "node-group-background-color",
+    boxshadowHover: "node-boxshadow-hover",
+    boxshadowSelected: "node-boxshadow-selected",
+    borderRadius: "node-border-radius"
+  }
+}, (value) => `xy-${value}`);
+const mantine = themeToVars({});
 function LikeC4CustomColors({ customColors }) {
   function toStyle(name, colorValues) {
     const rules = new Array(
@@ -6902,10 +10068,6 @@ function SelectEdgesOnNodeFocus() {
     ] : []
   ), null;
 }
-function getVarName(variable) {
-  var matches = variable.match(/^var\((.*)\)$/);
-  return matches ? matches[1] : variable;
-}
 function assignInlineVars(varsOrContract, tokens) {
   var styles = {};
   {
@@ -7439,7 +10601,7 @@ const curveCatmullRomOpen = function custom4(alpha2) {
   ODot
 };
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
@@ -7466,7 +10628,7 @@ var defaultAttributes = {
   }
 };
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
@@ -7499,216 +10661,216 @@ const createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
   return Component2.displayName = `${iconNamePascal}`, Component2;
 };
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconAlertTriangle = createReactComponent("outline", "alert-triangle", "IconAlertTriangle", [["path", { d: "M12 9v4", key: "svg-0" }], ["path", { d: "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z", key: "svg-1" }], ["path", { d: "M12 16h.01", key: "svg-2" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconArrowBigDownLines = createReactComponent("outline", "arrow-big-down-lines", "IconArrowBigDownLines", [["path", { d: "M15 12h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-3h6v3z", key: "svg-0" }], ["path", { d: "M15 3h-6", key: "svg-1" }], ["path", { d: "M15 6h-6", key: "svg-2" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconArrowDownRight = createReactComponent("outline", "arrow-down-right", "IconArrowDownRight", [["path", { d: "M7 7l10 10", key: "svg-0" }], ["path", { d: "M17 8l0 9l-9 0", key: "svg-1" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconArrowLeft = createReactComponent("outline", "arrow-left", "IconArrowLeft", [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M5 12l6 6", key: "svg-1" }], ["path", { d: "M5 12l6 -6", key: "svg-2" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconArrowRight = createReactComponent("outline", "arrow-right", "IconArrowRight", [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M13 18l6 -6", key: "svg-1" }], ["path", { d: "M13 6l6 6", key: "svg-2" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconCheck = createReactComponent("outline", "check", "IconCheck", [["path", { d: "M5 12l5 5l10 -10", key: "svg-0" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconChevronDown = createReactComponent("outline", "chevron-down", "IconChevronDown", [["path", { d: "M6 9l6 6l6 -6", key: "svg-0" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconChevronLeft = createReactComponent("outline", "chevron-left", "IconChevronLeft", [["path", { d: "M15 6l-6 6l6 6", key: "svg-0" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconChevronRight = createReactComponent("outline", "chevron-right", "IconChevronRight", [["path", { d: "M9 6l6 6l-6 6", key: "svg-0" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconCopy = createReactComponent("outline", "copy", "IconCopy", [["path", { d: "M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z", key: "svg-0" }], ["path", { d: "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1", key: "svg-1" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconExternalLink = createReactComponent("outline", "external-link", "IconExternalLink", [["path", { d: "M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6", key: "svg-0" }], ["path", { d: "M11 13l9 -9", key: "svg-1" }], ["path", { d: "M15 4h5v5", key: "svg-2" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconFileCode = createReactComponent("outline", "file-code", "IconFileCode", [["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-0" }], ["path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z", key: "svg-1" }], ["path", { d: "M10 13l-1 2l1 2", key: "svg-2" }], ["path", { d: "M14 13l1 2l-1 2", key: "svg-3" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconFileSymlink = createReactComponent("outline", "file-symlink", "IconFileSymlink", [["path", { d: "M4 21v-4a3 3 0 0 1 3 -3h5", key: "svg-0" }], ["path", { d: "M9 17l3 -3l-3 -3", key: "svg-1" }], ["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-2" }], ["path", { d: "M5 11v-6a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-9.5", key: "svg-3" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconFocusCentered = createReactComponent("outline", "focus-centered", "IconFocusCentered", [["path", { d: "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", key: "svg-0" }], ["path", { d: "M4 8v-2a2 2 0 0 1 2 -2h2", key: "svg-1" }], ["path", { d: "M4 16v2a2 2 0 0 0 2 2h2", key: "svg-2" }], ["path", { d: "M16 4h2a2 2 0 0 1 2 2v2", key: "svg-3" }], ["path", { d: "M16 20h2a2 2 0 0 0 2 -2v-2", key: "svg-4" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconFolderOpen = createReactComponent("outline", "folder-open", "IconFolderOpen", [["path", { d: "M5 19l2.757 -7.351a1 1 0 0 1 .936 -.649h12.307a1 1 0 0 1 .986 1.164l-.996 5.211a2 2 0 0 1 -1.964 1.625h-14.026a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2", key: "svg-0" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconHelpCircle = createReactComponent("outline", "help-circle", "IconHelpCircle", [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }], ["path", { d: "M12 16v.01", key: "svg-1" }], ["path", { d: "M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483", key: "svg-2" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconLayoutDashboard = createReactComponent("outline", "layout-dashboard", "IconLayoutDashboard", [["path", { d: "M5 4h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1", key: "svg-0" }], ["path", { d: "M5 16h4a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1", key: "svg-1" }], ["path", { d: "M15 12h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1", key: "svg-2" }], ["path", { d: "M15 4h4a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1", key: "svg-3" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconLink = createReactComponent("outline", "link", "IconLink", [["path", { d: "M9 15l6 -6", key: "svg-0" }], ["path", { d: "M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464", key: "svg-1" }], ["path", { d: "M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463", key: "svg-2" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconMenu2 = createReactComponent("outline", "menu-2", "IconMenu2", [["path", { d: "M4 6l16 0", key: "svg-0" }], ["path", { d: "M4 12l16 0", key: "svg-1" }], ["path", { d: "M4 18l16 0", key: "svg-2" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconMenu = createReactComponent("outline", "menu", "IconMenu", [["path", { d: "M4 8l16 0", key: "svg-0" }], ["path", { d: "M4 16l16 0", key: "svg-1" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconMoonStars = createReactComponent("outline", "moon-stars", "IconMoonStars", [["path", { d: "M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z", key: "svg-0" }], ["path", { d: "M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2", key: "svg-1" }], ["path", { d: "M19 11h2m-1 -1v2", key: "svg-2" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconRouteOff = createReactComponent("outline", "route-off", "IconRouteOff", [["path", { d: "M6 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", key: "svg-0" }], ["path", { d: "M18 5m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", key: "svg-1" }], ["path", { d: "M12 19h4.5c.71 0 1.372 -.212 1.924 -.576m1.545 -2.459a3.5 3.5 0 0 0 -3.469 -3.965h-.499m-4 0h-3.501a3.5 3.5 0 0 1 -2.477 -5.972m2.477 -1.028h3.5", key: "svg-2" }], ["path", { d: "M3 3l18 18", key: "svg-3" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconShare = createReactComponent("outline", "share", "IconShare", [["path", { d: "M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-0" }], ["path", { d: "M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-1" }], ["path", { d: "M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-2" }], ["path", { d: "M8.7 10.7l6.6 -3.4", key: "svg-3" }], ["path", { d: "M8.7 13.3l6.6 3.4", key: "svg-4" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconSun = createReactComponent("outline", "sun", "IconSun", [["path", { d: "M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0", key: "svg-0" }], ["path", { d: "M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7", key: "svg-1" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconZoomScan = createReactComponent("outline", "zoom-scan", "IconZoomScan", [["path", { d: "M4 8v-2a2 2 0 0 1 2 -2h2", key: "svg-0" }], ["path", { d: "M4 16v2a2 2 0 0 0 2 2h2", key: "svg-1" }], ["path", { d: "M16 4h2a2 2 0 0 1 2 2v2", key: "svg-2" }], ["path", { d: "M16 20h2a2 2 0 0 0 2 -2v-2", key: "svg-3" }], ["path", { d: "M8 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", key: "svg-4" }], ["path", { d: "M16 16l-2.5 -2.5", key: "svg-5" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconFolderFilled = createReactComponent("filled", "folder-filled", "IconFolderFilled", [["path", { d: "M9 3a1 1 0 0 1 .608 .206l.1 .087l2.706 2.707h6.586a3 3 0 0 1 2.995 2.824l.005 .176v8a3 3 0 0 1 -2.824 2.995l-.176 .005h-14a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-11a3 3 0 0 1 2.824 -2.995l.176 -.005h4z", key: "svg-0" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconPlayerPlayFilled = createReactComponent("filled", "player-play-filled", "IconPlayerPlayFilled", [["path", { d: "M6 4v16a1 1 0 0 0 1.524 .852l13 -8a1 1 0 0 0 0 -1.704l-13 -8a1 1 0 0 0 -1.524 .852z", key: "svg-0" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconPlayerSkipBackFilled = createReactComponent("filled", "player-skip-back-filled", "IconPlayerSkipBackFilled", [["path", { d: "M19.496 4.136l-12 7a1 1 0 0 0 0 1.728l12 7a1 1 0 0 0 1.504 -.864v-14a1 1 0 0 0 -1.504 -.864z", key: "svg-0" }], ["path", { d: "M4 4a1 1 0 0 1 .993 .883l.007 .117v14a1 1 0 0 1 -1.993 .117l-.007 -.117v-14a1 1 0 0 1 1 -1z", key: "svg-1" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconPlayerSkipForwardFilled = createReactComponent("filled", "player-skip-forward-filled", "IconPlayerSkipForwardFilled", [["path", { d: "M3 5v14a1 1 0 0 0 1.504 .864l12 -7a1 1 0 0 0 0 -1.728l-12 -7a1 1 0 0 0 -1.504 .864z", key: "svg-0" }], ["path", { d: "M20 4a1 1 0 0 1 .993 .883l.007 .117v14a1 1 0 0 1 -1.993 .117l-.007 -.117v-14a1 1 0 0 1 1 -1z", key: "svg-1" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconPlayerStopFilled = createReactComponent("filled", "player-stop-filled", "IconPlayerStopFilled", [["path", { d: "M17 4h-10a3 3 0 0 0 -3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3 -3v-10a3 3 0 0 0 -3 -3z", key: "svg-0" }]]), container$5 = "yi2p6v1", dimmed$2 = "yi2p6v2", edgePathBg = "yi2p6v3", markerContext = "yi2p6v4", controlPoint = "yi2p6v5", controlDragging = "yi2p6v6", cssEdgePath = "yi2p6v8", stepEdgeNumber = "yi2p6v9", varLabelX = "var(--yi2p6va)", varLabelY = "var(--yi2p6vb)", edgeLabel = "yi2p6vd", edgeLabelText = "yi2p6ve", edgeNoteCloseButton = "yi2p6vf", edgeNoteText = "yi2p6vg", cssNavigateBtn$1 = "yi2p6vh", cssNavigateBtnIcon = "yi2p6vi", menuDropdown = "_1gqkcc30", menuItemRelationship = "_1gqkcc31", endpoint = "_1gqkcc32", title$3 = "_1gqkcc33";
-const stopPropagation = (e2) => e2.stopPropagation(), Tooltip$2 = Tooltip$3.withProps({
+const stopPropagation = (e2) => e2.stopPropagation(), Tooltip$1 = Tooltip$2.withProps({
   color: "gray",
   fz: "xs",
   openDelay: 300,
@@ -7743,17 +10905,19 @@ function RelationshipsDropdownMenu({
   );
   if (direct.length + nested.length === 0)
     return /* @__PURE__ */ jsx(Fragment$1, { children });
-  const renderRelationship = (relationship) => /* @__PURE__ */ jsx(
-    MenuItem,
-    {
-      component: Relationship,
-      relationship,
-      sourceNode: sourceXYNode.data.element,
-      targetNode: targetXYNode.data.element,
-      edge
-    },
-    relationship.id
-  );
+  const renderRelationship = (relationship, index2) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    index2 > 0 && /* @__PURE__ */ jsx(MenuDivider, { opacity: 0.65 }),
+    /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        component: Relationship,
+        relationship,
+        sourceNode: sourceXYNode.data.element,
+        targetNode: targetXYNode.data.element,
+        edge
+      }
+    )
+  ] }, relationship.id);
   return /* @__PURE__ */ jsxs(
     Menu,
     {
@@ -7811,20 +10975,20 @@ const Relationship = forwardRef$1(({
     hasOnOpenSourceRelation: !!s2.onOpenSourceRelation,
     hasOnNavigateTo: !!s2.onNavigateTo
   })), sourceId = nameFromFqn(edge.source) + r2.source.id.slice(edge.source.length), targetId = nameFromFqn(edge.target) + r2.target.id.slice(edge.target.length), navigateTo = hasOnNavigateTo && r2.relationship.navigateTo !== viewId ? r2.relationship.navigateTo : void 0;
-  return /* @__PURE__ */ jsxs(Stack, { ref, className: clsx(menuItemRelationship, className), ...props2, children: [
+  return /* @__PURE__ */ jsxs(Stack$1, { ref, className: clsx(menuItemRelationship, className), ...props2, children: [
     /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
       /* @__PURE__ */ jsx(Text$1, { component: "div", className: endpoint, "data-likec4-color": sourceNode.color, children: sourceId }),
       /* @__PURE__ */ jsx(IconArrowRight, { stroke: 2.5, size: 11 }),
       /* @__PURE__ */ jsx(Text$1, { component: "div", className: endpoint, "data-likec4-color": targetNode.color, children: targetId }),
       (navigateTo || hasOnOpenSourceRelation) && /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 100, children: [
         /* @__PURE__ */ jsx(Space, { w: "xs" }),
-        navigateTo && /* @__PURE__ */ jsx(Tooltip$2, { label: "Open dynamic view", children: /* @__PURE__ */ jsx(
-          ActionIcon$2,
+        navigateTo && /* @__PURE__ */ jsx(Tooltip$1, { label: "Open dynamic view", children: /* @__PURE__ */ jsx(
+          ActionIcon$1,
           {
             className: clsx("nodrag nopan"),
             size: "sm",
             radius: "sm",
-            variant: "light",
+            variant: "default",
             onPointerDownCapture: stopPropagation,
             onClick: (event) => {
               diagramApi.getState().onNavigateTo?.(navigateTo, event);
@@ -7833,13 +10997,13 @@ const Relationship = forwardRef$1(({
             children: /* @__PURE__ */ jsx(IconZoomScan, { size: "80%", stroke: 2 })
           }
         ) }),
-        hasOnOpenSourceRelation && /* @__PURE__ */ jsx(Tooltip$2, { label: "Open source", children: /* @__PURE__ */ jsx(
-          ActionIcon$2,
+        hasOnOpenSourceRelation && /* @__PURE__ */ jsx(Tooltip$1, { label: "Open source", children: /* @__PURE__ */ jsx(
+          ActionIcon$1,
           {
             className: clsx("nodrag nopan"),
             size: "sm",
             radius: "sm",
-            variant: "light",
+            variant: "default",
             onPointerDownCapture: stopPropagation,
             onClick: (event) => {
               event.stopPropagation(), diagramApi.getState().onOpenSourceRelation?.(r2.id);
@@ -7913,7 +11077,7 @@ const Relationship = forwardRef$1(({
         /* @__PURE__ */ jsxs(
           PopoverDropdown,
           {
-            component: Stack,
+            component: Stack$1,
             p: "xs",
             onPointerDownCapture: (e2) => e2.stopPropagation(),
             onClick: (e2) => e2.stopPropagation(),
@@ -7951,7 +11115,7 @@ const Relationship = forwardRef$1(({
 function NavigateToBtn$1({ viewId }) {
   const diagramApi = useDiagramStoreApi();
   return /* @__PURE__ */ jsx(
-    ActionIcon$2,
+    ActionIcon$1,
     {
       className: clsx("nodrag nopan", cssNavigateBtn$1),
       size: "sm",
@@ -8096,21 +11260,9 @@ const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => is
     50,
     300
   ), (isModified || isControlPointDragging) && (labelX = labelPos.x, labelY = labelPos.y);
-  const onControlPointerDown = (index2, e2) => {
-    const { domNode, addSelectedEdges } = xyflowStore.getState();
-    if (!domNode || e2.pointerType !== "mouse")
-      return;
+  const onLmbControlPointerDown = (index2, e2, domNode) => {
+    const { addSelectedEdges } = xyflowStore.getState(), { xyflow } = diagramStore.getState();
     addSelectedEdges([id2]);
-    const { xyflow } = diagramStore.getState();
-    if (e2.button === 2 && controlPoints.length > 1) {
-      const newControlPoints = controlPoints.slice();
-      newControlPoints.splice(index2, 1), e2.stopPropagation(), setTimeout(() => {
-        xyflow.updateEdgeData(id2, { controlPoints: newControlPoints }), diagramStore.getState().scheduleSaveManualLayout();
-      }, 10);
-      return;
-    }
-    if (e2.button !== 0)
-      return;
     const wasCanceled = diagramStore.getState().cancelSaveManualLayout();
     e2.stopPropagation();
     let hasMoved = !1, pointer = { x: e2.clientX, y: e2.clientY };
@@ -8144,6 +11296,33 @@ const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => is
       once: !0,
       capture: !0
     });
+  }, onRmbControlPointerDown = (index2, e2, domNode) => {
+    const { xyflow } = diagramStore.getState();
+    if (controlPoints.length <= 1)
+      return;
+    const onPointerUp = (e22) => {
+      const newControlPoints = controlPoints.slice();
+      newControlPoints.splice(index2, 1), e22.stopPropagation(), setTimeout(() => {
+        xyflow.updateEdgeData(id2, { controlPoints: newControlPoints }), diagramStore.getState().scheduleSaveManualLayout();
+      }, 10), domNode.removeEventListener("pointerup", onPointerUp, {
+        capture: !0
+      }), e22.stopPropagation();
+    };
+    domNode.addEventListener("pointerup", onPointerUp, {
+      once: !0,
+      capture: !0
+    }), e2.stopPropagation();
+  }, onControlPointerDown = (index2, e2) => {
+    const { domNode } = xyflowStore.getState();
+    if (!(!domNode || e2.pointerType !== "mouse"))
+      switch (e2.button) {
+        case 0:
+          onLmbControlPointerDown(index2, e2, domNode);
+          break;
+        case 2:
+          onRmbControlPointerDown(index2, e2, domNode);
+          break;
+      }
   }, onEdgePointerDown = (e2) => {
     const { domNode } = xyflowStore.getState(), { xyflow, scheduleSaveManualLayout } = diagramStore.getState();
     !domNode || e2.pointerType !== "mouse" || e2.button === 2 && (xyflow.updateEdgeData(id2, (edge) => {
@@ -8279,7 +11458,7 @@ const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => is
 function NavigateToBtn({ xynodeId, className }) {
   const diagramApi = useDiagramStoreApi();
   return /* @__PURE__ */ jsx(
-    ActionIcon$2,
+    ActionIcon$1,
     {
       className: clsx("nodrag nopan", className),
       radius: "md",
@@ -8442,7 +11621,7 @@ function ElementLink({
             onPointerDownCapture: (e2) => e2.stopPropagation(),
             onClick: (e2) => e2.stopPropagation(),
             p: "xs",
-            children: /* @__PURE__ */ jsx(Stack, { gap: "xs", children: element.links.map((link) => /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", gap: "sm", children: [
+            children: /* @__PURE__ */ jsx(Stack$1, { gap: "xs", children: element.links.map((link) => /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", gap: "sm", children: [
               /* @__PURE__ */ jsx(Box, { flex: "1", style: { overflow: "clip", maxWidth: u(element.width, { min: 200, max: 400 }) }, children: /* @__PURE__ */ jsx(Anchor, { href: link.url, target: "_blank", fz: "13", truncate: "end", children: link.title || link.url }) }),
               /* @__PURE__ */ jsx(CopyButton$1, { value: link.url, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
                 Button,
@@ -10009,8 +13188,9 @@ function createLayoutConstraints(xyflowApi, draggingNodeId) {
       xynode,
       parent: null
     });
+  const draggingNodes = new Set(nodeLookup.values().filter((x2) => x2.dragging === !0 || x2.id === draggingNodeId || x2.selected).map((x2) => x2.id));
   for (; traverse.length > 0; ) {
-    const { xynode, parent } = traverse.shift(), isDragging = xynode.dragging === !0 || xynode.id === draggingNodeId, shouldTraverse = !isDragging && xynode.type === "compound" && isAncestor(xynode.id, draggingNodeId), rect = shouldTraverse ? new Compound(solver, xynode, parent) : new Leaf(solver, xynode, parent, isDragging);
+    const { xynode, parent } = traverse.shift(), isDragging = draggingNodes.has(xynode.id), shouldTraverse = !isDragging && xynode.type === "compound" && draggingNodes.values().some((x2) => isAncestor(xynode.id, x2)), rect = shouldTraverse ? new Compound(solver, xynode, parent) : new Leaf(solver, xynode, parent, isDragging);
     rects.set(xynode.id, rect), shouldTraverse && parentLookup.get(xynode.id)?.forEach((child) => {
       traverse.push({
         xynode: child,
@@ -10019,7 +13199,7 @@ function createLayoutConstraints(xyflowApi, draggingNodeId) {
     });
   }
   solver.updateVariables(), solver.maxIterations = 1e3;
-  const rectsToUpdate = [...rects.values()].filter((r2) => r2.id !== draggingNodeId);
+  const rectsToUpdate = [...rects.values()].filter((r2) => !draggingNodes.has(r2.id));
   function updateXYFlowNodes() {
     solver.updateVariables(), xyflowApi.getState().triggerNodeChanges(
       rectsToUpdate.reduce((acc, r2) => (acc.push({
@@ -10502,7 +13682,7 @@ function DiagramTitlePanel() {
                 }
               ),
               links && /* @__PURE__ */ jsx(
-                Stack,
+                Stack$1,
                 {
                   gap: 3,
                   justify: "stretch",
@@ -10731,7 +13911,7 @@ const ElementNotation = ({ value }) => {
                 )
               }
             ),
-            /* @__PURE__ */ jsxs(Stack, { gap: 4, flex: 1, children: [
+            /* @__PURE__ */ jsxs(Stack$1, { gap: 4, flex: 1, children: [
               /* @__PURE__ */ jsx(Group, { gap: 4, flex: "0 0 auto", children: value.kinds.map((kind) => /* @__PURE__ */ jsx(
                 Badge,
                 {
@@ -10794,10 +13974,10 @@ function NotationPanel() {
           opacity: 0.6
         },
         className: clsx("react-flow__panel", container),
-        children: /* @__PURE__ */ jsx(Tooltip$3, { label: "View has no notations", color: "orange", ...portalProps, children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(Tooltip$2, { label: "View has no notations", color: "orange", ...portalProps, children: /* @__PURE__ */ jsx(
           ThemeIcon,
           {
-            size: "xl",
+            size: "lg",
             variant: "light",
             color: "orange",
             radius: "md",
@@ -10817,10 +13997,10 @@ function NotationPanel() {
           opacity: 0.6
         },
         className: clsx("react-flow__panel", container),
-        children: /* @__PURE__ */ jsx(Tooltip$3, { label: "Show notation", color: "dark", fz: "xs", ...portalProps, children: /* @__PURE__ */ jsx(
-          ActionIcon$2,
+        children: /* @__PURE__ */ jsx(Tooltip$2, { label: "Show notation", color: "dark", fz: "xs", ...portalProps, children: /* @__PURE__ */ jsx(
+          ActionIcon$1,
           {
-            size: "xl",
+            size: "lg",
             variant: "light",
             color: "gray",
             radius: "md",
@@ -10858,7 +14038,7 @@ function NotationPanel() {
             children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "first", radius: "xs", children: [
               /* @__PURE__ */ jsxs(TabsList, { children: [
                 /* @__PURE__ */ jsx(
-                  ActionIcon$2,
+                  ActionIcon$1,
                   {
                     size: "md",
                     variant: "subtle",
@@ -10882,7 +14062,7 @@ function NotationPanel() {
                       maxHeight: `min(40vh, ${Math.max(height - 60, 50)}px)`
                     }
                   },
-                  children: /* @__PURE__ */ jsx(Stack, { gap: 0, children: notations.map((n2, i2) => /* @__PURE__ */ jsx(ElementNotation, { value: n2 }, i2)) })
+                  children: /* @__PURE__ */ jsx(Stack$1, { gap: 0, children: notations.map((n2, i2) => /* @__PURE__ */ jsx(ElementNotation, { value: n2 }, i2)) })
                 }
               ) })
             ] })
@@ -10919,9 +14099,9 @@ const {
       targets
     });
   };
-  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+  return /* @__PURE__ */ jsxs(Stack$1, { gap: "xs", children: [
     /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", align: "flex-start", children: [
-      /* @__PURE__ */ jsxs(Box, { flex: 1, children: [
+      /* @__PURE__ */ jsxs(Box, { flex: 1, miw: 0, children: [
         /* @__PURE__ */ jsxs(Text$1, { fz: rem(9), fw: "500", c: "dimmed", children: [
           "ELEMENT",
           rest.length > 0 ? "S" : ""
@@ -10929,7 +14109,7 @@ const {
         /* @__PURE__ */ jsx(Text$1, { size: "xs", c: rest.length > 0 ? "dimmed" : "", truncate: !0, children: rest.length === 0 ? firstNode.data.element.title : "[ multiple ]" })
       ] }),
       showGoToSource && /* @__PURE__ */ jsx(Box, { flex: 0, children: /* @__PURE__ */ jsx(
-        ActionIcon$2,
+        ActionIcon$1,
         {
           size: "sm",
           variant: "light",
@@ -11006,7 +14186,7 @@ function Colors({
   return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 400, closeDelay: 300, children: [
     /* @__PURE__ */ jsx(Divider, { label: "color", labelPosition: "left" }),
     /* @__PURE__ */ jsx(Flex, { mt: "xs", maw: 150, gap: "xs", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: themedColors.map(({ key, value }) => /* @__PURE__ */ jsx(
-      Tooltip$3,
+      Tooltip$2,
       {
         label: key,
         fz: "xs",
@@ -11028,7 +14208,7 @@ function Colors({
       key
     )) }),
     /* @__PURE__ */ jsx(Flex, { mt: "sm", maw: 150, gap: "xs", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: colors.map(({ key, value }) => /* @__PURE__ */ jsx(
-      Tooltip$3,
+      Tooltip$2,
       {
         label: key,
         fz: "xs",
@@ -11184,35 +14364,27 @@ function OptionsPanel() {
     viewId
   ) });
 }
-const Tooltip$1 = Tooltip$3.withProps({
-  color: "gray",
+const Tooltip = Tooltip$2.withProps({
+  color: "dark",
   fz: "xs",
   position: "right",
   openDelay: 400,
-  closeDelay: 100,
+  closeDelay: 150,
   label: "",
   children: null,
-  offset: 8,
-  transitionProps: { transition: "fade-right", duration: 200 }
-}), ActionIcon$1 = ActionIcon$2.withProps({
-  className: "action-icon",
-  variant: "light",
+  offset: 8
+}), ActionIcon = ActionIcon$1.withProps({
+  classNames: {
+    root: "action-icon"
+  },
+  variant: "default",
   color: "gray"
 });
-var backwardForwardButtons = "syg3oy0", panel = "syg3oy1", autolayoutIcon = "syg3oy2", autolayoutIndicator = "syg3oy3";
-const ActionIcon = ActionIcon$2.withProps({
+var backwardForwardButtons = "syg3oy0", panel = "syg3oy1", actionIconGroup = "syg3oy2", autolayoutIcon = "syg3oy3", autolayoutIndicator = "syg3oy4";
+const DirectionActionIcon = ActionIcon$1.withProps({
   size: "md",
   variant: "subtle",
   color: "gray"
-}), Tooltip = Tooltip$3.withProps({
-  color: "gray",
-  fz: "xs",
-  position: "right",
-  openDelay: 300,
-  label: "",
-  children: null,
-  offset: 5,
-  transitionProps: { transition: "fade", duration: 200 }
 }), ChangeAutoLayoutButton = (props2) => {
   const store = useDiagramStoreApi(), [rootRef, setRootRef] = useState$1(null), [controlsRefs, setControlsRefs] = useState$1({}), autoLayout = useDiagramState((s2) => s2.view.autoLayout), setControlRef = (name) => (node) => {
     controlsRefs[name] = node, setControlsRefs(controlsRefs);
@@ -11238,62 +14410,54 @@ const ActionIcon = ActionIcon$2.withProps({
       },
       ...props2,
       children: [
-        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(
-          ActionIcon$2,
-          {
-            className: "action-icon",
-            variant: "light",
-            color: "gray",
-            children: /* @__PURE__ */ jsx(IconLayoutDashboard, { stroke: 1.3 })
-          }
-        ) }),
+        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip, { label: "Change Auto Layout", children: /* @__PURE__ */ jsx(ActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutDashboard, {}) }) }) }),
         /* @__PURE__ */ jsx(PopoverDropdown, { className: "likec4-top-left-panel", p: 8, pt: 4, children: /* @__PURE__ */ jsxs(Box, { pos: "relative", ref: setRootRef, children: [
           /* @__PURE__ */ jsx(
             FloatingIndicator,
             {
-              target: controlsRefs[autoLayout],
+              target: controlsRefs[autoLayout.direction],
               parent: rootRef,
               className: autolayoutIndicator
             }
           ),
           /* @__PURE__ */ jsx(Box, { mb: 10, children: /* @__PURE__ */ jsx(Text$1, { inline: !0, fz: "xs", c: "dimmed", fw: 500, children: "Auto layout:" }) }),
-          /* @__PURE__ */ jsx(TooltipGroup, { openDelay: 100, children: /* @__PURE__ */ jsxs(Stack, { align: "center", gap: 1, children: [
+          /* @__PURE__ */ jsx(TooltipGroup, { openDelay: 100, children: /* @__PURE__ */ jsxs(Stack$1, { align: "center", gap: 1, children: [
             /* @__PURE__ */ jsx(Tooltip, { label: "Top to Bottom", children: /* @__PURE__ */ jsx(
-              ActionIcon,
+              DirectionActionIcon,
               {
                 className: autolayoutIcon,
                 ref: setControlRef("TB"),
                 onClick: setAutoLayout("TB"),
-                children: /* @__PURE__ */ jsx(IconArrowBigDownLines, { stroke: 1.3 })
+                children: /* @__PURE__ */ jsx(IconArrowBigDownLines, {})
               }
             ) }),
             /* @__PURE__ */ jsxs(Group, { gap: 30, children: [
               /* @__PURE__ */ jsx(Tooltip, { label: "Left to Right", children: /* @__PURE__ */ jsx(
-                ActionIcon,
+                DirectionActionIcon,
                 {
                   className: autolayoutIcon,
                   ref: setControlRef("LR"),
                   onClick: setAutoLayout("LR"),
-                  children: /* @__PURE__ */ jsx(IconArrowBigDownLines, { stroke: 1.3, style: { rotate: "270deg" } })
+                  children: /* @__PURE__ */ jsx(IconArrowBigDownLines, { style: { rotate: "270deg" } })
                 }
               ) }),
               /* @__PURE__ */ jsx(Tooltip, { label: "Right to Left", children: /* @__PURE__ */ jsx(
-                ActionIcon,
+                DirectionActionIcon,
                 {
                   className: autolayoutIcon,
                   ref: setControlRef("RL"),
                   onClick: setAutoLayout("RL"),
-                  children: /* @__PURE__ */ jsx(IconArrowBigDownLines, { stroke: 1.3, style: { rotate: "90deg" } })
+                  children: /* @__PURE__ */ jsx(IconArrowBigDownLines, { style: { rotate: "90deg" } })
                 }
               ) })
             ] }),
             /* @__PURE__ */ jsx(Tooltip, { label: "Bottom to Top", children: /* @__PURE__ */ jsx(
-              ActionIcon,
+              DirectionActionIcon,
               {
                 className: autolayoutIcon,
                 ref: setControlRef("BT"),
                 onClick: setAutoLayout("BT"),
-                children: /* @__PURE__ */ jsx(IconArrowBigDownLines, { stroke: 1.3, style: { rotate: "180deg" } })
+                children: /* @__PURE__ */ jsx(IconArrowBigDownLines, { style: { rotate: "180deg" } })
               }
             ) })
           ] }) })
@@ -11311,14 +14475,15 @@ const ActionIcon = ActionIcon$2.withProps({
     hasStepBack,
     hasStepForward
   } = useDiagramState(historySelector);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs(
     Group,
     {
       className: clsx(backwardForwardButtons, "likec4-navigation-webview"),
+      align: "flex-start",
       gap: "xs",
       children: [
         showBurgerMenu && /* @__PURE__ */ jsx(
-          ActionIcon$1,
+          ActionIcon,
           {
             onClick: (e2) => {
               e2.stopPropagation(), store.getState().onBurgerMenuClick?.();
@@ -11338,7 +14503,7 @@ const ActionIcon = ActionIcon$2.withProps({
                 transform: "translateX(-10px)"
               },
               children: /* @__PURE__ */ jsx(
-                ActionIcon$1,
+                ActionIcon,
                 {
                   onClick: (e2) => {
                     e2.stopPropagation(), store.getState().goBack();
@@ -11360,7 +14525,7 @@ const ActionIcon = ActionIcon$2.withProps({
                 transform: "translateX(10px)"
               },
               children: /* @__PURE__ */ jsx(
-                ActionIcon$1,
+                ActionIcon,
                 {
                   onClick: (e2) => {
                     e2.stopPropagation(), store.getState().goForward();
@@ -11374,7 +14539,7 @@ const ActionIcon = ActionIcon$2.withProps({
         ] })
       ]
     }
-  );
+  ) });
 }, LayoutDriftNotification = (props2) => /* @__PURE__ */ jsxs(
   HoverCard,
   {
@@ -11383,15 +14548,10 @@ const ActionIcon = ActionIcon$2.withProps({
     closeDelay: 100,
     ...props2,
     children: [
-      /* @__PURE__ */ jsx(HoverCardTarget, { children: /* @__PURE__ */ jsx(
-        ActionIcon$1,
-        {
-          className: "action-icon",
-          variant: "light",
-          color: "orange",
-          children: /* @__PURE__ */ jsx(IconAlertTriangle, {})
-        }
-      ) }),
+      /* @__PURE__ */ jsx(HoverCardTarget, { children: /* @__PURE__ */ jsxs(ActionIcon, { c: "orange", children: [
+        /* @__PURE__ */ jsx(Overlay, { color: mantine.colors.orange.lightHover, backgroundOpacity: 1 }),
+        /* @__PURE__ */ jsx(IconAlertTriangle, {})
+      ] }) }),
       /* @__PURE__ */ jsx(HoverCardDropdown, { p: "0", children: /* @__PURE__ */ jsxs(
         Notification,
         {
@@ -11416,8 +14576,8 @@ const ActionIcon = ActionIcon$2.withProps({
   }
 ), ResetControlPointsButton = (props2) => {
   const store = useDiagramStoreApi();
-  return /* @__PURE__ */ jsx(Tooltip$1, { label: "Reset all control points", ...props2, children: /* @__PURE__ */ jsx(
-    ActionIcon$1,
+  return /* @__PURE__ */ jsx(Tooltip, { label: "Reset all control points", ...props2, children: /* @__PURE__ */ jsx(
+    ActionIcon,
     {
       onClick: (e2) => {
         e2.stopPropagation(), store.getState().resetEdgeControlPoints();
@@ -11446,70 +14606,45 @@ const ActionIcon = ActionIcon$2.withProps({
       showResetControlPoints: s2.readonly !== !0 && s2.experimentalEdgeEditing === !0
     };
   }), portalProps = useMantinePortalProps();
-  return /* @__PURE__ */ jsxs(
-    Stack,
+  return /* @__PURE__ */ jsx(TooltipGroup, { openDelay: 500, closeDelay: 150, children: /* @__PURE__ */ jsxs(
+    Stack$1,
     {
       className: clsx(
         "react-flow__panel",
         panel,
-        "likec4-top-left-webview"
+        "likec4-top-left-panel"
       ),
+      align: "flex-start",
       onClick: (e2) => e2.stopPropagation(),
       gap: "xs",
       children: [
         showNavigationButtons && /* @__PURE__ */ jsx(BackwardForwardButtons, {}),
-        showGoToSource && /* @__PURE__ */ jsx(Tooltip$1, { label: "Open source", ...portalProps, children: /* @__PURE__ */ jsx(
-          ActionIcon$1,
-          {
-            className: "action-icon",
-            onClick: (e2) => {
-              e2.stopPropagation(), store.getState().onOpenSourceView?.();
-            },
-            children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5 })
-          }
-        ) }),
-        showChangeAutoLayout && /* @__PURE__ */ jsx(ChangeAutoLayoutButton, { ...portalProps }),
-        /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-          showLayoutDriftWarning && /* @__PURE__ */ jsx(
-            m$1.div,
+        /* @__PURE__ */ jsxs(ActionIconGroup, { className: actionIconGroup, orientation: "vertical", children: [
+          showGoToSource && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", ...portalProps, children: /* @__PURE__ */ jsx(
+            ActionIcon,
             {
-              initial: { opacity: 0.05, transform: "translateX(-40%)" },
-              animate: { opacity: 1, transform: "translateX(0)" },
-              exit: {
-                opacity: 0,
-                transform: "translateX(-40%)"
+              onClick: (e2) => {
+                e2.stopPropagation(), store.getState().onOpenSourceView?.();
               },
-              children: /* @__PURE__ */ jsx(LayoutDriftNotification, { ...portalProps })
-            },
-            "layout"
-          ),
+              children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5 })
+            }
+          ) }),
+          showChangeAutoLayout && /* @__PURE__ */ jsx(ChangeAutoLayoutButton, { ...portalProps }),
+          showLayoutDriftWarning && /* @__PURE__ */ jsx(LayoutDriftNotification, { ...portalProps }),
           showResetControlPoints && /* @__PURE__ */ jsx(ResetControlPointsButton, { ...portalProps }),
-          showFitDiagram && /* @__PURE__ */ jsx(
-            m$1.div,
+          showFitDiagram && /* @__PURE__ */ jsx(Tooltip, { label: viewportChanged ? "Center camera" : "Camera is centered", ...portalProps, children: /* @__PURE__ */ jsx(
+            ActionIcon,
             {
-              initial: { opacity: 0.05, transform: "translateX(-20%)" },
-              animate: { opacity: 1, transform: "translateX(0)" },
-              exit: {
-                opacity: 0,
-                transform: "translateX(-30%)"
+              onClick: (e2) => {
+                e2.stopPropagation(), store.getState().fitDiagram();
               },
-              children: /* @__PURE__ */ jsx(Tooltip$1, { label: viewportChanged ? "Center camera" : "Camera is centered", ...portalProps, children: /* @__PURE__ */ jsx(
-                ActionIcon$1,
-                {
-                  className: "action-icon",
-                  onClick: (e2) => {
-                    e2.stopPropagation(), store.getState().fitDiagram();
-                  },
-                  children: /* @__PURE__ */ jsx(IconFocusCentered, {})
-                }
-              ) })
-            },
-            "fit-view"
-          )
+              children: /* @__PURE__ */ jsx(IconFocusCentered, {})
+            }
+          ) })
         ] })
       ]
     }
-  );
+  ) });
 };
 TopLeftPanel.displayName = "TopLeftPanel";
 function literalToEnum(value) {
@@ -11551,7 +14686,7 @@ const XYFlowInner = /* @__PURE__ */ memo$1(function({
   }));
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     background !== "transparent" && background !== "solid" && /* @__PURE__ */ jsx(XYFlowBackground, { background }),
-    controls && /* @__PURE__ */ jsx(Controls, { position: "bottom-right" }),
+    controls && /* @__PURE__ */ jsx(Controls, { showInteractive: !1, position: "top-center" }),
     /* @__PURE__ */ jsx(TopLeftPanel, {}),
     !readonly && /* @__PURE__ */ jsx(OptionsPanel, {}),
     showDiagramTitle && !isDynamicViewActive && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
@@ -11839,7 +14974,7 @@ const ViewCard = memo$1(({ viewId }) => {
       radius: "sm",
       withBorder: !0,
       children: [
-        /* @__PURE__ */ jsx(Card.Section, { children: /* @__PURE__ */ jsx(DiagramPreview, { diagram }) }),
+        /* @__PURE__ */ jsx(Card.Section, { children: /* @__PURE__ */ jsx(DiagramPreview$1, { diagram }) }),
         /* @__PURE__ */ jsx(Group, { justify: "space-between", mt: "md", mb: "xs", children: /* @__PURE__ */ jsx(Text$1, { fw: 500, children: title2 }) }),
         /* @__PURE__ */ jsx(Text$1, { size: "sm", c: "dimmed", children: description2 }),
         /* @__PURE__ */ jsx(Link, { to: "/view/$viewId", params: { viewId: id2 }, search: !0, className: cardLink })
@@ -11847,7 +14982,7 @@ const ViewCard = memo$1(({ viewId }) => {
     }
   );
 });
-function DiagramPreview({ diagram }) {
+function DiagramPreview$1({ diagram }) {
   const { ref, inViewport } = useInViewport(), [visible, setVisible] = useState$1(inViewport);
   return useLayoutEffect$1(() => {
     inViewport && !visible && setVisible(!0);
@@ -11863,7 +14998,7 @@ function DiagramPreview({ diagram }) {
     }
   ) });
 }
-const OverviewGraph = /* @__PURE__ */ lazy(() => import("./-index-overview-B8AbCuYt.js"));
+const OverviewGraph = /* @__PURE__ */ lazy(() => import("./-index-overview-Csz814YU.js"));
 function WithOverviewGraph() {
   return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(OverviewGraph, {}) });
 }
@@ -12058,14 +15193,14 @@ let atom = (initialValue) => {
   return $atom;
 };
 const MOUNT = 5, UNMOUNT = 6, REVERT_MUTATION = 10;
-let on = (object, listener, eventKey, mutateStore) => (object.events = object.events || {}, object.events[eventKey + REVERT_MUTATION] || (object.events[eventKey + REVERT_MUTATION] = mutateStore((eventProps) => {
-  object.events[eventKey].reduceRight((event, l2) => (l2(event), event), {
+let on = (object2, listener, eventKey, mutateStore) => (object2.events = object2.events || {}, object2.events[eventKey + REVERT_MUTATION] || (object2.events[eventKey + REVERT_MUTATION] = mutateStore((eventProps) => {
+  object2.events[eventKey].reduceRight((event, l2) => (l2(event), event), {
     shared: {},
     ...eventProps
   });
-})), object.events[eventKey] = object.events[eventKey] || [], object.events[eventKey].push(listener), () => {
-  let currentListeners = object.events[eventKey], index2 = currentListeners.indexOf(listener);
-  currentListeners.splice(index2, 1), currentListeners.length || (delete object.events[eventKey], object.events[eventKey + REVERT_MUTATION](), delete object.events[eventKey + REVERT_MUTATION]);
+})), object2.events[eventKey] = object2.events[eventKey] || [], object2.events[eventKey].push(listener), () => {
+  let currentListeners = object2.events[eventKey], index2 = currentListeners.indexOf(listener);
+  currentListeners.splice(index2, 1), currentListeners.length || (delete object2.events[eventKey], object2.events[eventKey + REVERT_MUTATION](), delete object2.events[eventKey + REVERT_MUTATION]);
 }), STORE_UNMOUNT_DELAY = 1e3, onMount = ($store, initialize) => on($store, (payload) => {
   let destroy = initialize(payload);
   destroy && $store.events[UNMOUNT].push(destroy);
@@ -12164,7 +15299,7 @@ const isFile = (node) => isTreeNodeData(node) && node.type === "file", FolderIco
         }
       },
       levelOffset: "md",
-      renderNode: ({ node, expanded, elementProps, hasChildren }) => /* @__PURE__ */ jsx(Box, { ...elementProps, children: /* @__PURE__ */ jsx(
+      renderNode: ({ node, expanded, elementProps, hasChildren }) => /* @__PURE__ */ jsx(DiagramPreviewHoverCard, { viewId: hasChildren ? null : node.value, ...elementProps, children: /* @__PURE__ */ jsx(
         Button,
         {
           fullWidth: !0,
@@ -12192,7 +15327,40 @@ const isFile = (node) => isTreeNodeData(node) && node.type === "file", FolderIco
       ) })
     }
   ) });
-}), drawerOpenedAtom = atom(!1);
+});
+function DiagramPreviewHoverCard({
+  viewId,
+  children,
+  ...props2
+}) {
+  return viewId ? /* @__PURE__ */ jsx(Box, { ...props2, children: /* @__PURE__ */ jsx(DiagramPreview, { viewId, onClick: props2.onClick, children }) }) : /* @__PURE__ */ jsx(Box, { ...props2, children });
+}
+function DiagramPreview({
+  viewId,
+  children,
+  onClick
+}) {
+  const diagram = useLikeC4DiagramView(viewId);
+  if (!diagram)
+    return children;
+  const ratio = Math.max(diagram.bounds.width / 400, diagram.bounds.height / 300), width = Math.round(diagram.bounds.width / ratio), height = Math.round(diagram.bounds.height / ratio);
+  return /* @__PURE__ */ jsxs(HoverCard, { position: "right-start", openDelay: 300, keepMounted: !1, shadow: "lg", children: [
+    /* @__PURE__ */ jsx(HoverCardTarget, { children }),
+    /* @__PURE__ */ jsx(HoverCardDropdown, { style: { width, height }, p: "xs", onClick, children: /* @__PURE__ */ jsx(
+      StaticLikeC4Diagram,
+      {
+        view: diagram,
+        keepAspectRatio: !1,
+        renderIcon: RenderIcon,
+        fitView: !0,
+        fitViewPadding: 0,
+        initialWidth: width,
+        initialHeight: height
+      }
+    ) })
+  ] });
+}
+const drawerOpenedAtom = atom(!1);
 onMount(drawerOpenedAtom, () => {
   drawerOpenedAtom.set(!1);
 });
@@ -12229,7 +15397,7 @@ function SidebarDrawer() {
 function ColorSchemeToggle() {
   const { setColorScheme } = useMantineColorScheme(), computedColorScheme = useComputedColorScheme("light", { getInitialValueInEffect: !0 });
   return /* @__PURE__ */ jsx(
-    ActionIcon$2,
+    ActionIcon$1,
     {
       visibleFrom: "sm",
       size: "md",
@@ -12277,14 +15445,14 @@ const AlertLocalhost = () => /* @__PURE__ */ jsx(
   <iframe src="${href}" width="100%" height="100%" style="border:0;background:transparent;"></iframe>
 </div>
 `.trim();
-  return /* @__PURE__ */ jsxs(Stack, { children: [
+  return /* @__PURE__ */ jsxs(Stack$1, { children: [
     code.includes("http://localhost") && /* @__PURE__ */ jsx(AlertLocalhost, {}),
     /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text$1, { size: "sm", children: "Embedded view is an iframe with a static diagram" }) }),
-    /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+    /* @__PURE__ */ jsxs(Stack$1, { gap: "xs", children: [
       /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
         /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text$1, { fw: "500", size: "sm", children: "HTML" }) }),
         /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-          /* @__PURE__ */ jsx(ActionIcon$2, { component: "a", href, target: "_blank", variant: "light", color: "gray", children: /* @__PURE__ */ jsx(IconExternalLink, {}) }),
+          /* @__PURE__ */ jsx(ActionIcon$1, { component: "a", href, target: "_blank", variant: "light", color: "gray", children: /* @__PURE__ */ jsx(IconExternalLink, {}) }),
           /* @__PURE__ */ jsx(CopyButton$1, { value: code, timeout: 1500, children: CopyButtonChild })
         ] })
       ] }),
@@ -12331,14 +15499,14 @@ function WebcomponentsPanel({ diagram }) {
       search: !0
     }
   );
-  return /* @__PURE__ */ jsxs(Stack, { children: [
+  return /* @__PURE__ */ jsxs(Stack$1, { children: [
     jscode.includes("http://localhost") && /* @__PURE__ */ jsx(AlertLocalhost, {}),
     /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text$1, { size: "sm", children: "Add this script to your page:" }) }),
-    /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+    /* @__PURE__ */ jsxs(Stack$1, { gap: "xs", children: [
       /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
         /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text$1, { fw: "500", size: "sm", children: "JavaScript" }) }),
         /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-          /* @__PURE__ */ jsx(ActionIcon$2, { component: "a", href: webcomponentPreview.href, target: "_blank", variant: "light", color: "gray", children: /* @__PURE__ */ jsx(IconExternalLink, {}) }),
+          /* @__PURE__ */ jsx(ActionIcon$1, { component: "a", href: webcomponentPreview.href, target: "_blank", variant: "light", color: "gray", children: /* @__PURE__ */ jsx(IconExternalLink, {}) }),
           /* @__PURE__ */ jsx(
             CopyButton$1,
             {
@@ -12361,7 +15529,7 @@ function WebcomponentsPanel({ diagram }) {
         "tag."
       ] }) })
     ] }),
-    /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+    /* @__PURE__ */ jsxs(Stack$1, { gap: "xs", children: [
       /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
         /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text$1, { fw: "500", size: "sm", children: "HTML" }) }),
         /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
@@ -13037,7 +16205,7 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
     const count2 = (_ownerDocumentCounts$2 = ownerDocumentCounts.get(ownerDocument)) !== null && _ownerDocumentCounts$2 !== void 0 ? _ownerDocumentCounts$2 : 1;
     if (ownerDocumentCounts.set(ownerDocument, count2 - 1), updateListeners(), count2 === 1 && ownerDocumentCounts.delete(ownerDocument), intersectingHandles.includes(data)) {
       const index2 = intersectingHandles.indexOf(data);
-      index2 >= 0 && intersectingHandles.splice(index2, 1), updateCursor();
+      index2 >= 0 && intersectingHandles.splice(index2, 1), updateCursor(), setResizeHandlerState("up", !0, null);
     }
   };
 }
@@ -14164,7 +17332,7 @@ function PanelResizeHandle({
       if (isActive)
         switch (action) {
           case "down": {
-            setState("drag"), startDragging(resizeHandleId, event);
+            setState("drag"), assert(event, 'Expected event to be defined for "down" action'), startDragging(resizeHandleId, event);
             const {
               onDragging: onDragging2
             } = callbacksRef.current;
@@ -14175,7 +17343,7 @@ function PanelResizeHandle({
             const {
               state: state2
             } = committedValuesRef.current;
-            state2 !== "drag" && setState("hover"), resizeHandler(event);
+            state2 !== "drag" && setState("hover"), assert(event, 'Expected event to be defined for "move" action'), resizeHandler(event);
             break;
           }
           case "up": {
@@ -14228,7 +17396,7 @@ function PanelResizeHandle({
 }
 PanelResizeHandle.displayName = "PanelResizeHandle";
 function CopyButton({ text }) {
-  return /* @__PURE__ */ jsx(CopyButton$1, { value: text, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip$3, { label: copied ? "Copied" : "Copy", withArrow: !0, position: "right", children: /* @__PURE__ */ jsx(ActionIcon$2, { color: copied ? "teal" : "gray", variant: copied ? "light" : "subtle", onClick: copy, children: copied ? /* @__PURE__ */ jsx(IconCheck, { style: { width: rem(16) } }) : /* @__PURE__ */ jsx(IconCopy, { style: { width: rem(16) } }) }) }) });
+  return /* @__PURE__ */ jsx(CopyButton$1, { value: text, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip$2, { label: copied ? "Copied" : "Copy", withArrow: !0, position: "right", children: /* @__PURE__ */ jsx(ActionIcon$1, { color: copied ? "teal" : "gray", variant: copied ? "light" : "subtle", onClick: copy, children: copied ? /* @__PURE__ */ jsx(IconCheck, { style: { width: rem(16) } }) : /* @__PURE__ */ jsx(IconCopy, { style: { width: rem(16) } }) }) }) });
 }
 function CopyToClipboard({ text }) {
   return /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "0", right: "0", p: "4", children: /* @__PURE__ */ jsx(CopyButton, { text }) });
@@ -14338,6 +17506,7 @@ function ViewEditor() {
       enableFocusMode: !1,
       onNavigateTo,
       renderIcon: RenderIcon,
+      onChange: (e2) => console.log(e2),
       onBurgerMenuClick: withOverviewGraph ? () => {
         router.navigate({
           to: "/",
@@ -14423,7 +17592,7 @@ const Route = createFileRoute("/view/$viewId/d2")({
       throw notFound();
     }
   }
-}), fetchFromKroki = async (d2) => await (await fetch("https://kroki.io/d2/svg", {
+}), fetchFromKroki = async (d2) => await (await fetch(krokiD2SvgUrl, {
   method: "POST",
   cache: "force-cache",
   body: JSON.stringify({