@ctrl-ui/react 0.8.17 → 0.8.19

package/dist/markdown-editor.js

@@ -0,0 +1,192 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { Textarea } from "./ui/textarea.js";
+import { MarkdownEditorContext, useMarkdownEditor } from "./markdown-editor/context.js";
+import { createMarkdownCodec, hasMarkdownContent, markdownExtensions, requiresMarkdownSource } from "./markdown-editor/extensions.js";
+import { useImageUploads } from "./markdown-editor/use-image-uploads.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slice } from "@tiptap/pm/model";
+import { EditorState } from "@tiptap/pm/state";
+import { EditorContent, useEditor } from "@tiptap/react";
+//#region src/markdown-editor.tsx
+function MarkdownEditor({ value, defaultValue = "", onValueChange, disabled = false, onUploadImage, maxImageBytes = 10485760, onStatusChange, children, className, ...props }) {
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const markdown = value ?? internalValue;
+	const [sourceMode, setSourceMode] = useState(false);
+	const [contentAttributes, setContentAttributes] = useState({
+		role: "textbox",
+		"aria-multiline": "true"
+	});
+	const [codec] = useState(createMarkdownCodec);
+	const sourceRequired = useMemo(() => requiresMarkdownSource(markdown, codec), [markdown, codec]);
+	const source = sourceMode || sourceRequired;
+	const lastValue = useRef(markdown);
+	const [extensions] = useState(markdownExtensions);
+	const handlers = useRef(null);
+	function setMarkdown(next) {
+		lastValue.current = next;
+		setInternalValue(next);
+		onValueChange?.(next);
+	}
+	const editor = useEditor({
+		extensions,
+		immediatelyRender: false,
+		shouldRerenderOnTransaction: false,
+		content: sourceRequired ? "" : markdown,
+		contentType: "markdown",
+		editable: !disabled,
+		onUpdate: ({ editor: currentEditor }) => setMarkdown(currentEditor.getMarkdown()),
+		editorProps: {
+			attributes: contentAttributes,
+			handlePaste: (view, event) => {
+				if (disabled) return false;
+				const files = Array.from(event.clipboardData?.files ?? []);
+				if (onUploadImage && files.length > 0) {
+					event.preventDefault();
+					handlers.current?.upload(files);
+					return true;
+				}
+				const text = event.clipboardData?.getData("text/plain");
+				if (!text || event.clipboardData?.getData("text/html") || requiresMarkdownSource(text, codec)) return false;
+				const document = view.state.schema.nodeFromJSON(codec.parse(text));
+				event.preventDefault();
+				view.dispatch(view.state.tr.replaceSelection(Slice.maxOpen(document.content)).scrollIntoView());
+				return true;
+			},
+			handleDrop: (view, event, _slice, moved) => {
+				const files = Array.from(event.dataTransfer?.files ?? []);
+				if (moved || !onUploadImage || disabled || files.length === 0) return false;
+				event.preventDefault();
+				const position = view.posAtCoords({
+					left: event.clientX,
+					top: event.clientY
+				})?.pos;
+				handlers.current?.upload(files, position);
+				return true;
+			}
+		}
+	});
+	const imageUploads = useImageUploads(editor, onUploadImage, maxImageBytes);
+	useEffect(() => {
+		handlers.current = imageUploads;
+	});
+	useEffect(() => {
+		if (!editor) return;
+		editor.setEditable(!disabled, false);
+	}, [editor, disabled]);
+	useEffect(() => {
+		if (!editor) return;
+		const externalReset = lastValue.current !== markdown;
+		if (externalReset) handlers.current?.cancelAll();
+		if (source) {
+			lastValue.current = markdown;
+			return;
+		}
+		if (editor.getMarkdown() !== markdown) {
+			editor.commands.setContent(markdown, {
+				contentType: "markdown",
+				emitUpdate: false
+			});
+			if (externalReset) {
+				editor.view.updateState(EditorState.create({
+					schema: editor.schema,
+					doc: editor.state.doc,
+					plugins: editor.state.plugins
+				}));
+				editor.view.dispatch(editor.state.tr);
+			}
+		}
+		lastValue.current = markdown;
+	}, [
+		editor,
+		markdown,
+		source
+	]);
+	const isEmpty = source ? markdown.trim() === "" : !hasMarkdownContent(codec.parse(markdown));
+	const hasPendingUploads = imageUploads.uploads.length > 0;
+	useEffect(() => {
+		onStatusChange?.({
+			isEmpty,
+			hasPendingUploads
+		});
+	}, [
+		onStatusChange,
+		isEmpty,
+		hasPendingUploads
+	]);
+	return /* @__PURE__ */ jsx(MarkdownEditorContext, {
+		value: {
+			editor,
+			disabled,
+			source,
+			markdown,
+			sourceRequired,
+			setSource: setSourceMode,
+			setMarkdown,
+			setContentAttributes,
+			canUpload: Boolean(onUploadImage),
+			...imageUploads
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "markdown-editor",
+			"data-control-family": "markdown-editor",
+			"data-slot": "root",
+			"data-disabled": disabled ? "" : void 0,
+			className: cn("min-w-0", className),
+			...props,
+			children
+		})
+	});
+}
+function MarkdownEditorContent({ label, placeholder, autoFocus = false, className }) {
+	const { editor, disabled, source, sourceRequired, markdown, setMarkdown, setContentAttributes } = useMarkdownEditor();
+	useEffect(() => {
+		setContentAttributes({
+			role: "textbox",
+			"aria-multiline": "true",
+			"aria-label": label,
+			"aria-disabled": String(disabled),
+			"data-placeholder": placeholder ?? ""
+		});
+	}, [
+		setContentAttributes,
+		label,
+		disabled,
+		placeholder
+	]);
+	useEffect(() => {
+		if (editor && autoFocus && !source && !disabled) editor.commands.focus("end");
+	}, [
+		editor,
+		autoFocus,
+		source,
+		disabled
+	]);
+	if (source || !editor) return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "markdown-editor",
+		"data-control-family": "markdown-editor",
+		"data-slot": "source",
+		className,
+		children: [sourceRequired ? /* @__PURE__ */ jsx("p", {
+			role: "status",
+			children: "This content uses Markdown that is only available in source mode. Its source is preserved."
+		}) : null, /* @__PURE__ */ jsx(Textarea, {
+			"aria-label": label,
+			placeholder,
+			value: markdown,
+			disabled: disabled || !editor,
+			onChange: (event) => setMarkdown(event.target.value),
+			rows: 5
+		})]
+	});
+	return /* @__PURE__ */ jsx(EditorContent, {
+		editor,
+		"data-control-ui": "markdown-editor",
+		"data-control-family": "markdown-editor",
+		"data-slot": "content",
+		className
+	});
+}
+//#endregion
+export { MarkdownEditor, MarkdownEditorContent };

