react-cheminfo 0.3.0 → 0.4.0

package/lib/pedagogy/ui/ExerciseProgressHeader.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Button, ProgressBar } from '@blueprintjs/core';
+import { useState } from 'react';
+/**
+ * How much of a set is solved, its bar, and the one way to wipe it.
+ *
+ * Wiping goes through a real dialog rather than `confirm()`: the button throws
+ * away a week of somebody's work, and a native prompt is both unstyled and
+ * dismissed by reflex.
+ * @param props - The counts, and what clearing does.
+ * @returns The header.
+ */
+export function ExerciseProgressHeader(props) {
+    const { summary, onClearAll, clearLabel = 'Clear all answers', clearWarning = DEFAULT_WARNING, clearDisabled = false, className, } = props;
+    const [confirming, setConfirming] = useState(false);
+    const complete = summary.total > 0 && summary.solved === summary.total;
+    return (_jsxs("div", { className: className, style: ROOT_STYLE, children: [_jsxs("div", { style: ROW_STYLE, children: [_jsx("span", { style: COUNT_STYLE, children: `${summary.solved} / ${summary.total} solved` }), _jsx("span", { style: PERCENT_STYLE, children: `${Math.round(summary.ratio * 100)}%` }), onClearAll !== undefined && (_jsx(Button, { size: "small", variant: "minimal", intent: "danger", icon: "trash", text: clearLabel, disabled: clearDisabled, onClick: () => {
+                            setConfirming(true);
+                        } }))] }), _jsx(ProgressBar, { animate: false, stripes: false, intent: complete ? 'success' : 'primary', value: summary.ratio }), onClearAll !== undefined && (_jsx(Alert, { isOpen: confirming, intent: "danger", icon: "trash", cancelButtonText: "Keep my answers", confirmButtonText: "Clear everything", onCancel: () => {
+                    setConfirming(false);
+                }, onConfirm: () => {
+                    onClearAll();
+                    setConfirming(false);
+                }, children: clearWarning }))] }));
+}
+const DEFAULT_WARNING = 'This forgets every answer, every revealed hint and every solved exercise, on this browser. There is no undo.';
+const ROOT_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 6,
+};
+const ROW_STYLE = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+};
+const COUNT_STYLE = { fontWeight: 600 };
+const PERCENT_STYLE = {
+    color: '#5b6875',
+    flex: '1 1 auto',
+    fontSize: 12,
+};
+//# sourceMappingURL=ExerciseProgressHeader.js.map

package/lib/pedagogy/ui/ExerciseProgressHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExerciseProgressHeader.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/ExerciseProgressHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAmCjC;;;;;;;;GAQG;AACH,MAAM,UAAU,sBAAsB,CACpC,KAAkC;IAElC,MAAM,EACJ,OAAO,EACP,UAAU,EACV,UAAU,GAAG,mBAAmB,EAChC,YAAY,GAAG,eAAe,EAC9B,aAAa,GAAG,KAAK,EACrB,SAAS,GACV,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,GAAG,CAAC,IAAI,OAAO,CAAC,MAAM,KAAK,OAAO,CAAC,KAAK,CAAC;IAEvE,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,aAC1C,eAAK,KAAK,EAAE,SAAS,aACnB,eAAM,KAAK,EAAE,WAAW,YACrB,GAAG,OAAO,CAAC,MAAM,MAAM,OAAO,CAAC,KAAK,SAAS,GACzC,EACP,eACE,KAAK,EAAE,aAAa,YACpB,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAQ,EAC9C,UAAU,KAAK,SAAS,IAAI,CAC3B,KAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,SAAS,EACjB,MAAM,EAAC,QAAQ,EACf,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,GAAG,EAAE;4BACZ,aAAa,CAAC,IAAI,CAAC,CAAC;wBACtB,CAAC,GACD,CACH,IACG,EAEN,KAAC,WAAW,IACV,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,KAAK,EACd,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACxC,KAAK,EAAE,OAAO,CAAC,KAAK,GACpB,EAED,UAAU,KAAK,SAAS,IAAI,CAC3B,KAAC,KAAK,IACJ,MAAM,EAAE,UAAU,EAClB,MAAM,EAAC,QAAQ,EACf,IAAI,EAAC,OAAO,EACZ,gBAAgB,EAAC,iBAAiB,EAClC,iBAAiB,EAAC,kBAAkB,EACpC,QAAQ,EAAE,GAAG,EAAE;oBACb,aAAa,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC,EACD,SAAS,EAAE,GAAG,EAAE;oBACd,UAAU,EAAE,CAAC;oBACb,aAAa,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC,YAEA,YAAY,GACP,CACT,IACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GACnB,8GAA8G,CAAC;AAEjH,MAAM,UAAU,GAAkB;IAChC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,MAAM,SAAS,GAAkB;IAC/B,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,MAAM,WAAW,GAAkB,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC;AAEvD,MAAM,aAAa,GAAkB;IACnC,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE,EAAE;CACb,CAAC"}

