@langchain/macaw-components 1.0.0-beta.0

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,58 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { type SelectionControlSize } from '../../utils/componentSizes.js';
+/**
+ * Base props shared by all Checkbox variants.
+ * Extends Radix CheckboxProps to support all native checkbox functionality.
+ */
+interface CheckboxBaseProps extends Omit<CheckboxPrimitive.CheckboxProps, 'asChild'> {
+    /** Visual indicator size. The pointer target remains at least 24px. */
+    size?: SelectionControlSize;
+    /** Additional CSS classes for the container wrapper */
+    containerClassName?: string;
+}
+/**
+ * Props for Checkbox with a visible label.
+ */
+interface CheckboxWithLabelProps extends CheckboxBaseProps {
+    /** Visible label text or React node displayed next to the checkbox */
+    label: React.ReactNode;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    'aria-label'?: never;
+    'aria-labelledby'?: never;
+}
+/**
+ * Props for Checkbox with aria-label (no visible label).
+ */
+interface CheckboxWithAriaLabelProps extends CheckboxBaseProps {
+    /** Accessible label for screen readers when no visible label is present */
+    'aria-label': string;
+    label?: never;
+    labelClassName?: never;
+    'aria-labelledby'?: never;
+}
+/**
+ * Props for Checkbox with aria-labelledby (labeled by external element).
+ */
+interface CheckboxWithAriaLabelledByProps extends CheckboxBaseProps {
+    /** ID of an element that labels this checkbox */
+    'aria-labelledby': string;
+    label?: never;
+    labelClassName?: never;
+    'aria-label'?: never;
+}
+/**
+ * Checkbox component props.
+ *
+ * For accessibility compliance (WCAG 2.1), checkboxes must have an accessible name.
+ * This is enforced at the type level by requiring one of:
+ * - `label`: A visible label displayed next to the checkbox
+ * - `aria-label`: An accessible label for screen readers (when no visible label)
+ * - `aria-labelledby`: Reference to an external labeling element
+ *
+ * @see https://www.w3.org/WAI/tutorials/forms/labels/
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
+ */
+export type CheckboxProps = CheckboxWithLabelProps | CheckboxWithAriaLabelProps | CheckboxWithAriaLabelledByProps;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,50 @@
+import { cn } from "../../utils/cn.js";
+import { SELECTION_CONTROL_HIT_AREA_STYLES } from "../../utils/componentSizes.js";
+import { Text } from "../Text/Text.js";
+import { CheckIcon, MinusIcon } from "../../icons/PaddedPhosphorIcons.js";
+import { checkboxBaseStyles, checkboxFocusStyles, checkboxIconSizes, checkboxIndicatorStyles, checkboxRootStateStyles, checkboxSizeStyles } from "./constants.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+//#region packages/components/src/components/Checkbox/Checkbox.tsx
+var Checkbox = forwardRef(({ checked, label, className, containerClassName, labelClassName, disabled, size = "sm", id, ...rest }, ref) => {
+	const generatedId = useId();
+	const checkboxId = id ?? generatedId;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-space-2", containerClassName),
+		children: [/* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
+			ref,
+			className: cn(checkboxBaseStyles, checkboxFocusStyles, SELECTION_CONTROL_HIT_AREA_STYLES, checkboxSizeStyles[size], checkboxRootStateStyles, className),
+			id: checkboxId,
+			checked,
+			disabled,
+			...rest,
+			children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
+				className: cn("flex items-center justify-center", disabled ? checkboxIndicatorStyles.disabled : checkboxIndicatorStyles.enabled),
+				children: checked === "indeterminate" ? /* @__PURE__ */ jsx(MinusIcon, {
+					"aria-hidden": true,
+					size: checkboxIconSizes[size],
+					weight: "bold"
+				}) : /* @__PURE__ */ jsx(CheckIcon, {
+					"aria-hidden": true,
+					size: checkboxIconSizes[size],
+					weight: "bold"
+				})
+			})
+		}), label && /* @__PURE__ */ jsx("label", {
+			htmlFor: checkboxId,
+			className: cn("flex cursor-pointer items-center", disabled && "cursor-not-allowed"),
+			children: /* @__PURE__ */ jsx(Text, {
+				variant: "sm",
+				className: labelClassName,
+				color: disabled ? "tertiary" : void 0,
+				children: label
+			})
+		})]
+	});
+});
+Checkbox.displayName = "Checkbox";
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { forwardRef, useId } from 'react';\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\n\nimport { CheckIcon, MinusIcon } from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport {\n  SELECTION_CONTROL_HIT_AREA_STYLES,\n  type SelectionControlSize,\n} from '../../utils/componentSizes';\nimport { Text } from '../Text';\nimport {\n  checkboxBaseStyles,\n  checkboxFocusStyles,\n  checkboxIconSizes,\n  checkboxIndicatorStyles,\n  checkboxRootStateStyles,\n  checkboxSizeStyles,\n} from './constants';\n\n/**\n * Base props shared by all Checkbox variants.\n * Extends Radix CheckboxProps to support all native checkbox functionality.\n */\ninterface CheckboxBaseProps extends Omit<\n  CheckboxPrimitive.CheckboxProps,\n  'asChild'\n> {\n  /** Visual indicator size. The pointer target remains at least 24px. */\n  size?: SelectionControlSize;\n  /** Additional CSS classes for the container wrapper */\n  containerClassName?: string;\n}\n\n/**\n * Props for Checkbox with a visible label.\n */\ninterface CheckboxWithLabelProps extends CheckboxBaseProps {\n  /** Visible label text or React node displayed next to the checkbox */\n  label: React.ReactNode;\n  /** Additional CSS classes for the label */\n  labelClassName?: string;\n  'aria-label'?: never;\n  'aria-labelledby'?: never;\n}\n\n/**\n * Props for Checkbox with aria-label (no visible label).\n */\ninterface CheckboxWithAriaLabelProps extends CheckboxBaseProps {\n  /** Accessible label for screen readers when no visible label is present */\n  'aria-label': string;\n  label?: never;\n  labelClassName?: never;\n  'aria-labelledby'?: never;\n}\n\n/**\n * Props for Checkbox with aria-labelledby (labeled by external element).\n */\ninterface CheckboxWithAriaLabelledByProps extends CheckboxBaseProps {\n  /** ID of an element that labels this checkbox */\n  'aria-labelledby': string;\n  label?: never;\n  labelClassName?: never;\n  'aria-label'?: never;\n}\n\n/**\n * Checkbox component props.\n *\n * For accessibility compliance (WCAG 2.1), checkboxes must have an accessible name.\n * This is enforced at the type level by requiring one of:\n * - `label`: A visible label displayed next to the checkbox\n * - `aria-label`: An accessible label for screen readers (when no visible label)\n * - `aria-labelledby`: Reference to an external labeling element\n *\n * @see https://www.w3.org/WAI/tutorials/forms/labels/\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/\n */\nexport type CheckboxProps =\n  | CheckboxWithLabelProps\n  | CheckboxWithAriaLabelProps\n  | CheckboxWithAriaLabelledByProps;\n\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(\n  (\n    {\n      checked,\n      label,\n      className,\n      containerClassName,\n      labelClassName,\n      disabled,\n      size = 'sm',\n      id,\n      ...rest\n    },\n    ref\n  ) => {\n    const generatedId = useId();\n    const checkboxId = id ?? generatedId;\n\n    return (\n      <div className={cn('flex items-center gap-space-2', containerClassName)}>\n        <CheckboxPrimitive.Root\n          ref={ref}\n          className={cn(\n            checkboxBaseStyles,\n            checkboxFocusStyles,\n            SELECTION_CONTROL_HIT_AREA_STYLES,\n            checkboxSizeStyles[size],\n            checkboxRootStateStyles,\n            className\n          )}\n          id={checkboxId}\n          checked={checked}\n          disabled={disabled}\n          {...rest}\n        >\n          <CheckboxPrimitive.Indicator\n            className={cn(\n              'flex items-center justify-center',\n              disabled\n                ? checkboxIndicatorStyles.disabled\n                : checkboxIndicatorStyles.enabled\n            )}\n          >\n            {checked === 'indeterminate' ? (\n              <MinusIcon\n                aria-hidden\n                size={checkboxIconSizes[size]}\n                weight=\"bold\"\n              />\n            ) : (\n              <CheckIcon\n                aria-hidden\n                size={checkboxIconSizes[size]}\n                weight=\"bold\"\n              />\n            )}\n          </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n        {label && (\n          <label\n            htmlFor={checkboxId}\n            // `flex` collapses the label's inherited line box to the text it\n            // wraps, so the row's `items-center` aligns the label against the\n            // box instead of against a taller, invisible line box.\n            className={cn(\n              'flex cursor-pointer items-center',\n              disabled && 'cursor-not-allowed'\n            )}\n          >\n            <Text\n              variant=\"sm\"\n              className={labelClassName}\n              color={disabled ? 'tertiary' : undefined}\n            >\n              {label}\n            </Text>\n          </label>\n        )}\n      </div>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n"],"mappings":";;;;;;;;;AAqFA,IAAa,WAAW,YAEpB,EACE,SACA,OACA,WACA,oBACA,gBACA,UACA,OAAO,MACP,IACA,GAAG,QAEL,QACG;CACH,MAAM,cAAc,MAAM;CAC1B,MAAM,aAAa,MAAM;CAEzB,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,iCAAiC,kBAAkB;EAAtE,UAAA,CACE,oBAAC,kBAAkB,MAAnB;GACO;GACL,WAAW,GACT,oBACA,qBACA,mCACA,mBAAmB,OACnB,yBACA,SACF;GACA,IAAI;GACK;GACC;GACV,GAAI;GAEJ,UAAA,oBAAC,kBAAkB,WAAnB;IACE,WAAW,GACT,oCACA,WACI,wBAAwB,WACxB,wBAAwB,OAC9B;IAEC,UAAA,YAAY,kBACX,oBAAC,WAAD;KACE,eAAA;KACA,MAAM,kBAAkB;KACxB,QAAO;IACR,CAAA,IAED,oBAAC,WAAD;KACE,eAAA;KACA,MAAM,kBAAkB;KACxB,QAAO;IACR,CAAA;GAEwB,CAAA;EACP,CAAA,GACvB,SACC,oBAAC,SAAD;GACE,SAAS;GAIT,WAAW,GACT,oCACA,YAAY,oBACd;GAEA,UAAA,oBAAC,MAAD;IACE,SAAQ;IACR,WAAW;IACX,OAAO,WAAW,aAAa,KAAA;IAE9B,UAAA;GACG,CAAA;EACD,CAAA,CAEN;;AAET,CACF;AAEA,SAAS,cAAc"}

package/dist/components/Checkbox/constants.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Checkbox style constants following the Button pattern.
+ * Styles are organized by category for maintainability.
+ */
+/** Base styles applied to all checkboxes */
+export declare const checkboxBaseStyles = "flex shrink-0 items-center justify-center rounded-[3px] border bg-elevated transition-colors";
+/** Focus ring styles: brand border + shadow haze */
+export declare const checkboxFocusStyles = "focus-visible:border-brand focus-visible:outline-none focus-visible:shadow-[0_0_0_4px_var(--bg-brand-subtle)]";
+/** Size variant styles */
+export declare const checkboxSizeStyles: {
+    readonly sm: "size-4";
+    readonly md: "size-5";
+};
+/** Checkmark and indeterminate glyph canvases within each outer box. */
+export declare const checkboxIconSizes: {
+    readonly sm: 12;
+    readonly md: 16;
+};
+/** Indicator styles for enabled/disabled states */
+export declare const checkboxIndicatorStyles: {
+    readonly enabled: "text-control-active-foreground";
+    readonly disabled: "text-icon-disabled";
+};
+/**
+ * Combined checkbox root styles - convenience export for component use.
+ * All state styles combined as an array to be spread in cn().
+ */
+export declare const checkboxRootStateStyles: readonly ["border-default", "data-[state=unchecked]:hover:bg-elevated-hover", "data-[state=checked]:border-transparent data-[state=checked]:bg-brand-300 hover:data-[state=checked]:bg-brand-400", "data-[state=indeterminate]:border-transparent data-[state=indeterminate]:bg-brand-300 hover:data-[state=indeterminate]:bg-brand-400", "data-[disabled]:cursor-not-allowed data-[disabled]:border-ls-neutral-300 data-[disabled]:bg-disabled", "data-[disabled]:data-[state=unchecked]:hover:border-ls-neutral-300 data-[disabled]:data-[state=unchecked]:hover:shadow-none data-[disabled]:hover:bg-disabled", "data-[disabled]:data-[state=checked]:border-ls-neutral-300 data-[disabled]:data-[state=checked]:bg-disabled data-[disabled]:data-[state=checked]:hover:bg-disabled", "data-[disabled]:data-[state=indeterminate]:border-ls-neutral-300 data-[disabled]:data-[state=indeterminate]:bg-disabled data-[disabled]:data-[state=indeterminate]:hover:bg-disabled"];

package/dist/components/Checkbox/constants.js

@@ -0,0 +1,57 @@
+import { SELECTION_CONTROL_SIZES } from "../../utils/componentSizes.js";
+//#region packages/components/src/components/Checkbox/constants.ts
+/**
+* Checkbox style constants following the Button pattern.
+* Styles are organized by category for maintainability.
+*/
+/** Base styles applied to all checkboxes */
+var checkboxBaseStyles = "flex shrink-0 items-center justify-center rounded-[3px] border bg-elevated transition-colors";
+/** Focus ring styles: brand border + shadow haze */
+var checkboxFocusStyles = "focus-visible:border-brand focus-visible:outline-none focus-visible:shadow-[0_0_0_4px_var(--bg-brand-subtle)]";
+/** Size variant styles */
+var checkboxSizeStyles = {
+	sm: SELECTION_CONTROL_SIZES.sm.className,
+	md: SELECTION_CONTROL_SIZES.md.className
+};
+/** Checkmark and indeterminate glyph canvases within each outer box. */
+var checkboxIconSizes = {
+	sm: 12,
+	md: 16
+};
+/**
+* State styles using Radix data attributes.
+* These are combined and applied via cn() in the component.
+*/
+var checkboxStateStyles = {
+	default: "border-default",
+	uncheckedHover: "data-[state=unchecked]:hover:bg-elevated-hover",
+	checked: "data-[state=checked]:border-transparent data-[state=checked]:bg-brand-300 hover:data-[state=checked]:bg-brand-400",
+	indeterminate: "data-[state=indeterminate]:border-transparent data-[state=indeterminate]:bg-brand-300 hover:data-[state=indeterminate]:bg-brand-400",
+	disabledBase: "data-[disabled]:cursor-not-allowed data-[disabled]:border-ls-neutral-300 data-[disabled]:bg-disabled",
+	disabledUnchecked: "data-[disabled]:data-[state=unchecked]:hover:border-ls-neutral-300 data-[disabled]:data-[state=unchecked]:hover:shadow-none data-[disabled]:hover:bg-disabled",
+	disabledChecked: "data-[disabled]:data-[state=checked]:border-ls-neutral-300 data-[disabled]:data-[state=checked]:bg-disabled data-[disabled]:data-[state=checked]:hover:bg-disabled",
+	disabledIndeterminate: "data-[disabled]:data-[state=indeterminate]:border-ls-neutral-300 data-[disabled]:data-[state=indeterminate]:bg-disabled data-[disabled]:data-[state=indeterminate]:hover:bg-disabled"
+};
+/** Indicator styles for enabled/disabled states */
+var checkboxIndicatorStyles = {
+	enabled: "text-control-active-foreground",
+	disabled: "text-icon-disabled"
+};
+/**
+* Combined checkbox root styles - convenience export for component use.
+* All state styles combined as an array to be spread in cn().
+*/
+var checkboxRootStateStyles = [
+	checkboxStateStyles.default,
+	checkboxStateStyles.uncheckedHover,
+	checkboxStateStyles.checked,
+	checkboxStateStyles.indeterminate,
+	checkboxStateStyles.disabledBase,
+	checkboxStateStyles.disabledUnchecked,
+	checkboxStateStyles.disabledChecked,
+	checkboxStateStyles.disabledIndeterminate
+];
+//#endregion
+export { checkboxBaseStyles, checkboxFocusStyles, checkboxIconSizes, checkboxIndicatorStyles, checkboxRootStateStyles, checkboxSizeStyles };
+
+//# sourceMappingURL=constants.js.map

package/dist/components/Checkbox/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/Checkbox/constants.ts"],"sourcesContent":["import {\n  SELECTION_CONTROL_SIZES,\n  type SelectionControlSize,\n} from '../../utils/componentSizes';\n\n/**\n * Checkbox style constants following the Button pattern.\n * Styles are organized by category for maintainability.\n */\n\n/** Base styles applied to all checkboxes */\nexport const checkboxBaseStyles =\n  'flex shrink-0 items-center justify-center rounded-[3px] border bg-elevated transition-colors';\n\n/** Focus ring styles: brand border + shadow haze */\nexport const checkboxFocusStyles =\n  'focus-visible:border-brand focus-visible:outline-none focus-visible:shadow-[0_0_0_4px_var(--bg-brand-subtle)]';\n\n/** Size variant styles */\nexport const checkboxSizeStyles = {\n  sm: SELECTION_CONTROL_SIZES.sm.className,\n  md: SELECTION_CONTROL_SIZES.md.className,\n} as const satisfies Record<SelectionControlSize, string>;\n\n/** Checkmark and indeterminate glyph canvases within each outer box. */\nexport const checkboxIconSizes = {\n  sm: 12,\n  md: 16,\n} as const satisfies Record<SelectionControlSize, number>;\n\n/**\n * State styles using Radix data attributes.\n * These are combined and applied via cn() in the component.\n */\nconst checkboxStateStyles = {\n  // Default border (unchecked state)\n  default: 'border-default',\n\n  // Unchecked hover - slight background change\n  uncheckedHover: 'data-[state=unchecked]:hover:bg-elevated-hover',\n\n  // Checked state - filled with brand color\n  checked:\n    'data-[state=checked]:border-transparent data-[state=checked]:bg-brand-300 hover:data-[state=checked]:bg-brand-400',\n\n  // Indeterminate state - same as checked\n  indeterminate:\n    'data-[state=indeterminate]:border-transparent data-[state=indeterminate]:bg-brand-300 hover:data-[state=indeterminate]:bg-brand-400',\n\n  // Disabled base - applies to all states when disabled\n  disabledBase:\n    'data-[disabled]:cursor-not-allowed data-[disabled]:border-ls-neutral-300 data-[disabled]:bg-disabled',\n\n  // Disabled unchecked - override hover effects\n  disabledUnchecked:\n    'data-[disabled]:data-[state=unchecked]:hover:border-ls-neutral-300 data-[disabled]:data-[state=unchecked]:hover:shadow-none data-[disabled]:hover:bg-disabled',\n\n  // Disabled checked - override hover effects\n  disabledChecked:\n    'data-[disabled]:data-[state=checked]:border-ls-neutral-300 data-[disabled]:data-[state=checked]:bg-disabled data-[disabled]:data-[state=checked]:hover:bg-disabled',\n\n  // Disabled indeterminate - override hover effects\n  disabledIndeterminate:\n    'data-[disabled]:data-[state=indeterminate]:border-ls-neutral-300 data-[disabled]:data-[state=indeterminate]:bg-disabled data-[disabled]:data-[state=indeterminate]:hover:bg-disabled',\n} as const;\n\n/** Indicator styles for enabled/disabled states */\nexport const checkboxIndicatorStyles = {\n  enabled: 'text-control-active-foreground',\n  disabled: 'text-icon-disabled',\n} as const;\n\n/**\n * Combined checkbox root styles - convenience export for component use.\n * All state styles combined as an array to be spread in cn().\n */\nexport const checkboxRootStateStyles = [\n  checkboxStateStyles.default,\n  checkboxStateStyles.uncheckedHover,\n  checkboxStateStyles.checked,\n  checkboxStateStyles.indeterminate,\n  checkboxStateStyles.disabledBase,\n  checkboxStateStyles.disabledUnchecked,\n  checkboxStateStyles.disabledChecked,\n  checkboxStateStyles.disabledIndeterminate,\n] as const;\n"],"mappings":";;;;;;;AAWA,IAAa,qBACX;;AAGF,IAAa,sBACX;;AAGF,IAAa,qBAAqB;CAChC,IAAI,wBAAwB,GAAG;CAC/B,IAAI,wBAAwB,GAAG;AACjC;;AAGA,IAAa,oBAAoB;CAC/B,IAAI;CACJ,IAAI;AACN;;;;;AAMA,IAAM,sBAAsB;CAE1B,SAAS;CAGT,gBAAgB;CAGhB,SACE;CAGF,eACE;CAGF,cACE;CAGF,mBACE;CAGF,iBACE;CAGF,uBACE;AACJ;;AAGA,IAAa,0BAA0B;CACrC,SAAS;CACT,UAAU;AACZ;;;;;AAMA,IAAa,0BAA0B;CACrC,oBAAoB;CACpB,oBAAoB;CACpB,oBAAoB;CACpB,oBAAoB;CACpB,oBAAoB;CACpB,oBAAoB;CACpB,oBAAoB;CACpB,oBAAoB;AACtB"}

package/dist/components/Checkbox/getCheckedState.d.ts

@@ -0,0 +1,6 @@
+import type { CheckedState } from '@radix-ui/react-checkbox';
+/**
+ * Derives a Radix CheckedState from "all selected" and "some selected" booleans.
+ * Useful for "select all" checkboxes that need to show an indeterminate state.
+ */
+export declare function getCheckedState(allSelected: boolean, someSelected: boolean): CheckedState;

package/dist/components/Checkbox/getCheckedState.js

@@ -0,0 +1,14 @@
+//#region packages/components/src/components/Checkbox/getCheckedState.ts
+/**
+* Derives a Radix CheckedState from "all selected" and "some selected" booleans.
+* Useful for "select all" checkboxes that need to show an indeterminate state.
+*/
+function getCheckedState(allSelected, someSelected) {
+	if (allSelected) return true;
+	if (someSelected) return "indeterminate";
+	return false;
+}
+//#endregion
+export { getCheckedState };
+
+//# sourceMappingURL=getCheckedState.js.map

package/dist/components/Checkbox/getCheckedState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCheckedState.js","names":[],"sources":["../../../src/components/Checkbox/getCheckedState.ts"],"sourcesContent":["import type { CheckedState } from '@radix-ui/react-checkbox';\n\n/**\n * Derives a Radix CheckedState from \"all selected\" and \"some selected\" booleans.\n * Useful for \"select all\" checkboxes that need to show an indeterminate state.\n */\nexport function getCheckedState(\n  allSelected: boolean,\n  someSelected: boolean\n): CheckedState {\n  if (allSelected) return true;\n  if (someSelected) return 'indeterminate';\n  return false;\n}\n"],"mappings":";;;;;AAMA,SAAgB,gBACd,aACA,cACc;CACd,IAAI,aAAa,OAAO;CACxB,IAAI,cAAc,OAAO;CACzB,OAAO;AACT"}

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { Checkbox } from './Checkbox.js';
+export type { CheckboxProps } from './Checkbox.js';
+export { getCheckedState } from './getCheckedState.js';

package/dist/components/Checkbox/index.js

@@ -0,0 +1,3 @@
+import { Checkbox } from "./Checkbox.js";
+import { getCheckedState } from "./getCheckedState.js";
+export { Checkbox, getCheckedState };

package/dist/components/CircularProgress/CircularProgress.d.ts

@@ -0,0 +1,54 @@
+export type ProgressSegmentVariant = 'brand' | 'success' | 'error' | 'warning';
+export interface ProgressSegment {
+    /** Semantic color applied to the segment. */
+    variant: ProgressSegmentVariant;
+    percentage: number;
+}
+/**
+ * CircularProgress renders a circular progress ring.
+ *
+ * Two modes:
+ * - **Determinate value** — pass `value` (0–1) for a single-color ring (e.g. a
+ *   sampling rate). Renders with `role="progressbar"` for accessibility.
+ * - **Segments** — pass `segments` for a multi-color ring, each with its own
+ *   color and fraction of the circle.
+ *
+ * @example
+ * ```tsx
+ * // Determinate value (single ring)
+ * <CircularProgress value={0.73} size={16} strokeWidth={2} aria-label="Sampling rate" />
+ *
+ * // Multi-segment
+ * <CircularProgress
+ *   segments={[
+ *     { variant: 'success', percentage: 0.3 },
+ *     { variant: 'error', percentage: 0.1 },
+ *   ]}
+ *   size={120}
+ *   strokeWidth={8}
+ * />
+ * ```
+ */
+interface CircularProgressBaseProps {
+    size?: number;
+    strokeWidth?: number;
+    className?: string;
+    testId?: string;
+}
+interface CircularProgressValueProps extends CircularProgressBaseProps {
+    /** Determinate progress, 0–1. */
+    value: number;
+    segments?: never;
+    /** Accessible name describing the determinate value. */
+    'aria-label': string;
+}
+interface CircularProgressSegmentsProps extends CircularProgressBaseProps {
+    /** Multi-segment progress. */
+    segments: ProgressSegment[];
+    value?: never;
+    /** Accessible summary. Omit only when the ring is decorative. */
+    'aria-label'?: string;
+}
+export type CircularProgressProps = CircularProgressValueProps | CircularProgressSegmentsProps;
+export declare function CircularProgress({ value, segments, size, strokeWidth, className, testId, 'aria-label': ariaLabel, }: CircularProgressProps): import("react").JSX.Element;
+export {};

package/dist/components/CircularProgress/CircularProgress.js

@@ -0,0 +1,85 @@
+import { cn } from "../../utils/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/src/components/CircularProgress/CircularProgress.tsx
+var segmentVariantClasses = {
+	brand: "text-icon-brand",
+	success: "text-success-secondary",
+	error: "text-error-secondary",
+	warning: "text-warning-secondary"
+};
+function normalizePercentage(percentage, max) {
+	if (!Number.isFinite(percentage)) return 0;
+	return Math.min(Math.max(percentage, 0), max);
+}
+function CircularProgress({ value, segments, size = 100, strokeWidth = 10, className, testId, "aria-label": ariaLabel }) {
+	const isValueMode = value != null;
+	const normalizedValue = normalizePercentage(value ?? 0, 1);
+	const resolvedSegments = segments ?? (value != null ? [{
+		variant: "brand",
+		percentage: normalizedValue
+	}] : []);
+	const radius = (size - strokeWidth) / 2;
+	const circumference = 2 * Math.PI * radius;
+	const center = size / 2;
+	let currentAngle = 0;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative inline-block", className),
+		"data-testid": testId,
+		style: {
+			width: size,
+			height: size
+		},
+		...isValueMode ? {
+			role: "progressbar",
+			"aria-label": ariaLabel,
+			"aria-valuenow": Math.round(normalizedValue * 100),
+			"aria-valuemin": 0,
+			"aria-valuemax": 100
+		} : ariaLabel ? {
+			role: "img",
+			"aria-label": ariaLabel
+		} : {},
+		children: /* @__PURE__ */ jsxs("svg", {
+			"aria-hidden": "true",
+			width: size,
+			height: size,
+			viewBox: `0 0 ${size} ${size}`,
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: center,
+				cy: center,
+				r: radius,
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth,
+				className: "text-quaternary opacity-20"
+			}), resolvedSegments.map((segment, index) => {
+				const strokeDasharray = circumference;
+				const remainingPercentage = Math.max(1 - currentAngle, 0);
+				const normalizedPercentage = normalizePercentage(segment.percentage, remainingPercentage);
+				const strokeDashoffset = circumference * (1 - normalizedPercentage);
+				const rotation = currentAngle * 360 - 90;
+				currentAngle += normalizedPercentage;
+				return /* @__PURE__ */ jsx("circle", {
+					cx: center,
+					cy: center,
+					r: radius,
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth,
+					strokeLinecap: isValueMode ? "round" : "butt",
+					strokeDasharray,
+					strokeDashoffset,
+					className: cn(segmentVariantClasses[segment.variant], "transition-[stroke-dashoffset,transform] duration-slower ease-in-out motion-reduce:transition-none"),
+					style: {
+						transform: `rotate(${rotation}deg)`,
+						transformOrigin: `${center}px ${center}px`
+					}
+				}, index);
+			})]
+		})
+	});
+}
+//#endregion
+export { CircularProgress };
+
+//# sourceMappingURL=CircularProgress.js.map

