@reforma/components 0.0.0-stage → 0.1.0

package/dist/Scrollable/Scrollable.module.css.js

@@ -0,0 +1,30 @@
+const l = "Scrollable_root_HZRUuL", o = "Scrollable_scrollV_aT2wve", r = "Scrollable_scrollH_D0afWp", c = "Scrollable_container_iaOGty", t = "Scrollable_containerStickToBottom_iTTjCu", e = "Scrollable_content_3ww16P", a = "Scrollable_scrollbar_IK11Ix", n = "Scrollable_scrollbarV_tROv9K", s = "Scrollable_scrollbarH_Qe9Jer", _ = "Scrollable_hover_jbU0jU", b = "Scrollable_inDrag_IvgysF", S = "Scrollable_edgeFade_69mL3v", i = {
+  root: l,
+  scrollV: o,
+  scrollH: r,
+  container: c,
+  containerStickToBottom: t,
+  content: e,
+  scrollbar: a,
+  scrollbarV: n,
+  scrollbarH: s,
+  hover: _,
+  inDrag: b,
+  edgeFade: S
+};
+export {
+  c as container,
+  t as containerStickToBottom,
+  e as content,
+  i as default,
+  S as edgeFade,
+  _ as hover,
+  b as inDrag,
+  l as root,
+  r as scrollH,
+  o as scrollV,
+  a as scrollbar,
+  s as scrollbarH,
+  n as scrollbarV
+};
+//# sourceMappingURL=Scrollable.module.css.js.map

package/dist/Scrollable/Scrollable.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollable.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/Scrollable/index.d.ts

@@ -0,0 +1,10 @@
+export * from './Scrollable';
+export { useScrollable, type ScrollableContextValue } from './scrollable-context';
+export { elementScrollAxisSource, type ScrollAxisMetrics, type ScrollAxisSource, } from './scrollAxisSource';
+export { ScrollChromeBars, type ScrollChromeBarsProps } from './ScrollChromeBars';
+export { ScrollChromeRoot, type ScrollChromeRootProps } from './ScrollChromeRoot';
+export { ScrollContainer, type ScrollContainerProps } from './ScrollContainer';
+export * from './ScrollExpandChevronButton';
+export { useScrollChrome, type ScrollChromeEdges, type UseScrollChromeOptions, type UseScrollChromeResult } from './useScrollChrome';
+export type { ScrollToBottomOptions, StickToBottomAnimation, StickToBottomInstance, StickToBottomOptions, } from '../hooks/useStickToBottom';
+//# sourceMappingURL=index.d.ts.map

package/dist/Scrollable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Scrollable/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,KAAK,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAClF,OAAO,EACH,uBAAuB,EACvB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACxB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,KAAK,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAErI,YAAY,EACR,qBAAqB,EACrB,sBAAsB,EACtB,qBAAqB,EACrB,oBAAoB,GACvB,MAAM,2BAA2B,CAAC"}

package/dist/Scrollable/index.js

@@ -0,0 +1,20 @@
+import { SCROLLABLE_OVERLAY_SLOT as e, Scrollable as l } from "./Scrollable.js";
+import { useScrollable as m } from "./scrollable-context.js";
+import { elementScrollAxisSource as x } from "./scrollAxisSource.js";
+import { ScrollChromeBars as p } from "./ScrollChromeBars.js";
+import { ScrollChromeRoot as n } from "./ScrollChromeRoot.js";
+import { ScrollContainer as a } from "./ScrollContainer.js";
+import { ScrollExpandChevronButton as h } from "./ScrollExpandChevronButton.js";
+import { useScrollChrome as u } from "./useScrollChrome.js";
+export {
+  e as SCROLLABLE_OVERLAY_SLOT,
+  p as ScrollChromeBars,
+  n as ScrollChromeRoot,
+  a as ScrollContainer,
+  h as ScrollExpandChevronButton,
+  l as Scrollable,
+  x as elementScrollAxisSource,
+  u as useScrollChrome,
+  m as useScrollable
+};
+//# sourceMappingURL=index.js.map

package/dist/Scrollable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/Scrollable/scrollAxisSource.d.ts

@@ -0,0 +1,20 @@
+export type ScrollAxisMetrics = {
+    offset: number;
+    scrollSize: number;
+    clientSize: number;
+};
+/**
+ * Abstract scroll axis for {@link useScrollChrome}.
+ * HTML elements use {@link elementScrollAxisSource}; remote targets (e.g. iframe
+ * document) provide the same surface with their own get/set/subscribe.
+ */
+export type ScrollAxisSource = {
+    getMetrics: () => ScrollAxisMetrics | null;
+    setOffset: (offset: number) => void;
+    /** Notify chrome to redraw (scroll, resize, remote update). */
+    subscribe?: (onChange: () => void) => () => void;
+    /** ResizeObserver target when size changes are not covered by subscribe. */
+    getObserveElement?: () => Element | null;
+};
+export declare function elementScrollAxisSource(getElement: () => HTMLElement | null, axis: 'vertical' | 'horizontal'): ScrollAxisSource;
+//# sourceMappingURL=scrollAxisSource.d.ts.map

