[pull] main from tldraw:main

apps/docs/utils/TldrawApiModel.ts

@@ -131,6 +131,21 @@ export class TldrawApiModel extends ApiModel {
 				return this.resolveToken(component, tokens[2])
 			}
 
+			if (
+				tokens.length === 9 &&
+				tokens[0].text === 'import("react").' &&
+				tokens[1].text === 'ForwardRefExoticComponent' &&
+				tokens[2].text === '<' &&
+				tokens[3].kind === ExcerptTokenKind.Reference &&
+				tokens[4].text === ' & import("react").' &&
+				tokens[5].text === 'RefAttributes' &&
+				tokens[6].text === '<' &&
+				tokens[7].kind === ExcerptTokenKind.Reference &&
+				tokens[8].text === '>>'
+			) {
+				return this.resolveToken(component, tokens[3])
+			}
+
 			if (component.variableTypeExcerpt.text === 'import("react").NamedExoticComponent<object>') {
 				// this is a `memo` component with no props
 				return null

apps/examples/src/examples/rich-text-font-extensions/RichTextFontExtension.css

@@ -1,4 +1,4 @@
-.tlui-buttons__horizontal select {
+.rich-text-font-extension-select {
 	border: 0;
 	background: transparent;
 	margin: 0 8px;

apps/examples/src/examples/rich-text-font-extensions/RichTextFontExtension.tsx

@@ -72,6 +72,7 @@ const components: TLComponents = {
 		return (
 			<DefaultRichTextToolbar>
 				<select
+					className="rich-text-font-extension-select"
 					value={currentFontFamily}
 					onPointerDown={stopEventPropagation}
 					onChange={(e) => {
@@ -85,6 +86,7 @@ const components: TLComponents = {
 					))}
 				</select>
 				<select
+					className="rich-text-font-extension-select"
 					value={currentFontSize}
 					onPointerDown={stopEventPropagation}
 					onChange={(e) => {

packages/tldraw/api-report.api.md

@@ -19,11 +19,13 @@ import { CSSProperties } from 'react';
 import { Editor } from '@tldraw/editor';
 import { Extension } from '@tiptap/core';
 import { Extensions } from '@tiptap/core';
+import { ForwardRefExoticComponent } from 'react';
 import { Geometry2d } from '@tldraw/editor';
 import { Geometry2dFilters } from '@tldraw/editor';
 import { Geometry2dOptions } from '@tldraw/editor';
 import { Group2d } from '@tldraw/editor';
 import { HandleSnapGeometry } from '@tldraw/editor';
+import { HTMLAttributes } from 'react';
 import { IndexKey } from '@tldraw/editor';
 import { JsonObject } from '@tldraw/editor';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
@@ -43,6 +45,7 @@ import { ReadonlySharedStyleMap } from '@tldraw/editor';
 import { RecordProps } from '@tldraw/editor';
 import { Rectangle2d } from '@tldraw/editor';
 import { RecursivePartial } from '@tldraw/editor';
+import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { Result } from '@tldraw/editor';
 import { RichTextFontVisitorState } from '@tldraw/editor';
@@ -3027,6 +3030,9 @@ export function TldrawUiDropdownMenuTrigger({ children, ...rest }: TLUiDropdownM
 // @public (undocumented)
 export function TldrawUiEventsProvider({ onEvent, children }: EventsProviderProps): JSX_2.Element;
 
+// @public
+export const TldrawUiGrid: ForwardRefExoticComponent<TLUiLayoutProps & RefAttributes<HTMLDivElement>>;
+
 // @public (undocumented)
 export const TldrawUiIcon: NamedExoticComponent<TLUiIconProps>;
 
@@ -3061,7 +3067,7 @@ export function TldrawUiMenuSubmenu<Translation extends string = string>({ id, d
 export function TldrawUiMenuToolItem({ toolId, ...rest }: TLUiMenuToolItemProps): JSX_2.Element | null;
 
 // @public (undocumented)
-export function TldrawUiPopover({ id, children, onOpenChange, open }: TLUiPopoverProps): JSX_2.Element;
+export function TldrawUiPopover({ id, children, onOpenChange, open, className }: TLUiPopoverProps): JSX_2.Element;
 
 // @public (undocumented)
 export function TldrawUiPopoverContent({ side, children, align, sideOffset, alignOffset, disableEscapeKeyDown, autoFocusFirstButton, }: TLUiPopoverContentProps): JSX_2.Element;
@@ -3078,6 +3084,9 @@ export interface TldrawUiProps extends TLUiContextProviderProps {
     renderDebugMenuItems?(): React_3.ReactNode;
 }
 
+// @public
+export const TldrawUiRow: ForwardRefExoticComponent<TLUiLayoutProps & RefAttributes<HTMLDivElement>>;
+
 // @public (undocumented)
 export const TldrawUiSlider: React_3.ForwardRefExoticComponent<TLUiSliderProps & React_3.RefAttributes<HTMLDivElement>>;
 
@@ -3970,6 +3979,14 @@ export type TLUiKeyboardShortcutsDialogProps = TLUiDialogProps & {
     children?: ReactNode;
 };
 
+// @public (undocumented)
+export interface TLUiLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    // (undocumented)
+    asChild?: boolean;
+    // (undocumented)
+    children: ReactNode;
+}
+
 // @public (undocumented)
 export interface TLUiMainMenuProps {
     // (undocumented)
@@ -4113,6 +4130,8 @@ export interface TLUiPopoverProps {
     // (undocumented)
     children: React_3.ReactNode;
     // (undocumented)
+    className?: string;
+    // (undocumented)
     id: string;
     // (undocumented)
     onOpenChange?(isOpen: boolean): void;
@@ -4256,6 +4275,8 @@ export interface TLUiToolbarProps extends React_3.HTMLAttributes<HTMLDivElement>
     dir?: 'ltr' | 'rtl';
     // (undocumented)
     label: string;
+    // (undocumented)
+    orientation?: 'grid' | 'horizontal';
 }
 
 // @public (undocumented)

packages/tldraw/src/index.ts

@@ -25,6 +25,11 @@ export { DefaultA11yAnnouncer, useSelectedShapesAnnouncer } from './lib/ui/compo
 export { AccessibilityMenu } from './lib/ui/components/AccessibilityMenu'
 export { ColorSchemeMenu } from './lib/ui/components/ColorSchemeMenu'
 export { DefaultDialogs } from './lib/ui/components/Dialogs'
+export {
+	TldrawUiGrid,
+	TldrawUiRow,
+	type TLUiLayoutProps,
+} from './lib/ui/components/primitives/layout'
 export {
 	TldrawUiMenuActionCheckboxItem,
 	type TLUiMenuActionCheckboxItemProps,

packages/tldraw/src/lib/ui.css

@@ -161,12 +161,6 @@
 	}
 }
 
-/* Panel button */
-
-.tlui-button__panel {
-	position: relative;
-}
-
 /* Menu button */
 
 .tlui-button__menu {
@@ -207,7 +201,7 @@
 
 /* Tool lock button */
 
-.tlui-toolbar__lock-button {
+.tlui-main-toolbar__lock-button {
 	position: absolute;
 	top: 4px;
 	right: 0px;
@@ -218,7 +212,7 @@
 	border-radius: var(--radius-2);
 }
 
-.tlui-toolbar__lock-button::after {
+.tlui-main-toolbar__lock-button::after {
 	top: 4px;
 	left: 8px;
 	inset: 4px;
@@ -230,16 +224,6 @@
 	position: relative;
 	height: 48px;
 	width: 48px;
-	margin-left: -2px;
-	margin-right: -2px;
-}
-
-.tlui-button__tool:nth-of-type(1) {
-	margin-left: 0px;
-}
-
-.tlui-button__tool:nth-last-of-type(1) {
-	margin-right: 0px;
 }
 
 .tlui-button__tool::after {
@@ -270,47 +254,30 @@
 	width: 16px;
 }
 
-/* Button Row */
+/* Row layout */
 
-.tlui-buttons__horizontal {
+.tlui-row {
 	display: flex;
 	flex-direction: row;
+	padding: 0 2px;
 }
-.tlui-buttons__horizontal > * {
+.tlui-row > * {
 	margin-left: -2px;
 	margin-right: -2px;
 }
-.tlui-buttons__horizontal > *:nth-child(1) {
-	margin-left: 0px;
-}
-.tlui-buttons__horizontal > *:nth-last-child(1) {
-	margin-right: 0px;
-}
 
-/* Button Grid */
+/* Grid layout */
 
-.tlui-buttons__grid {
+.tlui-grid {
 	display: grid;
-	grid-template-columns: repeat(4, auto);
+	grid-template-columns: repeat(4, 1fr);
 	grid-auto-flow: row;
 	overflow: hidden;
+	padding: 2px;
 }
-.tlui-buttons__grid > .tlui-button {
+.tlui-grid > * {
 	margin: -2px;
 }
-.tlui-buttons__grid > .tlui-button:nth-of-type(4n),
-.tlui-buttons__vertical-align > .tlui-button:nth-of-type(3n) {
-	margin-right: 0px;
-}
-.tlui-buttons__grid > .tlui-button:nth-of-type(4n - 3) {
-	margin-left: 0px;
-}
-.tlui-buttons__grid > .tlui-button:nth-of-type(-n + 4) {
-	margin-top: 0px;
-}
-.tlui-buttons__grid > .tlui-button:nth-last-of-type(-n + 4) {
-	margin-bottom: 0px;
-}
 
 /* Zoom button */
 
@@ -1033,12 +1000,8 @@
 	border-bottom: 1px solid var(--color-divider);
 }
 
-.tlui-style-panel__row {
-	display: flex;
-}
-/* Only really used for the alignment picker */
-.tlui-style-panel__row__extra-button {
-	margin-left: -2px;
+.tlui-style-panel__dropdown-picker:only-child {
+	width: 100%;
 }
 
 .tlui-style-panel__double-select-picker {
@@ -1154,7 +1117,7 @@
 /* --------------------- Toolbar -------------------- */
 
 /* Wide container */
-.tlui-toolbar {
+.tlui-main-toolbar {
 	grid-column: 1 / span 3;
 	grid-row: 1;
 	display: flex;
@@ -1165,20 +1128,20 @@
 }
 
 /* Centered Content */
-.tlui-toolbar__inner {
+.tlui-main-toolbar__inner {
 	position: relative;
 	width: fit-content;
 	display: flex;
 	gap: var(--space-3);
 	align-items: flex-end;
 }
 
-.tlui-toolbar__left {
+.tlui-main-toolbar__left {
 	width: fit-content;
 }
 
 /* Row of controls + lock button */
-.tlui-toolbar__extras {
+.tlui-main-toolbar__extras {
 	position: relative;
 	z-index: var(--layer-above);
 	width: 100%;
@@ -1187,11 +1150,11 @@
 	height: 48px;
 }
 
-.tlui-toolbar__extras:empty {
+.tlui-main-toolbar__extras:empty {
 	display: none;
 }
 
-.tlui-toolbar__extras__controls {
+.tlui-main-toolbar__extras__controls {
 	display: flex;
 	position: relative;
 	flex-direction: row;
@@ -1206,7 +1169,7 @@
 	width: fit-content;
 }
 
-.tlui-toolbar__tools {
+.tlui-main-toolbar__tools {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -1217,37 +1180,29 @@
 	background: var(--color-panel);
 	box-shadow: var(--shadow-2);
 }
-.tlui-toolbar__tools__list {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-}
 
-.tlui-toolbar__overflow {
+.tlui-main-toolbar__overflow {
 	width: 40px;
+	margin-left: 2px;
 }
 
-.tlui-layout__mobile .tlui-toolbar__overflow {
+.tlui-layout__mobile .tlui-main-toolbar__overflow {
 	width: 32px;
 	padding: 0px;
 }
 
-.tlui-toolbar *[data-state='open']::after {
+.tlui-main-toolbar *[data-state='open']::after {
 	background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 	opacity: 1;
 }
 
 @media (hover: hover) {
-	.tlui-toolbar *[data-state='open']:not(:hover)::after {
+	.tlui-main-toolbar *[data-state='open']:not(:hover)::after {
 		background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 		opacity: 1;
 	}
 }
 
-.tlui-layout__mobile .tlui-toolbar {
-	transition: transform 0.15s ease-out 0.05s;
-}
-
 /* ------------------- Tooltip -------------------- */
 
 .tlui-tooltip {

packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx

@@ -62,8 +62,9 @@ export const DefaultActionsMenu = memo(function DefaultActionsMenu({
 				<TldrawUiToolbar
 					ref={ref}
 					label={msg('actions-menu.title')}
-					className="tlui-actions-menu tlui-buttons__grid"
+					className="tlui-actions-menu"
 					data-testid="actions-menu.content"
+					orientation="grid"
 				>
 					<TldrawUiMenuContextProvider type="icons" sourceId="actions-menu">
 						{content}

packages/tldraw/src/lib/ui/components/DefaultMenuPanel.tsx

@@ -5,6 +5,7 @@ import { useBreakpoint } from '../context/breakpoints'
 import { useTldrawUiComponents } from '../context/components'
 import { useTranslation } from '../hooks/useTranslation/useTranslation'
 import { TldrawUiToolbar } from './primitives/TldrawUiToolbar'
+import { TldrawUiRow } from './primitives/layout'
 
 /** @public @react */
 export const DefaultMenuPanel = memo(function MenuPanel() {
@@ -32,16 +33,16 @@ export const DefaultMenuPanel = memo(function MenuPanel() {
 
 	return (
 		<nav ref={ref} className="tlui-menu-zone">
-			<div className="tlui-buttons__horizontal">
+			<TldrawUiRow>
 				{MainMenu && <MainMenu />}
 				{PageMenu && !isSinglePageMode && <PageMenu />}
 				{showQuickActions ? (
-					<TldrawUiToolbar className="tlui-buttons__horizontal" label={msg('actions-menu.title')}>
+					<TldrawUiToolbar orientation="horizontal" label={msg('actions-menu.title')}>
 						{QuickActions && <QuickActions />}
 						{ActionsMenu && <ActionsMenu />}
 					</TldrawUiToolbar>
 				) : null}
-			</div>
+			</TldrawUiRow>
 		</nav>
 	)
 })