package/lib/pedagogy/ui/ExerciseTags.d.ts

@@ -0,0 +1,49 @@
+import type { ReactElement } from 'react';
+import type { ExerciseLevel, ExerciseStatus } from '../core/types.ts';
+export interface ExerciseLevelTagProps {
+    level: ExerciseLevel;
+    /**
+     * What the tag reads.
+     * @default the level itself — `beginner`, `intermediate`, `advanced`
+     */
+    label?: string;
+    /**
+     * Whether the tag is the one currently selected, which fills it in rather
+     * than leaving it minimal. Its colour does not depend on this: a level that
+     * is filtered out is still that level, and a tag that dropped to `none` when
+     * switched off would say the difficulty had changed.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Called when the tag is clicked, which also makes it interactive.
+     * @default undefined — the tag only reports the level
+     */
+    onClick?: () => void;
+}
+/**
+ * The difficulty of an exercise or a step, as a coloured tag.
+ * @param props - The level, and whether it is the selected one.
+ * @returns The tag.
+ */
+export declare function ExerciseLevelTag(props: ExerciseLevelTagProps): ReactElement;
+export interface ExerciseStatusIconProps {
+    status: ExerciseStatus;
+    /**
+     * What the pointer and a screen reader are told.
+     * @default the status itself — `idle`, `attempted`, `solved`
+     */
+    title?: string;
+    /**
+     * Size of the glyph, in pixels.
+     * @default undefined — Blueprint's standard 16
+     */
+    size?: number;
+}
+/**
+ * Where a student stands on one exercise, as the glyph in front of its title.
+ * @param props - The status, and how it is announced.
+ * @returns The icon.
+ */
+export declare function ExerciseStatusIcon(props: ExerciseStatusIconProps): ReactElement;
+//# sourceMappingURL=ExerciseTags.d.ts.map

package/lib/pedagogy/ui/ExerciseTags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExerciseTags.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/ExerciseTags.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAItE,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAe3E;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,cAAc,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,uBAAuB,GAC7B,YAAY,CAYd"}

package/lib/pedagogy/ui/ExerciseTags.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon, Tag } from '@blueprintjs/core';
+import { LEVEL_INTENT, STATUS_ICON, STATUS_INTENT } from "./exerciseMeta.js";
+/**
+ * The difficulty of an exercise or a step, as a coloured tag.
+ * @param props - The level, and whether it is the selected one.
+ * @returns The tag.
+ */
+export function ExerciseLevelTag(props) {
+    const { level, label = level, active = false, onClick } = props;
+    return (_jsx(Tag, { round: true, minimal: !active, active: active, intent: LEVEL_INTENT[level], interactive: onClick !== undefined, onClick: onClick, children: label }));
+}
+/**
+ * Where a student stands on one exercise, as the glyph in front of its title.
+ * @param props - The status, and how it is announced.
+ * @returns The icon.
+ */
+export function ExerciseStatusIcon(props) {
+    const { status, title = status, size } = props;
+    return (_jsx(Icon, { icon: STATUS_ICON[status], intent: STATUS_INTENT[status], size: size, title: title, "aria-label": title }));
+}
+//# sourceMappingURL=ExerciseTags.js.map

package/lib/pedagogy/ui/ExerciseTags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExerciseTags.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/ExerciseTags.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAK9C,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAwB7E;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEhE,OAAO,CACL,KAAC,GAAG,IACF,KAAK,QACL,OAAO,EAAE,CAAC,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC,EAC3B,WAAW,EAAE,OAAO,KAAK,SAAS,EAClC,OAAO,EAAE,OAAO,YAEf,KAAK,GACF,CACP,CAAC;AACJ,CAAC;AAgBD;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAChC,KAA8B;IAE9B,MAAM,EAAE,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAE/C,OAAO,CACL,KAAC,IAAI,IACH,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,EACzB,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,EAC7B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,gBACA,KAAK,GACjB,CACH,CAAC;AACJ,CAAC"}

package/lib/pedagogy/ui/GlossaryProvider.d.ts