package/dist/Scrollable/scrollAxisSource.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollAxisSource.d.ts","sourceRoot":"","sources":["../../src/Scrollable/scrollAxisSource.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC3B,UAAU,EAAE,MAAM,iBAAiB,GAAG,IAAI,CAAC;IAC3C,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;IACjD,4EAA4E;IAC5E,iBAAiB,CAAC,EAAE,MAAM,OAAO,GAAG,IAAI,CAAC;CAC5C,CAAC;AAEF,wBAAgB,uBAAuB,CACnC,UAAU,EAAE,MAAM,WAAW,GAAG,IAAI,EACpC,IAAI,EAAE,UAAU,GAAG,YAAY,GAChC,gBAAgB,CA8ClB"}

package/dist/Scrollable/scrollAxisSource.js

@@ -0,0 +1,31 @@
+function c(l, s) {
+  const t = s === "vertical";
+  return {
+    getMetrics: () => {
+      const e = l();
+      return e ? {
+        offset: t ? e.scrollTop : e.scrollLeft,
+        scrollSize: t ? e.scrollHeight : e.scrollWidth,
+        clientSize: t ? e.clientHeight : e.clientWidth
+      } : null;
+    },
+    setOffset: (e) => {
+      const r = l();
+      r && (t ? r.scrollTop = e : r.scrollLeft = e);
+    },
+    subscribe: (e) => {
+      const r = l();
+      return r ? (r.addEventListener("scroll", e, {
+        passive: !0
+      }), () => {
+        r.removeEventListener("scroll", e);
+      }) : () => {
+      };
+    },
+    getObserveElement: () => l()
+  };
+}
+export {
+  c as elementScrollAxisSource
+};
+//# sourceMappingURL=scrollAxisSource.js.map

package/dist/Scrollable/scrollAxisSource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollAxisSource.js","sources":["../../src/Scrollable/scrollAxisSource.ts"],"sourcesContent":["export type ScrollAxisMetrics = {\n    offset: number;\n    scrollSize: number;\n    clientSize: number;\n};\n\n/**\n * Abstract scroll axis for {@link useScrollChrome}.\n * HTML elements use {@link elementScrollAxisSource}; remote targets (e.g. iframe\n * document) provide the same surface with their own get/set/subscribe.\n */\nexport type ScrollAxisSource = {\n    getMetrics: () => ScrollAxisMetrics | null;\n    setOffset: (offset: number) => void;\n    /** Notify chrome to redraw (scroll, resize, remote update). */\n    subscribe?: (onChange: () => void) => () => void;\n    /** ResizeObserver target when size changes are not covered by subscribe. */\n    getObserveElement?: () => Element | null;\n};\n\nexport function elementScrollAxisSource(\n    getElement: () => HTMLElement | null,\n    axis: 'vertical' | 'horizontal'\n): ScrollAxisSource {\n    const vertical = axis === 'vertical';\n\n    return {\n        getMetrics: () => {\n            const el = getElement();\n\n            if (!el) {\n                return null;\n            }\n\n            return {\n                offset: vertical ? el.scrollTop : el.scrollLeft,\n                scrollSize: vertical ? el.scrollHeight : el.scrollWidth,\n                clientSize: vertical ? el.clientHeight : el.clientWidth,\n            };\n        },\n        setOffset: (offset) => {\n            const el = getElement();\n\n            if (!el) {\n                return;\n            }\n\n            if (vertical) {\n                el.scrollTop = offset;\n            }\n            else {\n                el.scrollLeft = offset;\n            }\n        },\n        subscribe: (onChange) => {\n            const el = getElement();\n\n            if (!el) {\n                return () => {};\n            }\n\n            el.addEventListener('scroll', onChange, { passive: true });\n\n            return () => {\n                el.removeEventListener('scroll', onChange);\n            };\n        },\n        getObserveElement: () => getElement(),\n    };\n}\n"],"names":["elementScrollAxisSource","getElement","axis","vertical","el","offset","onChange"],"mappings":"AAMO,SAASA,EAAwBC,GAAYC,GAAM;AACxD,QAAMC,IAAWD,MAAS;AAC1B,SAAO;AAAA,IACL,YAAY,MAAM;AAChB,YAAME,IAAKH,EAAA;AACX,aAAKG,IAGE;AAAA,QACL,QAAQD,IAAWC,EAAG,YAAYA,EAAG;AAAA,QACrC,YAAYD,IAAWC,EAAG,eAAeA,EAAG;AAAA,QAC5C,YAAYD,IAAWC,EAAG,eAAeA,EAAG;AAAA,MAAA,IALrC;AAAA,IAOX;AAAA,IACA,WAAW,CAAAC,MAAU;AACnB,YAAMD,IAAKH,EAAA;AACX,MAAKG,MAGDD,IACFC,EAAG,YAAYC,IAEfD,EAAG,aAAaC;AAAA,IAEpB;AAAA,IACA,WAAW,CAAAC,MAAY;AACrB,YAAMF,IAAKH,EAAA;AACX,aAAKG,KAGLA,EAAG,iBAAiB,UAAUE,GAAU;AAAA,QACtC,SAAS;AAAA,MAAA,CACV,GACM,MAAM;AACX,QAAAF,EAAG,oBAAoB,UAAUE,CAAQ;AAAA,MAC3C,KAPS,MAAM;AAAA,MAAC;AAAA,IAQlB;AAAA,IACA,mBAAmB,MAAML,EAAA;AAAA,EAAW;AAExC;"}