package/dist/styles/index.css

@@ -51,7 +51,11 @@
 @import "./recipes/resizable.css";
 @import "./recipes/separator.css";
 @import "./recipes/toolbar.css";
+@import "./type-scale.css";
 @import "./recipes/kbd.css";
+@import "./recipes/markdown.css";
+@import "./recipes/label.css";
+@import "./recipes/markdown-editor.css";
 @import "./recipes/dockable-panel.css";
 @import "./recipes/item.css";
 @import "./recipes/dropzone.css";
@@ -68,7 +72,6 @@
 @import "./recipes/inline-attachment.css";
 @import "./recipes/source-badge.css";
 @import "./recipes/inline-citation.css";
-@import "./recipes/markdown.css";
 @import "./recipes/markdown-block.css";
 @import "./recipes/range.css";
 @import "./recipes/morphing-panel.css";
@@ -86,6 +89,5 @@
 @import "./recipes/popup-toast.css";
 @import "./recipes/transcript-divider.css";
 @import "./recipes/tree.css";
-@import "./type-scale.css";
 @import "./recipes/user-ask.css";
 @import "./recipes/user-ask-details.css";

package/dist/styles/recipes/code.css

@@ -59,6 +59,10 @@
     margin-inline-start: auto;
   }
 
+  :where([data-control-family="code"][data-slot="floating-frame"]) {
+    padding-block-start: calc(var(--spacing) * 9);
+  }
+
   :where([data-control-family="code"][data-slot="line"]) {
     min-block-size: calc(var(--spacing) * 5);
   }

