tldraw 4.4.0-canary.afdcafe834b3 → 4.4.0-canary.bb78e813fee7

package/dist-esm/lib/ui/components/primitives/TldrawUiSelect.mjs

@@ -0,0 +1,114 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContainer } from "@tldraw/editor";
+import classNames from "classnames";
+import { Select as _Select } from "radix-ui";
+import * as React from "react";
+import { useMenuIsOpen } from "../../hooks/useMenuIsOpen.mjs";
+import { TldrawUiIcon } from "./TldrawUiIcon.mjs";
+function TldrawUiSelect({
+  id,
+  value,
+  onValueChange,
+  onOpenChange,
+  disabled,
+  className,
+  children,
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel
+}) {
+  const [open, handleOpenChange] = useMenuIsOpen(id, onOpenChange);
+  return /* @__PURE__ */ jsx(
+    _Select.Root,
+    {
+      value,
+      onValueChange,
+      onOpenChange: handleOpenChange,
+      open,
+      disabled,
+      dir: "ltr",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          id,
+          className: classNames("tlui-select", className),
+          "data-testid": dataTestId,
+          "aria-label": ariaLabel,
+          children
+        }
+      )
+    }
+  );
+}
+const TldrawUiSelectTrigger = React.forwardRef(
+  function TldrawUiSelectTrigger2({ children, className }, ref) {
+    return /* @__PURE__ */ jsxs(
+      _Select.Trigger,
+      {
+        ref,
+        className: classNames("tlui-button tlui-select__trigger", className),
+        children: [
+          children,
+          /* @__PURE__ */ jsx(_Select.Icon, { className: "tlui-select__chevron", children: /* @__PURE__ */ jsx(TldrawUiIcon, { icon: "chevron-down", label: "", small: true }) })
+        ]
+      }
+    );
+  }
+);
+function TldrawUiSelectValue({ placeholder, icon, children }) {
+  return /* @__PURE__ */ jsx(_Select.Value, { placeholder, children: /* @__PURE__ */ jsxs("span", { className: "tlui-select__value", children: [
+    icon && /* @__PURE__ */ jsx(TldrawUiIcon, { icon, label: "", small: true }),
+    /* @__PURE__ */ jsx("span", { className: "tlui-button__label", children })
+  ] }) });
+}
+function TldrawUiSelectContent({
+  children,
+  side = "bottom",
+  align = "start",
+  className
+}) {
+  const container = useContainer();
+  return /* @__PURE__ */ jsx(_Select.Portal, { container, children: /* @__PURE__ */ jsx(
+    _Select.Content,
+    {
+      className: classNames("tlui-menu tlui-select__content", className),
+      position: "popper",
+      side,
+      align,
+      sideOffset: 4,
+      collisionPadding: 4,
+      children: /* @__PURE__ */ jsx(_Select.Viewport, { className: "tlui-select__viewport", children })
+    }
+  ) });
+}
+function TldrawUiSelectItem({
+  value,
+  label,
+  icon,
+  disabled,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    _Select.Item,
+    {
+      value,
+      disabled,
+      className: classNames(
+        "tlui-button tlui-button__menu tlui-button__checkbox tlui-select__item",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(TldrawUiIcon, { small: true, icon: "check", label: "", className: "tlui-select__item-indicator" }),
+        icon && /* @__PURE__ */ jsx(TldrawUiIcon, { icon, label: "", small: true }),
+        /* @__PURE__ */ jsx(_Select.ItemText, { className: "tlui-button__label", children: label })
+      ]
+    }
+  );
+}
+export {
+  TldrawUiSelect,
+  TldrawUiSelectContent,
+  TldrawUiSelectItem,
+  TldrawUiSelectTrigger,
+  TldrawUiSelectValue
+};
+//# sourceMappingURL=TldrawUiSelect.mjs.map

