tldraw 3.16.0-internal.a478398270c6 → 3.16.0-internal.f8b97f0c414f

package/dist-cjs/lib/ui/components/primitives/TldrawUiIcon.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiIcon.tsx"],
-  "sourcesContent": ["import classNames from 'classnames'\nimport { memo, useLayoutEffect, useRef } from 'react'\nimport { useAssetUrls } from '../../context/asset-urls'\nimport { TLUiIconType } from '../../icon-types'\n\n/** @public */\nexport interface TLUiIconProps extends React.HTMLAttributes<HTMLDivElement> {\n\ticon: TLUiIconType | Exclude<string, TLUiIconType>\n\tlabel: string\n\tsmall?: boolean\n\tcolor?: string\n\tchildren?: undefined\n\tinvertIcon?: boolean\n\tcrossOrigin?: 'anonymous' | 'use-credentials'\n}\n\n/** @public @react */\nexport const TldrawUiIcon = memo(function TldrawUiIcon({\n\tlabel,\n\tsmall,\n\tinvertIcon,\n\ticon,\n\tcolor,\n\tclassName,\n\t...props\n}: TLUiIconProps) {\n\tconst assetUrls = useAssetUrls()\n\tconst asset = assetUrls.icons[icon as TLUiIconType] ?? assetUrls.icons['question-mark-circle']\n\tconst ref = useRef<HTMLDivElement>(null)\n\n\tuseLayoutEffect(() => {\n\t\tif (!asset) {\n\t\t\tconsole.error(`Icon not found: ${icon}. Add it to the assetUrls.icons object.`)\n\t\t}\n\n\t\tif (ref?.current) {\n\t\t\t// HACK: Fix for <https://linear.app/tldraw/issue/TLD-1700/dragging-around-with-the-handtool-makes-lots-of-requests-for-icons>\n\t\t\t// It seems that passing `WebkitMask` to react will cause a render on each call, no idea why... but this appears to be the fix.\n\t\t\t// @ts-ignore\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\tref.current.style.webkitMask = `url(${asset}) center 100% / 100% no-repeat`\n\t\t}\n\t}, [ref, asset, icon])\n\n\tif (icon === 'none') {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\t'tlui-icon tlui-icon__placeholder',\n\t\t\t\t\t{ 'tlui-icon__small': small },\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t)\n\t}\n\n\treturn (\n\t\t<div\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t\taria-label={label}\n\t\t\trole=\"img\"\n\t\t\tclassName={classNames('tlui-icon', { 'tlui-icon__small': small }, className)}\n\t\t\tstyle={{\n\t\t\t\tcolor,\n\t\t\t\tmask: `url(${asset}) center 100% / 100% no-repeat`,\n\t\t\t\ttransform: invertIcon ? 'scale(-1, 1)' : undefined,\n\t\t\t}}\n\t\t/>\n\t)\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CG;AA9CH,wBAAuB;AACvB,mBAA8C;AAC9C,wBAA6B;AAetB,MAAM,mBAAe,mBAAK,SAASA,cAAa;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAkB;AACjB,QAAM,gBAAY,gCAAa;AAC/B,QAAM,QAAQ,UAAU,MAAM,IAAoB,KAAK,UAAU,MAAM,sBAAsB;AAC7F,QAAM,UAAM,qBAAuB,IAAI;AAEvC,oCAAgB,MAAM;AACrB,QAAI,CAAC,OAAO;AACX,cAAQ,MAAM,mBAAmB,IAAI,yCAAyC;AAAA,IAC/E;AAEA,QAAI,KAAK,SAAS;AAKjB,UAAI,QAAQ,MAAM,aAAa,OAAO,KAAK;AAAA,IAC5C;AAAA,EACD,GAAG,CAAC,KAAK,OAAO,IAAI,CAAC;AAErB,MAAI,SAAS,QAAQ;AACpB,WACC;AAAA,MAAC;AAAA;AAAA,QACA,eAAW,kBAAAC;AAAA,UACV;AAAA,UACA,EAAE,oBAAoB,MAAM;AAAA,UAC5B;AAAA,QACD;AAAA,QACC,GAAG;AAAA;AAAA,IACL;AAAA,EAEF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA,cAAY;AAAA,MACZ,MAAK;AAAA,MACL,eAAW,kBAAAA,SAAW,aAAa,EAAE,oBAAoB,MAAM,GAAG,SAAS;AAAA,MAC3E,OAAO;AAAA,QACN;AAAA,QACA,MAAM,OAAO,KAAK;AAAA,QAClB,WAAW,aAAa,iBAAiB;AAAA,MAC1C;AAAA;AAAA,EACD;AAEF,CAAC;",
+  "sourcesContent": ["import classNames from 'classnames'\nimport { cloneElement, memo, ReactElement, useLayoutEffect, useRef } from 'react'\nimport { useAssetUrls } from '../../context/asset-urls'\nimport { TLUiIconType } from '../../icon-types'\n\n/** @public */\nexport type TLUiIconJsx = ReactElement<React.HTMLAttributes<HTMLDivElement>>\n\n/** @public */\nexport interface TLUiIconProps extends React.HTMLAttributes<HTMLDivElement> {\n\ticon: TLUiIconType | Exclude<string, TLUiIconType> | TLUiIconJsx\n\tlabel: string\n\tsmall?: boolean\n\tcolor?: string\n\tchildren?: undefined\n\tinvertIcon?: boolean\n\tcrossOrigin?: 'anonymous' | 'use-credentials'\n}\n\n/** @public @react */\nexport const TldrawUiIcon = memo(function TldrawUiIcon({\n\tlabel,\n\tsmall,\n\tinvertIcon,\n\ticon,\n\tcolor,\n\tclassName,\n\t...props\n}: TLUiIconProps) {\n\tif (typeof icon === 'string') {\n\t\treturn (\n\t\t\t<TldrawUIIconInner\n\t\t\t\tlabel={label}\n\t\t\t\tsmall={small}\n\t\t\t\tinvertIcon={invertIcon}\n\t\t\t\ticon={icon}\n\t\t\t\tcolor={color}\n\t\t\t\tclassName={className}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t)\n\t}\n\n\treturn cloneElement(icon, {\n\t\t...props,\n\t\tclassName: classNames({ 'tlui-icon__small': small }, className, icon.props.className),\n\t\t'aria-label': label,\n\t\tstyle: {\n\t\t\tcolor,\n\t\t\ttransform: invertIcon ? 'scale(-1, 1)' : undefined,\n\t\t\t...icon.props.style,\n\t\t},\n\t})\n})\n\nfunction TldrawUIIconInner({\n\tlabel,\n\tsmall,\n\tinvertIcon,\n\ticon,\n\tcolor,\n\tclassName,\n\t...props\n}: TLUiIconProps & { icon: TLUiIconType | Exclude<string, TLUiIconType> }) {\n\tconst assetUrls = useAssetUrls()\n\tconst asset = assetUrls.icons[icon as TLUiIconType] ?? assetUrls.icons['question-mark-circle']\n\tconst ref = useRef<HTMLDivElement>(null)\n\n\tuseLayoutEffect(() => {\n\t\tif (!asset) {\n\t\t\tconsole.error(`Icon not found: ${icon}. Add it to the assetUrls.icons object.`)\n\t\t}\n\n\t\tif (ref?.current) {\n\t\t\t// HACK: Fix for <https://linear.app/tldraw/issue/TLD-1700/dragging-around-with-the-handtool-makes-lots-of-requests-for-icons>\n\t\t\t// It seems that passing `WebkitMask` to react will cause a render on each call, no idea why... but this appears to be the fix.\n\t\t\t// @ts-ignore\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\tref.current.style.webkitMask = `url(${asset}) center 100% / 100% no-repeat`\n\t\t}\n\t}, [ref, asset, icon])\n\n\tif (icon === 'none') {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\t'tlui-icon tlui-icon__placeholder',\n\t\t\t\t\t{ 'tlui-icon__small': small },\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t)\n\t}\n\n\treturn (\n\t\t<div\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t\taria-label={label}\n\t\t\trole=\"img\"\n\t\t\tclassName={classNames('tlui-icon', { 'tlui-icon__small': small }, className)}\n\t\t\tstyle={{\n\t\t\t\tcolor,\n\t\t\t\tmask: `url(${asset}) center 100% / 100% no-repeat`,\n\t\t\t\ttransform: invertIcon ? 'scale(-1, 1)' : undefined,\n\t\t\t}}\n\t\t/>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BG;AA/BH,wBAAuB;AACvB,mBAA0E;AAC1E,wBAA6B;AAkBtB,MAAM,mBAAe,mBAAK,SAASA,cAAa;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAkB;AACjB,MAAI,OAAO,SAAS,UAAU;AAC7B,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA;AAAA,IACL;AAAA,EAEF;AAEA,aAAO,2BAAa,MAAM;AAAA,IACzB,GAAG;AAAA,IACH,eAAW,kBAAAC,SAAW,EAAE,oBAAoB,MAAM,GAAG,WAAW,KAAK,MAAM,SAAS;AAAA,IACpF,cAAc;AAAA,IACd,OAAO;AAAA,MACN;AAAA,MACA,WAAW,aAAa,iBAAiB;AAAA,MACzC,GAAG,KAAK,MAAM;AAAA,IACf;AAAA,EACD,CAAC;AACF,CAAC;AAED,SAAS,kBAAkB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAA2E;AAC1E,QAAM,gBAAY,gCAAa;AAC/B,QAAM,QAAQ,UAAU,MAAM,IAAoB,KAAK,UAAU,MAAM,sBAAsB;AAC7F,QAAM,UAAM,qBAAuB,IAAI;AAEvC,oCAAgB,MAAM;AACrB,QAAI,CAAC,OAAO;AACX,cAAQ,MAAM,mBAAmB,IAAI,yCAAyC;AAAA,IAC/E;AAEA,QAAI,KAAK,SAAS;AAKjB,UAAI,QAAQ,MAAM,aAAa,OAAO,KAAK;AAAA,IAC5C;AAAA,EACD,GAAG,CAAC,KAAK,OAAO,IAAI,CAAC;AAErB,MAAI,SAAS,QAAQ;AACpB,WACC;AAAA,MAAC;AAAA;AAAA,QACA,eAAW,kBAAAA;AAAA,UACV;AAAA,UACA,EAAE,oBAAoB,MAAM;AAAA,UAC5B;AAAA,QACD;AAAA,QACC,GAAG;AAAA;AAAA,IACL;AAAA,EAEF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA,cAAY;AAAA,MACZ,MAAK;AAAA,MACL,eAAW,kBAAAA,SAAW,aAAa,EAAE,oBAAoB,MAAM,GAAG,SAAS;AAAA,MAC3E,OAAO;AAAA,QACN;AAAA,QACA,MAAM,OAAO,KAAK;AAAA,QAClB,WAAW,aAAa,iBAAiB;AAAA,MAC1C;AAAA;AAAA,EACD;AAEF;",
   "names": ["TldrawUiIcon", "classNames"]
 }

package/dist-cjs/lib/ui/components/primitives/TldrawUiInput.js

@@ -103,7 +103,7 @@ const TldrawUiInput = React.forwardRef(
           case "Enter": {
             if (isComposing.current) return;
             e.currentTarget.blur();
-            (0, import_editor.stopEventPropagation)(e);
+            e.stopPropagation();
             onComplete?.(e.currentTarget.value);
             break;
           }
@@ -111,7 +111,7 @@ const TldrawUiInput = React.forwardRef(
             e.currentTarget.value = rInitialValue.current;
             onCancel?.(e.currentTarget.value);
             e.currentTarget.blur();
-            (0, import_editor.stopEventPropagation)(e);
+            e.stopPropagation();
             break;
           }
         }

package/dist-cjs/lib/ui/components/primitives/TldrawUiInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiInput.tsx"],
-  "sourcesContent": ["import { stopEventPropagation, tlenv, tltime, useMaybeEditor } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport * as React from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { TldrawUiIcon } from './TldrawUiIcon'\n\n/** @public */\nexport interface TLUiInputProps {\n\tdisabled?: boolean\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\ticon?: TLUiIconType | Exclude<string, TLUiIconType>\n\ticonLeft?: TLUiIconType | Exclude<string, TLUiIconType>\n\ticonLabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tautoFocus?: boolean\n\tautoSelect?: boolean\n\tchildren?: React.ReactNode\n\tdefaultValue?: string\n\tplaceholder?: string\n\tonComplete?(value: string): void\n\tonValueChange?(value: string): void\n\tonCancel?(value: string): void\n\tonBlur?(value: string): void\n\tonFocus?(): void\n\tclassName?: string\n\t/**\n\t * Usually on iOS when you focus an input, the browser will adjust the viewport to bring the input\n\t * into view. Sometimes this doesn't work properly though - for example, if the input is newly\n\t * created, iOS seems to have a hard time adjusting the viewport for it. This prop allows you to\n\t * opt-in to some extra code to manually bring the input into view when the visual viewport of the\n\t * browser changes, but we don't want to use it everywhere because generally the native behavior\n\t * looks nicer in scenarios where it's sufficient.\n\t */\n\tshouldManuallyMaintainScrollPositionWhenFocused?: boolean\n\tvalue?: string\n\t'data-testid'?: string\n}\n\n/** @public @react */\nexport const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(\n\tfunction TldrawUiInput(\n\t\t{\n\t\t\tclassName,\n\t\t\tlabel,\n\t\t\ticon,\n\t\t\ticonLeft,\n\t\t\ticonLabel,\n\t\t\tautoSelect = false,\n\t\t\tautoFocus = false,\n\t\t\tdefaultValue,\n\t\t\tplaceholder,\n\t\t\tonComplete,\n\t\t\tonValueChange,\n\t\t\tonCancel,\n\t\t\tonFocus,\n\t\t\tonBlur,\n\t\t\tshouldManuallyMaintainScrollPositionWhenFocused = false,\n\t\t\tchildren,\n\t\t\tvalue,\n\t\t\t'data-testid': dataTestId,\n\t\t\tdisabled,\n\t\t},\n\t\tref\n\t) {\n\t\tconst editor = useMaybeEditor()\n\t\tconst rInputRef = React.useRef<HTMLInputElement>(null)\n\n\t\t// combine rInputRef and ref\n\t\tReact.useImperativeHandle(ref, () => rInputRef.current as HTMLInputElement)\n\n\t\tconst msg = useTranslation()\n\t\tconst rInitialValue = React.useRef<string>(defaultValue ?? '')\n\t\tconst rCurrentValue = React.useRef<string>(defaultValue ?? '')\n\n\t\tconst isComposing = React.useRef(false)\n\n\t\tconst [isFocused, setIsFocused] = React.useState(false)\n\t\tconst handleFocus = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tsetIsFocused(true)\n\t\t\t\tconst elm = e.currentTarget as HTMLInputElement\n\t\t\t\trCurrentValue.current = elm.value\n\t\t\t\tif (editor) {\n\t\t\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\t\t\tif (autoSelect) {\n\t\t\t\t\t\t\telm.select()\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t} else {\n\t\t\t\t\ttltime.requestAnimationFrame('anon', () => {\n\t\t\t\t\t\tif (autoSelect) {\n\t\t\t\t\t\t\telm.select()\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t\tonFocus?.()\n\t\t\t},\n\t\t\t[autoSelect, editor, onFocus]\n\t\t)\n\n\t\tconst handleChange = React.useCallback(\n\t\t\t(e: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\t\tconst value = e.currentTarget.value\n\t\t\t\trCurrentValue.current = value\n\t\t\t\tonValueChange?.(value)\n\t\t\t},\n\t\t\t[onValueChange]\n\t\t)\n\n\t\t// We use keydown capture, because we want to get the escape key event.\n\t\tconst handleKeyDownCapture = React.useCallback(\n\t\t\t(e: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t\t\tswitch (e.key) {\n\t\t\t\t\tcase 'Enter': {\n\t\t\t\t\t\t// In Chrome, if the user presses the Enter key while using the IME and calls\n\t\t\t\t\t\t// `e.currentTarget.blur()` in the event callback here, it will trigger an\n\t\t\t\t\t\t// `onChange` with a duplicated text value.\n\t\t\t\t\t\tif (isComposing.current) return\n\t\t\t\t\t\te.currentTarget.blur()\n\t\t\t\t\t\tstopEventPropagation(e)\n\t\t\t\t\t\tonComplete?.(e.currentTarget.value)\n\t\t\t\t\t\tbreak\n\t\t\t\t\t}\n\t\t\t\t\tcase 'Escape': {\n\t\t\t\t\t\te.currentTarget.value = rInitialValue.current\n\t\t\t\t\t\tonCancel?.(e.currentTarget.value)\n\t\t\t\t\t\te.currentTarget.blur()\n\t\t\t\t\t\tstopEventPropagation(e)\n\t\t\t\t\t\tbreak\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\t[onComplete, onCancel]\n\t\t)\n\n\t\tconst handleBlur = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tsetIsFocused(false)\n\t\t\t\tconst value = e.currentTarget.value\n\t\t\t\tonBlur?.(value)\n\t\t\t},\n\t\t\t[onBlur]\n\t\t)\n\n\t\tconst handleCompositionStart = React.useCallback(() => (isComposing.current = true), [])\n\t\tconst handleCompositionEnd = React.useCallback(() => (isComposing.current = false), [])\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!tlenv.isIos) return\n\n\t\t\tconst visualViewport = window.visualViewport\n\t\t\tif (isFocused && shouldManuallyMaintainScrollPositionWhenFocused && visualViewport) {\n\t\t\t\tconst onViewportChange = () => {\n\t\t\t\t\trInputRef.current?.scrollIntoView({ block: 'center' })\n\t\t\t\t}\n\t\t\t\tvisualViewport.addEventListener('resize', onViewportChange)\n\t\t\t\tvisualViewport.addEventListener('scroll', onViewportChange)\n\n\t\t\t\tif (editor) {\n\t\t\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\t\t\trInputRef.current?.scrollIntoView({ block: 'center' })\n\t\t\t\t\t})\n\t\t\t\t} else {\n\t\t\t\t\ttltime.requestAnimationFrame('anon', () => {\n\t\t\t\t\t\trInputRef.current?.scrollIntoView({ block: 'center' })\n\t\t\t\t\t})\n\t\t\t\t}\n\n\t\t\t\treturn () => {\n\t\t\t\t\tvisualViewport.removeEventListener('resize', onViewportChange)\n\t\t\t\t\tvisualViewport.removeEventListener('scroll', onViewportChange)\n\t\t\t\t}\n\t\t\t}\n\t\t}, [isFocused, editor, shouldManuallyMaintainScrollPositionWhenFocused])\n\n\t\treturn (\n\t\t\t<div draggable={false} className=\"tlui-input__wrapper\">\n\t\t\t\t{children}\n\t\t\t\t{label && <label>{msg(label)}</label>}\n\t\t\t\t{iconLeft && (\n\t\t\t\t\t<TldrawUiIcon\n\t\t\t\t\t\tlabel={iconLabel ? msg(iconLabel) : ''}\n\t\t\t\t\t\ticon={iconLeft}\n\t\t\t\t\t\tclassName=\"tlui-icon-left\"\n\t\t\t\t\t\tsmall\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<input\n\t\t\t\t\tref={rInputRef}\n\t\t\t\t\tclassName={classNames('tlui-input', className)}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\t\tonKeyDownCapture={handleKeyDownCapture}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\tonCompositionStart={handleCompositionStart}\n\t\t\t\t\tonCompositionEnd={handleCompositionEnd}\n\t\t\t\t\tautoFocus={autoFocus}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tdata-testid={dataTestId}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t/>\n\t\t\t\t{icon && (\n\t\t\t\t\t<TldrawUiIcon label={iconLabel ? msg(iconLabel) : ''} icon={icon} small={!!label} />\n\t\t\t\t)}\n\t\t\t</div>\n\t\t)\n\t}\n)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { tlenv, tltime, useMaybeEditor } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport * as React from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { TldrawUiIcon } from './TldrawUiIcon'\n\n/** @public */\nexport interface TLUiInputProps {\n\tdisabled?: boolean\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\ticon?: TLUiIconType | Exclude<string, TLUiIconType>\n\ticonLeft?: TLUiIconType | Exclude<string, TLUiIconType>\n\ticonLabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tautoFocus?: boolean\n\tautoSelect?: boolean\n\tchildren?: React.ReactNode\n\tdefaultValue?: string\n\tplaceholder?: string\n\tonComplete?(value: string): void\n\tonValueChange?(value: string): void\n\tonCancel?(value: string): void\n\tonBlur?(value: string): void\n\tonFocus?(): void\n\tclassName?: string\n\t/**\n\t * Usually on iOS when you focus an input, the browser will adjust the viewport to bring the input\n\t * into view. Sometimes this doesn't work properly though - for example, if the input is newly\n\t * created, iOS seems to have a hard time adjusting the viewport for it. This prop allows you to\n\t * opt-in to some extra code to manually bring the input into view when the visual viewport of the\n\t * browser changes, but we don't want to use it everywhere because generally the native behavior\n\t * looks nicer in scenarios where it's sufficient.\n\t */\n\tshouldManuallyMaintainScrollPositionWhenFocused?: boolean\n\tvalue?: string\n\t'data-testid'?: string\n}\n\n/** @public @react */\nexport const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(\n\tfunction TldrawUiInput(\n\t\t{\n\t\t\tclassName,\n\t\t\tlabel,\n\t\t\ticon,\n\t\t\ticonLeft,\n\t\t\ticonLabel,\n\t\t\tautoSelect = false,\n\t\t\tautoFocus = false,\n\t\t\tdefaultValue,\n\t\t\tplaceholder,\n\t\t\tonComplete,\n\t\t\tonValueChange,\n\t\t\tonCancel,\n\t\t\tonFocus,\n\t\t\tonBlur,\n\t\t\tshouldManuallyMaintainScrollPositionWhenFocused = false,\n\t\t\tchildren,\n\t\t\tvalue,\n\t\t\t'data-testid': dataTestId,\n\t\t\tdisabled,\n\t\t},\n\t\tref\n\t) {\n\t\tconst editor = useMaybeEditor()\n\t\tconst rInputRef = React.useRef<HTMLInputElement>(null)\n\n\t\t// combine rInputRef and ref\n\t\tReact.useImperativeHandle(ref, () => rInputRef.current as HTMLInputElement)\n\n\t\tconst msg = useTranslation()\n\t\tconst rInitialValue = React.useRef<string>(defaultValue ?? '')\n\t\tconst rCurrentValue = React.useRef<string>(defaultValue ?? '')\n\n\t\tconst isComposing = React.useRef(false)\n\n\t\tconst [isFocused, setIsFocused] = React.useState(false)\n\t\tconst handleFocus = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tsetIsFocused(true)\n\t\t\t\tconst elm = e.currentTarget as HTMLInputElement\n\t\t\t\trCurrentValue.current = elm.value\n\t\t\t\tif (editor) {\n\t\t\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\t\t\tif (autoSelect) {\n\t\t\t\t\t\t\telm.select()\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t} else {\n\t\t\t\t\ttltime.requestAnimationFrame('anon', () => {\n\t\t\t\t\t\tif (autoSelect) {\n\t\t\t\t\t\t\telm.select()\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t\tonFocus?.()\n\t\t\t},\n\t\t\t[autoSelect, editor, onFocus]\n\t\t)\n\n\t\tconst handleChange = React.useCallback(\n\t\t\t(e: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\t\tconst value = e.currentTarget.value\n\t\t\t\trCurrentValue.current = value\n\t\t\t\tonValueChange?.(value)\n\t\t\t},\n\t\t\t[onValueChange]\n\t\t)\n\n\t\t// We use keydown capture, because we want to get the escape key event.\n\t\tconst handleKeyDownCapture = React.useCallback(\n\t\t\t(e: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t\t\tswitch (e.key) {\n\t\t\t\t\tcase 'Enter': {\n\t\t\t\t\t\t// In Chrome, if the user presses the Enter key while using the IME and calls\n\t\t\t\t\t\t// `e.currentTarget.blur()` in the event callback here, it will trigger an\n\t\t\t\t\t\t// `onChange` with a duplicated text value.\n\t\t\t\t\t\tif (isComposing.current) return\n\t\t\t\t\t\te.currentTarget.blur()\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tonComplete?.(e.currentTarget.value)\n\t\t\t\t\t\tbreak\n\t\t\t\t\t}\n\t\t\t\t\tcase 'Escape': {\n\t\t\t\t\t\te.currentTarget.value = rInitialValue.current\n\t\t\t\t\t\tonCancel?.(e.currentTarget.value)\n\t\t\t\t\t\te.currentTarget.blur()\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tbreak\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\t[onComplete, onCancel]\n\t\t)\n\n\t\tconst handleBlur = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tsetIsFocused(false)\n\t\t\t\tconst value = e.currentTarget.value\n\t\t\t\tonBlur?.(value)\n\t\t\t},\n\t\t\t[onBlur]\n\t\t)\n\n\t\tconst handleCompositionStart = React.useCallback(() => (isComposing.current = true), [])\n\t\tconst handleCompositionEnd = React.useCallback(() => (isComposing.current = false), [])\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!tlenv.isIos) return\n\n\t\t\tconst visualViewport = window.visualViewport\n\t\t\tif (isFocused && shouldManuallyMaintainScrollPositionWhenFocused && visualViewport) {\n\t\t\t\tconst onViewportChange = () => {\n\t\t\t\t\trInputRef.current?.scrollIntoView({ block: 'center' })\n\t\t\t\t}\n\t\t\t\tvisualViewport.addEventListener('resize', onViewportChange)\n\t\t\t\tvisualViewport.addEventListener('scroll', onViewportChange)\n\n\t\t\t\tif (editor) {\n\t\t\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\t\t\trInputRef.current?.scrollIntoView({ block: 'center' })\n\t\t\t\t\t})\n\t\t\t\t} else {\n\t\t\t\t\ttltime.requestAnimationFrame('anon', () => {\n\t\t\t\t\t\trInputRef.current?.scrollIntoView({ block: 'center' })\n\t\t\t\t\t})\n\t\t\t\t}\n\n\t\t\t\treturn () => {\n\t\t\t\t\tvisualViewport.removeEventListener('resize', onViewportChange)\n\t\t\t\t\tvisualViewport.removeEventListener('scroll', onViewportChange)\n\t\t\t\t}\n\t\t\t}\n\t\t}, [isFocused, editor, shouldManuallyMaintainScrollPositionWhenFocused])\n\n\t\treturn (\n\t\t\t<div draggable={false} className=\"tlui-input__wrapper\">\n\t\t\t\t{children}\n\t\t\t\t{label && <label>{msg(label)}</label>}\n\t\t\t\t{iconLeft && (\n\t\t\t\t\t<TldrawUiIcon\n\t\t\t\t\t\tlabel={iconLabel ? msg(iconLabel) : ''}\n\t\t\t\t\t\ticon={iconLeft}\n\t\t\t\t\t\tclassName=\"tlui-icon-left\"\n\t\t\t\t\t\tsmall\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<input\n\t\t\t\t\tref={rInputRef}\n\t\t\t\t\tclassName={classNames('tlui-input', className)}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\t\tonKeyDownCapture={handleKeyDownCapture}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\tonCompositionStart={handleCompositionStart}\n\t\t\t\t\tonCompositionEnd={handleCompositionEnd}\n\t\t\t\t\tautoFocus={autoFocus}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tdata-testid={dataTestId}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t/>\n\t\t\t\t{icon && (\n\t\t\t\t\t<TldrawUiIcon label={iconLabel ? msg(iconLabel) : ''} icon={icon} small={!!label} />\n\t\t\t\t)}\n\t\t\t</div>\n\t\t)\n\t}\n)\n"],
+  "mappings": "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",
   "names": ["TldrawUiInput", "value", "classNames"]
 }