package/dist/styles/recipes/field.css

@@ -187,7 +187,7 @@
   }
 
   :where([data-control-family="field"][data-field-kind="field"][data-slot="root"]) {
-    gap: calc(var(--spacing) * 3);
+    gap: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
   }
 
   :where([data-control-family="field"][data-field-kind="field"][data-slot="content"]) {

package/dist/styles/recipes/label.css

@@ -0,0 +1,19 @@
+@layer components {
+  :where([data-control-family="label"][data-slot="root"]) {
+    --cui-label-root-foreground: var(--foreground);
+    color: var(--cui-label-root-foreground);
+    font-size: var(--text-label);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="label"][data-slot="root"]:has(:disabled, [data-disabled])) {
+    cursor: not-allowed;
+    opacity: var(--disabled-opacity);
+  }
+}
+
+@property --cui-label-root-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/markdown-editor.css

@@ -0,0 +1,196 @@
+@layer components {
+  :where([data-control-family="markdown-editor"][data-slot="root"]) {
+    --cui-markdown-editor-background: var(--background);
+    --cui-markdown-editor-foreground: var(--foreground);
+    --cui-markdown-editor-border-width: var(--control-rim-width);
+    --cui-markdown-editor-border-color: var(--border);
+    --cui-markdown-editor-radius: var(--radius-panel);
+    --cui-markdown-editor-padding: calc(var(--spacing) * 3);
+    --cui-markdown-editor-min-height: calc(var(--spacing) * 32);
+    --cui-markdown-editor-max-height: 60dvh;
+    --cui-markdown-editor-gap: calc(var(--spacing) * 3);
+    --cui-markdown-editor-muted-foreground: var(--muted-foreground);
+    --cui-markdown-editor-code-background: var(--muted);
+    color: var(--cui-markdown-editor-foreground);
+    background: var(--cui-markdown-editor-background);
+    border: var(--cui-markdown-editor-border-width) solid var(--cui-markdown-editor-border-color);
+    border-radius: var(--cui-markdown-editor-radius);
+    overflow: clip;
+    font-size: var(--text-body);
+    line-height: var(--leading-relaxed);
+  }
+  :where([data-control-family="markdown-editor"][data-slot="content"] .tiptap) {
+    min-block-size: var(--cui-markdown-editor-min-height);
+    max-block-size: var(--cui-markdown-editor-max-height);
+    overflow: auto;
+    padding: var(--cui-markdown-editor-padding);
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+  }
+  :where([data-control-family="markdown-editor"] .tiptap:focus-visible) {
+    outline: 2px solid var(--ring);
+    outline-offset: -2px;
+  }
+  :where([data-control-family="markdown-editor"][data-slot="source"]),
+  :where([data-control-family="markdown-editor"][data-slot="uploads"]) {
+    padding: var(--cui-markdown-editor-padding);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap > * + *) {
+    margin-block-start: var(--cui-markdown-editor-gap);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap:has(> p:only-child > br:only-child))::before {
+    content: attr(data-placeholder);
+    color: var(--cui-markdown-editor-muted-foreground);
+    pointer-events: none;
+    float: inline-start;
+    block-size: 0;
+  }
+  :where([data-control-family="markdown-editor"] .tiptap h1) {
+    font-size: var(--text-heading-2);
+    font-weight: var(--font-weight-semibold);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap h2) {
+    font-size: var(--text-heading-3);
+    font-weight: var(--font-weight-semibold);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap :is(h3, h4, h5, h6)) {
+    font-size: var(--text-heading-4);
+    font-weight: var(--font-weight-semibold);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap strong) {
+    font-weight: var(--font-weight-semibold);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap em) {
+    font-style: italic;
+  }
+  :where([data-control-family="markdown-editor"] .tiptap s) {
+    text-decoration: line-through;
+  }
+  :where([data-control-family="markdown-editor"] .tiptap a) {
+    text-decoration: underline;
+    color: var(--primary);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap ul) {
+    list-style: disc;
+    padding-inline-start: calc(var(--spacing) * 6);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap ol) {
+    list-style: decimal;
+    padding-inline-start: calc(var(--spacing) * 6);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap ul[data-type="taskList"]) {
+    list-style: none;
+    padding-inline-start: 0;
+  }
+  :where([data-control-family="markdown-editor"] .tiptap li[data-type="taskItem"]) {
+    display: flex;
+    align-items: baseline;
+    gap: var(--cui-markdown-editor-gap);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap li[data-type="taskItem"] > div) {
+    flex: 1;
+    min-inline-size: 0;
+  }
+  :where([data-control-family="markdown-editor"] .tiptap blockquote) {
+    border-inline-start: var(--cui-markdown-editor-border-width) solid var(--cui-markdown-editor-border-color);
+    padding-inline-start: var(--cui-markdown-editor-padding);
+    color: var(--cui-markdown-editor-muted-foreground);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap :is(code, pre)) {
+    font-family: var(--font-mono);
+    background: var(--cui-markdown-editor-code-background);
+    border-radius: var(--radius-sm);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap pre) {
+    padding: var(--cui-markdown-editor-padding);
+    overflow: auto;
+  }
+  :where([data-control-family="markdown-editor"] .tiptap img[src]) {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+    border-radius: var(--radius-sm);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap .ProseMirror-selectednode) {
+    outline: 2px solid var(--ring);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap [data-image-upload]) {
+    padding: var(--cui-markdown-editor-padding);
+    border: var(--cui-markdown-editor-border-width) dashed var(--cui-markdown-editor-border-color);
+    color: var(--cui-markdown-editor-muted-foreground);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap table) {
+    border-collapse: collapse;
+    inline-size: 100%;
+  }
+  :where([data-control-family="markdown-editor"] .tiptap :is(td, th)) {
+    border: var(--cui-markdown-editor-border-width) solid var(--cui-markdown-editor-border-color);
+    padding: var(--cui-markdown-editor-padding);
+  }
+}
+
+@property --cui-markdown-editor-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-markdown-editor-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-markdown-editor-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-markdown-editor-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-markdown-editor-padding {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-markdown-editor-min-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-markdown-editor-max-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-markdown-editor-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-markdown-editor-muted-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-markdown-editor-code-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-markdown-editor-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/switch.css

@@ -4,11 +4,13 @@
     --cui-switch-height: calc(var(--spacing) * 5);
     --cui-switch-padding: calc(var(--spacing) * 0.5);
     --cui-switch-thumb-inline-size: calc(var(--spacing) * 4);
-    --cui-switch-thumb-press-scale: 1.25 1;
+    --cui-switch-thumb-press-inline-size: calc(var(--cui-switch-thumb-inline-size) * 1.25);
+    --cui-switch-thumb-press-scale: 1;
     --cui-switch-thumb-backdrop-filter: none;
     --_switch-direction: 1;
     --_switch-progress: 0;
-    --_switch-travel: calc(var(--cui-switch-inline-size) - var(--cui-switch-padding) * 2 - var(--cui-switch-thumb-inline-size));
+    --_switch-thumb-inline-size: var(--cui-switch-thumb-inline-size);
+    --_switch-travel: calc(var(--cui-switch-inline-size) - var(--cui-switch-padding) * 2 - var(--_switch-thumb-inline-size));
     block-size: var(--cui-switch-height);
     inline-size: var(--cui-switch-inline-size);
     padding: var(--cui-switch-padding);
@@ -79,13 +81,13 @@
     border-radius: var(--cui-switch-thumb-radius);
     background: var(--cui-switch-thumb-background);
     box-shadow: var(--cui-switch-thumb-shadow);
-    inline-size: var(--cui-switch-thumb-inline-size);
+    inline-size: var(--_switch-thumb-inline-size);
     block-size: calc(var(--cui-switch-height) - var(--cui-switch-padding) * 2);
     translate: calc(var(--_switch-direction) * var(--_switch-travel) * var(--_switch-progress)) 0;
     transform-origin: left center;
     -webkit-backdrop-filter: var(--cui-switch-thumb-backdrop-filter);
     backdrop-filter: var(--cui-switch-thumb-backdrop-filter);
-    transition-property: translate, scale, background-color, box-shadow;
+    transition-property: translate, inline-size, scale, background-color, box-shadow;
     transition-duration: var(--duration-base);
     transition-timing-function: var(--ease-emphasized);
   }
