@stll/ui 0.65.1 → 0.66.0

package/dist/components/field.d.ts

@@ -1,5 +1,4 @@
 import { Field as Field$1 } from "@base-ui/react/field";
-//#region src/components/field.d.ts
 declare const Field: ({ className, ...props }: Field$1.Root.Props) => import("react").JSX.Element;
 declare const FieldLabel: ({ className, ...props }: Field$1.Label.Props) => import("react").JSX.Element;
 declare const FieldItem: ({ className, ...props }: Field$1.Item.Props) => import("react").JSX.Element;
@@ -13,5 +12,4 @@ declare const FieldDescription: ({ className, ...props }: Field$1.Description.Pr
 declare const FieldError: ({ className, ...props }: Field$1.Error.Props) => import("react").JSX.Element;
 declare const FieldControl: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").FieldControlProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
 declare const FieldValidity: import("react").FC<import("@base-ui/react").FieldValidityProps>;
-//#endregion
 export { Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity };

package/dist/components/field.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
 import { Field as Field$1 } from "@base-ui/react/field";
-//#region src/components/field.tsx
+// src/components/field.tsx
 const Field = ({ className, ...props }) => /* @__PURE__ */ jsx(Field$1.Root, {
 	className: cn("flex flex-col items-start gap-2", className),
 	"data-slot": "field",
@@ -36,5 +36,4 @@ const FieldError = ({ className, ...props }) => /* @__PURE__ */ jsx(Field$1.Erro
 });
 const FieldControl = Field$1.Control;
 const FieldValidity = Field$1.Validity;
-//#endregion
 export { Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity };

package/dist/components/file-input.d.ts

@@ -1,4 +1,3 @@
-//#region src/components/file-input.d.ts
 type FileInputProps = {
   accept?: string | undefined;
   "aria-labelledby"?: string | undefined;
@@ -10,5 +9,4 @@ type FileInputProps = {
   emptyLabel: string;
 };
 declare const FileInput: ({ accept, "aria-labelledby": labelledBy, className, disabled, file, onFileChange, chooseLabel, emptyLabel }: FileInputProps) => import("react").JSX.Element;
-//#endregion
 export { FileInput, type FileInputProps };

package/dist/components/file-input.js

@@ -5,7 +5,7 @@ import { Button } from "./button.js";
 import { openFilePicker } from "../lib/file-picker.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
-//#region src/components/file-input.tsx
+// src/components/file-input.tsx
 const FileInput = ({ accept, "aria-labelledby": labelledBy, className, disabled, file, onFileChange, chooseLabel, emptyLabel }) => {
 	const triggerId = useId();
 	return /* @__PURE__ */ jsxs("span", {
@@ -30,5 +30,4 @@ const FileInput = ({ accept, "aria-labelledby": labelledBy, className, disabled,
 		})]
 	});
 };
-//#endregion
 export { FileInput };

package/dist/components/form.d.ts

@@ -1,6 +1,5 @@
 import { Form as Form$1 } from "@base-ui/react/form";
 import { VariantProps } from "class-variance-authority";
-//#region src/components/form.d.ts
 declare const formVariants: (props?: ({
   density?: "compact" | "default" | "snug" | null | undefined;
   layout?: "inline" | "stack" | null | undefined;
@@ -44,5 +43,4 @@ type FormProps = Form$1.Props & VariantProps<typeof formVariants> & {
  * unsaved-changes guard.
  */
 declare const Form: ({ className, density, layout, dirty, onDiscard, children, ...props }: FormProps) => import("react").JSX.Element;
-//#endregion
 export { Form, type FormErrors, type FormProps, formVariants };

package/dist/components/form.js

@@ -4,7 +4,7 @@ import { DialogFormState } from "./dialog-form-state.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Form as Form$1 } from "@base-ui/react/form";
-//#region src/components/form.tsx
+// src/components/form.tsx
 const formVariants = cva("flex w-full", {
 	defaultVariants: {
 		density: "default",
@@ -63,5 +63,4 @@ const Form = ({ className, density, layout, dirty = false, onDiscard, children,
 		onDiscard
 	}), children]
 });
-//#endregion
 export { Form, formVariants };

package/dist/components/frame.d.ts

@@ -1,10 +1,8 @@
 import * as React$1 from "react";
-//#region src/components/frame.d.ts
 declare const Frame: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const FramePanel: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const FrameHeader: ({ className, ...props }: React$1.ComponentProps<"header">) => React$1.JSX.Element;
 declare const FrameTitle: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const FrameDescription: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const FrameFooter: ({ className, ...props }: React$1.ComponentProps<"footer">) => React$1.JSX.Element;
-//#endregion
 export { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle };

package/dist/components/frame.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/frame.tsx
+// src/components/frame.tsx
 const Frame = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	className: cn("bg-muted/72 relative flex flex-col rounded-2xl p-1", "*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1", className),
 	"data-slot": "frame",
@@ -31,5 +31,4 @@ const FrameFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("footer", {
 	"data-slot": "frame-panel-footer",
 	...props
 });
-//#endregion
 export { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle };

package/dist/components/hex-color-picker.d.ts

@@ -1,5 +1,4 @@
 import * as React$1 from "react";
-//#region src/components/hex-color-picker.d.ts
 type HexColorPickerProps = {
   /** Hex color with or without # (e.g. "#ff0000" or "FF0000") */
   color?: string | undefined;
@@ -7,5 +6,4 @@ type HexColorPickerProps = {
   className?: string;
 };
 declare const HexColorPicker: ({ color, onChange, className }: HexColorPickerProps) => React$1.JSX.Element;
-//#endregion
 export { HexColorPicker, type HexColorPickerProps };

package/dist/components/hex-color-picker.js

@@ -4,7 +4,7 @@ import { containedHandler } from "../hooks/use-contained-handler.js";
 import { useLatest } from "../hooks/use-latest.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
-//#region src/components/hex-color-picker.tsx
+// src/components/hex-color-picker.tsx
 /**
 * Hex color picker — saturation/brightness square + hue strip.
 *
@@ -361,5 +361,4 @@ const HexColorPicker = ({ color = "000000", onChange, className }) => {
 		})]
 	});
 };
-//#endregion
 export { HexColorPicker };

package/dist/components/horizontal-scroller.d.ts

@@ -1,5 +1,4 @@
 import { ComponentProps } from "react";
-//#region src/components/horizontal-scroller.d.ts
 type ScrollDirection = "ltr" | "rtl";
 type HorizontalScrollerProps = ComponentProps<"div"> & {
   nextLabel: string;
@@ -16,5 +15,4 @@ export declare const HorizontalScroller: ({ children, className, nextLabel, prev
 export declare const scrollState: (scrollLeft: number, scrollWidth: number, clientWidth: number, direction: ScrollDirection) => ScrollState;
 /** Wheel deltas arrive in pixels, lines or pages; scrollBy takes pixels. */
 export declare const wheelDeltaPixels: (event: Pick<WheelEvent, "deltaMode" | "deltaY">, node: Pick<HTMLElement, "clientWidth">) => number;
-//#endregion
 export {};

package/dist/components/horizontal-scroller.js

@@ -5,7 +5,7 @@ import { containedEventHandler } from "../hooks/use-contained-handler.js";
 import { SCROLL_EDGE_FADE_CLASS, writeScrollEdgeFade } from "../lib/scroll-edge-fade.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-//#region src/components/horizontal-scroller.tsx
+// src/components/horizontal-scroller.tsx
 const CONTROL_CLASS = "bg-background/90 text-foreground absolute top-1/2 -translate-y-1/2 rounded-full border p-1 shadow-sm";
 const HorizontalScroller = ({ children, className, nextLabel, previousLabel, contentClassName, viewportClassName, ...props }) => {
 	const [viewport, setViewport] = useState(null);
@@ -105,5 +105,4 @@ const wheelDeltaPixels = (event, node) => {
 		default: return event.deltaY;
 	}
 };
-//#endregion
 export { HorizontalScroller, scrollState, wheelDeltaPixels };

package/dist/components/identity-text.d.ts

@@ -1,9 +1,7 @@
-//#region src/components/identity-text.d.ts
 type IdentityTextProps = {
   children: string;
   className?: string;
 };
 /** Discloses clipped names on hover and when their owning control receives focus. */
 export declare const IdentityText: ({ children, className }: IdentityTextProps) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/identity-text.js

@@ -4,7 +4,7 @@ import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./toolt
 import { withoutDirectionalControls } from "./bidi-text.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useState } from "react";
-//#region src/components/identity-text.tsx
+// src/components/identity-text.tsx
 /** Discloses clipped names on hover and when their owning control receives focus. */
 const IdentityText = ({ children, className }) => {
 	const triggerId = useId();
@@ -70,5 +70,4 @@ const IdentityText = ({ children, className }) => {
 		})]
 	});
 };
-//#endregion
 export { IdentityText };

package/dist/components/inline-drop-indicator.d.ts

@@ -1,10 +1,8 @@
 import { InlineDropPosition } from "../lib/inline-reorder.js";
-//#region src/components/inline-drop-indicator.d.ts
 /**
  * The bar beside a dragged-over item in a horizontal row. Render it inside
  * the item's positioned wrapper; `before`/`after` follow the text direction.
  */
 export declare const InlineDropIndicator: ({ position }: {
   position: InlineDropPosition | null;
-}) => import("react").JSX.Element | null;
-//#endregion
+}) => import("react").JSX.Element | null;

package/dist/components/inline-drop-indicator.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/inline-drop-indicator.tsx
+// src/components/inline-drop-indicator.tsx
 /**
 * The bar beside a dragged-over item in a horizontal row. Render it inside
 * the item's positioned wrapper; `before`/`after` follow the text direction.
@@ -9,5 +9,4 @@ const InlineDropIndicator = ({ position }) => position === null ? null : /* @__P
 	"aria-hidden": "true",
 	className: cn("bg-primary pointer-events-none absolute inset-y-1 z-20 w-0.5 rounded-full", position === "before" ? "start-0" : "end-0")
 });
-//#endregion
 export { InlineDropIndicator };

package/dist/components/inline-rename.d.ts

@@ -1,5 +1,4 @@
 import { ComponentProps } from "react";
-//#region src/components/inline-rename.d.ts
 type InlineRenameInputProps = Omit<ComponentProps<"input">, "value" | "onChange" | "onKeyDown" | "size"> & {
   value: string;
   onValueChange: (value: string) => void;
@@ -9,5 +8,4 @@ type InlineRenameInputProps = Omit<ComponentProps<"input">, "value" | "onChange"
   fill?: boolean;
 };
 export declare const InlineRenameInput: ({ value, onValueChange, onCommit, onCancel, onBlur, className, ref, dir, fill, ...props }: InlineRenameInputProps) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/inline-rename.js

@@ -3,7 +3,7 @@ import { contentDir, isStructuredInputType } from "../hooks/use-content-dir.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useImperativeHandle, useRef } from "react";
 import { panic } from "better-result";
-//#region src/components/inline-rename.tsx
+// src/components/inline-rename.tsx
 /** Content-sized rename field; the title's parent owns its typography. */
 const mirrorTextFor = (value, placeholder) => {
 	if (value !== "") return value;
@@ -72,5 +72,4 @@ const InlineRenameInput = ({ value, onValueChange, onCommit, onCancel, onBlur, c
 		})]
 	});
 };