package/dist/Scrollable/scrollable-context.d.ts

@@ -0,0 +1,26 @@
+import type { StickToBottomInstance } from '../hooks/useStickToBottom';
+/**
+ * Value exposed to descendants of {@link Scrollable}.
+ * When `stickToBottom` is `false` on the parent, `stickToBottom` is `null`
+ * (hook still runs with `enabled: false`; use the prop/API to pause without unmounting).
+ */
+export type ScrollableContextValue = {
+    stickToBottom: StickToBottomInstance | null;
+    /** Jump the vertical scrollport to the top (`scrollTop = 0`). */
+    scrollToTop: () => void;
+    /** Vertical axis: near the top (`scrollTop` ≈ 0). False when vertical scrolling is off. */
+    atVerticalStart: boolean;
+    /** Vertical axis: near the bottom (`scrollTop` + `clientHeight` ≈ `scrollHeight`). False when vertical scrolling is off. */
+    atVerticalEnd: boolean;
+    /** Horizontal axis: near the left (`scrollLeft` ≈ 0). False when horizontal scrolling is off. */
+    atHorizontalStart: boolean;
+    /** Horizontal axis: near the right (`scrollLeft` + `clientWidth` ≈ `scrollWidth`). False when horizontal scrolling is off. */
+    atHorizontalEnd: boolean;
+};
+export declare const ScrollableContext: import("react").Context<ScrollableContextValue | null>;
+/**
+ * Read stick-to-bottom state and actions for the enclosing {@link Scrollable}.
+ * For a bare scroll container outside `Scrollable`, use {@link useStickToBottom} directly.
+ */
+export declare function useScrollable(): ScrollableContextValue;
+//# sourceMappingURL=scrollable-context.d.ts.map

package/dist/Scrollable/scrollable-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollable-context.d.ts","sourceRoot":"","sources":["../../src/Scrollable/scrollable-context.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAEvE;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACjC,aAAa,EAAE,qBAAqB,GAAG,IAAI,CAAC;IAC5C,iEAAiE;IACjE,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,2FAA2F;IAC3F,eAAe,EAAE,OAAO,CAAC;IACzB,4HAA4H;IAC5H,aAAa,EAAE,OAAO,CAAC;IACvB,iGAAiG;IACjG,iBAAiB,EAAE,OAAO,CAAC;IAC3B,8HAA8H;IAC9H,eAAe,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,wDAAqD,CAAC;AAEpF;;;GAGG;AACH,wBAAgB,aAAa,IAAI,sBAAsB,CAQtD"}

package/dist/Scrollable/scrollable-context.js

@@ -0,0 +1,13 @@
+import { use as t, createContext as l } from "react";
+const o = /* @__PURE__ */ l(null);
+function n() {
+  const e = t(o);
+  if (!e)
+    throw new Error("useScrollable must be used within Scrollable");
+  return e;
+}
+export {
+  o as ScrollableContext,
+  n as useScrollable
+};
+//# sourceMappingURL=scrollable-context.js.map

package/dist/Scrollable/scrollable-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollable-context.js","sources":["../../src/Scrollable/scrollable-context.tsx"],"sourcesContent":["import { createContext, use } from 'react';\n\nimport type { StickToBottomInstance } from '../hooks/useStickToBottom';\n\n/**\n * Value exposed to descendants of {@link Scrollable}.\n * When `stickToBottom` is `false` on the parent, `stickToBottom` is `null`\n * (hook still runs with `enabled: false`; use the prop/API to pause without unmounting).\n */\nexport type ScrollableContextValue = {\n    stickToBottom: StickToBottomInstance | null;\n    /** Jump the vertical scrollport to the top (`scrollTop = 0`). */\n    scrollToTop: () => void;\n    /** Vertical axis: near the top (`scrollTop` ≈ 0). False when vertical scrolling is off. */\n    atVerticalStart: boolean;\n    /** Vertical axis: near the bottom (`scrollTop` + `clientHeight` ≈ `scrollHeight`). False when vertical scrolling is off. */\n    atVerticalEnd: boolean;\n    /** Horizontal axis: near the left (`scrollLeft` ≈ 0). False when horizontal scrolling is off. */\n    atHorizontalStart: boolean;\n    /** Horizontal axis: near the right (`scrollLeft` + `clientWidth` ≈ `scrollWidth`). False when horizontal scrolling is off. */\n    atHorizontalEnd: boolean;\n};\n\nexport const ScrollableContext = createContext<ScrollableContextValue | null>(null);\n\n/**\n * Read stick-to-bottom state and actions for the enclosing {@link Scrollable}.\n * For a bare scroll container outside `Scrollable`, use {@link useStickToBottom} directly.\n */\nexport function useScrollable(): ScrollableContextValue {\n    const ctx = use(ScrollableContext);\n\n    if (!ctx) {\n        throw new Error('useScrollable must be used within Scrollable');\n    }\n\n    return ctx;\n}\n"],"names":["ScrollableContext","useScrollable","ctx","use"],"mappings":";AAQO,MAAMA,sBAA+C,IAAI;AAMzD,SAASC,IAAgB;AAC9B,QAAMC,IAAMC,EAAIH,CAAiB;AACjC,MAAI,CAACE;AACH,UAAM,IAAI,MAAM,8CAA8C;AAEhE,SAAOA;AACT;"}