@@ -136,6 +138,10 @@
     transform-origin: left center;
   }
 
+  :where([data-control-family="switch"][data-slot="root"]:is(:active, [data-dragging]):not([data-disabled], [data-readonly])) {
+    --_switch-thumb-inline-size: var(--cui-switch-thumb-press-inline-size);
+  }
+
   :where(
     [data-control-family="switch"][data-slot="root"]:is(:active, [data-dragging]):not([data-disabled], [data-readonly]) [data-slot="thumb"]
   ) {
@@ -157,7 +163,7 @@
   }
 
   :where([data-control-family="switch"][data-slot="root"][data-dragging] [data-slot="thumb"]) {
-    transition-property: scale, background-color, box-shadow;
+    transition-property: inline-size, scale, background-color, box-shadow;
   }
 }
 
@@ -255,6 +261,12 @@
   initial-value: 16px;
 }
 
+@property --cui-switch-thumb-press-inline-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 20px;
+}
+
 @property --cui-switch-thumb-press-scale {
   syntax: "*";
   inherits: true;

package/dist/styles/theme.css

@@ -601,6 +601,31 @@
   --default-transition-timing-function: var(--ease-standard);
 }
 
+@utility text-display {
+  font-family: var(--font-display);
+  text-wrap: balance;
+}
+
+@utility text-heading-1 {
+  font-family: var(--font-display);
+  text-wrap: balance;
+}
+
+@utility text-heading-2 {
+  font-family: var(--font-display);
+  text-wrap: balance;
+}
+
+@utility text-heading-3 {
+  font-family: var(--font-display);
+  text-wrap: balance;
+}
+
+@utility text-heading-4 {
+  font-family: var(--font-display);
+  text-wrap: balance;
+}
+
 @layer base {
   *,
   ::after,

package/dist/styles/type-scale.css

@@ -33,13 +33,39 @@
   --text-display--letter-spacing: -0.02em;
 
   /* Font ROLES: body+display default to --font-sans; brand re-values ONE token for headings(font-display)/body(font-body)
-     own face. Headings apply `font-display` utility on element (font-family isn't a paired --text-* prop). */
+     own face. */
   --font-body: var(--font-sans);
   --font-display: var(--font-sans);
 }
 