@@ -0,0 +1,19 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { Glossary } from '../core/glossary.ts';
+export interface GlossaryProviderProps {
+    /** Every term the site defines, keyed by the lowercased text of a marker. */
+    glossary: Glossary;
+    /** The part of the page whose prose resolves its markers against it. */
+    children: ReactNode;
+}
+/**
+ * Hand a glossary to every piece of prose below it.
+ *
+ * Wrap the whole tool once, high enough that a tutorial step, an exercise
+ * description and a revealed hint all sit under it: they are the three places
+ * jargon is linked, and they must define a term the same way.
+ * @param props - The terms, and the tree that uses them.
+ * @returns The tree, with the glossary in reach.
+ */
+export declare function GlossaryProvider(props: GlossaryProviderProps): ReactElement;
+//# sourceMappingURL=GlossaryProvider.d.ts.map

package/lib/pedagogy/ui/GlossaryProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlossaryProvider.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/GlossaryProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAIpD,MAAM,WAAW,qBAAqB;IACpC,6EAA6E;IAC7E,QAAQ,EAAE,QAAQ,CAAC;IACnB,wEAAwE;IACxE,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAQ3E"}

package/lib/pedagogy/ui/GlossaryProvider.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GlossaryContext } from "./glossaryContext.js";
+/**
+ * Hand a glossary to every piece of prose below it.
+ *
+ * Wrap the whole tool once, high enough that a tutorial step, an exercise
+ * description and a revealed hint all sit under it: they are the three places
+ * jargon is linked, and they must define a term the same way.
+ * @param props - The terms, and the tree that uses them.
+ * @returns The tree, with the glossary in reach.
+ */
+export function GlossaryProvider(props) {
+    const { glossary, children } = props;
+    return (_jsx(GlossaryContext.Provider, { value: glossary, children: children }));
+}
+//# sourceMappingURL=GlossaryProvider.js.map

package/lib/pedagogy/ui/GlossaryProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlossaryProvider.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/GlossaryProvider.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AASvD;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAErC,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YACtC,QAAQ,GACgB,CAC5B,CAAC;AACJ,CAAC"}

package/lib/pedagogy/ui/GlossaryText.d.ts

@@ -0,0 +1,50 @@
+import type { Placement } from '@blueprintjs/core';
+import type { ReactElement } from 'react';
+import type { Glossary, GlossaryEntry } from '../core/glossary.ts';
+export interface GlossaryTextProps {
+    /**
+     * Authored prose. Every `[[term]]` — or `[[term|displayed text]]` — the
+     * glossary knows becomes a hoverable chip.
+     */
+    text: string;
+    /**
+     * Terms to resolve against, instead of the ones the surrounding provider
+     * holds. A page showing two vocabularies side by side passes its own here.
+     * @default undefined — the glossary of the surrounding `GlossaryProvider`
+     */
+    glossary?: Glossary;
+    /**
+     * Side the definition opens on.
+     * @default 'bottom'
+     */
+    placement?: Placement;
+    /**
+     * Class every chip carries, so a site can reach them from its stylesheet.
+     * @default 'glossary-term'
+     */
+    className?: string;
+}
+/**
+ * Render authored prose, turning its markers into hoverable definitions.
+ *
+ * A term the glossary has no entry for renders as its plain text, never as the
+ * brackets: prose is allowed to link a word months before anybody writes its
+ * definition, and the page must keep reading in the meantime.
+ * @param props - The prose, and where its terms are defined.
+ * @returns The prose, with the known terms made hoverable.
+ */
+export declare function GlossaryText(props: GlossaryTextProps): ReactElement;
+export interface GlossaryTooltipBodyProps {
+    /** The term to explain, already resolved from a marker. */
+    entry: GlossaryEntry;
+}
+/**
+ * The definition itself: the term, one paragraph, then the worked examples.
+ *
+ * Exported on its own so a glossary page can list every term with the body it
+ * shows on hover, rather than describing the same entry twice.
+ * @param props - The entry to show.
+ * @returns The body of the tooltip.
+ */
+export declare function GlossaryTooltipBody(props: GlossaryTooltipBodyProps): ReactElement;
+//# sourceMappingURL=GlossaryText.d.ts.map

package/lib/pedagogy/ui/GlossaryText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlossaryText.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/GlossaryText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAiB,YAAY,EAAa,MAAM,OAAO,CAAC;AAGpE,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAKnE,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAmCnE;AAED,MAAM,WAAW,wBAAwB;IACvC,2DAA2D;IAC3D,KAAK,EAAE,aAAa,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,YAAY,CAwBd"}

