panelui-native 0.86.1 → 0.88.0

package/lib/typescript/src/components/pyramid-chart/index.d.ts

@@ -0,0 +1,328 @@
+/**
+ * PyramidChart — two series mirrored about a centre line, drawn and animated on
+ * the UI thread.
+ *
+ * ```tsx
+ * <PyramidChart data={penguins} xDataKey="species">
+ *   <PyramidChart.Grid />
+ *   <PyramidChart.Bar dataKey="male" side="start" />
+ *   <PyramidChart.Bar dataKey="female" side="end" />
+ *   <PyramidChart.XAxis />
+ *   <PyramidChart.YAxis />
+ *   <PyramidChart.Tooltip />
+ * </PyramidChart>
+ * ```
+ *
+ * ## The two wings share one scale
+ *
+ * This is the whole contract, and everything else here follows from it. The
+ * domain is derived from the larger of the two series' extents and used by
+ * both, so a bar twice as long as the one facing it means twice as much.
+ * Scaling each side to its own maximum produces a chart whose halves cannot be
+ * compared — which is the only thing a pyramid is for.
+ *
+ * For the same reason the centre is zero and stays there. There is no `yDomain`
+ * that starts anywhere else, because a wing cropped at its base is a length
+ * that lies.
+ *
+ * ## Lengths, not signed values
+ *
+ * Which side a series is on comes from `side`, not from the sign of its
+ * numbers, so a value is a distance outward from the centre. A negative one has
+ * no direction left to grow in and is drawn as nothing; it still appears in the
+ * readout, so a data error shows up as a gap rather than as a bar pointing the
+ * wrong way.
+ *
+ * ## Where the category names go
+ *
+ * `labelPlacement="above"`, the default, gives each row a line of its own over
+ * its pair of bars. That leaves the two wings meeting in the middle with
+ * nothing standing between them, and puts the name where it is read before the
+ * lengths it belongs to rather than beside them.
+ *
+ * `"center"` puts the names in a gutter between the wings instead — taken off
+ * the bars rather than off the edges, so both wings stay equal — and `"start"`
+ * puts them down the left, for a chart with room to spare on that side.
+ *
+ * ## Every series is one path
+ *
+ * A `Bar` draws all its rectangles as subpaths of a single animated path, split
+ * in two so the row under the finger keeps full ink while the rest fade. Thirty
+ * rows is two animated props a frame rather than thirty.
+ */
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+import { type ChartAccessibilityProps } from '../../primitives/chart-accessibility.js';
+import { type SeriesColorIndex } from '../../utils/chart.js';
+type Layer = 'svg' | 'overlay' | 'header';
+export type PyramidChartStatus = 'loading' | 'ready';
+/** Which wing a series grows into. */
+export type PyramidChartSide = 'start' | 'end';
+/** Where the category names sit. */
+export type PyramidChartLabelPlacement = 'above' | 'center' | 'start';
+export type PyramidChartDatum = Record<string, string | number | null | undefined>;
+/**
+ * The row under the finger, for something rendered *inside* the chart. A
+ * readout in the card's header is outside this provider — use
+ * `onActiveIndexChange` for that.
+ */
+export declare function usePyramidChart(): {
+    activeIndex: number;
+    activePoint: PyramidChartDatum | null;
+    xDataKey: string;
+};
+export interface PyramidChartProps extends ViewProps, ChartAccessibilityProps<PyramidChartDatum> {
+    className?: string;
+    /** The rows. Each one is a band across the chart, with a wing either side. */
+    data: PyramidChartDatum[];
+    /** Key holding the category label. Used by the axis and the readout. */
+    xDataKey?: string;
+    /**
+     * `loading` holds the bars at the centre and grows them out into the real
+     * ones when it turns `ready`. One component throughout, rather than a spinner
+     * swapped for a chart — swapping loses the transition. Add a
+     * `PyramidChart.Skeleton` for something to stand in the plot meanwhile.
+     */
+    status?: PyramidChartStatus;
+    /** Width ÷ height. `1.2` suits three or four rows in a card. */
+    aspectRatio?: number;
+    /** Milliseconds for the bars to grow out on mount. */
+    animationDuration?: number;
+    /** Milliseconds for the scale to settle after the data changes. */
+    domainDuration?: number;
+    /**
+     * Fix the far end of the shared scale instead of deriving it. The near end is
+     * zero either way — a pyramid measures outward from its centre.
+     */
+    maxValue?: number;
+    /**
+     * Where the category names sit. `above`, the default, gives each row a line
+     * of its own over its pair of bars, so the two wings meet in the middle with
+     * nothing standing between them. `center` puts the names in a gutter between
+     * the wings instead, and `start` down the left edge.
+     */
+    labelPlacement?: PyramidChartLabelPlacement;
+    /**
+     * Fraction of each band left empty, `0` to `1`. A fraction rather than a
+     * pixel gap so the proportions hold at any height.
+     */
+    barGap?: number;
+    /** Fixed bar thickness in points. Derived from the band when omitted. */
+    barWidth?: number;
+    /** Corner radius on the outward end of a bar. */
+    cornerRadius?: number;
+    /**
+     * Smallest length a non-zero bar is drawn at, in points. A value that rounds
+     * to nothing still happened, and a bar of zero length says it did not.
+     */
+    minBarLength?: number;
+    /** Opacity of the rows that are not under the finger. */
+    fadedOpacity?: number;
+    /**
+     * The row under the finger as it moves, and `-1`/`null` when it lifts.
+     * Fires when the index changes, not per frame.
+     */
+    onActiveIndexChange?: (index: number, datum: PyramidChartDatum | null) => void;
+    children?: ReactNode;
+}
+/** Imperative handle: re-run the grow-out, for a "replay" control. */
+export interface PyramidChartHandle {
+    replay: () => void;
+}
+export interface PyramidChartGridProps {
+    /** How many lines to draw per wing, not counting the centre. */
+    columns?: number;
+    color?: string;
+    dashArray?: string;
+    opacity?: number;
+    /** Draw the solid line down the middle the wings are measured from. */
+    centreLine?: boolean;
+}
+/**
+ * Lines up the value axis, mirrored, so a bar can be read against a number
+ * rather than only against the bar facing it.
+ *
+ * The centre line is drawn solid and undashed where the others are dashed: it
+ * is not a tick, it is the zero both wings are measured from.
+ */
+declare function PyramidChartGrid({ columns, color, dashArray, opacity, centreLine, }: PyramidChartGridProps): import("react").JSX.Element;
+declare namespace PyramidChartGrid {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface PyramidChartBarProps {
+    /** Column in the data holding this series' values. */
+    dataKey: string;
+    /** Which wing it grows into. */
+    side?: PyramidChartSide;
+    /** Explicit colour. Defaults to the `--color-chart-*` token for `colorIndex`. */
+    color?: string;
+    /**
+     * Which of the five chart tokens to take. Defaults to a different one per
+     * side, so two bars declared with nothing but a `dataKey` and a `side` are
+     * already told apart.
+     */
+    colorIndex?: SeriesColorIndex;
+    /** Corner radius, overriding the chart's. */
+    cornerRadius?: number;
+}
+/**
+ * One wing.
+ *
+ * Drawn as two paths rather than one rectangle per row: the row under the
+ * finger, and everything else. That is the fewest animated props that can still
+ * dim the rest — one path could not, since a path has one opacity, and a view
+ * per bar would be one animated prop per bar for the same picture.
+ */
+declare function PyramidChartBar({ dataKey, side, color, colorIndex, cornerRadius, }: PyramidChartBarProps): import("react").JSX.Element;
+declare namespace PyramidChartBar {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface PyramidChartSkeletonProps {
+    /**
+     * How many placeholder rows to draw. Defaults to one per row of data, and to
+     * five when the data has not arrived — the count is the one thing a loading
+     * chart can be honest about only if it already has the rows.
+     */
+    rows?: number;
+    /** Milliseconds for one pass of the sweep. */
+    duration?: number;
+    color?: string;
+}
+/**
+ * The loading state: equal stubs either side of the centre, with a highlight
+ * travelling across them.
+ *
+ * Equal on purpose. Placeholder wings of differing lengths are a distribution
+ * the reader has no way to tell from the real one until it changes under them,
+ * so these say only how many rows there will be and where the centre is.
+ */
+declare function PyramidChartSkeleton({ rows, duration, color }: PyramidChartSkeletonProps): import("react").JSX.Element | null;
+declare namespace PyramidChartSkeleton {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface PyramidChartXAxisProps {
+    /** How many labels per wing, not counting the zero in the middle. */
+    ticks?: number;
+    /** Format a value for its label. Defaults to a compact number. */
+    format?: (value: number) => string;
+    className?: string;
+}
+/**
+ * The value labels along the bottom, mirrored either side of a zero in the
+ * middle — the same magnitudes twice, because both wings are read outward from
+ * the centre rather than along one continuous axis.
+ *
+ * Real text rather than SVG text, so the labels follow the theme's font and the
+ * platform's text scaling. SVG text does neither.
+ */
+declare function PyramidChartXAxis({ ticks, format, className }: PyramidChartXAxisProps): import("react").JSX.Element | null;
+declare namespace PyramidChartXAxis {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface PyramidChartYAxisProps {
+    /** Turn a row into its label. Defaults to the value at `xDataKey`. */
+    format?: (datum: PyramidChartDatum, index: number) => string;
+    className?: string;
+}
+/**
+ * The category names, one per row.
+ *
+ * `above` puts each name on its own line over the pair of bars it belongs to,
+ * which leaves the two wings meeting in the middle — the name is read first and
+ * the bars are then read outward from a centre nothing is standing in.
+ *
+ * One box per band rather than a spaced column, in every placement: a row owns
+ * a *band*, so names spread evenly would be half a band out at the top and
+ * bottom.
+ */
+declare function PyramidChartYAxis({ format, className }: PyramidChartYAxisProps): import("react").JSX.Element | null;
+declare namespace PyramidChartYAxis {
+    var displayName: string;
+    var layer: Layer;
+    var axis: "y";
+}
+export interface PyramidChartTooltipProps {
+    /** Format one series' value. Defaults to a compact number. */
+    formatValue?: (value: number, key: string) => string;
+    /** Format the readout's heading from the row. Defaults to the value at xDataKey. */
+    formatX?: (datum: PyramidChartDatum) => string;
+    className?: string;
+}
+/**
+ * The readout, and the gesture that drives it.
+ *
+ * There is no crosshair. A bar is already the thing being pointed at, so
+ * highlighting its row and dimming the rest says the same thing without drawing
+ * a line through the chart.
+ *
+ * The hit area is the whole plot. A readout you have to land on the bar to
+ * summon is a readout nobody finds.
+ */
+declare function PyramidChartTooltip({ formatValue, formatX, className, }: PyramidChartTooltipProps): import("react").JSX.Element | null;
+declare namespace PyramidChartTooltip {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface PyramidChartLegendProps extends ViewProps {
+    className?: string;
+    /** Prettier names for the series keys. */
+    labels?: Record<string, string>;
+}
+/** A swatch and a name per series, in the order the series were declared. */
+declare function PyramidChartLegend({ className, labels, ...props }: PyramidChartLegendProps): import("react").JSX.Element | null;
+declare namespace PyramidChartLegend {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface PyramidChartHeaderProps extends ViewProps {
+    className?: string;
+    /** Small line above the value — what the chart is of. */
+    title?: string;
+    /** The readout. The largest thing on the card, and the first thing read. */
+    value?: string;
+    /** One muted line under the value — a period, a comparison, a total. */
+    caption?: string;
+    /** Prettier names for the series keys, as the legend takes. */
+    labels?: Record<string, string>;
+    /**
+     * Draw a swatch and a name per series along the trailing edge. Prefer this to
+     * `PyramidChart.Legend` on a chart that has a header: the legend floats over
+     * the plot, where it competes with the bars for the same corner.
+     */
+    legend?: boolean;
+    /** Trailing slot — a control, a badge, a range picker. Wins over `legend`. */
+    children?: ReactNode;
+}
+/**
+ * The strip above the plot: what the chart is of, what it currently reads, and
+ * what the two colours mean.
+ *
+ * It belongs to the chart rather than to the card around it because it is about
+ * the *plot* — the number changes as a finger moves down the rows, and the
+ * legend is the series list the chart itself is holding.
+ *
+ * The value is not derived here. A readout that follows the finger belongs to
+ * whoever owns the data — take it from `onActiveIndexChange` and pass the
+ * formatted string down.
+ */
+declare function PyramidChartHeader({ className, title, value, caption, labels, legend, children, ...props }: PyramidChartHeaderProps): import("react").JSX.Element;
+declare namespace PyramidChartHeader {
+    var displayName: string;
+    var layer: Layer;
+}
+export declare const PyramidChart: import("react").ForwardRefExoticComponent<PyramidChartProps & import("react").RefAttributes<PyramidChartHandle>> & {
+    Header: typeof PyramidChartHeader;
+    Grid: typeof PyramidChartGrid;
+    Bar: typeof PyramidChartBar;
+    Skeleton: typeof PyramidChartSkeleton;
+    XAxis: typeof PyramidChartXAxis;
+    YAxis: typeof PyramidChartYAxis;
+    Tooltip: typeof PyramidChartTooltip;
+    Legend: typeof PyramidChartLegend;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/pyramid-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/pyramid-chart/index.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/src/components/scroll-blur/index.d.ts

@@ -0,0 +1,113 @@
+/**
+ * ScrollBlur — blurs the edges of a scroll container.
+ *
+ * Content that runs past a boundary reads better receding than being cut off,
+ * and a receding edge doubles as an affordance: an edge that is going soft is
+ * an edge with more content behind it.
+ *
+ * A blur says that where a fade cannot: a fade takes the content towards the
+ * colour behind the scroller, so it only works where that colour is known and
+ * flat. A blur takes it out of focus instead, which is true over a photograph,
+ * a gradient, or a list of coloured cards. It is also what belongs under
+ * something laid *over* the scroller — a button, a header, a search field —
+ * because the content passing beneath stays visible as shape and colour while
+ * losing the detail that would compete with the thing on top.
+ *
+ * ```tsx
+ * <ScrollBlur>
+ *   <ScrollView>…</ScrollView>
+ * </ScrollBlur>
+ * ```
+ *
+ * ## The ramp is a stack and a wash, because neither alone is smooth
+ *
+ * A blur that goes from nothing to full across a band needs a per-pixel blur
+ * radius, and there is no such thing on either platform — a blur view has one
+ * strength for its whole rectangle.
+ *
+ * So the ramp is built out of several of them: each layer covers a shorter
+ * span than the last, measured from the edge, and each blurs what the layer
+ * under it has already blurred. The spans are spaced on a curve rather than
+ * evenly, which puts most of the layers in the outer third where the blur is
+ * changing fastest and the steps would otherwise be widest.
+ *
+ * That alone is not enough. Every layer has a hard edge, and a stack of hard
+ * edges is a stack of visible lines however many there are. So a gradient of
+ * `color` is washed over the top — opaque at the outer edge, clear at the
+ * inner one. It hides the seams, and it is what makes the band read as one
+ * material rather than as a pile of rectangles: the content goes soft and
+ * fades into the surface at the same time, which is what the eye expects an
+ * edge to do.
+ *
+ * That wash is why `color` matters even when the blur is drawn. Give it the
+ * surface the scrollable actually sits on — a sheet, a card, the page — or the
+ * band fades towards a colour that is not there.
+ *
+ * ## Where it cannot blur, it fades
+ *
+ * A real blur needs a native view. `expo-blur` is optional, and Reduce
+ * Transparency is a preference that outranks the design, so both cases fall
+ * back to a gradient towards `color` — the same thing `ScrollFade` draws. A
+ * blur you cannot draw is better shown as a fade than as a hard edge, and far
+ * better than as a crash.
+ *
+ * Because of that fallback, pass `color` whenever the scroller does not sit on
+ * the theme background. It is unused in the blurred case and the whole effect
+ * in the other one.
+ *
+ * Scroll position, content size and viewport size are held in shared values
+ * and read on the UI thread, so scrolling never re-renders React.
+ */
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+/** Which way the material tints. `default` follows the app's theme. */
+export type ScrollBlurTint = 'light' | 'dark' | 'default';
+export interface ScrollBlurProps extends ViewProps {
+    className?: string;
+    /** Depth of the blurred band in pixels. */
+    size?: number;
+    /** Which edges blur. */
+    edges?: 'both' | 'start' | 'end' | 'none';
+    /**
+     * Scroll axis. Inferred from the child's `horizontal` prop when omitted —
+     * pass it explicitly for children that scroll horizontally without that prop
+     * (a `FlatList` with `horizontal` set through `contentContainerStyle`, say).
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * How many blur views make up the ramp. More is smoother and costs more; the
+     * band shows visible steps below four, and past eight nobody can tell.
+     */
+    layers?: number;
+    /** Blur strength at the very edge, 0–100. The layers share it between them. */
+    intensity?: number;
+    /**
+     * Which way the material tints. Defaults to the app's theme rather than the
+     * phone's, so an app running dark on a light phone does not blur light.
+     */
+    material?: ScrollBlurTint;
+    /**
+     * The colour the band fades towards — washed over the blur, and the whole
+     * effect where there is no blur to draw.
+     *
+     * Defaults to the theme's background. Pass the surface the scrollable
+     * actually sits on, or the band fades towards a colour that is not there.
+     */
+    color?: string;
+    /**
+     * How opaque that wash gets at the outer edge, 0 to 1. Lower it to let more
+     * of the content show through the far end of the band; `0` leaves the blur
+     * bare, along with the seams between its layers.
+     */
+    tint?: number;
+    /** Distance in pixels over which an edge comes in from clear to full. */
+    fadeInDistance?: number;
+    /** Set false to render the child with no bands at all. */
+    enabled?: boolean;
+    children?: ReactNode;
+}
+export declare function ScrollBlur({ className, size, edges, orientation, layers, intensity, material, tint, color, fadeInDistance, enabled, children, ...props }: ScrollBlurProps): import("react").JSX.Element;
+export declare namespace ScrollBlur {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/scroll-blur/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/scroll-blur/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAqCtB,uEAAuE;AACvE,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAE1D,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAC1C;;;;OAIG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAUD,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,IAAS,EACT,KAAc,EACd,WAAW,EACX,MAAU,EACV,SAAc,EACd,QAAoB,EACpB,IAAW,EACX,KAAK,EACL,cAAyC,EACzC,OAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,+BA0HjB;yBAxIe,UAAU"}

package/lib/typescript/src/components/scroll-canvas/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/scroll-canvas/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAe,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACrF,OAAiB,EAIf,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;AAkBjC,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE7E,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,iDAAiD;IACjD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kFAAkF;IAClF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yEAAyE;IACzE,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,cAAc,EACd,MAAM,EACN,OAAO,EACP,MAAmB,EACnB,WAAqB,EACrB,QAAY,EACZ,KAAS,EACT,GAAS,EACT,QAAQ,EAAE,QAAQ,EAClB,OAAc,EACd,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAkFnB;yBAhGe,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/scroll-canvas/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAe,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACrF,OAAiB,EAIf,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;AAkBjC,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE7E,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,iDAAiD;IACjD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kFAAkF;IAClF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yEAAyE;IACzE,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,cAAc,EACd,MAAM,EACN,OAAO,EACP,MAAmB,EACnB,WAAqB,EACrB,QAAY,EACZ,KAAS,EACT,GAAS,EACT,QAAQ,EAAE,QAAQ,EAClB,OAAc,EACd,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAmFnB;yBAjGe,YAAY"}