package/dist/Scrollable/useScrollChrome.d.ts

@@ -0,0 +1,38 @@
+import type { ScrollAxisSource } from './scrollAxisSource';
+export type ScrollChromeEdges = {
+    atVerticalStart: boolean;
+    atVerticalEnd: boolean;
+    atHorizontalStart: boolean;
+    atHorizontalEnd: boolean;
+};
+export type UseScrollChromeOptions = {
+    verticalSource?: ScrollAxisSource | null;
+    horizontalSource?: ScrollAxisSource | null;
+    /**
+     * When a source identity changes (e.g. external scroll target mounts),
+     * pass a new key so listeners and ResizeObserver re-bind.
+     */
+    sourceKey?: unknown;
+    gap?: number;
+    alwaysShowScrollbar?: boolean;
+    poolingInterval?: number;
+};
+export type UseScrollChromeResult = {
+    rootRef: React.RefObject<HTMLDivElement | null>;
+    edgesRef: React.RefObject<ScrollChromeEdges>;
+    setScrollbarV: (el: HTMLDivElement | null) => void;
+    setScrollbarH: (el: HTMLDivElement | null) => void;
+    /** Force a chrome redraw (e.g. after layout that sources do not observe). */
+    redraw: () => void;
+    handlePointerDown: (e: React.PointerEvent) => void;
+    rootPointerHandlers: {
+        onPointerEnter: () => void;
+        onPointerLeave: () => void;
+    };
+};
+/**
+ * Custom scrollbar chrome driven by direct DOM updates — no React state on scroll.
+ * Shared by {@link Scrollable} and app-local scroll chrome (e.g. layers tree, frame page).
+ */
+export declare function useScrollChrome({ verticalSource, horizontalSource, sourceKey, gap, alwaysShowScrollbar, poolingInterval, }: UseScrollChromeOptions): UseScrollChromeResult;
+//# sourceMappingURL=useScrollChrome.d.ts.map

package/dist/Scrollable/useScrollChrome.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollChrome.d.ts","sourceRoot":"","sources":["../../src/Scrollable/useScrollChrome.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,MAAM,MAAM,iBAAiB,GAAG;IAC5B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACjC,cAAc,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC3C;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAChC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC7C,aAAa,EAAE,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,aAAa,EAAE,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,6EAA6E;IAC7E,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;IACnD,mBAAmB,EAAE;QACjB,cAAc,EAAE,MAAM,IAAI,CAAC;QAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;KAC9B,CAAC;CACL,CAAC;AA0FF;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC5B,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,GAAO,EACP,mBAAmB,EACnB,eAAe,GAClB,EAAE,sBAAsB,GAAG,qBAAqB,CAsRhD"}

package/dist/Scrollable/useScrollChrome.js