-//#endregion
 export { InlineRenameInput };

package/dist/components/input-control.d.ts

@@ -1,4 +1,3 @@
-//#region src/components/input-control.d.ts
 /**
  * A text control is two boxes: the bordered wrapper a caller styles and the
  * element the text is typed into. The wrapper is what a height applies to and
@@ -24,5 +23,4 @@ export declare const INPUT_SIZE_CLASS_NAMES: {
  * the caret room, and a matching negative margin keeps the text in line with
  * its neighbours.
  */
-export declare const INLINE_FIELD_CLASS_NAME = "placeholder:text-foreground-placeholder focus-visible:ring-ring/30 -mx-1 min-h-0 w-full min-w-0 rounded-sm bg-transparent px-1 py-0 font-[inherit] text-[length:inherit] leading-[inherit] text-inherit outline-none focus-visible:ring-2";
-//#endregion
+export declare const INLINE_FIELD_CLASS_NAME = "placeholder:text-foreground-placeholder focus-visible:ring-ring/30 -mx-1 min-h-0 w-full min-w-0 rounded-sm bg-transparent px-1 py-0 font-[inherit] text-[length:inherit] leading-[inherit] text-inherit outline-none focus-visible:ring-2";

package/dist/components/input-control.js

@@ -1,5 +1,5 @@
 import { CONTROL_SIZE } from "../lib/control-size.js";