package/lib/pedagogy/ui/GlossaryText.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip } from '@blueprintjs/core';
+import { Fragment } from 'react';
+import { lookupGlossaryTerm, parseGlossaryMarkers } from "../core/glossary.js";
+import { useGlossary } from "./glossaryContext.js";
+/**
+ * Render authored prose, turning its markers into hoverable definitions.
+ *
+ * A term the glossary has no entry for renders as its plain text, never as the
+ * brackets: prose is allowed to link a word months before anybody writes its
+ * definition, and the page must keep reading in the meantime.
+ * @param props - The prose, and where its terms are defined.
+ * @returns The prose, with the known terms made hoverable.
+ */
+export function GlossaryText(props) {
+    const { text, glossary, placement = 'bottom', className = 'glossary-term', } = props;
+    const fromProvider = useGlossary();
+    const terms = glossary ?? fromProvider;
+    const pieces = [];
+    for (const segment of parseGlossaryMarkers(text)) {
+        const entry = segment.kind === 'term'
+            ? lookupGlossaryTerm(terms, segment.term)
+            : undefined;
+        if (entry === undefined) {
+            pieces.push(_jsx(Fragment, { children: segment.text }, segment.start));
+            continue;
+        }
+        pieces.push(_jsx(Tooltip, { content: _jsx(GlossaryTooltipBody, { entry: entry }), hoverOpenDelay: HOVER_OPEN_DELAY, placement: placement, children: _jsx("span", { className: className, style: TERM_STYLE, children: segment.text }) }, segment.start));
+    }
+    return _jsx(_Fragment, { children: pieces });
+}
+/**
+ * The definition itself: the term, one paragraph, then the worked examples.
+ *
+ * Exported on its own so a glossary page can list every term with the body it
+ * shows on hover, rather than describing the same entry twice.
+ * @param props - The entry to show.
+ * @returns The body of the tooltip.
+ */
+export function GlossaryTooltipBody(props) {
+    const { entry } = props;
+    return (_jsxs("div", { style: BODY_STYLE, children: [_jsx("div", { style: TITLE_STYLE, children: entry.title }), _jsx("div", { style: SUMMARY_STYLE, children: entry.summary }), entry.examples.length > 0 && (_jsx("ul", { style: LIST_STYLE, children: entry.examples.map((example) => (_jsxs("li", { children: [_jsx("code", { style: CODE_STYLE, children: example.code }), example.input !== undefined && (_jsx("span", { style: INPUT_STYLE, children: ` on ${example.input}` })), example.note !== undefined && (_jsx("div", { style: NOTE_STYLE, children: example.note }))] }, `${example.code}::${example.input ?? ''}`))) }))] }));
+}
+/** Long enough that the pointer can cross a chip without opening it. */
+const HOVER_OPEN_DELAY = 150;
+const TERM_STYLE = {
+    borderBottom: '1px dotted currentColor',
+    color: 'var(--accent, inherit)',
+    cursor: 'help',
+};
+const BODY_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 6,
+    maxWidth: 340,
+};
+const TITLE_STYLE = { fontWeight: 600, fontSize: 13 };
+const SUMMARY_STYLE = {
+    fontSize: 12,
+    lineHeight: 1.45,
+    color: '#d3d8de',
+};
+const LIST_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    margin: 0,
+    paddingLeft: 16,
+    fontSize: 12,
+    lineHeight: 1.4,
+};
+const CODE_STYLE = {
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+    fontWeight: 600,
+    color: '#8abbff',
+};
+const INPUT_STYLE = { color: '#f6f7f9' };
+const NOTE_STYLE = { fontStyle: 'italic', color: '#abb3bf' };
+//# sourceMappingURL=GlossaryText.js.map

package/lib/pedagogy/ui/GlossaryText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlossaryText.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/GlossaryText.tsx"],"names":[],"mappings":"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"}

package/lib/pedagogy/ui/HintLadder.d.ts

@@ -0,0 +1,38 @@
+import type { ReactElement } from 'react';
+export interface HintLadderProps {
+    /** Every hint of the exercise, ordered from a nudge to almost the answer. */
+    hints: readonly string[];
+    /**
+     * How many the student has asked for. A count outside the ladder is read as
+     * one of its ends, so a stored value from a shorter or longer ladder still
+     * opens the page.
+     */
+    revealed: number;
+    /**
+     * Opens the next hint. Leave it out where the button lives elsewhere — in
+     * `ExerciseActions`, say — and the ladder only shows what is already open.
+     * @default undefined — no button
+     */
+    onReveal?: () => void;
+    /**
+     * Text of the button, before its count.
+     * @default 'Reveal hint'
+     */
+    revealLabel?: string;
+    /**
+     * Heading over the hints.
+     * @default 'Hints'
+     */
+    title?: string;
+}
+/**
+ * The hints asked for so far, and the button that opens the next one.
+ *
+ * One at a time, in order: a ladder that dumped all four at once is a solution
+ * with extra steps. The prose goes through the glossary, so a hint may link its
+ * jargon exactly like the statement above it.
+ * @param props - The ladder, how much of it is open, and how to open more.
+ * @returns The hints, or nothing while none is open and none can be.
+ */
+export declare function HintLadder(props: HintLadderProps): ReactElement | null;
+//# sourceMappingURL=HintLadder.d.ts.map