package/dist-esm/lib/ui/components/primitives/TldrawUiSelect.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiSelect.tsx"],
+  "sourcesContent": ["import { useContainer } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { Select as _Select } from 'radix-ui'\nimport * as React from 'react'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { TLUiIconType } from '../../icon-types'\nimport { TldrawUiIcon } from './TldrawUiIcon'\n\n/* --------------------- Root --------------------- */\n\n/** @public */\nexport interface TLUiSelectProps {\n\tid: string\n\tvalue: string\n\tonValueChange(value: string): void\n\tonOpenChange?(isOpen: boolean): void\n\tdisabled?: boolean\n\tclassName?: string\n\tchildren: React.ReactNode\n\t'data-testid'?: string\n\t'aria-label'?: string\n}\n\n/**\n * A select dropdown component.\n *\n * @example\n * ```tsx\n * <TldrawUiSelect id=\"my-select\" value={value} onValueChange={setValue}>\n *   <TldrawUiSelectTrigger>\n *     <TldrawUiSelectValue placeholder=\"Select...\" />\n *   </TldrawUiSelectTrigger>\n *   <TldrawUiSelectContent>\n *     <TldrawUiSelectItem value=\"one\" label=\"One\" />\n *     <TldrawUiSelectItem value=\"two\" label=\"Two\" />\n *   </TldrawUiSelectContent>\n * </TldrawUiSelect>\n * ```\n *\n * @public\n * @react\n */\nexport function TldrawUiSelect({\n\tid,\n\tvalue,\n\tonValueChange,\n\tonOpenChange,\n\tdisabled,\n\tclassName,\n\tchildren,\n\t'data-testid': dataTestId,\n\t'aria-label': ariaLabel,\n}: TLUiSelectProps) {\n\tconst [open, handleOpenChange] = useMenuIsOpen(id, onOpenChange)\n\n\treturn (\n\t\t<_Select.Root\n\t\t\tvalue={value}\n\t\t\tonValueChange={onValueChange}\n\t\t\tonOpenChange={handleOpenChange}\n\t\t\topen={open}\n\t\t\tdisabled={disabled}\n\t\t\tdir=\"ltr\"\n\t\t>\n\t\t\t<div\n\t\t\t\tid={id}\n\t\t\t\tclassName={classNames('tlui-select', className)}\n\t\t\t\tdata-testid={dataTestId}\n\t\t\t\taria-label={ariaLabel}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</_Select.Root>\n\t)\n}\n\n/* --------------------- Trigger --------------------- */\n\n/** @public */\nexport interface TLUiSelectTriggerProps {\n\tchildren: React.ReactNode\n\tclassName?: string\n}\n\n/**\n * The trigger button for the select dropdown.\n *\n * @public\n * @react\n */\nexport const TldrawUiSelectTrigger = React.forwardRef<HTMLButtonElement, TLUiSelectTriggerProps>(\n\tfunction TldrawUiSelectTrigger({ children, className }, ref) {\n\t\treturn (\n\t\t\t<_Select.Trigger\n\t\t\t\tref={ref}\n\t\t\t\tclassName={classNames('tlui-button tlui-select__trigger', className)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<_Select.Icon className=\"tlui-select__chevron\">\n\t\t\t\t\t<TldrawUiIcon icon=\"chevron-down\" label=\"\" small />\n\t\t\t\t</_Select.Icon>\n\t\t\t</_Select.Trigger>\n\t\t)\n\t}\n)\n\n/* --------------------- Value --------------------- */\n\n/** @public */\nexport interface TLUiSelectValueProps {\n\tplaceholder?: string\n\ticon?: TLUiIconType | Exclude<string, TLUiIconType>\n\tchildren?: React.ReactNode\n}\n\n/**\n * Displays the currently selected value in the trigger.\n *\n * @public\n * @react\n */\nexport function TldrawUiSelectValue({ placeholder, icon, children }: TLUiSelectValueProps) {\n\treturn (\n\t\t<_Select.Value placeholder={placeholder}>\n\t\t\t<span className=\"tlui-select__value\">\n\t\t\t\t{icon && <TldrawUiIcon icon={icon} label=\"\" small />}\n\t\t\t\t<span className=\"tlui-button__label\">{children}</span>\n\t\t\t</span>\n\t\t</_Select.Value>\n\t)\n}\n\n/* --------------------- Content --------------------- */\n\n/** @public */\nexport interface TLUiSelectContentProps {\n\tchildren: React.ReactNode\n\tside?: 'top' | 'bottom'\n\talign?: 'start' | 'center' | 'end'\n\tclassName?: string\n}\n\n/**\n * The dropdown content container for select items.\n *\n * @public\n * @react\n */\nexport function TldrawUiSelectContent({\n\tchildren,\n\tside = 'bottom',\n\talign = 'start',\n\tclassName,\n}: TLUiSelectContentProps) {\n\tconst container = useContainer()\n\n\treturn (\n\t\t<_Select.Portal container={container}>\n\t\t\t<_Select.Content\n\t\t\t\tclassName={classNames('tlui-menu tlui-select__content', className)}\n\t\t\t\tposition=\"popper\"\n\t\t\t\tside={side}\n\t\t\t\talign={align}\n\t\t\t\tsideOffset={4}\n\t\t\t\tcollisionPadding={4}\n\t\t\t>\n\t\t\t\t<_Select.Viewport className=\"tlui-select__viewport\">{children}</_Select.Viewport>\n\t\t\t</_Select.Content>\n\t\t</_Select.Portal>\n\t)\n}\n\n/* --------------------- Item --------------------- */\n\n/** @public */\nexport interface TLUiSelectItemProps {\n\tvalue: string\n\tlabel: string\n\ticon?: TLUiIconType | Exclude<string, TLUiIconType>\n\tdisabled?: boolean\n\tclassName?: string\n}\n\n/**\n * An item in the select dropdown. Styled to match TldrawUiMenuCheckboxItem.\n *\n * @public\n * @react\n */\nexport function TldrawUiSelectItem({\n\tvalue,\n\tlabel,\n\ticon,\n\tdisabled,\n\tclassName,\n}: TLUiSelectItemProps) {\n\treturn (\n\t\t<_Select.Item\n\t\t\tvalue={value}\n\t\t\tdisabled={disabled}\n\t\t\tclassName={classNames(\n\t\t\t\t'tlui-button tlui-button__menu tlui-button__checkbox tlui-select__item',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t<TldrawUiIcon small icon=\"check\" label=\"\" className=\"tlui-select__item-indicator\" />\n\t\t\t{icon && <TldrawUiIcon icon={icon} label=\"\" small />}\n\t\t\t<_Select.ItemText className=\"tlui-button__label\">{label}</_Select.ItemText>\n\t\t</_Select.Item>\n\t)\n}\n"],
+  "mappings": "AAgEG,cA6BA,YA7BA;AAhEH,SAAS,oBAAoB;AAC7B,OAAO,gBAAgB;AACvB,SAAS,UAAU,eAAe;AAClC,YAAY,WAAW;AACvB,SAAS,qBAAqB;AAE9B,SAAS,oBAAoB;AAoCtB,SAAS,eAAe;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,cAAc;AACf,GAAoB;AACnB,QAAM,CAAC,MAAM,gBAAgB,IAAI,cAAc,IAAI,YAAY;AAE/D,SACC;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA,KAAI;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,WAAW,WAAW,eAAe,SAAS;AAAA,UAC9C,eAAa;AAAA,UACb,cAAY;AAAA,UAEX;AAAA;AAAA,MACF;AAAA;AAAA,EACD;AAEF;AAgBO,MAAM,wBAAwB,MAAM;AAAA,EAC1C,SAASA,uBAAsB,EAAE,UAAU,UAAU,GAAG,KAAK;AAC5D,WACC;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACA;AAAA,QACA,WAAW,WAAW,oCAAoC,SAAS;AAAA,QAElE;AAAA;AAAA,UACD,oBAAC,QAAQ,MAAR,EAAa,WAAU,wBACvB,8BAAC,gBAAa,MAAK,gBAAe,OAAM,IAAG,OAAK,MAAC,GAClD;AAAA;AAAA;AAAA,IACD;AAAA,EAEF;AACD;AAiBO,SAAS,oBAAoB,EAAE,aAAa,MAAM,SAAS,GAAyB;AAC1F,SACC,oBAAC,QAAQ,OAAR,EAAc,aACd,+BAAC,UAAK,WAAU,sBACd;AAAA,YAAQ,oBAAC,gBAAa,MAAY,OAAM,IAAG,OAAK,MAAC;AAAA,IAClD,oBAAC,UAAK,WAAU,sBAAsB,UAAS;AAAA,KAChD,GACD;AAEF;AAkBO,SAAS,sBAAsB;AAAA,EACrC;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AACD,GAA2B;AAC1B,QAAM,YAAY,aAAa;AAE/B,SACC,oBAAC,QAAQ,QAAR,EAAe,WACf;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA,WAAW,WAAW,kCAAkC,SAAS;AAAA,MACjE,UAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,kBAAkB;AAAA,MAElB,8BAAC,QAAQ,UAAR,EAAiB,WAAU,yBAAyB,UAAS;AAAA;AAAA,EAC/D,GACD;AAEF;AAmBO,SAAS,mBAAmB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAwB;AACvB,SACC;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MAEA;AAAA,4BAAC,gBAAa,OAAK,MAAC,MAAK,SAAQ,OAAM,IAAG,WAAU,+BAA8B;AAAA,QACjF,QAAQ,oBAAC,gBAAa,MAAY,OAAM,IAAG,OAAK,MAAC;AAAA,QAClD,oBAAC,QAAQ,UAAR,EAAiB,WAAU,sBAAsB,iBAAM;AAAA;AAAA;AAAA,EACzD;AAEF;",
+  "names": ["TldrawUiSelectTrigger"]
+}