package/dist-cjs/lib/ui/components/primitives/TldrawUiPopover.js

@@ -35,12 +35,13 @@ __export(TldrawUiPopover_exports, {
 module.exports = __toCommonJS(TldrawUiPopover_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
+var import_classnames = __toESM(require("classnames"));
 var import_radix_ui = require("radix-ui");
 var import_react = __toESM(require("react"));
 var import_useMenuIsOpen = require("../../hooks/useMenuIsOpen");
-function TldrawUiPopover({ id, children, onOpenChange, open }) {
+function TldrawUiPopover({ id, children, onOpenChange, open, className }) {
   const [isOpen, handleOpenChange] = (0, import_useMenuIsOpen.useMenuIsOpen)(id, onOpenChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Popover.Root, { onOpenChange: handleOpenChange, open: open || isOpen, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-popover", children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Popover.Root, { onOpenChange: handleOpenChange, open: open || isOpen, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_classnames.default)("tlui-popover", className), children }) });
 }
 function TldrawUiPopoverTrigger({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Popover.Trigger, { asChild: true, dir: "ltr", children });

package/dist-cjs/lib/ui/components/primitives/TldrawUiPopover.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiPopover.tsx"],
-  "sourcesContent": ["import { useContainer } from '@tldraw/editor'\nimport { Popover as _Popover } from 'radix-ui'\nimport React from 'react'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\n\n/** @public */\nexport interface TLUiPopoverProps {\n\tid: string\n\topen?: boolean\n\tchildren: React.ReactNode\n\tonOpenChange?(isOpen: boolean): void\n}\n\n/** @public @react */\nexport function TldrawUiPopover({ id, children, onOpenChange, open }: TLUiPopoverProps) {\n\tconst [isOpen, handleOpenChange] = useMenuIsOpen(id, onOpenChange)\n\n\treturn (\n\t\t<_Popover.Root onOpenChange={handleOpenChange} open={open || isOpen /* allow debugging */}>\n\t\t\t<div className=\"tlui-popover\">{children}</div>\n\t\t</_Popover.Root>\n\t)\n}\n\n/** @public */\nexport interface TLUiPopoverTriggerProps {\n\tchildren?: React.ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiPopoverTrigger({ children }: TLUiPopoverTriggerProps) {\n\treturn (\n\t\t<_Popover.Trigger asChild dir=\"ltr\">\n\t\t\t{children}\n\t\t</_Popover.Trigger>\n\t)\n}\n\n/** @public */\nexport interface TLUiPopoverContentProps {\n\tchildren: React.ReactNode\n\tside: 'top' | 'bottom' | 'left' | 'right'\n\talign?: 'start' | 'center' | 'end'\n\talignOffset?: number\n\tsideOffset?: number\n\tdisableEscapeKeyDown?: boolean\n\tautoFocusFirstButton?: boolean\n}\n\n/** @public @react */\nexport function TldrawUiPopoverContent({\n\tside,\n\tchildren,\n\talign = 'center',\n\tsideOffset = 8,\n\talignOffset = 0,\n\tdisableEscapeKeyDown = false,\n\tautoFocusFirstButton = true,\n}: TLUiPopoverContentProps) {\n\tconst container = useContainer()\n\tconst ref = React.useRef<HTMLDivElement>(null)\n\n\tconst handleOpenAutoFocus = React.useCallback(() => {\n\t\tif (!autoFocusFirstButton) return\n\t\tconst buttons = (ref.current?.querySelectorAll('button:not([disabled])') ?? []) as HTMLElement[]\n\t\tconst visibleButtons = [...buttons].filter(\n\t\t\t(button) => button.offsetWidth || button.offsetHeight\n\t\t)\n\t\tconst firstButton = visibleButtons[0]\n\t\tif (firstButton) firstButton.focus()\n\t}, [autoFocusFirstButton])\n\n\treturn (\n\t\t<_Popover.Portal container={container}>\n\t\t\t<_Popover.Content\n\t\t\t\tclassName=\"tlui-popover__content\"\n\t\t\t\tside={side}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\talign={align}\n\t\t\t\talignOffset={alignOffset}\n\t\t\t\tdir=\"ltr\"\n\t\t\t\tref={ref}\n\t\t\t\tonOpenAutoFocus={handleOpenAutoFocus}\n\t\t\t\tonEscapeKeyDown={(e) => disableEscapeKeyDown && e.preventDefault()}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t{/* <StyledArrow /> */}\n\t\t\t</_Popover.Content>\n\t\t</_Popover.Portal>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBG;AAnBH,oBAA6B;AAC7B,sBAAoC;AACpC,mBAAkB;AAClB,2BAA8B;AAWvB,SAAS,gBAAgB,EAAE,IAAI,UAAU,cAAc,KAAK,GAAqB;AACvF,QAAM,CAAC,QAAQ,gBAAgB,QAAI,oCAAc,IAAI,YAAY;AAEjE,SACC,4CAAC,gBAAAA,QAAS,MAAT,EAAc,cAAc,kBAAkB,MAAM,QAAQ,QAC5D,sDAAC,SAAI,WAAU,gBAAgB,UAAS,GACzC;AAEF;AAQO,SAAS,uBAAuB,EAAE,SAAS,GAA4B;AAC7E,SACC,4CAAC,gBAAAA,QAAS,SAAT,EAAiB,SAAO,MAAC,KAAI,OAC5B,UACF;AAEF;AAcO,SAAS,uBAAuB;AAAA,EACtC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,cAAc;AAAA,EACd,uBAAuB;AAAA,EACvB,uBAAuB;AACxB,GAA4B;AAC3B,QAAM,gBAAY,4BAAa;AAC/B,QAAM,MAAM,aAAAC,QAAM,OAAuB,IAAI;AAE7C,QAAM,sBAAsB,aAAAA,QAAM,YAAY,MAAM;AACnD,QAAI,CAAC,qBAAsB;AAC3B,UAAM,UAAW,IAAI,SAAS,iBAAiB,wBAAwB,KAAK,CAAC;AAC7E,UAAM,iBAAiB,CAAC,GAAG,OAAO,EAAE;AAAA,MACnC,CAAC,WAAW,OAAO,eAAe,OAAO;AAAA,IAC1C;AACA,UAAM,cAAc,eAAe,CAAC;AACpC,QAAI,YAAa,aAAY,MAAM;AAAA,EACpC,GAAG,CAAC,oBAAoB,CAAC;AAEzB,SACC,4CAAC,gBAAAD,QAAS,QAAT,EAAgB,WAChB;AAAA,IAAC,gBAAAA,QAAS;AAAA,IAAT;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAI;AAAA,MACJ;AAAA,MACA,iBAAiB;AAAA,MACjB,iBAAiB,CAAC,MAAM,wBAAwB,EAAE,eAAe;AAAA,MAEhE;AAAA;AAAA,EAEF,GACD;AAEF;",
-  "names": ["_Popover", "React"]
+  "sourcesContent": ["import { useContainer } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { Popover as _Popover } from 'radix-ui'\nimport React from 'react'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\n\n/** @public */\nexport interface TLUiPopoverProps {\n\tid: string\n\topen?: boolean\n\tchildren: React.ReactNode\n\tonOpenChange?(isOpen: boolean): void\n\tclassName?: string\n}\n\n/** @public @react */\nexport function TldrawUiPopover({ id, children, onOpenChange, open, className }: TLUiPopoverProps) {\n\tconst [isOpen, handleOpenChange] = useMenuIsOpen(id, onOpenChange)\n\n\treturn (\n\t\t<_Popover.Root onOpenChange={handleOpenChange} open={open || isOpen /* allow debugging */}>\n\t\t\t<div className={classNames('tlui-popover', className)}>{children}</div>\n\t\t</_Popover.Root>\n\t)\n}\n\n/** @public */\nexport interface TLUiPopoverTriggerProps {\n\tchildren?: React.ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiPopoverTrigger({ children }: TLUiPopoverTriggerProps) {\n\treturn (\n\t\t<_Popover.Trigger asChild dir=\"ltr\">\n\t\t\t{children}\n\t\t</_Popover.Trigger>\n\t)\n}\n\n/** @public */\nexport interface TLUiPopoverContentProps {\n\tchildren: React.ReactNode\n\tside: 'top' | 'bottom' | 'left' | 'right'\n\talign?: 'start' | 'center' | 'end'\n\talignOffset?: number\n\tsideOffset?: number\n\tdisableEscapeKeyDown?: boolean\n\tautoFocusFirstButton?: boolean\n}\n\n/** @public @react */\nexport function TldrawUiPopoverContent({\n\tside,\n\tchildren,\n\talign = 'center',\n\tsideOffset = 8,\n\talignOffset = 0,\n\tdisableEscapeKeyDown = false,\n\tautoFocusFirstButton = true,\n}: TLUiPopoverContentProps) {\n\tconst container = useContainer()\n\tconst ref = React.useRef<HTMLDivElement>(null)\n\n\tconst handleOpenAutoFocus = React.useCallback(() => {\n\t\tif (!autoFocusFirstButton) return\n\t\tconst buttons = (ref.current?.querySelectorAll('button:not([disabled])') ?? []) as HTMLElement[]\n\t\tconst visibleButtons = [...buttons].filter(\n\t\t\t(button) => button.offsetWidth || button.offsetHeight\n\t\t)\n\t\tconst firstButton = visibleButtons[0]\n\t\tif (firstButton) firstButton.focus()\n\t}, [autoFocusFirstButton])\n\n\treturn (\n\t\t<_Popover.Portal container={container}>\n\t\t\t<_Popover.Content\n\t\t\t\tclassName=\"tlui-popover__content\"\n\t\t\t\tside={side}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\talign={align}\n\t\t\t\talignOffset={alignOffset}\n\t\t\t\tdir=\"ltr\"\n\t\t\t\tref={ref}\n\t\t\t\tonOpenAutoFocus={handleOpenAutoFocus}\n\t\t\t\tonEscapeKeyDown={(e) => disableEscapeKeyDown && e.preventDefault()}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t{/* <StyledArrow /> */}\n\t\t\t</_Popover.Content>\n\t\t</_Popover.Portal>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBG;AArBH,oBAA6B;AAC7B,wBAAuB;AACvB,sBAAoC;AACpC,mBAAkB;AAClB,2BAA8B;AAYvB,SAAS,gBAAgB,EAAE,IAAI,UAAU,cAAc,MAAM,UAAU,GAAqB;AAClG,QAAM,CAAC,QAAQ,gBAAgB,QAAI,oCAAc,IAAI,YAAY;AAEjE,SACC,4CAAC,gBAAAA,QAAS,MAAT,EAAc,cAAc,kBAAkB,MAAM,QAAQ,QAC5D,sDAAC,SAAI,eAAW,kBAAAC,SAAW,gBAAgB,SAAS,GAAI,UAAS,GAClE;AAEF;AAQO,SAAS,uBAAuB,EAAE,SAAS,GAA4B;AAC7E,SACC,4CAAC,gBAAAD,QAAS,SAAT,EAAiB,SAAO,MAAC,KAAI,OAC5B,UACF;AAEF;AAcO,SAAS,uBAAuB;AAAA,EACtC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,cAAc;AAAA,EACd,uBAAuB;AAAA,EACvB,uBAAuB;AACxB,GAA4B;AAC3B,QAAM,gBAAY,4BAAa;AAC/B,QAAM,MAAM,aAAAE,QAAM,OAAuB,IAAI;AAE7C,QAAM,sBAAsB,aAAAA,QAAM,YAAY,MAAM;AACnD,QAAI,CAAC,qBAAsB;AAC3B,UAAM,UAAW,IAAI,SAAS,iBAAiB,wBAAwB,KAAK,CAAC;AAC7E,UAAM,iBAAiB,CAAC,GAAG,OAAO,EAAE;AAAA,MACnC,CAAC,WAAW,OAAO,eAAe,OAAO;AAAA,IAC1C;AACA,UAAM,cAAc,eAAe,CAAC;AACpC,QAAI,YAAa,aAAY,MAAM;AAAA,EACpC,GAAG,CAAC,oBAAoB,CAAC;AAEzB,SACC,4CAAC,gBAAAF,QAAS,QAAT,EAAgB,WAChB;AAAA,IAAC,gBAAAA,QAAS;AAAA,IAAT;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAI;AAAA,MACJ;AAAA,MACA,iBAAiB;AAAA,MACjB,iBAAiB,CAAC,MAAM,wBAAwB,EAAE,eAAe;AAAA,MAEhE;AAAA;AAAA,EAEF,GACD;AAEF;",
+  "names": ["_Popover", "classNames", "React"]
 }

package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js

@@ -32,9 +32,11 @@ __export(TldrawUiSlider_exports, {
 });
 module.exports = __toCommonJS(TldrawUiSlider_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@tldraw/editor");
 var import_radix_ui = require("radix-ui");
 var import_react = __toESM(require("react"));
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
+var import_TldrawUiTooltip = require("./TldrawUiTooltip");
 const TldrawUiSlider = import_react.default.forwardRef(function Slider({
   onHistoryMark,
   title,
@@ -43,9 +45,11 @@ const TldrawUiSlider = import_react.default.forwardRef(function Slider({
   value,
   label,
   onValueChange,
-  ["data-testid"]: testId
+  ["data-testid"]: testId,
+  ariaValueModifier = 1
 }, ref) {
   const msg = (0, import_useTranslation.useTranslation)();
+  const [titleAndLabel, setTitleAndLabel] = (0, import_react.useState)("");
   const [tabIndex, setTabIndex] = (0, import_react.useState)(-1);
   (0, import_react.useEffect)(() => {
     setTabIndex(0);
@@ -57,14 +61,25 @@ const TldrawUiSlider = import_react.default.forwardRef(function Slider({
     [onValueChange]
   );
   const handlePointerDown = (0, import_react.useCallback)(() => {
-    onHistoryMark("click slider");
+    import_TldrawUiTooltip.tooltipManager.hideAllTooltips();
+    onHistoryMark?.("click slider");
   }, [onHistoryMark]);
+  (0, import_react.useEffect)(() => {
+    const timeout = import_editor.tltime.setTimeout(
+      "set title and label",
+      () => {
+        setTitleAndLabel(title + " \u2014 " + msg(label));
+      },
+      0
+    );
+    return () => clearTimeout(timeout);
+  }, [label, msg, title]);
   const handleKeyEvent = (0, import_react.useCallback)((event) => {
     if (event.key === "Tab") {
       event.stopPropagation();
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-slider__container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-slider__container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiTooltip.TldrawUiTooltip, { content: titleAndLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_radix_ui.Slider.Root,
     {
       "data-testid": testId,
@@ -78,13 +93,15 @@ const TldrawUiSlider = import_react.default.forwardRef(function Slider({
       onValueChange: handleValueChange,
       onKeyDownCapture: handleKeyEvent,
       onKeyUpCapture: handleKeyEvent,
-      title: title + " \u2014 " + msg(label),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slider.Track, { className: "tlui-slider__track", dir: "ltr", children: value !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slider.Range, { className: "tlui-slider__range", dir: "ltr" }) }),
         value !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_radix_ui.Slider.Thumb,
           {
-            "aria-label": msg("style-panel.opacity"),
+            "aria-valuemin": (min ?? 0) * ariaValueModifier,
+            "aria-valuenow": value * ariaValueModifier,
+            "aria-valuemax": steps * ariaValueModifier,
+            "aria-label": titleAndLabel,
             className: "tlui-slider__thumb",
             dir: "ltr",
             ref,
@@ -93,6 +110,6 @@ const TldrawUiSlider = import_react.default.forwardRef(function Slider({
         )
       ]
     }
-  ) });
+  ) }) });
 });
 //# sourceMappingURL=TldrawUiSlider.js.map

package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiSlider.tsx"],
-  "sourcesContent": ["import { Slider as _Slider } from 'radix-ui'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\n\n/** @public */\nexport interface TLUiSliderProps {\n\tmin?: number\n\tsteps: number\n\tvalue: number | null\n\tlabel: string\n\ttitle: string\n\tonValueChange(value: number): void\n\tonHistoryMark(id: string): void\n\t'data-testid'?: string\n}\n\n/** @public @react */\nexport const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(function Slider(\n\t{\n\t\tonHistoryMark,\n\t\ttitle,\n\t\tmin,\n\t\tsteps,\n\t\tvalue,\n\t\tlabel,\n\t\tonValueChange,\n\t\t['data-testid']: testId,\n\t}: TLUiSliderProps,\n\tref\n) {\n\tconst msg = useTranslation()\n\n\t// XXX: Radix starts out our slider with a tabIndex of 0\n\t// This causes some tab focusing issues, most prevelant in MobileStylePanel,\n\t// where it grabs the focus. This works around it.\n\tconst [tabIndex, setTabIndex] = useState(-1)\n\tuseEffect(() => {\n\t\tsetTabIndex(0)\n\t}, [])\n\n\tconst handleValueChange = useCallback(\n\t\t(value: number[]) => {\n\t\t\tonValueChange(value[0])\n\t\t},\n\t\t[onValueChange]\n\t)\n\n\tconst handlePointerDown = useCallback(() => {\n\t\tonHistoryMark('click slider')\n\t}, [onHistoryMark])\n\n\t// N.B. Annoying. For a11y purposes, we need Tab to work.\n\t// For some reason, Radix has some custom behavior here\n\t// that interferes with tabbing past the slider and then\n\t// you get stuck in the slider.\n\tconst handleKeyEvent = useCallback((event: React.KeyboardEvent) => {\n\t\tif (event.key === 'Tab') {\n\t\t\tevent.stopPropagation()\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className=\"tlui-slider__container\">\n\t\t\t<_Slider.Root\n\t\t\t\tdata-testid={testId}\n\t\t\t\tclassName=\"tlui-slider\"\n\t\t\t\tdir=\"ltr\"\n\t\t\t\tmin={min ?? 0}\n\t\t\t\tmax={steps}\n\t\t\t\tstep={1}\n\t\t\t\tvalue={value !== null ? [value] : undefined}\n\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tonKeyDownCapture={handleKeyEvent}\n\t\t\t\tonKeyUpCapture={handleKeyEvent}\n\t\t\t\ttitle={title + ' \u2014 ' + msg(label as TLUiTranslationKey)}\n\t\t\t>\n\t\t\t\t<_Slider.Track className=\"tlui-slider__track\" dir=\"ltr\">\n\t\t\t\t\t{value !== null && <_Slider.Range className=\"tlui-slider__range\" dir=\"ltr\" />}\n\t\t\t\t</_Slider.Track>\n\t\t\t\t{value !== null && (\n\t\t\t\t\t<_Slider.Thumb\n\t\t\t\t\t\taria-label={msg('style-panel.opacity')}\n\t\t\t\t\t\tclassName=\"tlui-slider__thumb\"\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</_Slider.Root>\n\t\t</div>\n\t)\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgEG;AAhEH,sBAAkC;AAClC,mBAAwD;AAExD,4BAA+B;AAexB,MAAM,iBAAiB,aAAAA,QAAM,WAA4C,SAAS,OACxF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,CAAC,aAAa,GAAG;AAClB,GACA,KACC;AACD,QAAM,UAAM,sCAAe;AAK3B,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,EAAE;AAC3C,8BAAU,MAAM;AACf,gBAAY,CAAC;AAAA,EACd,GAAG,CAAC,CAAC;AAEL,QAAM,wBAAoB;AAAA,IACzB,CAACC,WAAoB;AACpB,oBAAcA,OAAM,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,wBAAoB,0BAAY,MAAM;AAC3C,kBAAc,cAAc;AAAA,EAC7B,GAAG,CAAC,aAAa,CAAC;AAMlB,QAAM,qBAAiB,0BAAY,CAAC,UAA+B;AAClE,QAAI,MAAM,QAAQ,OAAO;AACxB,YAAM,gBAAgB;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAC;AAEL,SACC,4CAAC,SAAI,WAAU,0BACd;AAAA,IAAC,gBAAAC,OAAQ;AAAA,IAAR;AAAA,MACA,eAAa;AAAA,MACb,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,KAAK,OAAO;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,UAAU,OAAO,CAAC,KAAK,IAAI;AAAA,MAClC,eAAe;AAAA,MACf,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAChB,OAAO,QAAQ,aAAQ,IAAI,KAA2B;AAAA,MAEtD;AAAA,oDAAC,gBAAAA,OAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAChD,oBAAU,QAAQ,4CAAC,gBAAAA,OAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAAM,GAC5E;AAAA,QACC,UAAU,QACV;AAAA,UAAC,gBAAAA,OAAQ;AAAA,UAAR;AAAA,YACA,cAAY,IAAI,qBAAqB;AAAA,YACrC,WAAU;AAAA,YACV,KAAI;AAAA,YACJ;AAAA,YACA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF,GACD;AAEF,CAAC;",
+  "sourcesContent": ["import { tltime } from '@tldraw/editor'\nimport { Slider as _Slider } from 'radix-ui'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiTooltip, tooltipManager } from './TldrawUiTooltip'\n\n/** @public */\nexport interface TLUiSliderProps {\n\tmin?: number\n\tsteps: number\n\tvalue: number | null\n\tlabel: string\n\ttitle: string\n\tonValueChange(value: number): void\n\tonHistoryMark?(id: string): void\n\t'data-testid'?: string\n\tariaValueModifier?: number\n}\n\n/** @public @react */\nexport const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(function Slider(\n\t{\n\t\tonHistoryMark,\n\t\ttitle,\n\t\tmin,\n\t\tsteps,\n\t\tvalue,\n\t\tlabel,\n\t\tonValueChange,\n\t\t['data-testid']: testId,\n\t\tariaValueModifier = 1,\n\t}: TLUiSliderProps,\n\tref\n) {\n\tconst msg = useTranslation()\n\tconst [titleAndLabel, setTitleAndLabel] = useState('')\n\n\t// XXX: Radix starts out our slider with a tabIndex of 0\n\t// This causes some tab focusing issues, most prevelant in MobileStylePanel,\n\t// where it grabs the focus. This works around it.\n\tconst [tabIndex, setTabIndex] = useState(-1)\n\tuseEffect(() => {\n\t\tsetTabIndex(0)\n\t}, [])\n\n\tconst handleValueChange = useCallback(\n\t\t(value: number[]) => {\n\t\t\tonValueChange(value[0])\n\t\t},\n\t\t[onValueChange]\n\t)\n\n\tconst handlePointerDown = useCallback(() => {\n\t\ttooltipManager.hideAllTooltips()\n\t\tonHistoryMark?.('click slider')\n\t}, [onHistoryMark])\n\n\t// N.B. This is a bit silly. The Radix slider auto-focuses which\n\t// triggers TldrawUiTooltip handleFocus when we dbl-click to edit an image,\n\t// which in turn makes the tooltip display prematurely.\n\t// This makes it wait until we've focused to show the tooltip.\n\tuseEffect(() => {\n\t\tconst timeout = tltime.setTimeout(\n\t\t\t'set title and label',\n\t\t\t() => {\n\t\t\t\tsetTitleAndLabel(title + ' \u2014 ' + msg(label as TLUiTranslationKey))\n\t\t\t},\n\t\t\t0\n\t\t)\n\t\treturn () => clearTimeout(timeout)\n\t}, [label, msg, title])\n\n\t// N.B. Annoying. For a11y purposes, we need Tab to work.\n\t// For some reason, Radix has some custom behavior here\n\t// that interferes with tabbing past the slider and then\n\t// you get stuck in the slider.\n\tconst handleKeyEvent = useCallback((event: React.KeyboardEvent) => {\n\t\tif (event.key === 'Tab') {\n\t\t\tevent.stopPropagation()\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className=\"tlui-slider__container\">\n\t\t\t<TldrawUiTooltip content={titleAndLabel}>\n\t\t\t\t<_Slider.Root\n\t\t\t\t\tdata-testid={testId}\n\t\t\t\t\tclassName=\"tlui-slider\"\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tmin={min ?? 0}\n\t\t\t\t\tmax={steps}\n\t\t\t\t\tstep={1}\n\t\t\t\t\tvalue={value !== null ? [value] : undefined}\n\t\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\tonKeyDownCapture={handleKeyEvent}\n\t\t\t\t\tonKeyUpCapture={handleKeyEvent}\n\t\t\t\t>\n\t\t\t\t\t<_Slider.Track className=\"tlui-slider__track\" dir=\"ltr\">\n\t\t\t\t\t\t{value !== null && <_Slider.Range className=\"tlui-slider__range\" dir=\"ltr\" />}\n\t\t\t\t\t</_Slider.Track>\n\t\t\t\t\t{value !== null && (\n\t\t\t\t\t\t<_Slider.Thumb\n\t\t\t\t\t\t\taria-valuemin={(min ?? 0) * ariaValueModifier}\n\t\t\t\t\t\t\taria-valuenow={value * ariaValueModifier}\n\t\t\t\t\t\t\taria-valuemax={steps * ariaValueModifier}\n\t\t\t\t\t\t\taria-label={titleAndLabel}\n\t\t\t\t\t\t\tclassName=\"tlui-slider__thumb\"\n\t\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</_Slider.Root>\n\t\t\t</TldrawUiTooltip>\n\t\t</div>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsFI;AAtFJ,oBAAuB;AACvB,sBAAkC;AAClC,mBAAwD;AAExD,4BAA+B;AAC/B,6BAAgD;AAgBzC,MAAM,iBAAiB,aAAAA,QAAM,WAA4C,SAAS,OACxF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,CAAC,aAAa,GAAG;AAAA,EACjB,oBAAoB;AACrB,GACA,KACC;AACD,QAAM,UAAM,sCAAe;AAC3B,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,EAAE;AAKrD,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,EAAE;AAC3C,8BAAU,MAAM;AACf,gBAAY,CAAC;AAAA,EACd,GAAG,CAAC,CAAC;AAEL,QAAM,wBAAoB;AAAA,IACzB,CAACC,WAAoB;AACpB,oBAAcA,OAAM,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,wBAAoB,0BAAY,MAAM;AAC3C,0CAAe,gBAAgB;AAC/B,oBAAgB,cAAc;AAAA,EAC/B,GAAG,CAAC,aAAa,CAAC;AAMlB,8BAAU,MAAM;AACf,UAAM,UAAU,qBAAO;AAAA,MACtB;AAAA,MACA,MAAM;AACL,yBAAiB,QAAQ,aAAQ,IAAI,KAA2B,CAAC;AAAA,MAClE;AAAA,MACA;AAAA,IACD;AACA,WAAO,MAAM,aAAa,OAAO;AAAA,EAClC,GAAG,CAAC,OAAO,KAAK,KAAK,CAAC;AAMtB,QAAM,qBAAiB,0BAAY,CAAC,UAA+B;AAClE,QAAI,MAAM,QAAQ,OAAO;AACxB,YAAM,gBAAgB;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAC;AAEL,SACC,4CAAC,SAAI,WAAU,0BACd,sDAAC,0CAAgB,SAAS,eACzB;AAAA,IAAC,gBAAAC,OAAQ;AAAA,IAAR;AAAA,MACA,eAAa;AAAA,MACb,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,KAAK,OAAO;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,UAAU,OAAO,CAAC,KAAK,IAAI;AAAA,MAClC,eAAe;AAAA,MACf,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAEhB;AAAA,oDAAC,gBAAAA,OAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAChD,oBAAU,QAAQ,4CAAC,gBAAAA,OAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAAM,GAC5E;AAAA,QACC,UAAU,QACV;AAAA,UAAC,gBAAAA,OAAQ;AAAA,UAAR;AAAA,YACA,kBAAgB,OAAO,KAAK;AAAA,YAC5B,iBAAe,QAAQ;AAAA,YACvB,iBAAe,QAAQ;AAAA,YACvB,cAAY;AAAA,YACZ,WAAU;AAAA,YACV,KAAI;AAAA,YACJ;AAAA,YACA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF,GACD,GACD;AAEF,CAAC;",
   "names": ["React", "value", "_Slider"]
 }

package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js

@@ -38,23 +38,39 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_classnames = __toESM(require("classnames"));
 var import_radix_ui = require("radix-ui");
 var import_react = __toESM(require("react"));
+var import_layout = require("./layout");
+var import_TldrawUiTooltip = require("./TldrawUiTooltip");
+const LayoutByOrientation = {
+  horizontal: import_layout.TldrawUiRow,
+  vertical: import_layout.TldrawUiColumn,
+  grid: import_layout.TldrawUiGrid
+};
 const TldrawUiToolbar = import_react.default.forwardRef(
-  ({ children, className, label, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  ({
+    children,
+    className,
+    label,
+    orientation = "horizontal",
+    tooltipSide,
+    ...props
+  }, ref) => {
+    const Layout = LayoutByOrientation[orientation];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Layout, { asChild: true, tooltipSide, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_radix_ui.Toolbar.Root,
       {
         ref,
         ...props,
-        className: (0, import_classnames.default)("tlui-toolbar-container", className),
+        className: (0, import_classnames.default)("tlui-toolbar", className),
         "aria-label": label,
+        orientation: orientation === "grid" ? "horizontal" : orientation,
         children
       }
-    );
+    ) });
   }
 );
 const TldrawUiToolbarButton = import_react.default.forwardRef(
-  ({ asChild, children, type, isActive, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  ({ asChild, children, type, isActive, tooltip, ...props }, ref) => {
+    const button = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_radix_ui.Toolbar.Button,
       {
         ref,
@@ -62,23 +78,29 @@ const TldrawUiToolbarButton = import_react.default.forwardRef(
         draggable: false,
         "data-isactive": isActive,
         ...props,
+        title: void 0,
         className: (0, import_classnames.default)("tlui-button", `tlui-button__${type}`, props.className),
         children
       }
     );
+    const tooltipContent = tooltip || props.title;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiTooltip.TldrawUiTooltip, { content: tooltipContent, children: button });
   }
 );
 const TldrawUiToolbarToggleGroup = ({
   children,
   className,
   type,
+  asChild,
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_radix_ui.Toolbar.ToggleGroup,
     {
+      asChild,
       type,
       ...props,
+      role: "radiogroup",
       className: (0, import_classnames.default)("tlui-toolbar-toggle-group", className),
       children
     }
@@ -89,12 +111,14 @@ const TldrawUiToolbarToggleItem = ({
   className,
   type,
   value,
+  tooltip,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const toggleItem = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_radix_ui.Toolbar.ToggleItem,
     {
       ...props,
+      title: void 0,
       className: (0, import_classnames.default)(
         "tlui-button",
         `tlui-button__${type}`,
@@ -105,5 +129,7 @@ const TldrawUiToolbarToggleItem = ({
       children
     }
   );
+  const tooltipContent = tooltip || props.title;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiTooltip.TldrawUiTooltip, { content: tooltipContent, children: toggleItem });
 };
 //# sourceMappingURL=TldrawUiToolbar.js.map

package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiToolbar.tsx"],
-  "sourcesContent": ["import classnames from 'classnames'\nimport { Toolbar as _Toolbar } from 'radix-ui'\nimport React from 'react'\n\n/** @public */\nexport interface TLUiToolbarProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdir?: 'ltr' | 'rtl'\n\tlabel: string\n}\n\n/** @public @react */\nexport const TldrawUiToolbar = React.forwardRef<HTMLDivElement, TLUiToolbarProps>(\n\t({ children, className, label, ...props }: TLUiToolbarProps, ref) => {\n\t\treturn (\n\t\t\t<_Toolbar.Root\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t\tclassName={classnames('tlui-toolbar-container', className)}\n\t\t\t\taria-label={label}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</_Toolbar.Root>\n\t\t)\n\t}\n)\n\n/** @public */\nexport interface TLUiToolbarButtonProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tasChild?: boolean\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdisabled?: boolean\n\tisActive?: boolean\n\ttype: 'icon' | 'tool' | 'menu'\n}\n\n/** @public @react */\nexport const TldrawUiToolbarButton = React.forwardRef<HTMLButtonElement, TLUiToolbarButtonProps>(\n\t({ asChild, children, type, isActive, ...props }: TLUiToolbarButtonProps, ref) => {\n\t\treturn (\n\t\t\t<_Toolbar.Button\n\t\t\t\tref={ref}\n\t\t\t\tasChild={asChild}\n\t\t\t\tdraggable={false}\n\t\t\t\tdata-isactive={isActive}\n\t\t\t\t{...props}\n\t\t\t\tclassName={classnames('tlui-button', `tlui-button__${type}`, props.className)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</_Toolbar.Button>\n\t\t)\n\t}\n)\n\n/** @public */\nexport interface TLUiToolbarToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdir?: 'ltr' | 'rtl'\n\t// TODO: fix up this type later\n\tdefaultValue?: any\n\ttype: 'single' | 'multiple'\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleGroup = ({\n\tchildren,\n\tclassName,\n\ttype,\n\t...props\n}: TLUiToolbarToggleGroupProps) => {\n\treturn (\n\t\t<_Toolbar.ToggleGroup\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t\tclassName={classnames('tlui-toolbar-toggle-group', className)}\n\t\t>\n\t\t\t{children}\n\t\t</_Toolbar.ToggleGroup>\n\t)\n}\n\n/** @public */\nexport interface TLUiToolbarToggleItemProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\ttype: 'icon' | 'tool'\n\tvalue: string\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleItem = ({\n\tchildren,\n\tclassName,\n\ttype,\n\tvalue,\n\t...props\n}: TLUiToolbarToggleItemProps) => {\n\treturn (\n\t\t<_Toolbar.ToggleItem\n\t\t\t{...props}\n\t\t\tclassName={classnames(\n\t\t\t\t'tlui-button',\n\t\t\t\t`tlui-button__${type}`,\n\t\t\t\t'tlui-toolbar-toggle-group-item',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tvalue={value}\n\t\t>\n\t\t\t{children}\n\t\t</_Toolbar.ToggleItem>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBG;AAhBH,wBAAuB;AACvB,sBAAoC;AACpC,mBAAkB;AAWX,MAAM,kBAAkB,aAAAA,QAAM;AAAA,EACpC,CAAC,EAAE,UAAU,WAAW,OAAO,GAAG,MAAM,GAAqB,QAAQ;AACpE,WACC;AAAA,MAAC,gBAAAC,QAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,eAAW,kBAAAC,SAAW,0BAA0B,SAAS;AAAA,QACzD,cAAY;AAAA,QAEX;AAAA;AAAA,IACF;AAAA,EAEF;AACD;AAaO,MAAM,wBAAwB,aAAAF,QAAM;AAAA,EAC1C,CAAC,EAAE,SAAS,UAAU,MAAM,UAAU,GAAG,MAAM,GAA2B,QAAQ;AACjF,WACC;AAAA,MAAC,gBAAAC,QAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,iBAAe;AAAA,QACd,GAAG;AAAA,QACJ,eAAW,kBAAAC,SAAW,eAAe,gBAAgB,IAAI,IAAI,MAAM,SAAS;AAAA,QAE3E;AAAA;AAAA,IACF;AAAA,EAEF;AACD;AAaO,MAAM,6BAA6B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAmC;AAClC,SACC;AAAA,IAAC,gBAAAD,QAAS;AAAA,IAAT;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,eAAW,kBAAAC,SAAW,6BAA6B,SAAS;AAAA,MAE3D;AAAA;AAAA,EACF;AAEF;AAWO,MAAM,4BAA4B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAkC;AACjC,SACC;AAAA,IAAC,gBAAAD,QAAS;AAAA,IAAT;AAAA,MACC,GAAG;AAAA,MACJ,eAAW,kBAAAC;AAAA,QACV;AAAA,QACA,gBAAgB,IAAI;AAAA,QACpB;AAAA,QACA;AAAA,MACD;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACF;AAEF;",
+  "sourcesContent": ["import classnames from 'classnames'\nimport { Toolbar as _Toolbar } from 'radix-ui'\nimport React from 'react'\nimport { TldrawUiColumn, TldrawUiGrid, TldrawUiRow } from './layout'\nimport { TldrawUiTooltip } from './TldrawUiTooltip'\n\n/** @public */\nexport interface TLUiToolbarProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdir?: 'ltr' | 'rtl'\n\tlabel: string\n\torientation?: 'horizontal' | 'vertical' | 'grid'\n\ttooltipSide?: 'top' | 'right' | 'bottom' | 'left'\n}\n\nconst LayoutByOrientation = {\n\thorizontal: TldrawUiRow,\n\tvertical: TldrawUiColumn,\n\tgrid: TldrawUiGrid,\n}\n\n/** @public @react */\nexport const TldrawUiToolbar = React.forwardRef<HTMLDivElement, TLUiToolbarProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tlabel,\n\t\t\torientation = 'horizontal',\n\t\t\ttooltipSide,\n\t\t\t...props\n\t\t}: TLUiToolbarProps,\n\t\tref\n\t) => {\n\t\tconst Layout = LayoutByOrientation[orientation]\n\t\treturn (\n\t\t\t<Layout asChild tooltipSide={tooltipSide}>\n\t\t\t\t<_Toolbar.Root\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t\tclassName={classnames('tlui-toolbar', className)}\n\t\t\t\t\taria-label={label}\n\t\t\t\t\torientation={orientation === 'grid' ? 'horizontal' : orientation}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</_Toolbar.Root>\n\t\t\t</Layout>\n\t\t)\n\t}\n)\n\n/** @public */\nexport interface TLUiToolbarButtonProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tasChild?: boolean\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdisabled?: boolean\n\tisActive?: boolean\n\ttype: 'icon' | 'tool' | 'menu'\n\ttooltip?: string\n}\n\n/** @public @react */\nexport const TldrawUiToolbarButton = React.forwardRef<HTMLButtonElement, TLUiToolbarButtonProps>(\n\t({ asChild, children, type, isActive, tooltip, ...props }: TLUiToolbarButtonProps, ref) => {\n\t\tconst button = (\n\t\t\t<_Toolbar.Button\n\t\t\t\tref={ref}\n\t\t\t\tasChild={asChild}\n\t\t\t\tdraggable={false}\n\t\t\t\tdata-isactive={isActive}\n\t\t\t\t{...props}\n\t\t\t\t// The tooltip takes care of this.\n\t\t\t\ttitle={undefined}\n\t\t\t\tclassName={classnames('tlui-button', `tlui-button__${type}`, props.className)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</_Toolbar.Button>\n\t\t)\n\n\t\tconst tooltipContent = tooltip || props.title\n\n\t\treturn <TldrawUiTooltip content={tooltipContent}>{button}</TldrawUiTooltip>\n\t}\n)\n\n/** @public */\nexport interface TLUiToolbarToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdir?: 'ltr' | 'rtl'\n\tvalue: any\n\t// TODO: fix up this type later\n\tdefaultValue?: any\n\ttype: 'single' | 'multiple'\n\tasChild?: boolean\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleGroup = ({\n\tchildren,\n\tclassName,\n\ttype,\n\tasChild,\n\t...props\n}: TLUiToolbarToggleGroupProps) => {\n\treturn (\n\t\t<_Toolbar.ToggleGroup\n\t\t\tasChild={asChild}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t\t// TODO: this fixes a bug in Radix until they fix it.\n\t\t\t// https://github.com/radix-ui/primitives/issues/3188\n\t\t\t// https://github.com/radix-ui/primitives/pull/3189\n\t\t\trole=\"radiogroup\"\n\t\t\tclassName={classnames('tlui-toolbar-toggle-group', className)}\n\t\t>\n\t\t\t{children}\n\t\t</_Toolbar.ToggleGroup>\n\t)\n}\n\n/** @public */\nexport interface TLUiToolbarToggleItemProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\ttype: 'icon' | 'tool'\n\tvalue: string\n\ttooltip?: string\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleItem = ({\n\tchildren,\n\tclassName,\n\ttype,\n\tvalue,\n\ttooltip,\n\t...props\n}: TLUiToolbarToggleItemProps) => {\n\tconst toggleItem = (\n\t\t<_Toolbar.ToggleItem\n\t\t\t{...props}\n\t\t\t// The tooltip takes care of this.\n\t\t\ttitle={undefined}\n\t\t\tclassName={classnames(\n\t\t\t\t'tlui-button',\n\t\t\t\t`tlui-button__${type}`,\n\t\t\t\t'tlui-toolbar-toggle-group-item',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tvalue={value}\n\t\t>\n\t\t\t{children}\n\t\t</_Toolbar.ToggleItem>\n\t)\n\n\tconst tooltipContent = tooltip || props.title\n\n\treturn <TldrawUiTooltip content={tooltipContent}>{toggleItem}</TldrawUiTooltip>\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsCI;AAtCJ,wBAAuB;AACvB,sBAAoC;AACpC,mBAAkB;AAClB,oBAA0D;AAC1D,6BAAgC;AAYhC,MAAM,sBAAsB;AAAA,EAC3B,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,MAAM;AACP;AAGO,MAAM,kBAAkB,aAAAA,QAAM;AAAA,EACpC,CACC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACJ,GACA,QACI;AACJ,UAAM,SAAS,oBAAoB,WAAW;AAC9C,WACC,4CAAC,UAAO,SAAO,MAAC,aACf;AAAA,MAAC,gBAAAC,QAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,eAAW,kBAAAC,SAAW,gBAAgB,SAAS;AAAA,QAC/C,cAAY;AAAA,QACZ,aAAa,gBAAgB,SAAS,eAAe;AAAA,QAEpD;AAAA;AAAA,IACF,GACD;AAAA,EAEF;AACD;AAcO,MAAM,wBAAwB,aAAAF,QAAM;AAAA,EAC1C,CAAC,EAAE,SAAS,UAAU,MAAM,UAAU,SAAS,GAAG,MAAM,GAA2B,QAAQ;AAC1F,UAAM,SACL;AAAA,MAAC,gBAAAC,QAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,iBAAe;AAAA,QACd,GAAG;AAAA,QAEJ,OAAO;AAAA,QACP,eAAW,kBAAAC,SAAW,eAAe,gBAAgB,IAAI,IAAI,MAAM,SAAS;AAAA,QAE3E;AAAA;AAAA,IACF;AAGD,UAAM,iBAAiB,WAAW,MAAM;AAExC,WAAO,4CAAC,0CAAgB,SAAS,gBAAiB,kBAAO;AAAA,EAC1D;AACD;AAeO,MAAM,6BAA6B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAmC;AAClC,SACC;AAAA,IAAC,gBAAAD,QAAS;AAAA,IAAT;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAIJ,MAAK;AAAA,MACL,eAAW,kBAAAC,SAAW,6BAA6B,SAAS;AAAA,MAE3D;AAAA;AAAA,EACF;AAEF;AAYO,MAAM,4BAA4B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAkC;AACjC,QAAM,aACL;AAAA,IAAC,gBAAAD,QAAS;AAAA,IAAT;AAAA,MACC,GAAG;AAAA,MAEJ,OAAO;AAAA,MACP,eAAW,kBAAAC;AAAA,QACV;AAAA,QACA,gBAAgB,IAAI;AAAA,QACpB;AAAA,QACA;AAAA,MACD;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACF;AAGD,QAAM,iBAAiB,WAAW,MAAM;AAExC,SAAO,4CAAC,0CAAgB,SAAS,gBAAiB,sBAAW;AAC9D;",
   "names": ["React", "_Toolbar", "classnames"]
 }