package/lib/pedagogy/ui/HintLadder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HintLadder.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/HintLadder.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAIzD,MAAM,WAAW,eAAe;IAC9B,6EAA6E;IAC7E,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,GAAG,IAAI,CAsCtE"}

package/lib/pedagogy/ui/HintLadder.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Callout } from '@blueprintjs/core';
+import { GlossaryText } from "./GlossaryText.js";
+/**
+ * The hints asked for so far, and the button that opens the next one.
+ *
+ * One at a time, in order: a ladder that dumped all four at once is a solution
+ * with extra steps. The prose goes through the glossary, so a hint may link its
+ * jargon exactly like the statement above it.
+ * @param props - The ladder, how much of it is open, and how to open more.
+ * @returns The hints, or nothing while none is open and none can be.
+ */
+export function HintLadder(props) {
+    const { hints, revealed, onReveal, revealLabel = 'Reveal hint', title = 'Hints', } = props;
+    const open = clampRevealed(revealed, hints.length);
+    const exhausted = open >= hints.length;
+    if (open === 0 && (onReveal === undefined || hints.length === 0))
+        return null;
+    return (_jsxs("div", { style: ROOT_STYLE, children: [onReveal !== undefined && hints.length > 0 && (_jsx("div", { children: _jsx(Button, { icon: "lightbulb", text: `${revealLabel} (${open}/${hints.length})`, disabled: exhausted, onClick: onReveal }) })), open > 0 && (_jsx(Callout, { intent: "primary", icon: "lightbulb", title: title, children: _jsx("ol", { style: LIST_STYLE, children: hints.slice(0, open).map((hint) => (_jsx("li", { style: ITEM_STYLE, children: _jsx(GlossaryText, { text: hint }) }, hint))) }) }))] }));
+}
+function clampRevealed(revealed, total) {
+    if (!Number.isFinite(revealed) || revealed <= 0)
+        return 0;
+    return Math.min(Math.floor(revealed), total);
+}
+const ROOT_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+};
+const LIST_STYLE = { margin: 0, paddingLeft: 18 };
+const ITEM_STYLE = { lineHeight: 1.45 };
+//# sourceMappingURL=HintLadder.js.map

package/lib/pedagogy/ui/HintLadder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HintLadder.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/HintLadder.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAoB,CAAC;AA6BlD;;;;;;;;GAQG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,GAAG,aAAa,EAC3B,KAAK,GAAG,OAAO,GAChB,GAAG,KAAK,CAAC;IACV,MAAM,IAAI,GAAG,aAAa,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACnD,MAAM,SAAS,GAAG,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC;IACvC,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;QAAE,OAAO,IAAI,CAAC;IAE9E,OAAO,CACL,eAAK,KAAK,EAAE,UAAU,aACnB,QAAQ,KAAK,SAAS,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAC7C,wBACE,KAAC,MAAM,IACL,IAAI,EAAC,WAAW,EAChB,IAAI,EAAE,GAAG,WAAW,KAAK,IAAI,IAAI,KAAK,CAAC,MAAM,GAAG,EAChD,QAAQ,EAAE,SAAS,EACnB,OAAO,EAAE,QAAQ,GACjB,GACE,CACP,EAEA,IAAI,GAAG,CAAC,IAAI,CACX,KAAC,OAAO,IAAC,MAAM,EAAC,SAAS,EAAC,IAAI,EAAC,WAAW,EAAC,KAAK,EAAE,KAAK,YACrD,aAAI,KAAK,EAAE,UAAU,YAClB,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAClC,aAAe,KAAK,EAAE,UAAU,YAC9B,KAAC,YAAY,IAAC,IAAI,EAAE,IAAI,GAAI,IADrB,IAAI,CAER,CACN,CAAC,GACC,GACG,CACX,IACG,CACP,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,QAAgB,EAAE,KAAa;IACpD,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,QAAQ,IAAI,CAAC;QAAE,OAAO,CAAC,CAAC;IAC1D,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,CAAC;AAC/C,CAAC;AAED,MAAM,UAAU,GAAkB;IAChC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,MAAM,UAAU,GAAkB,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC;AAEjE,MAAM,UAAU,GAAkB,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC"}

