@nanisoft/prism-ui 0.13.0 → 0.16.0

package/dist/components/ui/image-zoom.js

@@ -0,0 +1,169 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScanIcon, ZoomInIcon, ZoomOutIcon } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { cn } from '../../lib/utils.js';
+/**
+ * The magnification the Component holds at its smallest, and the value it returns
+ * to, as a multiple of the image's fitted size.
+ */
+const FIT = 1;
+/** The largest magnification offered when the caller names none. */
+const CEILING = 4;
+/** How much one press moves the magnification when the caller names no step. */
+const STRIDE = 0.5;
+/**
+ * The magnification every control in this Component draws.
+ *
+ * One string rather than three, for the reason `drawer.tsx` states: a control bar
+ * where the out control has its own metrics and the reset has another is a bar a
+ * reader moving by Tab finds unevenly spaced, and the difference is invisible in
+ * review.
+ *
+ * `pointer-coarse:size-11` is the coarse-pointer floor, as a step, because the bar
+ * is `flex flex-wrap items-center gap-2` and a bordered box at 44px is what a finger
+ * aims at. A band was rejected on condition 1: the controls sit eight pixels apart,
+ * and a 44px band centred on a 36px box overhangs its box by four on each side, which
+ * lands inside that gap rather than on a neighbour, so the band would buy eight
+ * pixels of reach for a target that is already only eight short and would leave the
+ * drawn box at 36. See DESIGN.md, The coarse-pointer floor.
+ */
+const CONTROL = 'text-muted-foreground hover:text-foreground border-input bg-background inline-flex size-9 items-center justify-center rounded-md border outline-none transition-colors duration-fast ease-out disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring focus-visible:ring-[3px]' +
+    ' pointer-coarse:size-11';
+/** A magnification inside the caller's bounds, so no press can leave the range. */
+function bound(value, low, high) {
+    if (!Number.isFinite(value))
+        return low;
+    if (high < low)
+        return low;
+    return Math.min(Math.max(value, low), high);
+}
+/**
+ * An image the reader magnifies where it already sits, with a frame that scrolls
+ * once it is larger than its box.
+ *
+ * **It is the `Lightbox` with the dialog taken out, and that subtraction is the
+ * whole Component.** A `Lightbox` opens a portal, traps focus, locks page scroll,
+ * swallows the Escape key and hands the reader a different place in the document
+ * to come back from. All five of those are the right price for an image the page
+ * has not shown the reader at all, where the enlargement is the only way to see
+ * it. They are the wrong price for an image the reader is already looking at:
+ * paying a focus trap to make a picture on the page bigger costs the reader their
+ * scroll position, their place in the document and their focus context, and a
+ * reader who has magnified an inline diagram and then closed the dialog lands
+ * somewhere they have to find again. So there is no portal, no overlay, no trap,
+ * no Escape key and no dismiss here. The page does not move and nothing is taken
+ * away from it. **Use a `Lightbox` when the enlargement is the only route to the
+ * image; use this when the image is already on the page and only its size is in
+ * the way.**
+ *
+ * **Prism draws the three controls and asks for their names, rather than taking
+ * the controls as a slot.** A slot would move the one guarantee that makes a
+ * magnifier usable to the caller: that the controls exist, that they are real
+ * buttons in the tab order, that they are disabled at the ends of the range, and
+ * that a reader whose control has just been disabled is moved to one that still
+ * works. That last one is not obvious and `Carousel` had to write a `useEffect`
+ * to get it right, because a disabled button leaves the tab order without giving
+ * up focus: a reader who presses zoom in at the ceiling is left focused on a
+ * control that can no longer answer Enter, Space or anything else, stranded
+ * inside the magnifier with no working control under their fingers. This
+ * Component does that move itself. The cost is that a caller who wants their own
+ * magnification controls cannot have them here, and the answer is that this is
+ * the wrong Component for a caller who wants that.
+ *
+ * **The scale transition is a transform with a token duration, and it is the only
+ * motion on the surface.** Magnifying a picture is spatial movement of a whole
+ * surface, so a reader who has asked for reduced motion gets the new size
+ * immediately and loses nothing but the travel between the two. Nothing here is
+ * guarded per call site any more: `packages/ui/src/styles.css` stops every
+ * transition under `prefers-reduced-motion` in one unlayered rule, and a
+ * `motion-safe:` beside an unguarded `transition-transform` was inert rather than
+ * cautious. The transition is on `transform` and on nothing else: an animated
+ * `width` or `height` is a layout animation on the main thread, which is the
+ * defect the compositor rule in the ambient layer exists to prevent, and a
+ * magnified diagram is large enough for that to be visible.
+ *
+ * **The scale reaches its final value before the pixels do, and that is the
+ * price of using a transform.** A transform does not change layout, so the
+ * frame's scroll extent is already at its full size on the first frame of the
+ * transition and the scrollbar arrives while the image is still travelling. The
+ * alternative is to animate the image's own size, which is a main-thread layout
+ * animation on the largest element on the page, and a scrollbar that moves a
+ * fraction early is a cheaper defect than a stuttering diagram.
+ *
+* **Panning is a scroll, not a gesture.** Once the image is larger than its frame
+ * the frame scrolls, and the reader pans with the keys they already use: the
+ * arrow keys, the space bar, the Home and End keys, and a trackpad or a finger.
+ * There is no drag to pan, no pinch and no double tap, for the reason
+ * `Lightbox` gives: each of those is a bespoke pointer model a reader has to
+ * discover, and a scrollable frame is a thing every reader already knows. The
+ * frame is a block rather than a centred flex row, because a centred child
+ * larger than its scroll container has a left edge that cannot be scrolled back
+ * to in more than one browser, and a magnified image is routinely larger than
+ * its frame.
+ *
+ * **The scale is announced, politely, in the caller's words.** The sentence is in
+   * an `aria-live="polite"` region beside the controls, so a reader who has just
+   * pressed a button is told where they are without the announcement interrupting
+   * whatever they were reading. It is polite rather than assertive for the same
+   * reason `Carousel`'s position is: the reader caused the change by pressing a
+   * control and does not need to be interrupted by it.
+ *
+ * It is a client Component, because it holds a magnification and answers presses.
+ */
+function ImageZoom({ src, alt, label, scale, minScale = FIT, maxScale = CEILING, step = STRIDE, zoomInLabel, zoomOutLabel, resetLabel, controls, onScaleChange, className, ...props }) {
+    const [at, setAt] = useState(FIT);
+    /*
+     * The caller's range, made into a range that can hold. A magnification that is
+     * not a positive number is a division that has not happened yet, and a ceiling
+     * that is not above the floor is two numbers that cannot both be true. In
+     * either case the fitted size and the default ceiling are drawn instead rather
+     * than a range that magnifies the wrong way or refuses to move, and the value
+     * actually in force is reported on the frame as `data-scale`, so a substituted
+     * bound is legible in the markup rather than only in the screenshot. That is
+     * `AspectRatio`'s rule about a value that cannot be drawn, applied to a range.
+     */
+    const low = Number.isFinite(minScale) && minScale > 0 ? minScale : FIT;
+    const high = Number.isFinite(maxScale) && maxScale > low ? maxScale : Math.max(CEILING, low);
+    const stride = Number.isFinite(step) && step !== 0 ? Math.abs(step) : STRIDE;
+    const zoomIn = useRef(null);
+    const zoomOut = useRef(null);
+    const set = useCallback((next) => {
+        const value = bound(next, low, high);
+        setAt(value);
+        onScaleChange?.(value);
+    }, [high, low, onScaleChange]);
+    const magnified = at > FIT;
+    const atFloor = at <= low;
+    const atCeiling = at >= high;
+    /*
+     * A control that has just been disabled must not keep the reader's focus. A
+     * disabled button is out of the tab order and does not give up focus, so a
+     * reader who magnifies to the ceiling is left focused on a control that can no
+     * longer answer anything. Focus is handed to the sibling that is still live,
+     * which is what a browser does when focus lands on something that has become
+     * inert, and only when the stranded control is one of this Component's two.
+     */
+    useEffect(() => {
+        const active = document.activeElement;
+        if (!(active instanceof HTMLButtonElement))
+            return;
+        if (active !== zoomIn.current && active !== zoomOut.current)
+            return;
+        if (active.disabled !== true)
+            return;
+        const live = active === zoomIn.current ? zoomOut.current : zoomIn.current;
+        if (live === null || live.disabled)
+            return;
+        live.focus();
+    });
+    return (_jsxs("div", { "data-slot": "image-zoom", role: "group", "aria-label": label, className: cn('flex flex-col gap-2', className), ...props, children: [_jsx("div", { "data-slot": "image-zoom-frame", "data-scale": at, "data-zoomed": magnified || undefined, className: "overflow-auto overscroll-contain", children: _jsx("img", { "data-slot": "image-zoom-image", src: src, alt: alt, 
+                    // A transform is the one value on this element that is not a utility
+                    // class, and the reason is that the magnification is a number the
+                    // caller passed rather than one of a closed set Prism authored. A
+                    // utility would be a closed list of factors, and a magnifier whose
+                    // ceiling is whichever factor the caller happened to be closest to is a
+                    // magnifier that rounds the reader's request.
+                    style: { transform: `scale(${at})` }, className: "block h-auto w-full origin-top-left transition-transform duration-base ease-out" }) }), _jsxs("div", { "data-slot": "image-zoom-controls", className: "flex flex-wrap items-center gap-2", children: [_jsx("button", { type: "button", ref: zoomOut, "data-slot": "image-zoom-out", "aria-label": zoomOutLabel, disabled: atFloor, onClick: () => set(at - stride), className: CONTROL, children: _jsx(ZoomOutIcon, { className: "size-4", "aria-hidden": "true" }) }), magnified ? (_jsx("button", { type: "button", "data-slot": "image-zoom-reset", "aria-label": resetLabel, onClick: () => set(low), className: CONTROL, children: _jsx(ScanIcon, { className: "size-4", "aria-hidden": "true" }) })) : null, _jsx("button", { type: "button", ref: zoomIn, "data-slot": "image-zoom-in", "aria-label": zoomInLabel, disabled: atCeiling, onClick: () => set(at + stride), className: CONTROL, children: _jsx(ZoomInIcon, { className: "size-4", "aria-hidden": "true" }) }), _jsx("p", { "data-slot": "image-zoom-scale", "aria-live": "polite", className: "text-muted-foreground text-sm tabular-nums", children: scale(Math.round(at * 100)) }), controls] })] }));
+}
+export { ImageZoom };