package/dist-esm/lib/ui/version.mjs

@@ -1,8 +1,8 @@
-const version = "4.4.0-canary.afdcafe834b3";
+const version = "4.4.0-canary.bb78e813fee7";
 const publishDates = {
   major: "2025-09-18T14:39:22.803Z",
-  minor: "2026-02-04T08:49:09.694Z",
-  patch: "2026-02-04T08:49:09.694Z"
+  minor: "2026-02-04T09:45:29.031Z",
+  patch: "2026-02-04T09:45:29.031Z"
 };
 export {
   publishDates,

package/dist-esm/lib/ui/version.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/ui/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.4.0-canary.afdcafe834b3'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2026-02-04T08:49:09.694Z',\n\tpatch: '2026-02-04T08:49:09.694Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.4.0-canary.bb78e813fee7'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2026-02-04T09:45:29.031Z',\n\tpatch: '2026-02-04T09:45:29.031Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tldraw",
   "description": "A tiny little drawing editor.",
-  "version": "4.4.0-canary.afdcafe834b3",
+  "version": "4.4.0-canary.bb78e813fee7",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -62,8 +62,8 @@
     "@tiptap/pm": "^3.12.1",
     "@tiptap/react": "^3.12.1",
     "@tiptap/starter-kit": "^3.12.1",
-    "@tldraw/editor": "4.4.0-canary.afdcafe834b3",
-    "@tldraw/store": "4.4.0-canary.afdcafe834b3",
+    "@tldraw/editor": "4.4.0-canary.bb78e813fee7",
+    "@tldraw/store": "4.4.0-canary.bb78e813fee7",
     "classnames": "^2.5.1",
     "hotkeys-js": "^3.13.9",
     "idb": "^7.1.1",

package/src/index.ts

@@ -400,6 +400,7 @@ export {
 	TldrawUiDropdownMenuItem,
 	TldrawUiDropdownMenuRoot,
 	TldrawUiDropdownMenuSub,
+	TldrawUiDropdownMenuSubContent,
 	TldrawUiDropdownMenuSubTrigger,
 	TldrawUiDropdownMenuTrigger,
 	type TLUiDropdownMenuCheckboxItemProps,
@@ -407,6 +408,7 @@ export {
 	type TLUiDropdownMenuGroupProps,
 	type TLUiDropdownMenuItemProps,
 	type TLUiDropdownMenuRootProps,
+	type TLUiDropdownMenuSubContentProps,
 	type TLUiDropdownMenuSubProps,
 	type TLUiDropdownMenuSubTriggerProps,
 	type TLUiDropdownMenuTriggerProps,
@@ -426,6 +428,18 @@ export {
 	type TLUiPopoverProps,
 	type TLUiPopoverTriggerProps,
 } from './lib/ui/components/primitives/TldrawUiPopover'
+export {
+	TldrawUiSelect,
+	TldrawUiSelectContent,
+	TldrawUiSelectItem,
+	TldrawUiSelectTrigger,
+	TldrawUiSelectValue,
+	type TLUiSelectContentProps,
+	type TLUiSelectItemProps,
+	type TLUiSelectProps,
+	type TLUiSelectTriggerProps,
+	type TLUiSelectValueProps,
+} from './lib/ui/components/primitives/TldrawUiSelect'
 export { TldrawUiSlider, type TLUiSliderProps } from './lib/ui/components/primitives/TldrawUiSlider'
 export {
 	TldrawUiToolbar,
@@ -671,7 +685,7 @@ export {
 	type TLUiTranslationContextType,
 	type TLUiTranslationProviderProps,
 } from './lib/ui/hooks/useTranslation/useTranslation'
-export { type TLUiIconType } from './lib/ui/icon-types'
+export { iconTypes, type TLUiIconType } from './lib/ui/icon-types'
 export { useDefaultHelpers, type TLUiOverrideHelpers, type TLUiOverrides } from './lib/ui/overrides'
 export { TldrawUi, TldrawUiInFrontOfTheCanvas, type TldrawUiProps } from './lib/ui/TldrawUi'
 export { containBoxSize, downsizeImage, type BoxWidthHeight } from './lib/utils/assets/assets'

package/src/lib/bindings/arrow/ArrowBindingUtil.ts

@@ -58,8 +58,20 @@ export class ArrowBindingUtil extends BindingUtil<TLArrowBinding> {
 
 	// when the arrow itself changes
 	override onAfterChangeFromShape({
+		shapeBefore,
 		shapeAfter,
+		reason,
 	}: BindingOnShapeChangeOptions<TLArrowBinding>): void {
+		// When translating arrows together with their bound shapes, only x/y changes.
+		// In this case, bindings remain valid and no reparenting is needed.
+		// This is a significant performance optimization when moving many bound shapes.
+		if (
+			reason !== 'ancestry' &&
+			shapeBefore.parentId === shapeAfter.parentId &&
+			shapeBefore.index === shapeAfter.index
+		) {
+			return
+		}
 		arrowDidUpdate(this.editor, shapeAfter as TLArrowShape)
 	}
 

package/src/lib/ui/components/primitives/TldrawUiSelect.tsx

@@ -0,0 +1,211 @@
+import { useContainer } from '@tldraw/editor'
+import classNames from 'classnames'
+import { Select as _Select } from 'radix-ui'
+import * as React from 'react'
+import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
+import { TLUiIconType } from '../../icon-types'
+import { TldrawUiIcon } from './TldrawUiIcon'
+
+/* --------------------- Root --------------------- */
+
+/** @public */
+export interface TLUiSelectProps {
+	id: string
+	value: string
+	onValueChange(value: string): void
+	onOpenChange?(isOpen: boolean): void
+	disabled?: boolean
+	className?: string
+	children: React.ReactNode
+	'data-testid'?: string
+	'aria-label'?: string
+}
+
+/**
+ * A select dropdown component.
+ *
+ * @example
+ * ```tsx
+ * <TldrawUiSelect id="my-select" value={value} onValueChange={setValue}>
+ *   <TldrawUiSelectTrigger>
+ *     <TldrawUiSelectValue placeholder="Select..." />
+ *   </TldrawUiSelectTrigger>
+ *   <TldrawUiSelectContent>
+ *     <TldrawUiSelectItem value="one" label="One" />
+ *     <TldrawUiSelectItem value="two" label="Two" />
+ *   </TldrawUiSelectContent>
+ * </TldrawUiSelect>
+ * ```
+ *
+ * @public
+ * @react
+ */
+export function TldrawUiSelect({
+	id,
+	value,
+	onValueChange,
+	onOpenChange,
+	disabled,
+	className,
+	children,
+	'data-testid': dataTestId,
+	'aria-label': ariaLabel,
+}: TLUiSelectProps) {
+	const [open, handleOpenChange] = useMenuIsOpen(id, onOpenChange)
+
+	return (
+		<_Select.Root
+			value={value}
+			onValueChange={onValueChange}
+			onOpenChange={handleOpenChange}
+			open={open}
+			disabled={disabled}
+			dir="ltr"
+		>
+			<div
+				id={id}
+				className={classNames('tlui-select', className)}
+				data-testid={dataTestId}
+				aria-label={ariaLabel}
+			>
+				{children}
+			</div>
+		</_Select.Root>
+	)
+}
+
+/* --------------------- Trigger --------------------- */
+
+/** @public */
+export interface TLUiSelectTriggerProps {
+	children: React.ReactNode
+	className?: string
+}
+
+/**
+ * The trigger button for the select dropdown.
+ *
+ * @public
+ * @react
+ */
+export const TldrawUiSelectTrigger = React.forwardRef<HTMLButtonElement, TLUiSelectTriggerProps>(
+	function TldrawUiSelectTrigger({ children, className }, ref) {
+		return (
+			<_Select.Trigger
+				ref={ref}
+				className={classNames('tlui-button tlui-select__trigger', className)}
+			>
+				{children}
+				<_Select.Icon className="tlui-select__chevron">
+					<TldrawUiIcon icon="chevron-down" label="" small />
+				</_Select.Icon>
+			</_Select.Trigger>
+		)
+	}
+)
+
+/* --------------------- Value --------------------- */
+
+/** @public */
+export interface TLUiSelectValueProps {
+	placeholder?: string
+	icon?: TLUiIconType | Exclude<string, TLUiIconType>
+	children?: React.ReactNode
+}
+
+/**
+ * Displays the currently selected value in the trigger.
+ *
+ * @public
+ * @react
+ */
+export function TldrawUiSelectValue({ placeholder, icon, children }: TLUiSelectValueProps) {
+	return (
+		<_Select.Value placeholder={placeholder}>
+			<span className="tlui-select__value">
+				{icon && <TldrawUiIcon icon={icon} label="" small />}
+				<span className="tlui-button__label">{children}</span>
+			</span>
+		</_Select.Value>
+	)
+}
+
+/* --------------------- Content --------------------- */
+
+/** @public */
+export interface TLUiSelectContentProps {
+	children: React.ReactNode
+	side?: 'top' | 'bottom'
+	align?: 'start' | 'center' | 'end'
+	className?: string
+}
+
+/**
+ * The dropdown content container for select items.
+ *
+ * @public
+ * @react
+ */
+export function TldrawUiSelectContent({
+	children,
+	side = 'bottom',
+	align = 'start',
+	className,
+}: TLUiSelectContentProps) {
+	const container = useContainer()
+
+	return (
+		<_Select.Portal container={container}>
+			<_Select.Content
+				className={classNames('tlui-menu tlui-select__content', className)}
+				position="popper"
+				side={side}
+				align={align}
+				sideOffset={4}
+				collisionPadding={4}
+			>
+				<_Select.Viewport className="tlui-select__viewport">{children}</_Select.Viewport>
+			</_Select.Content>
+		</_Select.Portal>
+	)
+}
+
+/* --------------------- Item --------------------- */
+
+/** @public */
+export interface TLUiSelectItemProps {
+	value: string
+	label: string
+	icon?: TLUiIconType | Exclude<string, TLUiIconType>
+	disabled?: boolean
+	className?: string
+}
+
+/**
+ * An item in the select dropdown. Styled to match TldrawUiMenuCheckboxItem.
+ *
+ * @public
+ * @react
+ */
+export function TldrawUiSelectItem({
+	value,
+	label,
+	icon,
+	disabled,
+	className,
+}: TLUiSelectItemProps) {
+	return (
+		<_Select.Item
+			value={value}
+			disabled={disabled}
+			className={classNames(
+				'tlui-button tlui-button__menu tlui-button__checkbox tlui-select__item',
+				className
+			)}
+		>
+			<TldrawUiIcon small icon="check" label="" className="tlui-select__item-indicator" />
+			{icon && <TldrawUiIcon icon={icon} label="" small />}
+			<_Select.ItemText className="tlui-button__label">{label}</_Select.ItemText>
+		</_Select.Item>
+	)
+}

package/src/lib/ui/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '4.4.0-canary.afdcafe834b3'
+export const version = '4.4.0-canary.bb78e813fee7'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2026-02-04T08:49:09.694Z',
-	patch: '2026-02-04T08:49:09.694Z',
+	minor: '2026-02-04T09:45:29.031Z',
+	patch: '2026-02-04T09:45:29.031Z',
 }

package/src/lib/ui.css

@@ -523,6 +523,52 @@
 	}
 }
 
+/* --------------------- Select --------------------- */
+
+/* Trigger extends .tlui-button with space-between layout */
+.tlui-select__trigger {
+	justify-content: space-between;
+	gap: var(--tl-space-3);
+}
+
+.tlui-select__trigger[data-state='open']::after {
+	opacity: 1;
+}
+
+.tlui-select__value {
+	display: flex;
+	align-items: center;
+	gap: var(--tl-space-2);
+}
+
+.tlui-select__chevron {
+	flex-shrink: 0;
+	color: var(--tl-color-text-2);
+}
+
+/* Content extends .tlui-menu with Radix-aware sizing */
+.tlui-select__content {
+	min-width: var(--radix-select-trigger-width);
+	max-height: var(--radix-select-content-available-height);
+}
+
+.tlui-select__viewport {
+	padding: 4px 0;
+}
+
+/* Item extends .tlui-button__checkbox with left-aligned text */
+.tlui-select__item {
+	justify-content: flex-start;
+}
+
+.tlui-select__item-indicator {
+	visibility: hidden;
+}
+
+.tlui-select__item[data-state='checked'] .tlui-select__item-indicator {
+	visibility: visible;
+}
+
 /* ----------------------- Kbd ---------------------- */
 
 .tlui-kbd {

package/tldraw.css

@@ -2323,6 +2323,52 @@ it from receiving any pointer events or affecting the cursor. */
 	}
 }
 
+/* --------------------- Select --------------------- */
+
+/* Trigger extends .tlui-button with space-between layout */
+.tlui-select__trigger {
+	justify-content: space-between;
+	gap: var(--tl-space-3);
+}
+
+.tlui-select__trigger[data-state='open']::after {
+	opacity: 1;
+}
+
+.tlui-select__value {
+	display: flex;
+	align-items: center;
+	gap: var(--tl-space-2);
+}
+
+.tlui-select__chevron {
+	flex-shrink: 0;
+	color: var(--tl-color-text-2);
+}
+
+/* Content extends .tlui-menu with Radix-aware sizing */
+.tlui-select__content {
+	min-width: var(--radix-select-trigger-width);
+	max-height: var(--radix-select-content-available-height);
+}
+
+.tlui-select__viewport {
+	padding: 4px 0;
+}
+
+/* Item extends .tlui-button__checkbox with left-aligned text */
+.tlui-select__item {
+	justify-content: flex-start;
+}
+
+.tlui-select__item-indicator {
+	visibility: hidden;
+}
+
+.tlui-select__item[data-state='checked'] .tlui-select__item-indicator {
+	visibility: visible;
+}
+
 /* ----------------------- Kbd ---------------------- */
 
 .tlui-kbd {