package/lib/pedagogy/ui/ReferenceGrid.d.ts

@@ -0,0 +1,31 @@
+import type { ReactElement } from 'react';
+import type { ReferenceSection } from './ReferenceSectionBlock.tsx';
+export interface ReferenceGridProps {
+    /** The blocks of the cheatsheet, in reading order. */
+    sections: readonly ReferenceSection[];
+    /**
+     * Width under which a column wraps to the next line, in pixels.
+     * @default 320
+     */
+    minColumnWidth?: number;
+    /**
+     * Width of the syntax column of every block, so they line up across columns.
+     * @default 150
+     */
+    syntaxWidth?: number | string;
+    /**
+     * Class the grid carries, in addition to `reference-grid`.
+     * @default undefined
+     */
+    className?: string;
+}
+/**
+ * The whole cheatsheet: as many columns as the paper or the window allows.
+ *
+ * Students print this page and take it into an exam room, so the columns
+ * reflow to the sheet and every block is kept off a page break.
+ * @param props - The sections, and how they are laid out.
+ * @returns The grid.
+ */
+export declare function ReferenceGrid(props: ReferenceGridProps): ReactElement;
+//# sourceMappingURL=ReferenceGrid.d.ts.map

package/lib/pedagogy/ui/ReferenceGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReferenceGrid.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/ReferenceGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAGpE,MAAM,WAAW,kBAAkB;IACjC,sDAAsD;IACtD,QAAQ,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACtC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CA0BrE"}

package/lib/pedagogy/ui/ReferenceGrid.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReferenceSectionBlock } from "./ReferenceSectionBlock.js";
+/**
+ * The whole cheatsheet: as many columns as the paper or the window allows.
+ *
+ * Students print this page and take it into an exam room, so the columns
+ * reflow to the sheet and every block is kept off a page break.
+ * @param props - The sections, and how they are laid out.
+ * @returns The grid.
+ */
+export function ReferenceGrid(props) {
+    const { sections, minColumnWidth = 320, syntaxWidth = 150, className, } = props;
+    return (_jsx("div", { className: className === undefined
+            ? 'reference-grid'
+            : `reference-grid ${className}`, style: gridStyle(minColumnWidth), children: sections.map((section) => (_jsx(ReferenceSectionBlock, { section: section, syntaxWidth: syntaxWidth }, section.id))) }));
+}
+function gridStyle(minColumnWidth) {
+    return {
+        display: 'grid',
+        gridTemplateColumns: `repeat(auto-fit, minmax(${minColumnWidth}px, 1fr))`,
+        gap: '10px 24px',
+        alignItems: 'start',
+    };
+}
+//# sourceMappingURL=ReferenceGrid.js.map

package/lib/pedagogy/ui/ReferenceGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReferenceGrid.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/ReferenceGrid.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA6B,CAAC;AAsBpE;;;;;;;GAOG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EACJ,QAAQ,EACR,cAAc,GAAG,GAAG,EACpB,WAAW,GAAG,GAAG,EACjB,SAAS,GACV,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,cACE,SAAS,EACP,SAAS,KAAK,SAAS;YACrB,CAAC,CAAC,gBAAgB;YAClB,CAAC,CAAC,kBAAkB,SAAS,EAAE,EAEnC,KAAK,EAAE,SAAS,CAAC,cAAc,CAAC,YAE/B,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CACzB,KAAC,qBAAqB,IAEpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,IAFnB,OAAO,CAAC,EAAE,CAGf,CACH,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,cAAsB;IACvC,OAAO;QACL,OAAO,EAAE,MAAM;QACf,mBAAmB,EAAE,2BAA2B,cAAc,WAAW;QACzE,GAAG,EAAE,WAAW;QAChB,UAAU,EAAE,OAAO;KACpB,CAAC;AACJ,CAAC"}

package/lib/pedagogy/ui/ReferenceSectionBlock.d.ts