package/dist/components/ui/intensity-grid.d.ts

@@ -0,0 +1,270 @@
+import type { ComponentProps, ReactNode } from 'react';
+/**
+ * The five steps of the intensity scale, from an empty cell to a full one.
+ *
+ * A five-step scale and not a continuous ramp, for the reason `ContributionGraph`
+ * gives for its calendar: a reader has to compare two cells at a glance, and a
+ * continuous scale is smooth and unreadable. The difference between one cell and
+ * the cell beside it is a few percent of opacity, which is nothing to see, while
+ * the difference between step two and step three is a band the eye can sort without
+ * being told what the bands mean.
+ *
+ * The type is a closed five rather than a number because the shade is what the
+ * reading is graded against, and a step is a grade. It is also the one thing in
+ * this Component that is not arithmetic over the caller's values.
+ */
+export type IntensityLevel = 0 | 1 | 2 | 3 | 4;
+/**
+ * One cell: which row, which column, and the value its shade is drawn from.
+ *
+ * A triple and not a nested array because the caller's store is already keyed this
+ * way. A matrix is a table, a table is keyed on two columns plus the measure, and
+ * asking a caller to transpose their rows into a two-dimensional array to draw one
+ * is a conversion this Component would then have to get wrong in one direction.
+ * The keys name a row and a column rather than carrying indices, so a caller can
+ * pass the cells in any order and the drawing cannot move.
+ */
+export type IntensityGridCell = {
+    /** The `key` of the row this cell belongs to. */
+    rowKey: string;
+    /** The `key` of the column this cell belongs to. */
+    columnKey: string;
+    /**
+     * The measured value, in the caller's own units.
+     *
+     * Raw magnitudes rather than a share of a maximum, for the reason
+     * `ContributionGraph` states and `Chart` states again: a caller that
+     * pre-normalises has two chances to get the scale wrong, and a mislabelled scale
+     * is a lie with a typeface on it. The largest value drawn sets the top of the
+     * scale here and the caller divides nothing.
+     */
+    value: number;
+};
+/**
+ * One row of the matrix, and the name a reader sees for it.
+ *
+ * The `key` is separate from the `label` because a label is a node and a cell
+ * refers to its row by a string. That is also what lets the caller compose a cell's
+ * spoken form from both axes: `cellLabel` receives the row and the column as they
+ * were passed, so the words in a cell's name are the words on the two headers.
+ */
+export type IntensityGridRow = {
+    /** How a cell refers to this row. Stable, and not shown. */
+    key: string;
+    /** The row's name, in the caller's words. */
+    label: ReactNode;
+};
+/**
+ * One column of the matrix, and the name a reader sees for it.
+ *
+ * The mirror of `IntensityGridRow`, and for the same reason: a cell refers to its
+ * column by a string and the header is a node.
+ */
+export type IntensityGridColumn = {
+    /** How a cell refers to this column. Stable, and not shown. */
+    key: string;
+    /** The column's name, in the caller's words. */
+    label: ReactNode;
+};
+/**
+ * One band of the caller's scale, and the step a cell inside it is filled at.
+ *
+ * **The band is a range on the caller's scale and `from` is a share of the largest
+ * value drawn**, so a caller states its scale in the same percentages the reader
+ * will think in, and four bands from 0 to 100 in quarters is the ordinary case. The
+ * range is inclusive at both ends and the first band that contains a cell's share
+ * is the band that applies, so a caller with an overlapping scale says which band
+ * wins by saying it first.
+ *
+ * Step zero is the empty cell's own fill, which is how a caller says "this band is
+ * genuinely nothing" as distinct from "there is no cell here". The two draw the
+ * same on purpose, because there is no third drawing available, and the difference
+ * survives in the markup rather than in the picture: a pair with no cell carries
+ * `data-state="absent"` and a cell in a zero band does not.
+ */
+export type IntensityGridBand = {
+    /** The lowest share of the largest value drawn that falls in this band, as a percentage. */
+    from: number;
+    /** The highest share that falls in this band, as a percentage. */
+    to: number;
+    /** The step every cell in this band is filled at. */
+    level: IntensityLevel;
+};
+/** The props the IntensityGrid accepts. */
+export interface IntensityGridProps extends Omit<ComponentProps<'figure'>, 'children'> {
+    /**
+     * The rows, in the order they are drawn and read.
+     *
+     * Every row is drawn, whether or not a cell names it, because a matrix that
+     * dropped an empty row would move every row below it up one line and the columns
+     * would stop being the columns they were a moment ago.
+     */
+    rows: readonly IntensityGridRow[];
+    /** The columns, in the order they are drawn and read. */
+    columns: readonly IntensityGridColumn[];
+    /**
+     * The cells, in any order. Each one is placed by its own keys.
+     *
+     * **A pair with no cell is an absence and is drawn as the empty cell**, which is
+     * the same decision `ContributionGraph` makes for a day nobody reported and for
+     * the same reason: there is no third drawing available. A hole would imply a
+     * measurement and a faint band would claim a number.
+     *
+     * A cell naming a row or a column that was not given throws, because the only
+     * other outcome is a cell that is silently dropped and a caller left believing
+     * the whole matrix was drawn. A datum nobody can see is worse than a build that
+     * stops.
+     */
+    cells: readonly IntensityGridCell[];
+    /**
+     * The name of the figure, read before the cells.
+     *
+     * Required rather than defaulted, for the two reasons `ChartFrame` states and
+     * `ContributionGraph` repeats: two matrices on one page are two figures a reader
+     * cannot tell apart, and a picture with no name is neither announced nor
+     * linkable. A figure named "Grid" is a Component shipping a sentence about a
+     * product it knows nothing about.
+     */
+    label: string;
+    /**
+     * The accessible name of one cell, given the cell and both of its axes.
+     *
+     * Required, and it is the one prop here that is a function rather than data,
+     * because it is the one thing Prism cannot compose. "42 findings on Kiln Wharf in
+     * March" is a sentence in a language and a calendar, and a design system that
+     * wrote it would put English and a Gregorian month name into every consumer's
+     * product. The row and the column are passed whole, so the caller can say as much
+     * or as little as its own words need and can reach for a translated month or a
+     * relative phrase.
+     *
+     * **This is the redundancy that makes the shade legal.** A shade is not
+     * information a screen reader can use, so the number behind it has to be spoken
+     * somewhere, and this is where. A grid that left the naming to a `title`
+     * attribute would be a grid whose only readable channel is a tooltip, and a
+     * tooltip is a surface that appears under a pointer rather than one a reader can
+     * ask for by moving through the document.
+     */
+    cellLabel: (cell: {
+        /** The cell as the caller passed it. */
+        cell: IntensityGridCell;
+        /** The row this cell sits in. */
+        row: IntensityGridRow;
+        /** The column this cell sits under. */
+        column: IntensityGridColumn;
+    }) => string;
+    /**
+     * The bands of the caller's scale, in the order they are read.
+     *
+     * Required, and the reason is that no Component can see it: the same value is a
+     * crisis on one estate and an ordinary Tuesday on another, so a default scale
+     * would be a claim about the caller's data made on the caller's behalf. That is
+     * the argument `MeterTone` and `StatusTone` make for holding the same judgement
+     * at arm's length, and the bands are that judgement written as data.
+     *
+     * A caller with two bands passes two and a caller with six passes six, so the
+     * scale on screen is as wide as the caller's claim about it. A cell that falls in
+     * no band is drawn as the empty cell and carries `data-state="ungraded"`, which
+     * is the honest reading of a scale that does not cover its own data.
+     */
+    bands: readonly IntensityGridBand[];
+    /** Layout only, exactly as on every Component. */
+    className?: string;
+}
+/**
+ * A matrix of two categorical axes, drawn as cells under one sequential scale.
+ *
+ * **Neither axis is a scale, and that is the whole difference from `Chart`.** A
+ * chart places a mark at a position on a continuous domain and a cell has no
+ * position: "Kiln Wharf in March" is not half way between anything, so there is no
+ * horizontal scale to draw and no vertical one to read, and `Chart`'s `mark` prop
+ * cannot type it because a mark is a way of drawing a position. So this Component
+ * draws no axis, ticks nothing, and derives its scale from the values rather than
+ * from a range the caller states. Everything below is a consequence of that rather
+ * than a preference.
+ *
+ * **What it is for, and how it differs from `ContributionGraph`.** Both draw a grid
+ * of cells filled by intensity, and the resemblance is close enough to be worth
+ * being exact about. A ContributionGraph is a calendar: its rows are the seven
+ * days, its columns are the weeks, and it works both out from the dates it was
+ * given, so a caller passes days and gets a window. This Component is two sets of
+ * categories the caller already holds, and it has no calendar, no window, no window
+ * arithmetic and no date key. Four differences follow, each from that one:
+ *
+ *   1. **The axes are named by the caller.** A month and an estate are not seven
+ *      days and a week, and there is no rule here that generates them.
+ *   2. **A pair with no cell is legal and is the common case.** A calendar has a
+ *      cell for every day in its window, so an unreported day is the interesting
+ *      state there. A matrix owes no completeness, so an absent pair is ordinary
+ *      and draws as the empty cell.
+ *   3. **The drawing is symmetric and the reading is not.** A calendar is read by
+ *      scanning a column, which is why its caller may choose which day each row
+ *      starts on. Here the row is the header and the column is the reading order,
+ *      so there is no `weekStartsOn` to pass because there is no week to start.
+ *   4. **The bands are the caller's and a calendar's are not.** `ContributionGraph`
+ *      grades against the largest count in the window because a count of commits is
+ *      a count of commits. Here the measure is unknown to Prism, so the bands are
+ *      required, and that is the difference a reader of this file is most likely to
+ *      get wrong.
+ *
+ * **The scale is derived, a band's meaning is not, and the gap between them is the
+ * honest cost.** Prism works out the largest value in the grid and reads every
+ * cell as a share of it, so the caller passes magnitudes and divides nothing. It
+ * cannot do the other half: it cannot see that forty findings on one estate is a
+ * crisis and the same forty on another is Tuesday, so `bands` is required and its
+ * entries are the caller's judgement about what each band means. **Prism cannot
+ * verify that the caller's scale is sequential.** A caller who passes a diverging
+ * scale, a categorical one, or values normalised into a range of their own
+ * invention gets a grid that reads as intensity and is not one, and nothing in the
+ * rendered output says so: there is no key, because a key would assert an ordering
+ * this Component has no way to check. The caller who wants one composes it from the
+ * same `bands` array the cells were graded with, which is why that array is data
+ * and not a callback.
+ *
+ * **The shade is redundant and never the only channel, and there is no printed
+ * number.** Every cell is a picture of a measurement and is named by `cellLabel`, so
+ * the value is spoken in the caller's own words. What Prism refuses is the other
+ * half of that sentence: a printed value in every cell. A matrix of forty cells
+ * with a number in each is a table with shading on it, and the shading is the
+ * channel the reader cannot scan, so the numbers would be covering the reason the
+ * figure exists. The cost is real, and it is the reason `CohortGrid` is a different
+ * Item: a reader who cannot rank five shades has no route to the value here at all,
+ * which is the right trade for a matrix scanned at a glance and the wrong one for a
+ * retention table read cell by cell.
+ *
+ * **A value outside the scale is clamped and counted, not thrown.** A cell above
+ * the largest value cannot exist, since the largest value sets the top, and a value
+ * below zero is a diverging measure rather than an intensity. Both are drawn at the
+ * floor or the ceiling of the scale and counted on the element as `data-clamped`,
+ * which is the arrangement `Chart` uses for a value past the end of its axis, and
+ * the count is what makes an under-specified scale visible to the caller who wrote
+ * it. `table` is the Component for a measure whose middle means something.
+ *
+ * **Four inputs throw, and a drawn lie is worse than a refusal.** No rows, no
+ * columns or no cells is a frame carrying no claim, a cell naming an axis that was
+ * not given is a measurement with nowhere to go, and two cells in one place is one
+ * measurement drawn over another with the earlier one left in the data and out of
+ * the picture. Each is a bug in the caller's code rather than a state a reader
+ * reaches, and each is reported in a console where the caller will see it. A cell
+ * whose value is not a finite number is the exception and is deliberately not one of
+ * the four: it draws as the empty cell, because a cell that says nothing and a cell
+ * whose number went missing look the same and no gate can tell them apart.
+ *
+ * **Nothing here moves, and the reason is the shade.** A hover state on a cell has
+ * to change something about the cell, and everything available is a change to the
+ * value: a wash behind it changes what the fill composites against, which is the
+ * measurement, and a border on one cell changes its neighbours' widths by a pixel.
+ * So the figure is static by construction rather than by restraint, which is also
+ * the cheapest way to satisfy a motion law that permits only state feedback.
+ *
+ * **It is a server Component, and `cellLabel` does not make it a client one.** A
+ * function prop is only a problem when it has to cross a boundary to be called, and
+ * this one never does: it is called during the render that received it, on the
+ * server, by this Component. That is the arrangement `ContributionGraph` ships and
+ * the reason its Demo is a server module too. The one consequence a caller has to
+ * know is that the function has to be written where the grid is rendered, so a grid
+ * inside an interactive panel must be composed inside that panel's own client tree,
+ * which is the price of a matrix that costs no client code at all.
+ */
+declare function IntensityGrid({ className, rows, columns, cells, label, cellLabel, bands, ...props }: IntensityGridProps): import("react").JSX.Element;
+export { IntensityGrid };
+//# sourceMappingURL=intensity-grid.d.ts.map