+/*
+ * Heading rungs also carry the display face and balanced wrapping (Tailwind merges this into the same `text-heading-N` class),
+ * so a heading is ONE class: `text-heading-2`, never `text-heading-2 font-display text-balance font-semibold`.
+ */
+@utility text-display {
+  font-family: var(--font-display);
+  text-wrap: balance;
+}
+@utility text-heading-1 {
+  font-family: var(--font-display);
+  text-wrap: balance;
+}
+@utility text-heading-2 {
+  font-family: var(--font-display);
+  text-wrap: balance;
+}
+@utility text-heading-3 {
+  font-family: var(--font-display);
+  text-wrap: balance;
+}
+@utility text-heading-4 {
+  font-family: var(--font-display);
+  text-wrap: balance;
+}
+
 /*
  * History: fixed 3 competing type systems (Tailwind defaults + named rungs + raw text-[Npx]) into one rung/role; 14px = body.
- * Usage: apply utility directly to element (no <Text> component), e.g. text-heading-1 on <h1>, text-body on <p>.
+ * Usage: apply the rung directly to the semantic element (no <Text> component), e.g. text-heading-1 on <h1>, text-body on <p>.
+ * Heading LEVEL is the document outline; the RUNG is the look. They are decoupled on purpose: an <h3> may wear text-heading-2.
  * Control chrome text is sized by its recipe (`--cui-button-font-size`, `--cui-field-font-size`), not by these utilities.
  */