@@ -0,0 +1,177 @@
+import { useRef as a, useCallback as g, useMemo as q, useLayoutEffect as L, useEffect as C } from "react";
+import H from "./Scrollable.module.css.js";
+const N = {
+  start: "atVerticalStart",
+  end: "atVerticalEnd",
+  startAttr: "data-scroll-v-start",
+  endAttr: "data-scroll-v-end",
+  showAttr: "data-scroll-show-v"
+}, Z = {
+  start: "atHorizontalStart",
+  end: "atHorizontalEnd",
+  startAttr: "data-scroll-h-start",
+  endAttr: "data-scroll-h-end",
+  showAttr: "data-scroll-show-h"
+};
+function I(n, o, c) {
+  o[c.start] = !1, o[c.end] = !1, n && (n.removeAttribute(c.startAttr), n.removeAttribute(c.endAttr), n.removeAttribute(c.showAttr));
+}
+function x(n, o, c, m, b, l, z) {
+  if (!o) {
+    I(n, b, l);
+    return;
+  }
+  const p = o.getMetrics();
+  if (!p || p.clientSize <= 0 || p.scrollSize <= 0) {
+    I(n, b, l);
+    return;
+  }
+  const {
+    offset: S,
+    scrollSize: h,
+    clientSize: A
+  } = p, R = 1, f = z / A * 100, w = A / h * 100 - f * 2, O = S / h * 100 + f, i = w < 100 - f * 2, v = i ? S <= R : !0, E = i ? S + A >= h - R : !0;
+  m.current = h, c && (c.style.setProperty("--ms-thumb-length", `${w}%`), c.style.setProperty("--ms-thumb-offset", `${O}%`)), b[l.start] = v, b[l.end] = E, n && (n.setAttribute(l.startAttr, String(v)), n.setAttribute(l.endAttr, String(E)), n.setAttribute(l.showAttr, i ? "true" : "false"));
+}
+function Q({
+  verticalSource: n,
+  horizontalSource: o,
+  sourceKey: c,
+  gap: m = 0,
+  alwaysShowScrollbar: b,
+  poolingInterval: l
+}) {
+  const z = a(null), p = a(null), S = a(null), h = a({
+    atVerticalStart: !0,
+    atVerticalEnd: !0,
+    atHorizontalStart: !0,
+    atHorizontalEnd: !0
+  }), A = a(null), R = a(!1), f = a(null), w = a(0), O = a(0), i = a({
+    hovered: !1,
+    dragging: !1
+  }), v = a(n), E = a(o);
+  v.current = n, E.current = o;
+  const F = g((t) => {
+    p.current = t;
+  }, []), G = g((t) => {
+    S.current = t;
+  }, []), d = g(() => {
+    const t = z.current;
+    if (!t)
+      return;
+    const {
+      hovered: e,
+      dragging: s
+    } = i.current;
+    t.classList.toggle(H.hover, b || e), t.classList.toggle(H.inDrag, s);
+  }, [b]), u = g(() => {
+    R.current = !1;
+    const t = z.current, e = h.current;
+    x(t, v.current, p.current, w, e, N, m), x(t, E.current, S.current, O, e, Z, m);
+  }, [m]), M = g((t, e) => {
+    const s = e ? v.current : E.current, r = s?.getMetrics();
+    !s || !r || r.clientSize <= 0 || (t.preventDefault(), t.stopPropagation(), f.current = {
+      source: s,
+      isVertical: e,
+      fromScrollOffset: r.offset,
+      fromScrollSize: r.scrollSize,
+      fromOffset: e ? t.screenY : t.screenX,
+      totalDistance: r.clientSize - m * 2
+    });
+  }, [m]), P = g((t) => {
+    const e = f.current;
+    if (!e || e.totalDistance === 0)
+      return;
+    t.preventDefault(), t.stopPropagation(), t.stopImmediatePropagation();
+    const {
+      source: s,
+      isVertical: r,
+      fromOffset: D,
+      fromScrollOffset: X,
+      fromScrollSize: Y,
+      totalDistance: _
+    } = e, $ = ((r ? t.screenY : t.screenX) - D) / _;
+    s.setOffset(X + Y * $);
+  }, []), V = g((t) => {
+    t.preventDefault(), t.stopPropagation(), t.stopImmediatePropagation(), f.current = null;
+  }, []), T = g((t) => {
+    const e = t.target.classList.contains(H.scrollbarV);
+    M(t, e), i.current.dragging = !0, d();
+    const s = new AbortController();
+    document.addEventListener("pointermove", (r) => {
+      P(r);
+    }, {
+      signal: s.signal,
+      capture: !0
+    }), document.addEventListener("pointerup", (r) => {
+      s.abort(), P(r), V(r), i.current.dragging = !1, d();
+    }, {
+      signal: s.signal,
+      capture: !0
+    });
+  }, [M, P, V, d]), U = q(() => ({
+    onPointerEnter: () => {
+      i.current.hovered = !0, d();
+    },
+    onPointerLeave: () => {
+      i.current.hovered = !1, d();
+    }
+  }), [d]);
+  return L(() => {
+    d();
+  }, [d]), L(() => {
+    u();
+  }, [u, c, n, o]), L(() => {
+    if (typeof ResizeObserver > "u")
+      return;
+    const t = /* @__PURE__ */ new Set(), e = new ResizeObserver(() => u());
+    for (const s of [n, o]) {
+      const r = s?.getObserveElement?.();
+      r && !t.has(r) && (t.add(r), e.observe(r));
+    }
+    if (t.size === 0) {
+      e.disconnect();
+      return;
+    }
+    return () => {
+      e.disconnect();
+    };
+  }, [u, c, n, o]), C(() => {
+    const t = [], e = /* @__PURE__ */ new Set(), s = () => {
+      u(), requestAnimationFrame(() => {
+        R.current = !0;
+      });
+    };
+    for (const r of [n, o]) {
+      if (!r?.subscribe)
+        continue;
+      const D = r.getObserveElement?.();
+      if (D) {
+        if (e.has(D))
+          continue;
+        e.add(D);
+      }
+      t.push(r.subscribe(s));
+    }
+    return () => {
+      t.forEach((r) => r());
+    };
+  }, [u, c, n, o]), C(() => (A.current = setInterval(() => {
+    const t = v.current?.getMetrics(), e = E.current?.getMetrics();
+    (R.current || t != null && t.scrollSize !== w.current || e != null && e.scrollSize !== O.current) && u();
+  }, l ?? 100), () => {
+    A.current && clearInterval(A.current), f.current = null;
+  }), [u, l]), {
+    rootRef: z,
+    edgesRef: h,
+    setScrollbarV: F,
+    setScrollbarH: G,
+    redraw: u,
+    handlePointerDown: T,
+    rootPointerHandlers: U
+  };
+}
+export {
+  Q as useScrollChrome
+};
+//# sourceMappingURL=useScrollChrome.js.map