package/dist/components/ui/intensity-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"intensity-grid.d.ts","sourceRoot":"","sources":["../../../src/components/ui/intensity-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AAE9C;;;;;;;;;GASG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAA;IACd,oDAAoD;IACpD,SAAS,EAAE,MAAM,CAAA;IACjB;;;;;;;;OAQG;IACH,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,4DAA4D;IAC5D,GAAG,EAAE,MAAM,CAAA;IACX,6CAA6C;IAC7C,KAAK,EAAE,SAAS,CAAA;CACjB,CAAA;AAED;;;;;GAKG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,+DAA+D;IAC/D,GAAG,EAAE,MAAM,CAAA;IACX,gDAAgD;IAChD,KAAK,EAAE,SAAS,CAAA;CACjB,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,4FAA4F;IAC5F,IAAI,EAAE,MAAM,CAAA;IACZ,kEAAkE;IAClE,EAAE,EAAE,MAAM,CAAA;IACV,qDAAqD;IACrD,KAAK,EAAE,cAAc,CAAA;CACtB,CAAA;AA2CD,2CAA2C;AAC3C,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IACpF;;;;;;OAMG;IACH,IAAI,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACjC,yDAAyD;IACzD,OAAO,EAAE,SAAS,mBAAmB,EAAE,CAAA;IACvC;;;;;;;;;;;;OAYG;IACH,KAAK,EAAE,SAAS,iBAAiB,EAAE,CAAA;IACnC;;;;;;;;OAQG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;;;;;;;;;;OAiBG;IACH,SAAS,EAAE,CAAC,IAAI,EAAE;QAChB,wCAAwC;QACxC,IAAI,EAAE,iBAAiB,CAAA;QACvB,iCAAiC;QACjC,GAAG,EAAE,gBAAgB,CAAA;QACrB,uCAAuC;QACvC,MAAM,EAAE,mBAAmB,CAAA;KAC5B,KAAK,MAAM,CAAA;IACZ;;;;;;;;;;;;;OAaG;IACH,KAAK,EAAE,SAAS,iBAAiB,EAAE,CAAA;IACnC,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAI,EACJ,OAAO,EACP,KAAK,EACL,KAAK,EACL,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,+BA8IpB;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}