-//#region src/components/input-control.ts
+// src/components/input-control.ts
 /**
 * A text control is two boxes: the bordered wrapper a caller styles and the
 * element the text is typed into. The wrapper is what a height applies to and
@@ -26,5 +26,4 @@ const INPUT_SIZE_CLASS_NAMES = {
 * its neighbours.
 */
 const INLINE_FIELD_CLASS_NAME = "placeholder:text-foreground-placeholder focus-visible:ring-ring/30 -mx-1 min-h-0 w-full min-w-0 rounded-sm bg-transparent px-1 py-0 font-[inherit] text-[length:inherit] leading-[inherit] text-inherit outline-none focus-visible:ring-2";
-//#endregion
 export { INLINE_FIELD_CLASS_NAME, INPUT_CONTROL_CLASS_NAME, INPUT_ELEMENT_CLASS_NAME, INPUT_SIZE_CLASS_NAMES };

package/dist/components/input-group.d.ts

@@ -2,7 +2,6 @@ import * as React$1 from "react";
 import { InputProps } from "./input.js";
 import { TextareaProps } from "./textarea.js";
 import { VariantProps } from "class-variance-authority";
-//#region src/components/input-group.d.ts
 declare const InputGroup: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
   align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
@@ -11,5 +10,4 @@ declare const InputGroupAddon: ({ className, align, ...props }: React$1.Componen
 declare const InputGroupText: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;
 declare const InputGroupInput: ({ className, ...props }: InputProps) => React$1.JSX.Element;
 declare const InputGroupTextarea: ({ className, ...props }: TextareaProps) => React$1.JSX.Element;
-//#endregion
 export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/components/input-group.js

@@ -4,7 +4,7 @@ import { Input } from "./input.js";
 import { Textarea } from "./textarea.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-//#region src/components/input-group.tsx
+// src/components/input-group.tsx
 const InputGroup = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	className: cn("border-input bg-background text-foreground ring-ring/24 has-autofill:bg-foreground/4 has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 relative inline-flex w-full min-w-0 items-center rounded-lg border text-base shadow-xs/5 not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[align=block-end]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:h-auto has-data-[align=block-start]:flex-col has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] has-[textarea]:h-auto sm:text-sm dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=inline-start]:**:[input]:ps-2 has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)] **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5", className),
 	"data-slot": "input-group",
@@ -49,5 +49,4 @@ const InputGroupTextarea = ({ className, ...props }) => /* @__PURE__ */ jsx(Text
 	unstyled: true,
 	...props
 });