package/dist/ui/app-shell.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { PageScrollContext, usePageScroll } from "./page-layout.js";
 import { SidebarProvider } from "./sidebar-provider.js";
 import { SidebarInset } from "./sidebar.js";
-import { PageScrollContext, usePageScroll } from "./page-layout.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/app-shell.tsx
 function AppShell({ scroll = "auto", layout = "viewport", className, ...props }) {

package/dist/ui/autocomplete.js

@@ -85,7 +85,7 @@ function AutocompleteContent({ className, children, sideOffset = 6, ...props })
 function AutocompleteList({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(ScrollArea, {
 		className: "w-full",
-		viewportClassName: "overscroll-contain",
+		viewportClassName: "overscroll-y-contain",
 		maxHeight: "min(18rem, var(--available-height))",
 		lockAxis: "x",
 		children: /* @__PURE__ */ jsx(Autocomplete$1.List, {

package/dist/ui/code.js

@@ -112,6 +112,7 @@ function CodeCopy({ value, copiedLabel, copiedAriaLabel = "Copied to clipboard",
 }
 function CodeFloatingCopy({ className, ...props }) {
 	return /* @__PURE__ */ jsx(CodeCopy, {
+		variant: "surface",
 		"data-code-floating": "true",
 		className: cn("absolute z-10", className),
 		...props

package/dist/ui/combobox.js

@@ -115,7 +115,7 @@ function ComboboxContent({ className, children, sideOffset = 6, anchor, ...props
 function ComboboxList({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(ScrollArea, {
 		className: "w-full",
-		viewportClassName: "overscroll-contain",
+		viewportClassName: "overscroll-y-contain",
 		maxHeight: "min(18rem, var(--available-height))",
 		lockAxis: "x",
 		children: /* @__PURE__ */ jsx(Combobox$1.List, {

package/dist/ui/command.js

@@ -3,8 +3,8 @@ import { cn } from "../lib/cn.js";
 import { LiveStatus } from "./live-status.js";
 import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
-import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "./empty.js";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog.js";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "./empty.js";
 import { useEffect, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Command as Command$1, useCommandState } from "cmdk";

package/dist/ui/dockable-panel.js

@@ -4,8 +4,8 @@ import { Button } from "./button.js";
 import { LiveStatus } from "./live-status.js";
 import { ScrollArea } from "./scroll-area.js";
 import { useIsMobile } from "../hooks/use-mobile.js";
-import { Drawer, DrawerBody, DrawerContent } from "./drawer.js";
 import { clampDockablePanelPosition, dockablePanelSideAt, dockablePanelSideForKey, oppositeDockablePanelSide } from "./dockable-panel-geometry.js";
+import { Drawer, DrawerBody, DrawerContent } from "./drawer.js";
 import { createContext, use, useEffect, useEffectEvent, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/dockable-panel.tsx

package/dist/ui/label.d.ts

@@ -0,0 +1,8 @@
+import { LabelKnobStyle } from "../knob-contracts/label-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/label.d.ts
+export type LabelProps = Omit<ComponentProps<"label">, "style"> & {
+  style?: CSSProperties & LabelKnobStyle;
+};
+export declare function Label({ htmlFor, children, ...props }: LabelProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/label.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/label.tsx
+function Label({ htmlFor, children, ...props }) {
+	return /* @__PURE__ */ jsx("label", {
+		...props,
+		htmlFor,
+		"data-control-ui": "label",
+		"data-control-family": "label",
+		"data-slot": "root",
+		children
+	});
+}
+//#endregion
+export { Label };