export default ui items (#2973)

This PR exports all the components within each of the default menu
content components. Should make it easier to customise the default UI.


- [x] `minor` — New feature


### Release Notes

- Components within default menu content components are now exported.

packages/tldraw/api-report.md

@@ -123,6 +123,17 @@ import { Vec } from '@tldraw/editor';
 import { VecLike } from '@tldraw/editor';
 import { VecModel } from '@tldraw/editor';
 
+// @public (undocumented)
+export function AlignMenuItems(): JSX_2.Element;
+
+// @public (undocumented)
+export function ArrangeMenuSubmenu(): JSX_2.Element | null;
+
+// @public (undocumented)
+export function ArrowheadStylePickerSet({ styles }: {
+    styles: ReadonlySharedStyleMap;
+}): JSX_2.Element | null;
+
 // @public (undocumented)
 export class ArrowShapeTool extends StateNode {
     // (undocumented)
@@ -269,12 +280,32 @@ export function BreakPointProvider({ forceMobile, children, }: {
 // @internal (undocumented)
 export function buildFromV1Document(editor: Editor, document: LegacyTldrawDocument): void;
 
+// @public (undocumented)
+export function ClipboardMenuGroup(): JSX_2.Element;
+
+// @public (undocumented)
+export function CommonStylePickerSet({ styles }: {
+    styles: ReadonlySharedStyleMap;
+}): JSX_2.Element;
+
 // @public
 export function containBoxSize(originalSize: BoxWidthHeight, containBoxSize: BoxWidthHeight): BoxWidthHeight;
 
+// @public (undocumented)
+export function ConversionsMenuGroup(): JSX_2.Element;
+
 // @public
 export function copyAs(editor: Editor, ids: TLShapeId[], format?: TLCopyType, opts?: Partial<TLSvgOptions>): Promise<void>;
 
+// @public (undocumented)
+export function CopyMenuItem(): JSX_2.Element;
+
+// @public (undocumented)
+export function CutMenuItem(): JSX_2.Element;
+
+// @public (undocumented)
+export function DebugFlags(): JSX_2.Element | null;
+
 // @public (undocumented)
 export const DEFAULT_ACCEPTED_IMG_TYPE: string[];
 
@@ -361,6 +392,12 @@ export const DefaultZoomMenu: NamedExoticComponent<TLUiZoomMenuProps>;
 // @public (undocumented)
 export function DefaultZoomMenuContent(): JSX_2.Element;
 
+// @public (undocumented)
+export function DeleteMenuItem(): JSX_2.Element;
+
+// @public (undocumented)
+export function DistributeMenuItems(): JSX_2.Element;
+
 // @public
 export function downsizeImage(blob: Blob, width: number, height: number, opts?: {
     type?: string | undefined;
@@ -425,9 +462,18 @@ export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
     static type: "draw";
 }
 
+// @public (undocumented)
+export function DuplicateMenuItem(): JSX_2.Element;
+
+// @public (undocumented)
+export function EditLinkMenuItem(): JSX_2.Element;
+
 // @public (undocumented)
 export function EditSubmenu(): JSX_2.Element;
 
+// @public (undocumented)
+export function EmbedsGroup(): JSX_2.Element;
+
 // @public (undocumented)
 export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
     // (undocumented)
@@ -480,6 +526,17 @@ export type EventsProviderProps = {
     children: any;
 };
 
+// @public (undocumented)
+export function ExampleDialog({ title, body, cancel, confirm, displayDontShowAgain, onCancel, onContinue, }: {
+    title?: string;
+    body?: string;
+    cancel?: string;
+    confirm?: string;
+    displayDontShowAgain?: boolean;
+    onCancel: () => void;
+    onContinue: () => void;
+}): JSX_2.Element;
+
 // @public
 export function exportAs(editor: Editor, ids: TLShapeId[], format: TLExportType | undefined, name: string | undefined, opts?: Partial<TLSvgOptions>): Promise<void>;
 
@@ -489,11 +546,17 @@ export function ExportFileContentSubMenu(): JSX_2.Element;
 // @public (undocumented)
 export function ExtrasGroup(): JSX_2.Element;
 
+// @public (undocumented)
+export function FeatureFlags(): JSX_2.Element | null;
+
 // @public
 export function fitFrameToContent(editor: Editor, id: TLShapeId, opts?: {
     padding: number;
 }): void;
 
+// @public (undocumented)
+export function FitFrameToContentMenuItem(): JSX_2.Element;
+
 // @public (undocumented)
 export class FrameShapeTool extends BaseBoxShapeTool {
     // (undocumented)
@@ -699,6 +762,11 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
     static type: "geo";
 }
 
+// @public (undocumented)
+export function GeoStylePickerSet({ styles }: {
+    styles: ReadonlySharedStyleMap;
+}): JSX_2.Element | null;
+
 // @public
 export function getEmbedInfo(inputUrl: string): TLEmbedResult;
 
@@ -712,6 +780,12 @@ export function getSvgAsImage(svg: SVGElement, isSafari: boolean, options: {
 // @public (undocumented)
 export function getSvgAsString(svg: SVGElement): Promise<string>;
 
+// @public (undocumented)
+export function GroupMenuItem(): JSX_2.Element;
+
+// @public (undocumented)
+export function GroupOrUngroupMenuItem(): JSX_2.Element;
+
 // @public (undocumented)
 export class HandTool extends StateNode {
     // (undocumented)
@@ -824,6 +898,12 @@ export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
 // @public (undocumented)
 export function isGifAnimated(file: Blob): Promise<boolean>;
 
+// @public (undocumented)
+export function KeyboardShortcutsMenuItem(): JSX_2.Element | null;
+
+// @public (undocumented)
+export const LanguageMenu: MemoExoticComponent<() => JSX_2.Element>;
+
 // @public (undocumented)
 export class LaserTool extends StateNode {
     // (undocumented)
@@ -911,6 +991,18 @@ export class LineShapeUtil extends ShapeUtil<TLLineShape> {
     static type: "line";
 }
 
+// @public (undocumented)
+export function LockGroup(): JSX_2.Element;
+
+// @public (undocumented)
+export function MiscMenuGroup(): JSX_2.Element;
+
+// @public (undocumented)
+export function MoveToPageMenu(): JSX_2.Element | null;
+
+// @public (undocumented)
+export function MultiShapeMenuGroup(): JSX_2.Element;
+
 // @public (undocumented)
 export class NoteShapeTool extends StateNode {
     // (undocumented)
@@ -1013,6 +1105,19 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 // @public (undocumented)
 export function OfflineIndicator(): JSX_2.Element;
 
+// @public (undocumented)
+export function OpacitySlider(): JSX_2.Element | null;
+
+// @public (undocumented)
+export const PageItemInput: ({ name, id, isCurrentPage, }: {
+    name: string;
+    id: TLPageId;
+    isCurrentPage: boolean;
+}) => JSX_2.Element;
+
+// @public (undocumented)
+export const PageItemSubmenu: MemoExoticComponent<({ index, listSize, item, onRename, }: PageItemSubmenuProps) => JSX_2.Element>;
+
 // @internal (undocumented)
 export function parseAndLoadDocument(editor: Editor, document: string, msg: (id: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey) => string, addToast: TLUiToastsContextType['addToast'], onV1FileLoad?: () => void, forceDarkMode?: boolean): Promise<void>;
 
@@ -1022,15 +1127,33 @@ export function parseTldrawJsonFile({ json, schema, }: {
     json: string;
 }): Result<TLStore, TldrawFileParseError>;
 
+// @public (undocumented)
+export function PasteMenuItem(): JSX_2.Element;
+
 // @public (undocumented)
 export function PreferencesGroup(): JSX_2.Element;
 
 // @public (undocumented)
 export function preloadFont(id: string, font: TLTypeFace): Promise<FontFace>;
 
+// @public (undocumented)
+export function PrintItem(): JSX_2.Element;
+
 // @public
 export function removeFrame(editor: Editor, ids: TLShapeId[]): void;
 
+// @public (undocumented)
+export function RemoveFrameMenuItem(): JSX_2.Element;
+
+// @public (undocumented)
+export function ReorderMenuItems(): JSX_2.Element;
+
+// @public (undocumented)
+export function ReorderMenuSubmenu(): JSX_2.Element | null;
+
+// @public (undocumented)
+export function RotateCWMenuItem(): JSX_2.Element;
+
 // @public (undocumented)
 export class SelectTool extends StateNode {
     // (undocumented)
@@ -1059,12 +1182,23 @@ export function setDefaultEditorAssetUrls(assetUrls: TLEditorAssetUrls): void;
 // @internal (undocumented)
 export function setDefaultUiAssetUrls(urls: TLUiAssetUrls): void;
 
+// @public (undocumented)
+export function SetSelectionGroup(): JSX_2.Element;
+
 // @public (undocumented)
 export function ShapeSubmenu(): JSX_2.Element;
 
 // @internal (undocumented)
 export function Spinner(props: React_2.SVGProps<SVGSVGElement>): JSX_2.Element;
 
+// @public (undocumented)
+export function SplineStylePickerSet({ styles }: {
+    styles: ReadonlySharedStyleMap;
+}): JSX_2.Element | null;
+
+// @public (undocumented)
+export function StackMenuItems(): JSX_2.Element;
+
 // @public (undocumented)
 export class TextShapeTool extends StateNode {
     // (undocumented)
@@ -1183,6 +1317,11 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
     static type: "text";
 }
 
+// @public (undocumented)
+export function TextStylePickerSet({ styles }: {
+    styles: ReadonlySharedStyleMap;
+}): JSX_2.Element | null;
+
 // @public (undocumented)
 export type TLComponents = Expand<TLEditorComponents & TLUiComponents>;
 
@@ -2068,6 +2207,39 @@ export type TLUiZoomMenuProps = {
     children?: any;
 };
 
+// @public (undocumented)
+export function ToggleAutoSizeMenuItem(): JSX_2.Element;
+
+// @public (undocumented)
+export function ToggleDarkModeItem(): JSX_2.Element;
+
+// @public (undocumented)
+export function ToggleDebugModeItem(): JSX_2.Element;
+
+// @public (undocumented)
+export function ToggleEdgeScrollingItem(): JSX_2.Element;
+
+// @public (undocumented)
+export function ToggleFocusModeItem(): JSX_2.Element;
+
+// @public (undocumented)
+export function ToggleGridItem(): JSX_2.Element;
+
+// @public (undocumented)
+export function ToggleLockMenuItem(): JSX_2.Element;
+
+// @public (undocumented)
+export function ToggleReduceMotionItem(): JSX_2.Element;
+
+// @public (undocumented)
+export function ToggleSnapModeItem(): JSX_2.Element;
+
+// @public (undocumented)
+export function ToggleToolLockItem(): JSX_2.Element;
+
+// @public (undocumented)
+export function ToggleTransparentBgMenuItem(): JSX_2.Element;
+
 // @public (undocumented)
 export function toolbarItem(toolItem: TLUiToolItem): TLUiToolbarItem;
 
@@ -2077,6 +2249,15 @@ export const truncateStringWithEllipsis: (str: string, maxLength: number) => str
 // @public (undocumented)
 export function UiEventsProvider({ onEvent, children }: EventsProviderProps): JSX_2.Element;
 
+// @public (undocumented)
+export function UndoRedoGroup(): JSX_2.Element;
+
+// @public (undocumented)
+export function UngroupMenuItem(): JSX_2.Element;
+
+// @public (undocumented)
+export function UnlockAllMenuItem(): JSX_2.Element;
+
 // @public (undocumented)
 export function unwrapLabel(label?: TLUiActionItem['label'], menuType?: string): string | undefined;
 
@@ -2214,6 +2395,15 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
 // @public (undocumented)
 export function ViewSubmenu(): JSX_2.Element;
 
+// @public (undocumented)
+export function ZoomOrRotateMenuItem(): JSX_2.Element;
+
+// @public (undocumented)
+export function ZoomTo100MenuItem(): JSX_2.Element;
+
+// @public (undocumented)
+export function ZoomToFitMenuItem(): JSX_2.Element;
+
 // @public (undocumented)
 export class ZoomTool extends StateNode {
     // (undocumented)
@@ -2240,6 +2430,9 @@ export class ZoomTool extends StateNode {
     onKeyUp: TLKeyboardEvent;
 }
 
+// @public (undocumented)
+export function ZoomToSelectionMenuItem(): JSX_2.Element;
+
 
 export * from "@tldraw/editor";
 

packages/tldraw/src/index.ts

@@ -147,13 +147,21 @@ export {
 } from './lib/ui/context/components'
 
 export { DefaultPageMenu } from './lib/ui/components/PageMenu/DefaultPageMenu'
+export { PageItemInput } from './lib/ui/components/PageMenu/PageItemInput'
+export { PageItemSubmenu } from './lib/ui/components/PageMenu/PageItemSubmenu'
 
 export {
 	DefaultStylePanel,
 	type TLUiStylePanelProps,
 } from './lib/ui/components/StylePanel/DefaultStylePanel'
 export {
+	ArrowheadStylePickerSet,
+	CommonStylePickerSet,
 	DefaultStylePanelContent,
+	GeoStylePickerSet,
+	OpacitySlider,
+	SplineStylePickerSet,
+	TextStylePickerSet,
 	type TLUiStylePanelContentProps,
 } from './lib/ui/components/StylePanel/DefaultStylePanelContent'
 
@@ -161,7 +169,16 @@ export {
 	DefaultActionsMenu,
 	type TLUiActionsMenuProps,
 } from './lib/ui/components/ActionsMenu/DefaultActionsMenu'
-export { DefaultActionsMenuContent } from './lib/ui/components/ActionsMenu/DefaultActionsMenuContent'
+export {
+	AlignMenuItems,
+	DefaultActionsMenuContent,
+	DistributeMenuItems,
+	GroupOrUngroupMenuItem,
+	ReorderMenuItems,
+	RotateCWMenuItem,
+	StackMenuItems,
+	ZoomOrRotateMenuItem,
+} from './lib/ui/components/ActionsMenu/DefaultActionsMenuContent'
 
 export {
 	DefaultContextMenu as ContextMenu,
@@ -174,7 +191,47 @@ export {
 	DefaultHelpMenu,
 	type TLUiHelpMenuProps,
 } from './lib/ui/components/HelpMenu/DefaultHelpMenu'
-export { DefaultHelpMenuContent } from './lib/ui/components/HelpMenu/DefaultHelpMenuContent'
+export {
+	DefaultHelpMenuContent,
+	KeyboardShortcutsMenuItem,
+} from './lib/ui/components/HelpMenu/DefaultHelpMenuContent'
+export { LanguageMenu } from './lib/ui/components/LanguageMenu'
+
+export {
+	ArrangeMenuSubmenu,
+	ClipboardMenuGroup,
+	ConversionsMenuGroup,
+	CopyMenuItem,
+	CutMenuItem,
+	DeleteMenuItem,
+	DuplicateMenuItem,
+	EditLinkMenuItem,
+	EmbedsGroup,
+	FitFrameToContentMenuItem,
+	GroupMenuItem,
+	MoveToPageMenu,
+	PasteMenuItem,
+	PrintItem,
+	RemoveFrameMenuItem,
+	ReorderMenuSubmenu,
+	SetSelectionGroup,
+	ToggleAutoSizeMenuItem,
+	ToggleDarkModeItem,
+	ToggleDebugModeItem,
+	ToggleEdgeScrollingItem,
+	ToggleFocusModeItem,
+	ToggleGridItem,
+	ToggleLockMenuItem,
+	ToggleReduceMotionItem,
+	ToggleSnapModeItem,
+	ToggleToolLockItem,
+	ToggleTransparentBgMenuItem,
+	UngroupMenuItem,
+	UnlockAllMenuItem,
+	ZoomTo100MenuItem,
+	ZoomToFitMenuItem,
+	ZoomToSelectionMenuItem,
+} from './lib/ui/components/menu-items'
 
 export {
 	DefaultMainMenu,
@@ -185,8 +242,12 @@ export {
 	EditSubmenu,
 	ExportFileContentSubMenu,
 	ExtrasGroup,
+	LockGroup,
+	MiscMenuGroup,
+	MultiShapeMenuGroup,
 	PreferencesGroup,
 	ShapeSubmenu,
+	UndoRedoGroup,
 	ViewSubmenu,
 } from './lib/ui/components/MainMenu/DefaultMainMenuContent'
 
@@ -218,7 +279,12 @@ export {
 	DefaultDebugMenu,
 	type TLUiDebugMenuProps,
 } from './lib/ui/components/DebugMenu/DefaultDebugMenu'
-export { DefaultDebugMenuContent } from './lib/ui/components/DebugMenu/DefaultDebugMenuContent'
+export {
+	DebugFlags,
+	DefaultDebugMenuContent,
+	ExampleDialog,
+	FeatureFlags,
+} from './lib/ui/components/DebugMenu/DefaultDebugMenuContent'
 
 export { DefaultToolbar } from './lib/ui/components/Toolbar/DefaultToolbar'
 

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

@@ -27,7 +27,8 @@ export function DefaultActionsMenuContent() {
 	)
 }
 
-function AlignMenuItems() {
+/** @public */
+export function AlignMenuItems() {
 	const actions = useActions()
 	const twoSelected = useUnlockedSelectedShapesCount(2)
 
@@ -45,7 +46,8 @@ function AlignMenuItems() {
 	)
 }
 
-function DistributeMenuItems() {
+/** @public */
+export function DistributeMenuItems() {
 	const actions = useActions()
 	const threeSelected = useUnlockedSelectedShapesCount(3)
 
@@ -57,7 +59,8 @@ function DistributeMenuItems() {
 	)
 }
 
-function StackMenuItems() {
+/** @public */
+export function StackMenuItems() {
 	const actions = useActions()
 	const threeStackableItems = useThreeStackableItems()
 
@@ -69,7 +72,8 @@ function StackMenuItems() {
 	)
 }
 
-function ReorderMenuItems() {
+/** @public */
+export function ReorderMenuItems() {
 	const actions = useActions()
 	const oneSelected = useUnlockedSelectedShapesCount(1)
 
@@ -83,54 +87,63 @@ function ReorderMenuItems() {
 	)
 }
 
-function ZoomOrRotateMenuItem() {
+/** @public */
+
+export function ZoomOrRotateMenuItem() {
 	const breakpoint = useBreakpoint()
 	return breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM ? <ZoomTo100MenuItem /> : <RotateCCWMenuItem />
 }
+/** @public */
 
-function ZoomTo100MenuItem() {
+export function ZoomTo100MenuItem() {
 	const actions = useActions()
 	const editor = useEditor()
 	const isZoomedTo100 = useValue('zoom is 1', () => editor.getZoomLevel() === 1, [editor])
 
 	return <TldrawUiMenuItem {...actions['zoom-to-100']} disabled={isZoomedTo100} />
 }
+/** @public */
 
-function RotateCCWMenuItem() {
+export function RotateCCWMenuItem() {
 	const actions = useActions()
 	const oneSelected = useUnlockedSelectedShapesCount(1)
 
 	return <TldrawUiMenuItem {...actions['rotate-ccw']} disabled={!oneSelected} />
 }
+/** @public */
 
-function RotateCWMenuItem() {
+export function RotateCWMenuItem() {
 	const actions = useActions()
 	const oneSelected = useUnlockedSelectedShapesCount(1)
 
 	return <TldrawUiMenuItem {...actions['rotate-cw']} disabled={!oneSelected} />
 }
+/** @public */
 
-function EditLinkMenuItem() {
+export function EditLinkMenuItem() {
 	const actions = useActions()
 	const showEditLink = useHasLinkShapeSelected()
 
 	return <TldrawUiMenuItem {...actions['edit-link']} disabled={!showEditLink} />
 }
+/** @public */
 
-function GroupOrUngroupMenuItem() {
+export function GroupOrUngroupMenuItem() {
 	const allowGroup = useAllowGroup()
 	const allowUngroup = useAllowUngroup()
 	return allowGroup ? <GroupMenuItem /> : allowUngroup ? <UngroupMenuItem /> : <GroupMenuItem />
 }
+/** @public */
 
-function GroupMenuItem() {
+export function GroupMenuItem() {
 	const actions = useActions()
 	const twoSelected = useUnlockedSelectedShapesCount(2)
 
 	return <TldrawUiMenuItem {...actions['group']} disabled={!twoSelected} />
 }
+/** @public */
 
-function UngroupMenuItem() {
+export function UngroupMenuItem() {
 	const actions = useActions()
 	return <TldrawUiMenuItem {...actions['ungroup']} />
 }

packages/tldraw/src/lib/ui/components/DebugMenu/DefaultDebugMenuContent.tsx

@@ -182,8 +182,8 @@ export function DefaultDebugMenuContent() {
 		</>
 	)
 }
-
-function DebugFlags() {
+/** @public */
+export function DebugFlags() {
 	const items = Object.values(debugFlags)
 	if (!items.length) return null
 	return (
@@ -196,8 +196,8 @@ function DebugFlags() {
 		</TldrawUiMenuSubmenu>
 	)
 }
-
-function FeatureFlags() {
+/** @public */
+export function FeatureFlags() {
 	const items = Object.values(featureFlags)
 	if (!items.length) return null
 	return (
@@ -210,8 +210,8 @@ function FeatureFlags() {
 		</TldrawUiMenuSubmenu>
 	)
 }
-
-function ExampleDialog({
+/** @public */
+export function ExampleDialog({
 	title = 'title',
 	body = 'hello hello hello',
 	cancel = 'Cancel',

packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenuContent.tsx

@@ -12,8 +12,8 @@ export function DefaultHelpMenuContent() {
 		</>
 	)
 }
-
-function KeyboardShortcutsMenuItem() {
+/** @public */
+export function KeyboardShortcutsMenuItem() {
 	const { KeyboardShortcutsDialog } = useTldrawUiComponents()
 	const { addDialog } = useDialogs()
 

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

@@ -5,6 +5,7 @@ import { TldrawUiMenuCheckboxItem } from './primitives/menus/TldrawUiMenuCheckbo
 import { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup'
 import { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu'
 
+/** @public */
 export const LanguageMenu = track(function LanguageMenu() {
 	const editor = useEditor()
 	const trackEvent = useUiEvents()

packages/tldraw/src/lib/ui/components/PageMenu/PageItemInput.tsx

@@ -1,7 +1,7 @@
 import { TLPageId, useEditor } from '@tldraw/editor'
 import { useCallback, useRef } from 'react'
 import { TldrawUiInput } from '../primitives/TldrawUiInput'
-
+/** @public */
 export const PageItemInput = function PageItemInput({
 	name,
 	id,

packages/tldraw/src/lib/ui/components/PageMenu/PageItemSubmenu.tsx

@@ -12,14 +12,14 @@ import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuCon
 import { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup'
 import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
 import { onMovePage } from './edit-pages-shared'
-
+/** @public */
 export interface PageItemSubmenuProps {
 	index: number
 	item: { id: string; name: string }
 	listSize: number
 	onRename?: () => void
 }
-
+/** @public */
 export const PageItemSubmenu = track(function PageItemSubmenu({
 	index,
 	listSize,

packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx

@@ -85,7 +85,8 @@ function useStyleChangeCallback() {
 	)
 }
 
-function CommonStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
+/** @public */
+export function CommonStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
 	const msg = useTranslation()
 
 	const handleValueChange = useStyleChangeCallback()
@@ -155,7 +156,8 @@ function CommonStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
 	)
 }
 
-function TextStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
+/** @public */
+export function TextStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
 	const msg = useTranslation()
 	const handleValueChange = useStyleChangeCallback()
 
@@ -216,8 +218,8 @@ function TextStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
 		</div>
 	)
 }
-
-function GeoStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
+/** @public */
+export function GeoStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
 	const handleValueChange = useStyleChangeCallback()
 
 	const geo = styles.get(GeoShapeGeoStyle)
@@ -238,8 +240,8 @@ function GeoStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
 		/>
 	)
 }
-
-function SplineStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
+/** @public */
+export function SplineStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
 	const handleValueChange = useStyleChangeCallback()
 
 	const spline = styles.get(LineShapeSplineStyle)
@@ -261,7 +263,8 @@ function SplineStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
 	)
 }
 
-function ArrowheadStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
+/** @public */
+export function ArrowheadStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
 	const handleValueChange = useStyleChangeCallback()
 
 	const arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)
@@ -289,8 +292,8 @@ function ArrowheadStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap })
 }
 
 const tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1] as const
-
-function OpacitySlider() {
+/** @public */
+export function OpacitySlider() {
 	const editor = useEditor()
 	const opacity = useValue('opacity', () => editor.getSharedOpacity(), [editor])
 	const trackEvent = useUiEvents()

packages/tldraw/src/lib/ui/components/menu-items.tsx

@@ -27,42 +27,42 @@ import { TldrawUiMenuItem } from './primitives/menus/TldrawUiMenuItem'
 import { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu'
 
 /* -------------------- Selection ------------------- */
-
+/** @public */
 export function ToggleAutoSizeMenuItem() {
 	const actions = useActions()
 	const shouldDisplay = useShowAutoSizeToggle()
 
 	return <TldrawUiMenuItem {...actions['toggle-auto-size']} disabled={!shouldDisplay} />
 }
-
+/** @public */
 export function EditLinkMenuItem() {
 	const actions = useActions()
 	const shouldDisplay = useHasLinkShapeSelected()
 
 	return <TldrawUiMenuItem {...actions['edit-link']} disabled={!shouldDisplay} />
 }
-
+/** @public */
 export function DuplicateMenuItem() {
 	const actions = useActions()
 	const shouldDisplay = useUnlockedSelectedShapesCount(1)
 
 	return <TldrawUiMenuItem {...actions['duplicate']} disabled={!shouldDisplay} />
 }
-
+/** @public */
 export function GroupMenuItem() {
 	const actions = useActions()
 	const shouldDisplay = useAllowGroup()
 
 	return <TldrawUiMenuItem {...actions['group']} disabled={!shouldDisplay} />
 }
-
+/** @public */
 export function UngroupMenuItem() {
 	const actions = useActions()
 	const shouldDisplay = useAllowUngroup()
 
 	return <TldrawUiMenuItem {...actions['ungroup']} disabled={!shouldDisplay} />
 }
-
+/** @public */
 export function RemoveFrameMenuItem() {
 	const editor = useEditor()
 	const actions = useActions()
@@ -78,7 +78,7 @@ export function RemoveFrameMenuItem() {
 
 	return <TldrawUiMenuItem {...actions['remove-frame']} disabled={!shouldDisplay} />
 }
-
+/** @public */
 export function FitFrameToContentMenuItem() {
 	const editor = useEditor()
 	const actions = useActions()
@@ -97,7 +97,7 @@ export function FitFrameToContentMenuItem() {
 
 	return <TldrawUiMenuItem {...actions['fit-frame-to-content']} disabled={!shouldDisplay} />
 }
-
+/** @public */
 export function ToggleLockMenuItem() {
 	const editor = useEditor()
 	const actions = useActions()
@@ -107,7 +107,7 @@ export function ToggleLockMenuItem() {
 
 	return <TldrawUiMenuItem {...actions['toggle-lock']} disabled={!shouldDisplay} />
 }
-
+/** @public */
 export function ToggleTransparentBgMenuItem() {
 	const actions = useActions()
 	const editor = useEditor()
@@ -118,7 +118,7 @@ export function ToggleTransparentBgMenuItem() {
 	)
 	return <TldrawUiMenuCheckboxItem {...actions['toggle-transparent']} checked={isTransparentBg} />
 }
-
+/** @public */
 export function UnlockAllMenuItem() {
 	const editor = useEditor()
 	const actions = useActions()
@@ -130,7 +130,7 @@ export function UnlockAllMenuItem() {
 }
 
 /* ---------------------- Zoom ---------------------- */
-
+/** @public */
 export function ZoomTo100MenuItem() {
 	const editor = useEditor()
 	const isZoomedTo100 = useValue('zoomed to 100', () => editor.getZoomLevel() === 1, [editor])
@@ -138,7 +138,7 @@ export function ZoomTo100MenuItem() {
 
 	return <TldrawUiMenuItem {...actions['zoom-to-100']} noClose disabled={isZoomedTo100} />
 }
-
+/** @public */
 export function ZoomToFitMenuItem() {
 	const editor = useEditor()
 	const hasShapes = useValue('has shapes', () => editor.getCurrentPageShapeIds().size > 0, [editor])
@@ -153,7 +153,7 @@ export function ZoomToFitMenuItem() {
 		/>
 	)
 }
-
+/** @public */
 export function ZoomToSelectionMenuItem() {
 	const editor = useEditor()
 	const hasSelected = useValue('has shapes', () => editor.getSelectedShapeIds().length > 0, [
@@ -172,7 +172,7 @@ export function ZoomToSelectionMenuItem() {
 }
 
 /* -------------------- Clipboard ------------------- */
-
+/** @public */
 export function ClipboardMenuGroup() {
 	const editor = useEditor()
 	const actions = useActions()
@@ -209,21 +209,21 @@ export function ClipboardMenuGroup() {
 		</TldrawUiMenuGroup>
 	)
 }
-
+/** @public */
 export function CutMenuItem() {
 	const actions = useActions()
 	const shouldDisplay = useUnlockedSelectedShapesCount(1)
 
 	return <TldrawUiMenuItem {...actions['cut']} disabled={!shouldDisplay} />
 }
-
+/** @public */
 export function CopyMenuItem() {
 	const actions = useActions()
 	const shouldDisplay = useAnySelectedShapesCount(1)
 
 	return <TldrawUiMenuItem {...actions['copy']} disabled={!shouldDisplay} />
 }
-
+/** @public */
 export function PasteMenuItem() {
 	const actions = useActions()
 	const shouldDisplay = showMenuPaste
@@ -232,7 +232,7 @@ export function PasteMenuItem() {
 }
 
 /* ------------------- Conversions ------------------ */
-
+/** @public */
 export function ConversionsMenuGroup() {
 	const actions = useActions()
 	const shouldDisplay = useUnlockedSelectedShapesCount(1)
@@ -259,7 +259,7 @@ export function ConversionsMenuGroup() {
 }
 
 /* ------------------ Set Selection ----------------- */
-
+/** @public */
 export function SetSelectionGroup() {
 	const actions = useActions()
 	const editor = useEditor()
@@ -277,7 +277,7 @@ export function SetSelectionGroup() {
 }
 
 /* ------------------ Delete Group ------------------ */
-
+/** @public */
 export function DeleteMenuItem() {
 	const actions = useActions()
 	const oneSelected = useUnlockedSelectedShapesCount(1)
@@ -286,7 +286,7 @@ export function DeleteMenuItem() {
 }
 
 /* --------------------- Modify --------------------- */
-
+/** @public */
 export function ArrangeMenuSubmenu() {
 	const twoSelected = useUnlockedSelectedShapesCount(2)
 	const onlyFlippableShapeSelected = useOnlyFlippableShape()
@@ -351,7 +351,7 @@ function OrderMenuGroup() {
 		</TldrawUiMenuGroup>
 	)
 }
-
+/** @public */
 export function ReorderMenuSubmenu() {
 	const actions = useActions()
 	const oneSelected = useUnlockedSelectedShapesCount(1)
@@ -368,7 +368,7 @@ export function ReorderMenuSubmenu() {
 		</TldrawUiMenuSubmenu>
 	)
 }
-
+/** @public */
 export function MoveToPageMenu() {
 	const editor = useEditor()
 	const pages = useValue('pages', () => editor.getPages(), [editor])
@@ -423,7 +423,7 @@ export function MoveToPageMenu() {
 		</TldrawUiMenuSubmenu>
 	)
 }
-
+/** @public */
 export function EmbedsGroup() {
 	const editor = useEditor()
 	const actions = useActions()
@@ -471,42 +471,42 @@ export function EmbedsGroup() {
 }
 
 /* ------------------- Preferences ------------------ */
-
+/** @public */
 export function ToggleSnapModeItem() {
 	const actions = useActions()
 	const editor = useEditor()
 	const isSnapMode = useValue('isSnapMode', () => editor.user.getIsSnapMode(), [editor])
 	return <TldrawUiMenuCheckboxItem {...actions['toggle-snap-mode']} checked={isSnapMode} />
 }
-
+/** @public */
 export function ToggleToolLockItem() {
 	const actions = useActions()
 	const editor = useEditor()
 	const isToolLock = useValue('isToolLock', () => editor.getInstanceState().isToolLocked, [editor])
 	return <TldrawUiMenuCheckboxItem {...actions['toggle-tool-lock']} checked={isToolLock} />
 }
-
+/** @public */
 export function ToggleGridItem() {
 	const actions = useActions()
 	const editor = useEditor()
 	const isGridMode = useValue('isGridMode', () => editor.getInstanceState().isGridMode, [editor])
 	return <TldrawUiMenuCheckboxItem {...actions['toggle-grid']} checked={isGridMode} />
 }
-
+/** @public */
 export function ToggleDarkModeItem() {
 	const actions = useActions()
 	const editor = useEditor()
 	const isDarkMode = useValue('isDarkMode', () => editor.user.getIsDarkMode(), [editor])
 	return <TldrawUiMenuCheckboxItem {...actions['toggle-dark-mode']} checked={isDarkMode} />
 }
-
+/** @public */
 export function ToggleFocusModeItem() {
 	const actions = useActions()
 	const editor = useEditor()
 	const isFocusMode = useValue('isFocusMode', () => editor.getInstanceState().isFocusMode, [editor])
 	return <TldrawUiMenuCheckboxItem {...actions['toggle-focus-mode']} checked={isFocusMode} />
 }
-
+/** @public */
 export function ToggleEdgeScrollingItem() {
 	const actions = useActions()
 	const editor = useEditor()
@@ -520,7 +520,7 @@ export function ToggleEdgeScrollingItem() {
 		/>
 	)
 }
-
+/** @public */
 export function ToggleReduceMotionItem() {
 	const actions = useActions()
 	const editor = useEditor()
@@ -529,7 +529,7 @@ export function ToggleReduceMotionItem() {
 		<TldrawUiMenuCheckboxItem {...actions['toggle-reduce-motion']} checked={animationSpeed === 0} />
 	)
 }
-
+/** @public */
 export function ToggleDebugModeItem() {
 	const actions = useActions()
 	const editor = useEditor()
@@ -538,7 +538,7 @@ export function ToggleDebugModeItem() {
 }
 
 /* ---------------------- Print --------------------- */
-
+/** @public */
 export function PrintItem() {
 	const editor = useEditor()
 	const actions = useActions()