-//#endregion
 export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/components/input-otp.d.ts

@@ -1,6 +1,5 @@
 import * as React$1 from "react";
 import { OTPInput } from "input-otp";
-//#region src/components/input-otp.d.ts
 declare const InputOTP: ({ className, containerClassName, ...props }: React$1.ComponentProps<typeof OTPInput> & {
   containerClassName?: string;
 }) => React$1.JSX.Element;
@@ -9,5 +8,4 @@ declare const InputOTPSlot: ({ index, className, ...props }: React$1.ComponentPr
   index: number;
 }) => React$1.JSX.Element;
 declare const InputOTPSeparator: ({ ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
-//#endregion
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/components/input-otp.js

@@ -4,7 +4,7 @@ import { cn } from "../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
-//#region src/components/input-otp.tsx
+// src/components/input-otp.tsx
 const InputOTP = ({ className, containerClassName, ...props }) => /* @__PURE__ */ jsx(OTPInput, {
 	className: cn("disabled:cursor-not-allowed", className),
 	containerClassName: cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName),
@@ -35,5 +35,4 @@ const InputOTPSeparator = ({ ...props }) => /* @__PURE__ */ jsx("div", {
 	...props,
 	children: /* @__PURE__ */ jsx(MinusIcon, {})
 });
-//#endregion
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/components/input.d.ts

@@ -1,7 +1,6 @@
 import * as React$1 from "react";
 import { ControlSize } from "../lib/control-size.js";
 import { Input as Input$1 } from "@base-ui/react/input";
-//#region src/components/input.d.ts
 type InputProps = Omit<Input$1.Props & React$1.RefAttributes<HTMLInputElement>, "size" | "style" | "type"> & {
   type?: Exclude<React$1.HTMLInputTypeAttribute, "file"> | undefined;
   size?: ControlSize | number;
@@ -16,5 +15,4 @@ type InputProps = Omit<Input$1.Props & React$1.RefAttributes<HTMLInputElement>,
   nativeInput?: boolean;
 };
 declare const Input: ({ className, size, unstyled, inline, nativeInput, dir, onChange, ...props }: InputProps) => React$1.JSX.Element;
-//#endregion
 export { Input, type InputProps };

package/dist/components/input.js

@@ -6,7 +6,7 @@ import { isStructuredInputType, useContentDir } from "../hooks/use-content-dir.j
 import { INLINE_FIELD_CLASS_NAME, INPUT_ELEMENT_CLASS_NAME, INPUT_SIZE_CLASS_NAMES } from "./input-control.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Input as Input$1 } from "@base-ui/react/input";
-//#region src/components/input.tsx
+// src/components/input.tsx
 const Input = ({ className, size = CONTROL_SIZE.default, unstyled = false, inline = false, nativeInput = false, dir, onChange, ...props }) => {
 	const controlSize = typeof size === "number" ? CONTROL_SIZE.default : size;
 	const contentDir = useContentDir({
@@ -45,5 +45,4 @@ const Input = ({ className, size = CONTROL_SIZE.default, unstyled = false, inlin
 		})]
 	});
 };
-//#endregion
 export { Input };

package/dist/components/input.native.d.ts

@@ -1,6 +1,5 @@
 import { InputContract, TextFieldContract } from "./input.shared.js";
 import { TextInputProps } from "react-native";
-//#region src/components/input.native.d.ts
 type NativeFieldProps = Omit<TextInputProps, keyof TextFieldContract> & TextFieldContract & {
   className?: string | undefined;
 };
@@ -19,5 +18,4 @@ type InputProps = NativeFieldProps & {
  * box, or iOS's filled search field for `type="search"`.
  */
 export declare const Input: ({ type, unstyled, size, ...props }: InputProps) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/input.native.js

@@ -1,7 +1,7 @@
 import { textFontFamily } from "./text.native.js";
 import { jsx } from "react/jsx-runtime";
 import { TextInput } from "react-native";
-//#region src/components/input.native.tsx
+// src/components/input.native.tsx
 /** The field's text at each control size, as the web sets it on a phone. */
 const TEXT_SIZE = {
 	sm: "text-sm",
@@ -62,5 +62,4 @@ const Input = ({ type = "text", unstyled = false, size = "default", ...props })
 	box: inputBox(type, size, unstyled),
 	size
 });
-//#endregion
 export { Input, NativeField };

package/dist/components/input.shared.d.ts

@@ -1,5 +1,4 @@
 import { ControlSize } from "../lib/control-size.js";
-//#region src/components/input.shared.d.ts
 /** The props every text field renderer accepts, with one meaning. */
 export type TextFieldContract = {
   size?: ControlSize;
@@ -15,5 +14,4 @@ export type TextFieldContract = {
 /** A single-line field also says what it holds; `search` draws a search field. */
 export type InputContract = TextFieldContract & {
   type?: "email" | "search" | "tel" | "text" | "url";
-};
-//#endregion
+};

package/dist/components/kbd.d.ts

@@ -0,0 +1,58 @@
+import * as React$1 from "react";
+/**
+ * A key or a key combination, drawn as key caps.
+ *
+ * Give it `keys` and it spells modifiers the way the reader's platform does:
+ * `["mod", "K"]` reads `⌘K` on Apple devices and `Ctrl+K` elsewhere. The
+ * server and the first client render use the non-Apple spelling, and the
+ * label switches once mounted, so hydration never disagrees. Children are
+ * shown as written, for a key that needs no translation.
+ *
+ * `MenuShortcut` and `TooltipPopup`'s `shortcut` render through it, so a
+ * shortcut reads the same in a menu, a tooltip and a hint.
+ */
+declare const Kbd: ({ className, children, keys, variant, ...props }: KbdProps) => React$1.JSX.Element;
+/** A modifier or named key `Kbd` spells per platform; anything else as is. */
+type KbdNamedKey = "mod" | "ctrl" | "alt" | "shift" | "enter" | "escape" | "backspace" | "delete" | "tab" | "up" | "down" | "left" | "right";
+/**
+ * A named key (see `KbdNamedKey`) or any other key (a letter, a digit, a
+ * symbol), which is shown as written.
+ */
+type KbdKey = string;
+/**
+ * A combination: at least one key, so a shortcut can never draw an empty
+ * key cap.
+ */
+type KbdKeys = readonly [KbdKey, ...KbdKey[]];
+type KbdPlatform = "apple" | "other";
+/**
+ * - `cap` (default): a boxed key cap, for a shortcut that stands on its own
+ *   (a hint, a tooltip).
+ * - `plain`: the keys as quiet text with no box, for the end of a row of
+ *   labels (a menu item), where caps would crowd it.
+ */
+type KbdVariant = "cap" | "plain";
+type KbdProps = React$1.ComponentProps<"kbd"> & {
+  keys?: KbdKeys | undefined;
+  variant?: KbdVariant | undefined;
+};
+/**
+ * The combination as the platform writes it: Apple glyphs run together
+ * (`⌘⇧K`), other platforms join words with `+` (`Ctrl+Shift+K`).
+ */
+declare function formatKeys(keys: readonly KbdKey[], platform: KbdPlatform): string;
+/** What platform detection reads; `userAgentData` is not in every browser. */
+type KbdNavigator = Pick<Navigator, "platform"> & {
+  userAgentData?: {
+    platform?: string | undefined;
+  } | undefined;
+};
+/**
+ * The platform a navigator reports. A browser that has `userAgentData` may
+ * leave its `platform` empty, so an empty name falls back to
+ * `navigator.platform` as a missing one does.
+ */
+declare function kbdPlatformOf(nav: KbdNavigator): KbdPlatform;
+/** The reader's platform once mounted; `other` on the server and in hydration. */
+declare function useKbdPlatform(): KbdPlatform;
+export { Kbd, type KbdKey, type KbdKeys, type KbdNamedKey, type KbdNavigator, type KbdPlatform, type KbdProps, type KbdVariant, formatKeys, kbdPlatformOf, useKbdPlatform };

package/dist/components/kbd.js

@@ -0,0 +1,90 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { useSyncExternalStore } from "react";
+// src/components/kbd.tsx
+/**
+* A key or a key combination, drawn as key caps.
+*
+* Give it `keys` and it spells modifiers the way the reader's platform does:
+* `["mod", "K"]` reads `⌘K` on Apple devices and `Ctrl+K` elsewhere. The
+* server and the first client render use the non-Apple spelling, and the
+* label switches once mounted, so hydration never disagrees. Children are
+* shown as written, for a key that needs no translation.
+*
+* `MenuShortcut` and `TooltipPopup`'s `shortcut` render through it, so a
+* shortcut reads the same in a menu, a tooltip and a hint.
+*/
+const Kbd = ({ className, children, keys, variant = "cap", ...props }) => {
+	const platform = useKbdPlatform();
+	return /* @__PURE__ */ jsx("kbd", {
+		className: cn("inline-flex shrink-0 items-center justify-center gap-0.5 font-sans leading-none font-medium tabular-nums", KBD_VARIANT_CLASS_NAME[variant], className),
+		"data-slot": "kbd",
+		"data-variant": variant,
+		...props,
+		children: keys === void 0 ? children : formatKeys(keys, platform)
+	});
+};
+const KBD_VARIANT_CLASS_NAME = {
+	cap: "border-border bg-muted text-muted-foreground text-2xs h-5 min-w-5 rounded border px-1",
+	plain: "text-foreground-label text-xs tracking-widest"
+};
+const KEY_LABELS = {
+	apple: {
+		alt: "⌥",
+		backspace: "⌫",
+		ctrl: "⌃",
+		delete: "⌦",
+		down: "↓",
+		enter: "↩",
+		escape: "Esc",
+		left: "←",
+		mod: "⌘",
+		right: "→",
+		shift: "⇧",
+		tab: "⇥",
+		up: "↑"
+	},
+	other: {
+		alt: "Alt",
+		backspace: "Backspace",
+		ctrl: "Ctrl",
+		delete: "Del",
+		down: "↓",
+		enter: "Enter",
+		escape: "Esc",
+		left: "←",
+		mod: "Ctrl",
+		right: "→",
+		shift: "Shift",
+		tab: "Tab",
+		up: "↑"
+	}
+};
+function isNamedKey(key) {
+	return Object.hasOwn(KEY_LABELS.other, key);
+}
+/**
+* The combination as the platform writes it: Apple glyphs run together
+* (`⌘⇧K`), other platforms join words with `+` (`Ctrl+Shift+K`).
+*/
+function formatKeys(keys, platform) {
+	return keys.map((key) => isNamedKey(key) ? KEY_LABELS[platform][key] : key).join(platform === "apple" ? "" : "+");
+}
+const APPLE_PLATFORM_PATTERN = /mac|iphone|ipad|ipod/iu;
+/**
+* The platform a navigator reports. A browser that has `userAgentData` may
+* leave its `platform` empty, so an empty name falls back to
+* `navigator.platform` as a missing one does.
+*/
+function kbdPlatformOf(nav) {
+	const name = nav.userAgentData?.platform || nav.platform;
+	return APPLE_PLATFORM_PATTERN.test(name) ? "apple" : "other";
+}
+const detectKbdPlatform = () => kbdPlatformOf(navigator);
+const subscribeToNothing = () => () => void 0;
+/** The reader's platform once mounted; `other` on the server and in hydration. */
+function useKbdPlatform() {
+	return useSyncExternalStore(subscribeToNothing, detectKbdPlatform, () => "other");
+}
+export { Kbd, formatKeys, kbdPlatformOf, useKbdPlatform };

package/dist/components/label.d.ts

@@ -1,5 +1,4 @@
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/label.d.ts
 /**
  * - `default`: the caption above or beside a control.
  * - `choice`: one row of a list of choices, wrapping its radio or checkbox so
@@ -23,5 +22,4 @@ type LabelVariant = keyof typeof LABEL_VARIANT_CLASS_NAME;
 declare function Label({ className, render, variant, ...props }: useRender.ComponentProps<"label"> & {
   variant?: LabelVariant;
 }): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-//#endregion
 export { Label, type LabelVariant };

package/dist/components/label.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/utils.js";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/label.tsx
+// src/components/label.tsx
 /**
 * - `default`: the caption above or beside a control.
 * - `choice`: one row of a list of choices, wrapping its radio or checkbox so
@@ -33,5 +33,4 @@ function Label({ className, render, variant = "default", ...props }) {
 		render
 	});
 }
-//#endregion
 export { Label };

package/dist/components/landing.d.ts

@@ -1,5 +1,4 @@
 import { ReactElement, ReactNode } from "react";
-//#region src/components/landing.d.ts
 /**
  * A home screen's one shape: a greeting and a box in the upper fold, three
  * columns of what the reader reaches from it below. The chat home and the
@@ -61,5 +60,4 @@ type LandingEmptyProps = {
   children: ReactNode;
 };
 export declare const LandingEmpty: ({ children }: LandingEmptyProps) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/landing.js

@@ -3,7 +3,7 @@ import { cn } from "../lib/utils.js";
 import { BidiText } from "./bidi-text.js";
 import { ScrollArea } from "./scroll-area.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/landing.tsx
+// src/components/landing.tsx
 const LandingLayout = ({ actions, hero, children, footer }) => /* @__PURE__ */ jsxs("div", {
 	className: "mx-auto flex h-full w-full max-w-5xl flex-1 flex-col overflow-hidden",
 	children: [actions, /* @__PURE__ */ jsx("div", {
@@ -106,5 +106,4 @@ const LandingEmpty = ({ children }) => /* @__PURE__ */ jsx("div", {
 	className: "border-border text-muted-foreground rounded-md border border-dashed px-3 py-3 text-sm",
 	children
 });
-//#endregion
 export { LANDING_ROW_CLASS, LANDING_SECTION_HEADING_CLASS, LandingButton, LandingEmpty, LandingGreeting, LandingItemText, LandingLayout, LandingRowIcon, LandingSection };

package/dist/components/list.d.ts

@@ -1,7 +1,6 @@
 import * as React$1 from "react";
 import { VariantProps } from "class-variance-authority";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/list.d.ts
 /**
  * Grouped list: a titled section holding one surface of hairline-divided
  * rows. Use it for settings and inventories of named things (connections,
@@ -60,5 +59,4 @@ type StatusTone = "neutral" | "success" | "warning" | "destructive";
 declare const ListItemStatus: ({ tone, className, children, ...props }: React$1.ComponentProps<"span"> & {
   tone?: StatusTone;
 }) => React$1.JSX.Element;
-//#endregion
 export { List, ListEmpty, ListGroup, ListGroupAction, ListGroupCount, ListGroupDescription, ListGroupHeader, ListGroupHeading, ListGroupTitle, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemMedia, ListItemStatus, ListItemTitle, type StatusTone };