@@ -0,0 +1,64 @@
+import type { ReactElement } from 'react';
+import type { SyntaxTooltipContent } from './SyntaxTooltip.tsx';
+/** One line of the cheatsheet: a construct and what it does. */
+export interface ReferenceRow {
+    /** The construct itself, set in monospace. */
+    syntax: string;
+    /** What it does, in one line — short enough to read on paper. */
+    description: string;
+    /**
+     * The longer story, opened by hovering the row. A sparse section is meant to
+     * ship and be enriched later, so a row without one is plain text rather than
+     * a chip that opens nothing.
+     * @default undefined — the row is not interactive
+     */
+    tooltip?: SyntaxTooltipContent;
+}
+/** One titled block of the cheatsheet. */
+export interface ReferenceSection {
+    /** Stable and URL-safe: a heading can be linked to. */
+    id: string;
+    title: string;
+    /**
+     * One line under the heading, when the block needs framing.
+     * @default undefined
+     */
+    intro?: string;
+    /**
+     * Colour of the heading and of the rule under it, which is how the sections
+     * are told apart at a glance.
+     * @default undefined — the heading takes the surrounding text colour
+     */
+    color?: string;
+    rows: ReferenceRow[];
+    /**
+     * Whether the block is dropped from the printed sheet — a section that is
+     * only useful with a pointer, or one the site keeps for the screen.
+     * @default false
+     */
+    noPrint?: boolean;
+}
+export interface ReferenceSectionBlockProps {
+    section: ReferenceSection;
+    /**
+     * Width of the syntax column, so the blocks of one grid line up.
+     * @default 150
+     */
+    syntaxWidth?: number | string;
+    /**
+     * Class the block carries, in addition to `reference-section`.
+     * @default undefined
+     */
+    className?: string;
+}
+/**
+ * A titled block of reference rows.
+ *
+ * The rows are spans in a flex column rather than a table: a tooltip target is
+ * wrapped in a `<span>`, which a browser hoists straight out of a `<tbody>`,
+ * and a table also breaks across pages far worse than a column does.
+ * @param props - The section, and how wide its syntax column is.
+ * @returns The block, kept whole across a page break.
+ */
+export declare function ReferenceSectionBlock(props: ReferenceSectionBlockProps): ReactElement;
+//# sourceMappingURL=ReferenceSectionBlock.d.ts.map

package/lib/pedagogy/ui/ReferenceSectionBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReferenceSectionBlock.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/ReferenceSectionBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGhE,gEAAgE;AAChE,MAAM,WAAW,YAAY;IAC3B,8CAA8C;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,WAAW,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAChC;AAED,0CAA0C;AAC1C,MAAM,WAAW,gBAAgB;IAC/B,uDAAuD;IACvD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,gBAAgB,CAAC;IAC1B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,0BAA0B,GAChC,YAAY,CAkBd"}

package/lib/pedagogy/ui/ReferenceSectionBlock.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SyntaxTooltip } from "./SyntaxTooltip.js";
+/**
+ * A titled block of reference rows.
+ *
+ * The rows are spans in a flex column rather than a table: a tooltip target is
+ * wrapped in a `<span>`, which a browser hoists straight out of a `<tbody>`,
+ * and a table also breaks across pages far worse than a column does.
+ * @param props - The section, and how wide its syntax column is.
+ * @returns The block, kept whole across a page break.
+ */
+export function ReferenceSectionBlock(props) {
+    const { section, syntaxWidth = 150, className } = props;
+    return (_jsxs("section", { id: section.id, className: blockClassName(section, className), style: SECTION_STYLE, children: [_jsx("h4", { style: headingStyle(section.color), children: section.title }), section.intro !== undefined && (_jsx("p", { style: INTRO_STYLE, children: section.intro })), section.rows.map((row) => (_jsx(ReferenceRowLine, { row: row, width: syntaxWidth }, row.syntax)))] }));
+}
+function ReferenceRowLine(props) {
+    const { row, width } = props;
+    const interactive = row.tooltip !== undefined;
+    const line = (_jsxs("span", { style: interactive ? INTERACTIVE_ROW_STYLE : ROW_STYLE, children: [_jsx("span", { style: syntaxStyle(width, interactive), children: row.syntax }), _jsx("span", { style: DESCRIPTION_STYLE, children: row.description })] }));
+    if (row.tooltip === undefined)
+        return line;
+    return (_jsx(SyntaxTooltip, { content: row.tooltip, placement: "right", children: line }));
+}
+function blockClassName(section, className) {
+    const names = ['reference-section'];
+    if (section.noPrint === true)
+        names.push('no-print');
+    if (className !== undefined)
+        names.push(className);
+    return names.join(' ');
+}
+function headingStyle(color) {
+    return {
+        margin: '0 0 4px',
+        paddingBottom: 2,
+        fontSize: 13,
+        ...(color === undefined
+            ? {}
+            : { color, borderBottom: `2px solid ${color}` }),
+    };
+}
+function syntaxStyle(width, interactive) {
+    return {
+        flex: `0 0 ${typeof width === 'number' ? `${width}px` : width}`,
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+        fontSize: 12,
+        fontWeight: 600,
+        color: '#1c2127',
+        ...(interactive
+            ? { borderBottom: '1px dotted #5b6875', alignSelf: 'flex-start' }
+            : {}),
+    };
+}
+const SECTION_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    breakInside: 'avoid',
+};
+const INTRO_STYLE = {
+    margin: '0 0 4px',
+    color: '#5b6875',
+    fontSize: 12,
+};
+const ROW_STYLE = {
+    display: 'flex',
+    gap: 8,
+    padding: '3px 0',
+    borderTop: '1px solid #e5e7eb',
+    width: '100%',
+};
+const INTERACTIVE_ROW_STYLE = { ...ROW_STYLE, cursor: 'help' };
+const DESCRIPTION_STYLE = {
+    flex: '1 1 auto',
+    fontSize: 12,
+    lineHeight: 1.4,
+    color: '#404854',
+};
+//# sourceMappingURL=ReferenceSectionBlock.js.map