package/dist/components/CircularProgress/CircularProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.js","names":[],"sources":["../../../src/components/CircularProgress/CircularProgress.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\n\nexport type ProgressSegmentVariant = 'brand' | 'success' | 'error' | 'warning';\n\nexport interface ProgressSegment {\n  /** Semantic color applied to the segment. */\n  variant: ProgressSegmentVariant;\n  percentage: number;\n}\n\nconst segmentVariantClasses: Record<ProgressSegmentVariant, string> = {\n  brand: 'text-icon-brand',\n  success: 'text-success-secondary',\n  error: 'text-error-secondary',\n  warning: 'text-warning-secondary',\n};\n\nfunction normalizePercentage(percentage: number, max: number) {\n  if (!Number.isFinite(percentage)) return 0;\n  return Math.min(Math.max(percentage, 0), max);\n}\n\n/**\n * CircularProgress renders a circular progress ring.\n *\n * Two modes:\n * - **Determinate value** — pass `value` (0–1) for a single-color ring (e.g. a\n *   sampling rate). Renders with `role=\"progressbar\"` for accessibility.\n * - **Segments** — pass `segments` for a multi-color ring, each with its own\n *   color and fraction of the circle.\n *\n * @example\n * ```tsx\n * // Determinate value (single ring)\n * <CircularProgress value={0.73} size={16} strokeWidth={2} aria-label=\"Sampling rate\" />\n *\n * // Multi-segment\n * <CircularProgress\n *   segments={[\n *     { variant: 'success', percentage: 0.3 },\n *     { variant: 'error', percentage: 0.1 },\n *   ]}\n *   size={120}\n *   strokeWidth={8}\n * />\n * ```\n */\ninterface CircularProgressBaseProps {\n  size?: number;\n  strokeWidth?: number;\n  className?: string;\n  testId?: string;\n}\n\ninterface CircularProgressValueProps extends CircularProgressBaseProps {\n  /** Determinate progress, 0–1. */\n  value: number;\n  segments?: never;\n  /** Accessible name describing the determinate value. */\n  'aria-label': string;\n}\n\ninterface CircularProgressSegmentsProps extends CircularProgressBaseProps {\n  /** Multi-segment progress. */\n  segments: ProgressSegment[];\n  value?: never;\n  /** Accessible summary. Omit only when the ring is decorative. */\n  'aria-label'?: string;\n}\n\nexport type CircularProgressProps =\n  | CircularProgressValueProps\n  | CircularProgressSegmentsProps;\n\nexport function CircularProgress({\n  value,\n  segments,\n  size = 100,\n  strokeWidth = 10,\n  className,\n  testId,\n  'aria-label': ariaLabel,\n}: CircularProgressProps) {\n  // Determinate single-value mode collapses to a one-segment ring.\n  const isValueMode = value != null;\n  const normalizedValue = normalizePercentage(value ?? 0, 1);\n  const resolvedSegments: ProgressSegment[] =\n    segments ??\n    (value != null ? [{ variant: 'brand', percentage: normalizedValue }] : []);\n\n  // Calculate dimensions\n  const radius = (size - strokeWidth) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const center = size / 2;\n\n  // Calculate segment paths\n  let currentAngle = 0;\n\n  return (\n    <div\n      className={cn('relative inline-block', className)}\n      data-testid={testId}\n      style={{ width: size, height: size }}\n      {...(isValueMode\n        ? {\n            role: 'progressbar',\n            'aria-label': ariaLabel,\n            'aria-valuenow': Math.round(normalizedValue * 100),\n            'aria-valuemin': 0,\n            'aria-valuemax': 100,\n          }\n        : ariaLabel\n          ? { role: 'img', 'aria-label': ariaLabel }\n          : {})}\n    >\n      {/* Background circle */}\n      <svg\n        aria-hidden=\"true\"\n        width={size}\n        height={size}\n        viewBox={`0 0 ${size} ${size}`}\n      >\n        <circle\n          cx={center}\n          cy={center}\n          r={radius}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={strokeWidth}\n          className=\"text-quaternary opacity-20\"\n        />\n\n        {/* Segments */}\n        {resolvedSegments.map((segment, index) => {\n          const strokeDasharray = circumference;\n          const remainingPercentage = Math.max(1 - currentAngle, 0);\n          const normalizedPercentage = normalizePercentage(\n            segment.percentage,\n            remainingPercentage\n          );\n          const strokeDashoffset = circumference * (1 - normalizedPercentage);\n\n          // Calculate rotation for this segment\n          const rotation = currentAngle * 360 - 90; // -90 to start at top\n          currentAngle += normalizedPercentage;\n\n          return (\n            <circle\n              key={index}\n              cx={center}\n              cy={center}\n              r={radius}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={strokeWidth}\n              strokeLinecap={isValueMode ? 'round' : 'butt'}\n              strokeDasharray={strokeDasharray}\n              strokeDashoffset={strokeDashoffset}\n              className={cn(\n                segmentVariantClasses[segment.variant],\n                'transition-[stroke-dashoffset,transform] duration-slower ease-in-out motion-reduce:transition-none'\n              )}\n              style={{\n                transform: `rotate(${rotation}deg)`,\n                transformOrigin: `${center}px ${center}px`,\n              }}\n            />\n          );\n        })}\n      </svg>\n    </div>\n  );\n}\n"],"mappings":";;;AAUA,IAAM,wBAAgE;CACpE,OAAO;CACP,SAAS;CACT,OAAO;CACP,SAAS;AACX;AAEA,SAAS,oBAAoB,YAAoB,KAAa;CAC5D,IAAI,CAAC,OAAO,SAAS,UAAU,GAAG,OAAO;CACzC,OAAO,KAAK,IAAI,KAAK,IAAI,YAAY,CAAC,GAAG,GAAG;AAC9C;AAsDA,SAAgB,iBAAiB,EAC/B,OACA,UACA,OAAO,KACP,cAAc,IACd,WACA,QACA,cAAc,aACU;CAExB,MAAM,cAAc,SAAS;CAC7B,MAAM,kBAAkB,oBAAoB,SAAS,GAAG,CAAC;CACzD,MAAM,mBACJ,aACC,SAAS,OAAO,CAAC;EAAE,SAAS;EAAS,YAAY;CAAgB,CAAC,IAAI,CAAC;CAG1E,MAAM,UAAU,OAAO,eAAe;CACtC,MAAM,gBAAgB,IAAI,KAAK,KAAK;CACpC,MAAM,SAAS,OAAO;CAGtB,IAAI,eAAe;CAEnB,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,yBAAyB,SAAS;EAChD,eAAa;EACb,OAAO;GAAE,OAAO;GAAM,QAAQ;EAAK;EACnC,GAAK,cACD;GACE,MAAM;GACN,cAAc;GACd,iBAAiB,KAAK,MAAM,kBAAkB,GAAG;GACjD,iBAAiB;GACjB,iBAAiB;EACnB,IACA,YACE;GAAE,MAAM;GAAO,cAAc;EAAU,IACvC,CAAC;EAGP,UAAA,qBAAC,OAAD;GACE,eAAY;GACZ,OAAO;GACP,QAAQ;GACR,SAAS,OAAO,KAAK,GAAG;GAJ1B,UAAA,CAME,oBAAC,UAAD;IACE,IAAI;IACJ,IAAI;IACJ,GAAG;IACH,MAAK;IACL,QAAO;IACM;IACb,WAAU;GACX,CAAA,GAGA,iBAAiB,KAAK,SAAS,UAAU;IACxC,MAAM,kBAAkB;IACxB,MAAM,sBAAsB,KAAK,IAAI,IAAI,cAAc,CAAC;IACxD,MAAM,uBAAuB,oBAC3B,QAAQ,YACR,mBACF;IACA,MAAM,mBAAmB,iBAAiB,IAAI;IAG9C,MAAM,WAAW,eAAe,MAAM;IACtC,gBAAgB;IAEhB,OACE,oBAAC,UAAD;KAEE,IAAI;KACJ,IAAI;KACJ,GAAG;KACH,MAAK;KACL,QAAO;KACM;KACb,eAAe,cAAc,UAAU;KACtB;KACC;KAClB,WAAW,GACT,sBAAsB,QAAQ,UAC9B,oGACF;KACA,OAAO;MACL,WAAW,UAAU,SAAS;MAC9B,iBAAiB,GAAG,OAAO,KAAK,OAAO;KACzC;IACD,GAlBM,KAkBN;GAEL,CAAC,CACE;;CACF,CAAA;AAET"}

package/dist/components/CircularProgress/index.d.ts

@@ -0,0 +1,2 @@
+export { CircularProgress } from './CircularProgress.js';
+export type { CircularProgressProps, ProgressSegment, ProgressSegmentVariant, } from './CircularProgress.js';

package/dist/components/CircularProgress/index.js

@@ -0,0 +1,2 @@
+import { CircularProgress } from "./CircularProgress.js";
+export { CircularProgress };

package/dist/components/Code/Code.utils.d.ts

@@ -0,0 +1,24 @@
+import type { Extension, StateEffect } from '@codemirror/state';
+import type { EditorView } from '@codemirror/view';
+import type { CMBundle } from '../../utils/lazy-codemirror-loader.js';
+import type { CodeLanguageType } from './types.js';
+export type { Extension, StateEffect };
+type DataConverter = {
+    parse: <T>(value: string) => T;
+    stringify: <T>(value: T) => string;
+};
+export declare const DATA_CONVERTERS: Record<CodeLanguageType, DataConverter>;
+type SyntaxThemeOptions = {
+    settings?: {
+        background?: string;
+    };
+};
+export declare function getSyntaxTheme(cm: CMBundle, isDarkMode: boolean, options?: SyntaxThemeOptions): any;
+export declare function getLanguageExtension(cm: CMBundle, language: CodeLanguageType): {
+    language: Extension;
+    extensions?: Extension[];
+};
+export declare const foldAllExceptRoot: (cm: CMBundle) => (view: EditorView) => boolean;
+export declare const useEditorTheme: (cm: CMBundle | null, { variant, }: {
+    variant?: "plain" | "full";
+}) => Extension | null;

package/dist/components/Code/Code.utils.js

@@ -0,0 +1,160 @@
+import { useMemo } from "react";
+import * as YAML from "yaml";
+//#region packages/components/src/components/Code/Code.utils.tsx
+var passthroughConverter = {
+	parse: (value) => value,
+	stringify: (value) => String(value)
+};
+var DATA_CONVERTERS = {
+	json: {
+		parse: (value) => JSON.parse(value),
+		stringify: (value) => JSON.stringify(value, null, 2)
+	},
+	yaml: {
+		parse: (value) => YAML.parse(value),
+		stringify: (value) => YAML.stringify(value, { lineWidth: 0 })?.slice(0, -1) ?? ""
+	},
+	javascript: passthroughConverter,
+	typescript: passthroughConverter,
+	python: passthroughConverter,
+	shell: passthroughConverter,
+	markdown: passthroughConverter
+};
+function getSyntaxTheme(cm, isDarkMode, options) {
+	return isDarkMode ? cm.tokyoNightStormInit({
+		...options?.settings ? { settings: options.settings } : {},
+		styles: [{
+			tag: cm.lezerHighlightTags.content,
+			color: "#9ece6a"
+		}]
+	}) : cm.tokyoNightDayInit({
+		...options?.settings ? { settings: options.settings } : {},
+		styles: [{
+			tag: cm.lezerHighlightTags.content,
+			color: "#587539"
+		}]
+	});
+}
+function buildYamlLanguage(cm) {
+	const { LRLanguage, LanguageSupport, delimitedIndent, foldService, indentNodeProp, syntaxTree, syntaxTreeAvailable, lezerYamlParser } = cm;
+	const yamlParser = lezerYamlParser.configure({ props: [indentNodeProp.add({
+		Stream: (cx) => {
+			for (let before = cx.node.resolve(cx.pos, -1); before && before.to >= cx.pos; before = before.parent) {
+				if (before.name == "BlockLiteralContent" && before.from < before.to) return cx.baseIndentFor(before);
+				if (before.name == "BlockLiteral") return cx.baseIndentFor(before) + cx.unit;
+				if (before.name == "BlockSequence" || before.name == "BlockMapping") return cx.column(before.from, 1);
+				if (before.name == "QuotedLiteral") return null;
+				if (before.name == "Literal") {
+					const col = cx.column(before.from, 1);
+					if (col == cx.lineIndent(before.from, 1)) return col;
+					if (before.to > cx.pos) return null;
+				}
+			}
+			return null;
+		},
+		FlowMapping: delimitedIndent({ closing: "}" }),
+		FlowSequence: delimitedIndent({ closing: "]" })
+	})] });
+	return {
+		language: new LanguageSupport(LRLanguage.define({
+			name: "yaml",
+			parser: yamlParser,
+			languageData: {
+				commentTokens: { line: "#" },
+				indentOnInput: /^\s*[\]}]$/
+			}
+		})),
+		extensions: [foldService.of((state, from, to) => {
+			const tree = syntaxTreeAvailable(state) ? syntaxTree(state) : yamlParser.parse(state.doc.toString());
+			if (tree.length < to) return null;
+			const end = tree.resolveInner(to, 1);
+			if (end.node.type.name === "Pair") return {
+				from: to,
+				to: end.node.to
+			};
+			return null;
+		})]
+	};
+}
+function getLanguageExtension(cm, language) {
+	const { langJson, langJavascript, langPython, langMarkdown, StreamLanguage, legacyModeShell } = cm;
+	if (language === "yaml") return buildYamlLanguage(cm);
+	if (language === "json") return { language: langJson() };
+	if (language === "javascript") return { language: langJavascript() };
+	if (language === "typescript") return { language: langJavascript({ typescript: true }) };
+	if (language === "python") return { language: langPython() };
+	if (language === "shell") return { language: StreamLanguage.define(legacyModeShell) };
+	return { language: langMarkdown() };
+}
+var foldAllExceptRoot = (cm) => (view) => {
+	const { foldEffect, foldable } = cm;
+	const { state } = view;
+	const effects = [];
+	for (let pos = 0; pos < state.doc.length;) {
+		const line = view.lineBlockAt(pos);
+		let range = foldable(state, line.from, line.to);
+		if (range && range.from + range.to === state.doc.length) range = null;
+		if (range) effects.push(foldEffect.of(range));
+		pos = (range ? view.lineBlockAt(range.to) : line).to + 1;
+	}
+	if (effects.length) view.dispatch({ effects });
+	return !!effects.length;
+};
+var useEditorTheme = (cm, { variant }) => {
+	const textQuaternary = "var(--text-quaternary)";
+	return useMemo(() => {
+		if (!cm) return null;
+		return cm.EditorView.theme({
+			"&.cm-editor": { backgroundColor: "transparent" },
+			"&.cm-focused": { outline: "none" },
+			green: { background: "green" },
+			"& .cm-content": { padding: "12px" },
+			"& .cm-line": {
+				fontFamily: "'Fira Code', monospace",
+				padding: 0,
+				overflowAnchor: "none",
+				fontVariantLigatures: "none"
+			},
+			"& .cm-gutters.cm-gutters": {
+				backgroundColor: "transparent",
+				color: textQuaternary,
+				borderRight: "none"
+			},
+			"& .cm-lineNumbers": { minWidth: "32px" },
+			"& .cm-lineNumbers .cm-gutterElement": {
+				minWidth: "32px",
+				padding: "0 4px 0 8px"
+			},
+			"& .cm-foldGutter": { width: "20px" },
+			"& .cm-foldGutter .cm-gutterElement": {
+				padding: "0 2px",
+				textAlign: "center"
+			},
+			"& .cm-foldGutter span": {
+				color: textQuaternary,
+				fontSize: "16px",
+				lineHeight: "16px"
+			},
+			"& .cm-foldPlaceholder": {
+				backgroundColor: "var(--bg-surface-level-2)",
+				border: "1px solid var(--border-subtle)",
+				borderRadius: "var(--radius-xs)",
+				color: textQuaternary,
+				lineHeight: "1",
+				padding: "1px 2px"
+			},
+			...variant === "plain" && { "& .cm-content": {
+				padding: "13px",
+				paddingLeft: "0px"
+			} }
+		});
+	}, [
+		cm,
+		variant,
+		textQuaternary
+	]);
+};
+//#endregion
+export { DATA_CONVERTERS, foldAllExceptRoot, getLanguageExtension, getSyntaxTheme, useEditorTheme };
+
+//# sourceMappingURL=Code.utils.js.map