package/dist/Scrollable/useScrollChrome.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollChrome.js","sources":["../../src/Scrollable/useScrollChrome.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';\n\nimport styles from './Scrollable.module.css';\n\nimport type { ScrollAxisSource } from './scrollAxisSource';\n\nexport type ScrollChromeEdges = {\n    atVerticalStart: boolean;\n    atVerticalEnd: boolean;\n    atHorizontalStart: boolean;\n    atHorizontalEnd: boolean;\n};\n\nexport type UseScrollChromeOptions = {\n    verticalSource?: ScrollAxisSource | null;\n    horizontalSource?: ScrollAxisSource | null;\n    /**\n     * When a source identity changes (e.g. external scroll target mounts),\n     * pass a new key so listeners and ResizeObserver re-bind.\n     */\n    sourceKey?: unknown;\n    gap?: number;\n    alwaysShowScrollbar?: boolean;\n    poolingInterval?: number;\n};\n\nexport type UseScrollChromeResult = {\n    rootRef: React.RefObject<HTMLDivElement | null>;\n    edgesRef: React.RefObject<ScrollChromeEdges>;\n    setScrollbarV: (el: HTMLDivElement | null) => void;\n    setScrollbarH: (el: HTMLDivElement | null) => void;\n    /** Force a chrome redraw (e.g. after layout that sources do not observe). */\n    redraw: () => void;\n    handlePointerDown: (e: React.PointerEvent) => void;\n    rootPointerHandlers: {\n        onPointerEnter: () => void;\n        onPointerLeave: () => void;\n    };\n};\n\ntype AxisEdgeKeys = {\n    start: keyof ScrollChromeEdges;\n    end: keyof ScrollChromeEdges;\n    startAttr: string;\n    endAttr: string;\n    showAttr: string;\n};\n\nconst VERTICAL_EDGES: AxisEdgeKeys = {\n    start: 'atVerticalStart',\n    end: 'atVerticalEnd',\n    startAttr: 'data-scroll-v-start',\n    endAttr: 'data-scroll-v-end',\n    showAttr: 'data-scroll-show-v',\n};\n\nconst HORIZONTAL_EDGES: AxisEdgeKeys = {\n    start: 'atHorizontalStart',\n    end: 'atHorizontalEnd',\n    startAttr: 'data-scroll-h-start',\n    endAttr: 'data-scroll-h-end',\n    showAttr: 'data-scroll-show-h',\n};\n\nfunction clearAxisEdges(\n    root: HTMLDivElement | null,\n    edges: ScrollChromeEdges,\n    keys: AxisEdgeKeys\n) {\n    edges[keys.start] = false;\n    edges[keys.end] = false;\n\n    if (root) {\n        root.removeAttribute(keys.startAttr);\n        root.removeAttribute(keys.endAttr);\n        root.removeAttribute(keys.showAttr);\n    }\n}\n\nfunction drawAxis(\n    root: HTMLDivElement | null,\n    source: ScrollAxisSource | null | undefined,\n    scrollbar: HTMLDivElement | null,\n    scrollSizeRef: { current: number },\n    edges: ScrollChromeEdges,\n    keys: AxisEdgeKeys,\n    gap: number\n) {\n    if (!source) {\n        clearAxisEdges(root, edges, keys);\n\n        return;\n    }\n\n    const metrics = source.getMetrics();\n\n    if (!metrics || metrics.clientSize <= 0 || metrics.scrollSize <= 0) {\n        clearAxisEdges(root, edges, keys);\n\n        return;\n    }\n\n    const { offset, scrollSize, clientSize } = metrics;\n    const edgeEpsilon = 1;\n    const gapPercent = (gap / clientSize) * 100;\n    const thumbLength = (clientSize / scrollSize * 100) - (gapPercent * 2);\n    const thumbOffset = (offset / scrollSize * 100) + gapPercent;\n    const show = thumbLength < 100 - (gapPercent * 2);\n    const atStart = show ? offset <= edgeEpsilon : true;\n    const atEnd = show ? offset + clientSize >= scrollSize - edgeEpsilon : true;\n\n    scrollSizeRef.current = scrollSize;\n\n    if (scrollbar) {\n        scrollbar.style.setProperty('--ms-thumb-length', `${ thumbLength }%`);\n        scrollbar.style.setProperty('--ms-thumb-offset', `${ thumbOffset }%`);\n    }\n\n    edges[keys.start] = atStart;\n    edges[keys.end] = atEnd;\n\n    if (root) {\n        root.setAttribute(keys.startAttr, String(atStart));\n        root.setAttribute(keys.endAttr, String(atEnd));\n        root.setAttribute(keys.showAttr, show ? 'true' : 'false');\n    }\n}\n\n/**\n * Custom scrollbar chrome driven by direct DOM updates — no React state on scroll.\n * Shared by {@link Scrollable} and app-local scroll chrome (e.g. layers tree, frame page).\n */\nexport function useScrollChrome({\n    verticalSource,\n    horizontalSource,\n    sourceKey,\n    gap = 0,\n    alwaysShowScrollbar,\n    poolingInterval,\n}: UseScrollChromeOptions): UseScrollChromeResult {\n    const rootRef = useRef<HTMLDivElement>(null);\n    const scrollbarVRef = useRef<HTMLDivElement>(null);\n    const scrollbarHRef = useRef<HTMLDivElement>(null);\n\n    const edgesRef = useRef<ScrollChromeEdges>({\n        atVerticalStart: true,\n        atVerticalEnd: true,\n        atHorizontalStart: true,\n        atHorizontalEnd: true,\n    });\n\n    const rafIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);\n    const shouldForceDrawRef = useRef(false);\n\n    const dragMetaRef = useRef<{\n        source: ScrollAxisSource;\n        isVertical: boolean;\n        fromScrollOffset: number;\n        fromScrollSize: number;\n        fromOffset: number;\n        totalDistance: number;\n    } | null>(null);\n\n    const scrollSizeVRef = useRef(0);\n    const scrollSizeHRef = useRef(0);\n\n    const chromeRef = useRef({\n        hovered: false,\n        dragging: false,\n    });\n\n    const verticalSourceRef = useRef(verticalSource);\n    const horizontalSourceRef = useRef(horizontalSource);\n\n    verticalSourceRef.current = verticalSource;\n    horizontalSourceRef.current = horizontalSource;\n\n    const setScrollbarV = useCallback((el: HTMLDivElement | null) => {\n        scrollbarVRef.current = el;\n    }, []);\n\n    const setScrollbarH = useCallback((el: HTMLDivElement | null) => {\n        scrollbarHRef.current = el;\n    }, []);\n\n    const applyChromeClasses = useCallback(() => {\n        const root = rootRef.current;\n\n        if (!root) {\n            return;\n        }\n\n        const { hovered, dragging } = chromeRef.current;\n\n        root.classList.toggle(styles.hover, alwaysShowScrollbar || hovered);\n        root.classList.toggle(styles.inDrag, dragging);\n    }, [alwaysShowScrollbar]);\n\n    const draw = useCallback(() => {\n        shouldForceDrawRef.current = false;\n\n        const root = rootRef.current;\n        const edges = edgesRef.current;\n\n        drawAxis(\n            root,\n            verticalSourceRef.current,\n            scrollbarVRef.current,\n            scrollSizeVRef,\n            edges,\n            VERTICAL_EDGES,\n            gap\n        );\n        drawAxis(\n            root,\n            horizontalSourceRef.current,\n            scrollbarHRef.current,\n            scrollSizeHRef,\n            edges,\n            HORIZONTAL_EDGES,\n            gap\n        );\n    }, [gap]);\n\n    const startDrag = useCallback((e: React.PointerEvent, isVertical: boolean) => {\n        const source = isVertical ? verticalSourceRef.current : horizontalSourceRef.current;\n        const metrics = source?.getMetrics();\n\n        if (!source || !metrics || metrics.clientSize <= 0) {\n            return;\n        }\n\n        e.preventDefault();\n        e.stopPropagation();\n\n        dragMetaRef.current = {\n            source,\n            isVertical,\n            fromScrollOffset: metrics.offset,\n            fromScrollSize: metrics.scrollSize,\n            fromOffset: isVertical ? e.screenY : e.screenX,\n            totalDistance: metrics.clientSize - (gap * 2),\n        };\n    }, [gap]);\n\n    const processDrag = useCallback((e: PointerEvent) => {\n        const dragMeta = dragMetaRef.current;\n\n        if (!dragMeta || dragMeta.totalDistance === 0) {\n            return;\n        }\n\n        e.preventDefault();\n        e.stopPropagation();\n        e.stopImmediatePropagation();\n\n        const { source, isVertical, fromOffset, fromScrollOffset, fromScrollSize, totalDistance } = dragMeta;\n        const toOffset = isVertical ? e.screenY : e.screenX;\n        const movePercent = (toOffset - fromOffset) / totalDistance;\n\n        source.setOffset(fromScrollOffset + (fromScrollSize * movePercent));\n    }, []);\n\n    const endDrag = useCallback((e: PointerEvent) => {\n        e.preventDefault();\n        e.stopPropagation();\n        e.stopImmediatePropagation();\n\n        dragMetaRef.current = null;\n    }, []);\n\n    const handlePointerDown = useCallback((e: React.PointerEvent) => {\n        const isVertical = (e.target as HTMLElement).classList.contains(styles.scrollbarV);\n\n        startDrag(e, isVertical);\n        chromeRef.current.dragging = true;\n        applyChromeClasses();\n\n        const abortController = new AbortController();\n\n        document.addEventListener('pointermove', (ev: PointerEvent) => {\n            processDrag(ev);\n        }, {\n            signal: abortController.signal,\n            capture: true,\n        });\n\n        document.addEventListener('pointerup', (ev: PointerEvent) => {\n            abortController.abort();\n            processDrag(ev);\n            endDrag(ev);\n            chromeRef.current.dragging = false;\n            applyChromeClasses();\n        }, {\n            signal: abortController.signal,\n            capture: true,\n        });\n    }, [startDrag, processDrag, endDrag, applyChromeClasses]);\n\n    const rootPointerHandlers = useMemo(\n        () => ({\n            onPointerEnter: () => {\n                chromeRef.current.hovered = true;\n                applyChromeClasses();\n            },\n            onPointerLeave: () => {\n                chromeRef.current.hovered = false;\n                applyChromeClasses();\n            },\n        }),\n        [applyChromeClasses]\n    );\n\n    useLayoutEffect(() => {\n        applyChromeClasses();\n    }, [applyChromeClasses]);\n\n    useLayoutEffect(() => {\n        draw();\n    }, [draw, sourceKey, verticalSource, horizontalSource]);\n\n    useLayoutEffect(() => {\n        if (typeof ResizeObserver === 'undefined') {\n            return;\n        }\n\n        const observed = new Set<Element>();\n        const ro = new ResizeObserver(() => draw());\n\n        for (const source of [verticalSource, horizontalSource]) {\n            const el = source?.getObserveElement?.();\n\n            if (el && !observed.has(el)) {\n                observed.add(el);\n                ro.observe(el);\n            }\n        }\n\n        if (observed.size === 0) {\n            ro.disconnect();\n\n            return;\n        }\n\n        return () => {\n            ro.disconnect();\n        };\n    }, [draw, sourceKey, verticalSource, horizontalSource]);\n\n    useEffect(() => {\n        const disposers: Array<() => void> = [];\n        const subscribedElements = new Set<Element>();\n\n        const onChange = () => {\n            draw();\n            requestAnimationFrame(() => {\n                shouldForceDrawRef.current = true;\n            });\n        };\n\n        for (const source of [verticalSource, horizontalSource]) {\n            if (!source?.subscribe) {\n                continue;\n            }\n\n            // Same DOM node → one scroll listener (both axes on one element).\n            const el = source.getObserveElement?.();\n\n            if (el) {\n                if (subscribedElements.has(el)) {\n                    continue;\n                }\n\n                subscribedElements.add(el);\n            }\n\n            disposers.push(source.subscribe(onChange));\n        }\n\n        return () => {\n            disposers.forEach(dispose => dispose());\n        };\n    }, [draw, sourceKey, verticalSource, horizontalSource]);\n\n    useEffect(() => {\n        rafIntervalRef.current = setInterval(() => {\n            const vMetrics = verticalSourceRef.current?.getMetrics();\n            const hMetrics = horizontalSourceRef.current?.getMetrics();\n\n            const needsUpdate\n                = shouldForceDrawRef.current\n                  || (vMetrics != null && vMetrics.scrollSize !== scrollSizeVRef.current)\n                  || (hMetrics != null && hMetrics.scrollSize !== scrollSizeHRef.current);\n\n            if (needsUpdate) {\n                draw();\n            }\n        }, poolingInterval ?? 100);\n\n        return () => {\n            if (rafIntervalRef.current) {\n                clearInterval(rafIntervalRef.current);\n            }\n\n            dragMetaRef.current = null;\n        };\n    }, [draw, poolingInterval]);\n\n    return {\n        rootRef,\n        edgesRef,\n        setScrollbarV,\n        setScrollbarH,\n        redraw: draw,\n        handlePointerDown,\n        rootPointerHandlers,\n    };\n}\n"],"names":["VERTICAL_EDGES","HORIZONTAL_EDGES","clearAxisEdges","root","edges","keys","drawAxis","source","scrollbar","scrollSizeRef","gap","metrics","offset","scrollSize","clientSize","edgeEpsilon","gapPercent","thumbLength","thumbOffset","show","atStart","atEnd","useScrollChrome","verticalSource","horizontalSource","sourceKey","alwaysShowScrollbar","poolingInterval","rootRef","useRef","scrollbarVRef","scrollbarHRef","edgesRef","rafIntervalRef","shouldForceDrawRef","dragMetaRef","scrollSizeVRef","scrollSizeHRef","chromeRef","verticalSourceRef","horizontalSourceRef","setScrollbarV","useCallback","el","setScrollbarH","applyChromeClasses","hovered","dragging","styles","draw","startDrag","e","isVertical","processDrag","dragMeta","fromOffset","fromScrollOffset","fromScrollSize","totalDistance","movePercent","endDrag","handlePointerDown","abortController","ev","rootPointerHandlers","useMemo","useLayoutEffect","observed","ro","useEffect","disposers","subscribedElements","onChange","dispose","vMetrics","hMetrics"],"mappings":"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"}