package/lib/pedagogy/ui/ReferenceSectionBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReferenceSectionBlock.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/ReferenceSectionBlock.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AAwDpD;;;;;;;;GAQG;AACH,MAAM,UAAU,qBAAqB,CACnC,KAAiC;IAEjC,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAExD,OAAO,CACL,mBACE,EAAE,EAAE,OAAO,CAAC,EAAE,EACd,SAAS,EAAE,cAAc,CAAC,OAAO,EAAE,SAAS,CAAC,EAC7C,KAAK,EAAE,aAAa,aAEpB,aAAI,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,YAAG,OAAO,CAAC,KAAK,GAAM,EAC3D,OAAO,CAAC,KAAK,KAAK,SAAS,IAAI,CAC9B,YAAG,KAAK,EAAE,WAAW,YAAG,OAAO,CAAC,KAAK,GAAK,CAC3C,EACA,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACzB,KAAC,gBAAgB,IAAkB,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,IAAxC,GAAG,CAAC,MAAM,CAAkC,CACpE,CAAC,IACM,CACX,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CAAC,KAGzB;IACC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC7B,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,KAAK,SAAS,CAAC;IAC9C,MAAM,IAAI,GAAG,CACX,gBAAM,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,aAC1D,eAAM,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,WAAW,CAAC,YAAG,GAAG,CAAC,MAAM,GAAQ,EACjE,eAAM,KAAK,EAAE,iBAAiB,YAAG,GAAG,CAAC,WAAW,GAAQ,IACnD,CACR,CAAC;IACF,IAAI,GAAG,CAAC,OAAO,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IAC3C,OAAO,CACL,KAAC,aAAa,IAAC,OAAO,EAAE,GAAG,CAAC,OAAO,EAAE,SAAS,EAAC,OAAO,YACnD,IAAI,GACS,CACjB,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CACrB,OAAyB,EACzB,SAA6B;IAE7B,MAAM,KAAK,GAAG,CAAC,mBAAmB,CAAC,CAAC;IACpC,IAAI,OAAO,CAAC,OAAO,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACrD,IAAI,SAAS,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACnD,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACzB,CAAC;AAED,SAAS,YAAY,CAAC,KAAyB;IAC7C,OAAO;QACL,MAAM,EAAE,SAAS;QACjB,aAAa,EAAE,CAAC;QAChB,QAAQ,EAAE,EAAE;QACZ,GAAG,CAAC,KAAK,KAAK,SAAS;YACrB,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,aAAa,KAAK,EAAE,EAAE,CAAC;KACnD,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAClB,KAAsB,EACtB,WAAoB;IAEpB,OAAO;QACL,IAAI,EAAE,OAAO,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE;QAC/D,UAAU,EAAE,0DAA0D;QACtE,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,GAAG;QACf,KAAK,EAAE,SAAS;QAChB,GAAG,CAAC,WAAW;YACb,CAAC,CAAC,EAAE,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,YAAY,EAAE;YACjE,CAAC,CAAC,EAAE,CAAC;KACR,CAAC;AACJ,CAAC;AAED,MAAM,aAAa,GAAkB;IACnC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,WAAW,EAAE,OAAO;CACrB,CAAC;AAEF,MAAM,WAAW,GAAkB;IACjC,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,EAAE;CACb,CAAC;AAEF,MAAM,SAAS,GAAkB;IAC/B,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,CAAC;IACN,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,mBAAmB;IAC9B,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,qBAAqB,GAAkB,EAAE,GAAG,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAE9E,MAAM,iBAAiB,GAAkB;IACvC,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;IACf,KAAK,EAAE,SAAS;CACjB,CAAC"}