package/dist/components/Code/Code.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Code.utils.js","names":[],"sources":["../../../src/components/Code/Code.utils.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport * as YAML from 'yaml';\n\nimport type { TreeIndentContext } from '@codemirror/language';\nimport type { Extension, StateEffect } from '@codemirror/state';\nimport type { EditorView } from '@codemirror/view';\nimport type { SyntaxNode } from '@lezer/common';\n\nimport type { CMBundle } from '../../utils/lazy-codemirror-loader';\nimport type { CodeLanguageType } from './types';\n\nexport type { Extension, StateEffect };\n\ntype DataConverter = {\n  parse: <T>(value: string) => T;\n  stringify: <T>(value: T) => string;\n};\n\nconst passthroughConverter: DataConverter = {\n  parse: (value) => value as never,\n  stringify: (value) => String(value),\n};\n\nexport const DATA_CONVERTERS: Record<CodeLanguageType, DataConverter> = {\n  json: {\n    parse: (value) => JSON.parse(value),\n    stringify: (value) => JSON.stringify(value, null, 2),\n  },\n  yaml: {\n    parse: (value) => YAML.parse(value),\n    stringify: (value) =>\n      (YAML.stringify(value, { lineWidth: 0 }) as string | undefined)?.slice(\n        0,\n        -1\n      ) ?? '',\n  },\n  javascript: passthroughConverter,\n  typescript: passthroughConverter,\n  python: passthroughConverter,\n  shell: passthroughConverter,\n  markdown: passthroughConverter,\n};\n\ntype SyntaxThemeOptions = {\n  settings?: {\n    background?: string;\n  };\n};\n\nexport function getSyntaxTheme(\n  cm: CMBundle,\n  isDarkMode: boolean,\n  options?: SyntaxThemeOptions\n) {\n  return isDarkMode\n    ? cm.tokyoNightStormInit({\n        ...(options?.settings ? { settings: options.settings } : {}),\n        styles: [{ tag: cm.lezerHighlightTags.content, color: '#9ece6a' }],\n      })\n    : cm.tokyoNightDayInit({\n        ...(options?.settings ? { settings: options.settings } : {}),\n        styles: [{ tag: cm.lezerHighlightTags.content, color: '#587539' }],\n      });\n}\n\n// These helpers require the non-null bundle returned after CodeMirror loads.\n\nfunction buildYamlLanguage(cm: CMBundle) {\n  const {\n    LRLanguage,\n    LanguageSupport,\n    delimitedIndent,\n    foldService,\n    indentNodeProp,\n    syntaxTree,\n    syntaxTreeAvailable,\n    lezerYamlParser,\n  } = cm;\n\n  const yamlParser = lezerYamlParser.configure({\n    props: [\n      indentNodeProp.add({\n        Stream: (cx: TreeIndentContext) => {\n          for (\n            let before = cx.node.resolve(cx.pos, -1) as SyntaxNode | null;\n            before && before.to >= cx.pos;\n            before = before.parent\n          ) {\n            if (before.name == 'BlockLiteralContent' && before.from < before.to)\n              return cx.baseIndentFor(before);\n            if (before.name == 'BlockLiteral')\n              return cx.baseIndentFor(before) + cx.unit;\n            if (before.name == 'BlockSequence' || before.name == 'BlockMapping')\n              return cx.column(before.from, 1);\n            if (before.name == 'QuotedLiteral') return null;\n            if (before.name == 'Literal') {\n              const col = cx.column(before.from, 1);\n              if (col == cx.lineIndent(before.from, 1)) return col;\n              if (before.to > cx.pos) return null;\n            }\n          }\n          return null;\n        },\n        FlowMapping: delimitedIndent({ closing: '}' }),\n        FlowSequence: delimitedIndent({ closing: ']' }),\n      }),\n    ],\n  });\n\n  const yamlLanguage = LRLanguage.define({\n    name: 'yaml',\n    parser: yamlParser,\n    languageData: {\n      commentTokens: { line: '#' },\n      indentOnInput: /^\\s*[\\]}]$/,\n    },\n  });\n\n  const language = new LanguageSupport(yamlLanguage);\n  const extensions: Extension[] = [\n    foldService.of((state, from, to) => {\n      void from;\n      const tree = syntaxTreeAvailable(state)\n        ? syntaxTree(state)\n        : yamlParser.parse(state.doc.toString());\n      if (tree.length < to) return null;\n\n      const end = tree.resolveInner(to, 1);\n      if (end.node.type.name === 'Pair') {\n        return { from: to, to: end.node.to };\n      }\n\n      return null;\n    }),\n  ];\n\n  return { language, extensions };\n}\n\nexport function getLanguageExtension(\n  cm: CMBundle,\n  language: CodeLanguageType\n): { language: Extension; extensions?: Extension[] } {\n  const {\n    langJson,\n    langJavascript,\n    langPython,\n    langMarkdown,\n    StreamLanguage,\n    legacyModeShell,\n  } = cm;\n\n  if (language === 'yaml') return buildYamlLanguage(cm);\n  if (language === 'json') return { language: langJson() };\n  if (language === 'javascript') return { language: langJavascript() };\n  if (language === 'typescript')\n    return { language: langJavascript({ typescript: true }) };\n  if (language === 'python') return { language: langPython() };\n  if (language === 'shell')\n    return { language: StreamLanguage.define(legacyModeShell) };\n  return { language: langMarkdown() };\n}\n\nexport const foldAllExceptRoot = (cm: CMBundle) => (view: EditorView) => {\n  const { foldEffect, foldable } = cm;\n  const { state } = view;\n  const effects: Array<StateEffect<unknown>> = [];\n  for (let pos = 0; pos < state.doc.length; ) {\n    const line = view.lineBlockAt(pos);\n    let range = foldable(state, line.from, line.to);\n\n    // avoid root node\n    if (range && range.from + range.to === state.doc.length) {\n      range = null;\n    }\n\n    if (range) effects.push(foldEffect.of(range));\n    pos = (range ? view.lineBlockAt(range.to) : line).to + 1;\n  }\n  if (effects.length) {\n    view.dispatch({ effects });\n  }\n  return !!effects.length;\n};\n\nexport const useEditorTheme = (\n  cm: CMBundle | null,\n  {\n    variant,\n  }: {\n    variant?: 'plain' | 'full';\n  }\n) => {\n  const textQuaternary = 'var(--text-quaternary)';\n\n  return useMemo(() => {\n    if (!cm) return null;\n\n    return cm.EditorView.theme({\n      '&.cm-editor': {\n        backgroundColor: 'transparent',\n      },\n      '&.cm-focused': {\n        outline: 'none',\n      },\n      green: {\n        background: 'green',\n      },\n      '& .cm-content': {\n        padding: '12px',\n      },\n      '& .cm-line': {\n        fontFamily: \"'Fira Code', monospace\",\n        padding: 0,\n        overflowAnchor: 'none',\n        fontVariantLigatures: 'none',\n      },\n      '& .cm-gutters.cm-gutters': {\n        backgroundColor: 'transparent',\n        color: textQuaternary,\n        borderRight: 'none',\n      },\n      '& .cm-lineNumbers': {\n        minWidth: '32px',\n      },\n      '& .cm-lineNumbers .cm-gutterElement': {\n        minWidth: '32px',\n        padding: '0 4px 0 8px',\n      },\n      '& .cm-foldGutter': {\n        width: '20px',\n      },\n      '& .cm-foldGutter .cm-gutterElement': {\n        padding: '0 2px',\n        textAlign: 'center',\n      },\n      '& .cm-foldGutter span': {\n        color: textQuaternary,\n        fontSize: '16px',\n        lineHeight: '16px',\n      },\n      '& .cm-foldPlaceholder': {\n        backgroundColor: 'var(--bg-surface-level-2)',\n        border: '1px solid var(--border-subtle)',\n        borderRadius: 'var(--radius-xs)',\n        color: textQuaternary,\n        lineHeight: '1',\n        padding: '1px 2px',\n      },\n      ...(variant === 'plain' && {\n        '& .cm-content': {\n          padding: '13px',\n          paddingLeft: '0px',\n        },\n      }),\n    });\n  }, [cm, variant, textQuaternary]);\n};\n"],"mappings":"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"}