package/dist/Select/Select.d.ts

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'react';
+export type SelectSize = 'xs' | 'sm' | 'md' | 'lg';
+export type SelectVariant = 'filled' | 'bordered' | 'transparent';
+export type SelectColor = 'default' | 'primary';
+export type SelectValueDisplay = 'item' | 'text';
+export interface SelectProps<T extends object = object> {
+    slot?: string;
+    label?: ReactNode;
+    'aria-label'?: string;
+    size?: SelectSize;
+    variant?: SelectVariant;
+    color?: SelectColor;
+    placeholder?: string;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    isActive?: boolean;
+    /**
+     * Search field in the popover (RAC Autocomplete).
+     * Opens as an Omnibox-style overlay that covers the trigger.
+     */
+    showSearch?: boolean;
+    searchPlaceholder?: string;
+    /**
+     * Only render visible fixed-height ListBox rows.
+     * Use ListBox + Virtualizer directly for sections or variable-height content.
+     */
+    isVirtualized?: boolean;
+    /** Render the selected item's textValue instead of its custom row content. */
+    valueDisplay?: SelectValueDisplay;
+    onOpenChange?: (isOpen: boolean) => void;
+    className?: string;
+    triggerClassName?: string;
+    /** Extra class on the dropdown popover (e.g. a wider min-width for described options). */
+    popoverClassName?: string;
+    /** Which side of the trigger the list opens on. */
+    placement?: 'top' | 'bottom';
+    /** Gap between the trigger and the list, in px. Defaults to 4. */
+    offset?: number;
+    shouldFlip?: boolean;
+    /** Dropdown list max height in px. */
+    maxHeight?: number;
+    icon?: ReactNode;
+    iconColor?: 'default' | 'primary';
+    items?: Iterable<T>;
+    children: (item: T) => ReactNode;
+    [key: string]: unknown;
+}
+export declare function Select<T extends object>(props: SelectProps<T>): import("react").JSX.Element;
+export declare namespace Select {
+    var displayName: string;
+}
+//# sourceMappingURL=Select.d.ts.map

package/dist/Select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,aAAa,CAAC;AAClE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAChD,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,MAAM,CAAC;AAsBjD,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0FAA0F;IAC1F,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mDAAmD;IACnD,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAClC,KAAK,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACjC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B;AAED,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,+BAuI7D;yBAvIe,MAAM"}