[mega-chore] renaming (#223)

* Rename shape utils

* renames files

* Add husky

* Delete .babelrc

* Update TLDR.ts

* renames commands

* Update package.json

* more pre-commit work

.husky/pre-commit

+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn test

package.json

     "build:packages": "cd packages/tldraw && yarn build",
     "publish:patch": "yarn test && yarn build:packages && lerna publish patch",
     "docs": "lerna run docs",
-    "docs:watch": "lerna run docs:watch"
+    "docs:watch": "lerna run docs:watch",
+    "postinstall": "husky install",
+    "fix:style": "yarn run prettier ./packages/tldraw/src --write"
   },
   "devDependencies": {
     "@swc-node/jest": "^1.3.3",
     "@typescript-eslint/parser": "^4.19.0",
     "eslint": "^7.32.0",
     "fake-indexeddb": "^3.1.3",
+    "husky": "^7.0.4",
     "init-package-json": "^2.0.4",
     "jest": "^27.3.1",
     "lerna": "^3.22.1",
+    "lint-staged": "^11.2.6",
+    "prettier": "^2.4.1",
     "resize-observer-polyfill": "^1.5.1",
     "tslib": "^2.3.0",
     "typedoc": "^0.22.3",
     "semi": false,
     "printWidth": 100
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "pre-push": "test && lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*": "fix:style && eslint"
+  },
   "jest": {
     "setupFilesAfterEnv": [
       "<rootDir>/setupTests.ts"

packages/tldraw/src/TLDraw.tsx

 import * as React from 'react'
 import { IdProvider } from '@radix-ui/react-id'
 import { Renderer } from '@tldraw/core'
-import styled, { dark } from '~styles'
+import { styled, dark } from '~styles'
 import { Data, TLDrawDocument, TLDrawStatus, TLDrawUser } from '~types'
 import { TLDrawState } from '~state'
 import {
   TLDrawContext,
   TLDrawContextType,
-  useCustomFonts,
+  useStylesheet,
   useKeyboardShortcuts,
   useTLDrawContext,
 } from '~hooks'
-import { shapeUtils } from '~shape-utils'
+import { shapeUtils } from '~state/shapes'
 import { ToolsPanel } from '~components/ToolsPanel'
 import { TopPanel } from '~components/TopPanel'
-import { TLDR } from '~state/tldr'
+import { TLDR } from '~state/TLDR'
 import { ContextMenu } from '~components/ContextMenu'
 import { FocusButton } from '~components/FocusButton/FocusButton'
 
     focusableRef: React.RefObject<HTMLDivElement>
   }) => {
     useKeyboardShortcuts(focusableRef)
-    useCustomFonts()
+    useStylesheet()
 
     React.useEffect(() => {
       if (autofocus) {

packages/tldraw/src/components/ContextMenu/ContextMenu.tsx

 import * as React from 'react'
-import styled from '~styles'
+import { styled } from '~styles'
 import * as RadixContextMenu from '@radix-ui/react-context-menu'
 import { useTLDrawContext } from '~hooks'
 import { Data, AlignType, DistributeType, StretchType } from '~types'

packages/tldraw/src/components/Divider/Divider.tsx

 import * as React from 'react'
-import styled from '~styles'
+import { styled } from '~styles'
 
 export const Divider = styled('hr', {
   height: 1,

packages/tldraw/src/components/DropdownMenu/DMArrow.tsx

 import { Arrow } from '@radix-ui/react-dropdown-menu'
 import { breakpoints } from '~components/breakpoints'
-import styled from '~styles/stitches.config'
+import { styled } from '~styles/stitches.config'
 
 export const DMArrow = styled(Arrow, { fill: '$panel', bp: breakpoints })

packages/tldraw/src/components/DropdownMenu/DMContent.tsx

 import * as React from 'react'
 import { Content } from '@radix-ui/react-dropdown-menu'
-import styled from '~styles/stitches.config'
+import { styled } from '~styles/stitches.config'
 import { MenuContent } from '~components/MenuContent'
 
 export interface DMContentProps {

packages/tldraw/src/components/DropdownMenu/DMDivider.tsx

 import { Separator } from '@radix-ui/react-dropdown-menu'
-import styled from '~styles/stitches.config'
+import { styled } from '~styles/stitches.config'
 
 export const DMDivider = styled(Separator, {
   backgroundColor: '$hover',

packages/tldraw/src/components/DropdownMenu/DMIconButton.tsx

-import * as React from 'react'
-import { Item } from '@radix-ui/react-dropdown-menu'
-import { IconButton } from '~components/IconButton/IconButton'
-
-interface DMIconButtonProps {
-  onSelect: () => void
-  disabled?: boolean
-  children: React.ReactNode
-}
-
-export function DMIconButton({
-  onSelect,
-  children,
-  disabled = false,
-}: DMIconButtonProps): JSX.Element {
-  return (
-    <Item dir="ltr" asChild>
-      <IconButton disabled={disabled} onSelect={onSelect}>
-        {children}
-      </IconButton>
-    </Item>
-  )
-}

packages/tldraw/src/components/DropdownMenu/DMRadioItem.tsx

 import { RadioItem } from '@radix-ui/react-dropdown-menu'
-import styled from '~styles/stitches.config'
+import { styled } from '~styles/stitches.config'
 
 export const DMRadioItem = styled(RadioItem, {
   height: '32px',

packages/tldraw/src/components/DropdownMenu/index.tsx

 export * from './DMCheckboxItem'
 export * from './DMContent'
 export * from './DMDivider'
-export * from './DMIconButton'
 export * from './DMRadioItem'
 export * from './DMSubMenu'
 export * from './DMTriggerIcon'

packages/tldraw/src/components/FocusButton/FocusButton.tsx

 import { DotFilledIcon } from '@radix-ui/react-icons'
 import * as React from 'react'
 import { IconButton } from '~components/IconButton/IconButton'
-import styled from '~styles'
+import { styled } from '~styles'
 
 interface FocusButtonProps {
   onSelect: () => void

packages/tldraw/src/components/IconButton/IconButton.tsx

-import styled from '~styles'
+import { styled } from '~styles'
 
 export const IconButton = styled('button', {
   position: 'relative',

packages/tldraw/src/components/Kbd/Kbd.tsx

 import * as React from 'react'
-import styled from '~styles'
+import { styled } from '~styles'
 import { Utils } from '@tldraw/core'
 
 /* -------------------------------------------------- */

packages/tldraw/src/components/MenuContent/MenuContent.ts

-import styled from '~styles'
+import { styled } from '~styles'
 
 export const MenuContent = styled('div', {
   position: 'relative',

packages/tldraw/src/components/Panel/Panel.tsx

-import styled from '~styles/stitches.config'
+import { styled } from '~styles/stitches.config'
 
 export const Panel = styled('div', {
   backgroundColor: '$panel',

packages/tldraw/src/components/RowButton/RowButton.tsx

 import { breakpoints } from '~components/breakpoints'
 import { Kbd } from '~components/Kbd'
 import { SmallIcon } from '~components/SmallIcon'
-import styled from '~styles'
+import { styled } from '~styles'
 
 export interface RowButtonProps {
   onSelect?: () => void

packages/tldraw/src/components/SmallIcon/SmallIcon.tsx

-import styled from '~styles'
+import { styled } from '~styles'
 
 export const SmallIcon = styled('div', {
   height: '100%',

packages/tldraw/src/components/ToolButton/ToolButton.tsx

 import * as React from 'react'
 import { breakpoints } from '~components/breakpoints'
 import { Tooltip } from '~components/Tooltip'
-import styled from '~styles'
+import { styled } from '~styles'
 
 export interface ToolButtonProps {
   onClick?: () => void

packages/tldraw/src/components/ToolsPanel/ActionButton.tsx

 import { Tooltip } from '~components/Tooltip/Tooltip'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { useTLDrawContext } from '~hooks'
-import styled from '~styles'
+import { styled } from '~styles'
 import { AlignType, Data, DistributeType, StretchType } from '~types'
 import {
   ArrowDownIcon,

packages/tldraw/src/components/ToolsPanel/BackToContent.tsx

 import * as React from 'react'
-import styled from '~styles'
+import { styled } from '~styles'
 import type { Data } from '~types'
 import { useTLDrawContext } from '~hooks'
 import { RowButton } from '~components/RowButton'

packages/tldraw/src/components/ToolsPanel/StatusBar.tsx

 import * as React from 'react'
 import { useTLDrawContext } from '~hooks'
 import type { Data } from '~types'
-import styled from '~styles'
+import { styled } from '~styles'
 import { breakpoints } from '~components/breakpoints'
 
 const statusSelector = (s: Data) => s.appState.status

packages/tldraw/src/components/ToolsPanel/ToolsPanel.tsx

 import * as React from 'react'
-import styled from '~styles'
+import { styled } from '~styles'
 import type { Data } from '~types'
 import { useTLDrawContext } from '~hooks'
 import { StatusBar } from './StatusBar'

packages/tldraw/src/components/Tooltip/Tooltip.tsx

 import * as RadixTooltip from '@radix-ui/react-tooltip'
 import * as React from 'react'
 import { Kbd } from '~components/Kbd'
-import styled from '~styles'
+import { styled } from '~styles'
 
 /* -------------------------------------------------- */
 /*                       Tooltip                      */

packages/tldraw/src/components/TopPanel/ColorMenu.tsx

 import * as React from 'react'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
-import { strokes } from '~shape-utils'
-import { useTheme, useTLDrawContext } from '~hooks'
-import type { Data, ColorStyle } from '~types'
-import CircleIcon from '~components/icons/CircleIcon'
+import { strokes } from '~state/shapes/shape-styles'
+import { useTLDrawContext } from '~hooks'
 import { DMContent, DMTriggerIcon } from '~components/DropdownMenu'
-import { BoxIcon } from '~components/icons'
+import { BoxIcon, CircleIcon } from '~components/icons'
 import { ToolButton } from '~components/ToolButton'
+import type { Data, ColorStyle } from '~types'
 
 const selectColor = (s: Data) => s.appState.selectedStyle.color
 const preventEvent = (e: Event) => e.preventDefault()
+const themeSelector = (data: Data) => (data.settings.isDarkMode ? 'dark' : 'light')
 
 export const ColorMenu = React.memo((): JSX.Element => {
-  const { theme } = useTheme()
   const { tlstate, useSelector } = useTLDrawContext()
 
+  const theme = useSelector(themeSelector)
   const color = useSelector(selectColor)
 
   return (

packages/tldraw/src/components/TopPanel/PageMenu.tsx

 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { PlusIcon, CheckIcon } from '@radix-ui/react-icons'
 import { PageOptionsDialog } from './PageOptionsDialog'
-import styled from '~styles'
+import { styled } from '~styles'
 import { useTLDrawContext } from '~hooks'
 import type { Data } from '~types'
 import { DMContent, DMDivider } from '~components/DropdownMenu'

packages/tldraw/src/components/TopPanel/PageOptionsDialog.tsx

 import type { Data, TLDrawPage } from '~types'
 import { useTLDrawContext } from '~hooks'
 import { RowButton, RowButtonProps } from '~components/RowButton'
-import styled from '~styles'
+import { styled } from '~styles'
 import { Divider } from '~components/Divider'
 import { IconButton } from '~components/IconButton/IconButton'
 import { SmallIcon } from '~components/SmallIcon'

packages/tldraw/src/components/TopPanel/TopPanel.tsx

 import * as React from 'react'
 import { Menu } from './Menu'
-import styled from '~styles'
+import { styled } from '~styles'
 import { PageMenu } from './PageMenu'
 import { ZoomMenu } from './ZoomMenu'
 import { DashMenu } from './DashMenu'

packages/tldraw/src/components/TopPanel/ZoomMenu.tsx

 import * as React from 'react'
 import { useTLDrawContext } from '~hooks'
 import type { Data } from '~types'
-import styled from '~styles'
+import { styled } from '~styles'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { DMItem, DMContent } from '~components/DropdownMenu'
 import { ToolButton } from '~components/ToolButton'

packages/tldraw/src/components/icons/CheckIcon.tsx

-import * as React from 'react'
-
-function CheckIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
-  return (
-    <svg viewBox="0 0 15 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M1.06555 6.39147C1.06555 6.39147 1.18669 6.37676 1.32187 6.60547C1.41196 6.75789 1.43336 6.79297 1.54896 6.97656C1.67649 7.1791 1.90215 7.46571 1.98273 7.55604C1.89684 7.45413 2.06332 7.64638 1.98273 7.55604C2.06863 7.65796 2.15476 7.76164 2.24114 7.86709C2.32752 7.97255 2.43047 8.09537 2.54999 8.23556C2.66951 8.37575 2.82609 8.54986 3.01971 8.75788C3.21333 8.96589 3.41752 9.17647 3.63228 9.38961C3.43268 9.19463 3.84705 9.60274 3.63228 9.38961C3.83189 9.58458 3.98492 9.65483 3.97262 9.74102C4.18567 9.85603 3.96031 9.82721 3.97262 9.74102C3.91266 9.99944 3.75956 9.626 3.97262 9.74102C4.03257 9.4826 4.10858 9.33351 4.21165 9.13551C4.31473 8.93751 4.42218 8.73459 4.534 8.52675C4.64583 8.31892 4.76102 8.10882 4.87957 7.89646C4.99812 7.68411 5.13449 7.4489 5.28871 7.19083C5.44292 6.93276 5.63515 6.62674 5.86541 6.27278C6.09567 5.91882 6.34391 5.55345 6.61015 5.17668C6.87639 4.7999 7.15756 4.4262 7.45365 4.05557C7.74975 3.68495 8.06403 3.32626 8.39649 2.97952C8.72895 2.63277 9.04339 2.32894 9.33982 2.06804C9.63624 1.80713 9.87576 1.60935 10.0584 1.4747C10.241 1.34004 10.4399 1.20541 10.655 1.07079C10.8702 0.936165 10.9439 0.993562 10.8761 1.24297C10.8084 1.49239 10.7342 1.72411 10.6535 1.93813C10.5728 2.15215 10.452 2.43667 10.291 2.79168C10.13 3.14669 9.94264 3.53252 9.7288 3.94917C9.51497 4.36582 9.29528 4.77352 9.06973 5.17228C8.84418 5.57104 8.62072 5.96246 8.39936 6.34654C8.178 6.73061 7.9685 7.0987 7.77088 7.45081C7.57326 7.80292 7.40426 8.10581 7.26389 8.35948C7.12353 8.61314 6.99519 8.84594 6.87889 9.05785C6.76259 9.26977 6.64515 9.48087 6.52659 9.69115C6.40803 9.90143 6.25752 10.1532 6.07507 10.4466C5.89262 10.7399 5.72254 11.0063 5.56483 11.2458C5.40712 11.4852 5.23545 11.6777 5.04981 11.8232C4.86416 11.9686 4.59686 12.0243 4.2479 11.9903C3.89894 11.9563 3.61525 11.8614 3.39684 11.7055C3.17844 11.5497 2.99758 11.3507 2.85427 11.1085C2.71096 10.8663 2.56178 10.5997 2.40673 10.3088C2.25167 10.0179 2.11187 9.72784 1.98731 9.4386C1.86275 9.14937 1.76835 8.91301 1.70411 8.72952C1.63988 8.54604 1.58816 8.38956 1.54896 8.26008C1.50977 8.13061 1.47123 8.0037 1.43336 7.87934C1.39549 7.75498 1.35833 7.63676 1.32187 7.52466C1.28541 7.41257 1.24607 7.2993 1.20384 7.18486C1.16161 7.07041 1.21291 7.20988 1.06555 6.85296C0.918183 6.49603 1.06555 6.39147 1.06555 6.39147Z"
-        fill="currentColor"
-      />
-      <path
-        d="M1.98273 7.55604C1.90215 7.46571 1.67649 7.1791 1.54896 6.97656C1.43336 6.79297 1.41196 6.75789 1.32187 6.60547C1.18669 6.37676 1.06555 6.39147 1.06555 6.39147C1.06555 6.39147 0.918183 6.49603 1.06555 6.85296C1.21291 7.20988 1.16161 7.07041 1.20384 7.18486C1.24607 7.2993 1.28541 7.41257 1.32187 7.52466C1.35833 7.63676 1.39549 7.75498 1.43336 7.87934C1.47123 8.0037 1.50977 8.13061 1.54896 8.26008C1.58816 8.38956 1.63988 8.54604 1.70411 8.72952C1.76835 8.91301 1.86275 9.14937 1.98731 9.4386C2.11187 9.72784 2.25167 10.0179 2.40673 10.3088C2.56178 10.5997 2.71096 10.8663 2.85427 11.1085C2.99758 11.3507 3.17844 11.5497 3.39684 11.7055C3.61525 11.8614 3.89894 11.9563 4.2479 11.9903C4.59686 12.0243 4.86416 11.9686 5.04981 11.8232C5.23545 11.6777 5.40712 11.4852 5.56483 11.2458C5.72254 11.0063 5.89262 10.7399 6.07507 10.4466C6.25752 10.1532 6.40803 9.90143 6.52659 9.69115C6.64515 9.48087 6.76259 9.26977 6.87889 9.05785C6.99519 8.84594 7.12353 8.61314 7.26389 8.35948C7.40426 8.10581 7.57326 7.80292 7.77088 7.45081C7.9685 7.0987 8.178 6.73061 8.39936 6.34654C8.62072 5.96246 8.84418 5.57104 9.06973 5.17228C9.29528 4.77352 9.51497 4.36582 9.7288 3.94917C9.94264 3.53252 10.13 3.14669 10.291 2.79168C10.452 2.43667 10.5728 2.15215 10.6535 1.93813C10.7342 1.72411 10.8084 1.49239 10.8761 1.24297C10.9439 0.993562 10.8702 0.936165 10.655 1.07079C10.4399 1.20541 10.241 1.34004 10.0584 1.4747C9.87576 1.60935 9.63624 1.80713 9.33982 2.06804C9.04339 2.32894 8.72895 2.63277 8.39649 2.97952C8.06403 3.32626 7.74975 3.68495 7.45365 4.05557C7.15756 4.4262 6.87639 4.7999 6.61015 5.17668C6.34391 5.55345 6.09567 5.91882 5.86541 6.27278C5.63515 6.62674 5.44292 6.93276 5.28871 7.19083C5.13449 7.4489 4.99812 7.68411 4.87957 7.89646C4.76102 8.10882 4.64583 8.31892 4.534 8.52675C4.42218 8.73459 4.31473 8.93751 4.21165 9.13551C4.10858 9.33351 4.03257 9.4826 3.97262 9.74102M1.98273 7.55604C2.06332 7.64638 1.89684 7.45413 1.98273 7.55604ZM1.98273 7.55604C2.06863 7.65796 2.15476 7.76164 2.24114 7.86709C2.32752 7.97255 2.43047 8.09537 2.54999 8.23556C2.66951 8.37575 2.82609 8.54986 3.01971 8.75788C3.21333 8.96589 3.41752 9.17647 3.63228 9.38961M3.63228 9.38961C3.84705 9.60274 3.43268 9.19463 3.63228 9.38961ZM3.63228 9.38961C3.83189 9.58458 3.98492 9.65483 3.97262 9.74102M3.97262 9.74102C3.96031 9.82721 4.18567 9.85603 3.97262 9.74102ZM3.97262 9.74102C3.75956 9.626 3.91266 9.99944 3.97262 9.74102Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-export default CheckIcon

packages/tldraw/src/components/icons/CircleIcon.tsx

 import * as React from 'react'
 
-export default function CircleIcon(
+export function CircleIcon(
   props: Pick<React.SVGProps<SVGSVGElement>, 'stroke' | 'fill'> & {
     size: number
   }

packages/tldraw/src/components/icons/index.ts

 export * from './BoxIcon'
-export * from './CheckIcon'
 export * from './CircleIcon'
 export * from './DashDashedIcon'
 export * from './DashDottedIcon'

packages/tldraw/src/hooks/index.ts

 export * from './useKeyboardShortcuts'
 export * from './useTLDrawContext'
 export * from './useTheme'
-export * from './useCustomFonts'
+export * from './useStylesheet'
 export * from './useFileSystemHandlers'
 export * from './useFileSystem'

packages/tldraw/src/hooks/useCustomFonts.ts

-import { useStyle, css } from '~hooks/useStyle'
-
-const customFonts = css`
-  @import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap');
-`
-
-export function useCustomFonts() {
-  useStyle('tldraw-fonts', customFonts)
-}

packages/tldraw/src/hooks/useStyle.ts

-import * as React from 'react'
-
-const styles = new Map<string, HTMLStyleElement>()
-
-export const css = (strings: TemplateStringsArray, ...args: unknown[]) =>
-  strings.reduce(
-    (acc, string, index) => acc + string + (index < args.length ? args[index] : ''),
-    ''
-  )
-
-export function useStyle(uid: string, rules: string) {
-  React.useLayoutEffect(() => {
-    if (styles.get(uid)) {
-      return () => void null
-    }
-
-    const style = document.createElement('style')
-    style.innerHTML = rules
-    style.setAttribute('id', uid)
-    document.head.appendChild(style)
-    styles.set(uid, style)
-
-    return () => {
-      if (style && document.head.contains(style)) {
-        document.head.removeChild(style)
-        styles.delete(uid)
-      }
-    }
-  }, [uid, rules])
-}

packages/tldraw/src/hooks/useStylesheet.ts

+import * as React from 'react'
+
+const styles = new Map<string, HTMLStyleElement>()
+
+const UID = `tldraw-fonts`
+const CSS = `@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap')`
+
+export function useStylesheet() {
+  React.useLayoutEffect(() => {
+    if (styles.get(UID)) return
+
+    const style = document.createElement('style')
+    style.innerHTML = CSS
+    style.setAttribute('id', UID)
+    document.head.appendChild(style)
+    styles.set(UID, style)
+
+    return () => {
+      if (style && document.head.contains(style)) {
+        document.head.removeChild(style)
+        styles.delete(UID)
+      }
+    }
+  }, [UID, CSS])
+}

packages/tldraw/src/hooks/useTheme.ts

 
 export function useTheme() {
   const { tlstate, useSelector } = useTLDrawContext()
-
   const theme = useSelector(themeSelector)
 
   return {

packages/tldraw/src/index.ts

 export * from './TLDraw'
 export * from './types'
-export * from './shape-utils'
+export * from './state/shapes'
 export { TLDrawState } from './state'
 export { useFileSystem } from './hooks'

packages/tldraw/src/shape-utils/arrow/index.ts

-export * from './arrow'

packages/tldraw/src/shape-utils/draw/index.ts

-export * from './draw'

packages/tldraw/src/shape-utils/ellipse/index.ts

-export * from './ellipse'

packages/tldraw/src/shape-utils/group/index.ts

-export * from './group'

packages/tldraw/src/shape-utils/index.ts

-import type { TLDrawShapeUtil } from './TLDrawShapeUtil'
-import { RectangleUtil } from './rectangle'
-import { EllipseUtil } from './ellipse'
-import { ArrowUtil } from './arrow'
-import { GroupUtil } from './group'
-import { StickyUtil } from './sticky'
-import { TextUtil } from './text'
-import { DrawUtil } from './draw'
-import { TLDrawShape, TLDrawShapeType } from '~types'
-
-export * from './shape-styles'
-export * from './TLDrawShapeUtil'
-
-export const Rectangle = new RectangleUtil()
-export const Ellipse = new EllipseUtil()
-export const Draw = new DrawUtil()
-export const Arrow = new ArrowUtil()
-export const Text = new TextUtil()
-export const Group = new GroupUtil()
-export const Sticky = new StickyUtil()
-
-// type Utils = RectangleUtil | EllipseUtil | DrawUtil | ArrowUtil | TextUtil | GroupUtil | StickyUtil
-
-// type MappedByKey<U extends string | number, K extends string | number, T extends Record<K, U>> = {
-//   [P in T[K]]: T extends any ? (P extends T[K] ? T : never) : never
-// }
-
-// export type ShapeUtilsMap = MappedByKey<Utils['type'], 'type', Utils>
-
-// export const getShapeUtils = <T extends Utils['type']>(
-//   type: T | Extract<TLDrawShape, { type: T }>
-// ): ShapeUtilsMap[T] => {
-//   if (typeof type === 'string') return shapeUtils[type]
-//   return shapeUtils[type.type]
-// }
-
-export const shapeUtils = {
-  [TLDrawShapeType.Rectangle]: Rectangle,
-  [TLDrawShapeType.Ellipse]: Ellipse,
-  [TLDrawShapeType.Draw]: Draw,
-  [TLDrawShapeType.Arrow]: Arrow,
-  [TLDrawShapeType.Text]: Text,
-  [TLDrawShapeType.Group]: Group,
-  [TLDrawShapeType.Sticky]: Sticky,
-}
-
-export const getShapeUtils = <T extends TLDrawShape>(shape: T | T['type']) => {
-  if (typeof shape === 'string') return shapeUtils[shape] as unknown as TLDrawShapeUtil<T>
-  return shapeUtils[shape.type] as unknown as TLDrawShapeUtil<T>
-}

packages/tldraw/src/shape-utils/rectangle/index.ts

-export * from './rectangle'

packages/tldraw/src/shape-utils/sticky/index.ts

-export * from './sticky'

packages/tldraw/src/shape-utils/text/index.ts

-export * from './text'

packages/tldraw/src/state/tldr.ts → packages/tldraw/src/state/TLDR.ts

 import { TLBounds, TLTransformInfo, Utils, TLPageState } from '@tldraw/core'
-import { getShapeUtils, TLDrawShapeUtil } from '~shape-utils'
 import {
   Data,
   ShapeStyles,
   ArrowShape,
 } from '~types'
 import { Vec } from '@tldraw/vec'
+import type { TLDrawShapeUtil } from './shapes/TLDrawShapeUtil'
+import { getShapeUtils } from './shapes'
 
 export class TLDR {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

packages/tldraw/src/state/tlstate.spec.ts → packages/tldraw/src/state/TLDrawState.spec.ts

 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { TLDrawState } from './tlstate'
-import { mockDocument, TLStateUtils } from '~test'
+import { TLDrawState } from './TLDrawState'
+import { mockDocument, TLDrawStateUtils } from '~test'
 import { ArrowShape, ColorStyle, SessionType, TLDrawShapeType } from '~types'
-import type { SelectTool } from './tool/SelectTool'
+import type { SelectTool } from './tools/SelectTool'
 
 describe('TLDrawState', () => {
   const tlstate = new TLDrawState()
 
-  const tlu = new TLStateUtils(tlstate)
+  const tlu = new TLDrawStateUtils(tlstate)
 
   describe('When copying and pasting...', () => {
     it('copies a shape', () => {
         .loadDocument(mockDocument)
         .group(['rect1', 'rect2'], 'groupA')
 
-      const tlu = new TLStateUtils(tlstate)
+      const tlu = new TLDrawStateUtils(tlstate)
       tlu.clickShape('rect1')
       expect((tlstate.currentTool as SelectTool).selectedGroupId).toBeUndefined()
       expect(tlstate.selectedIds).toStrictEqual(['groupA'])
         .loadDocument(mockDocument)
         .group(['rect1', 'rect2'], 'groupA')
 
-      const tlu = new TLStateUtils(tlstate)
+      const tlu = new TLDrawStateUtils(tlstate)
       tlu.doubleClickShape('rect1')
       expect((tlstate.currentTool as SelectTool).selectedGroupId).toStrictEqual('groupA')
       expect(tlstate.selectedIds).toStrictEqual(['rect1'])
         .loadDocument(mockDocument)
         .group(['rect1', 'rect2'], 'groupA')
 
-      const tlu = new TLStateUtils(tlstate)
+      const tlu = new TLDrawStateUtils(tlstate)
       tlu.doubleClickShape('rect1')
       tlu.clickShape('rect3')
       expect((tlstate.currentTool as SelectTool).selectedGroupId).toBeUndefined()
         .group(['rect1', 'rect2'], 'groupA')
         .deselectAll()
 
-      const tlu = new TLStateUtils(tlstate)
+      const tlu = new TLDrawStateUtils(tlstate)
 
       tlu.clickShape('rect1', { ctrlKey: true, shiftKey: true })
       expect(tlstate.selectedIds).toStrictEqual(['rect1'])
         .loadDocument(mockDocument)
         .group(['rect1', 'rect2'], 'groupA')
 
-      const tlu = new TLStateUtils(tlstate)
+      const tlu = new TLDrawStateUtils(tlstate)
 
       tlu.clickShape('rect1', { ctrlKey: true, shiftKey: true })
       expect(tlstate.selectedIds).toStrictEqual(['rect1'])
         )
         .selectTool(TLDrawShapeType.Rectangle)
 
-      const tlu = new TLStateUtils(tlstate)
+      const tlu = new TLDrawStateUtils(tlstate)
 
       const prevA = tlstate.shapes.map((shape) => shape.id)
 

packages/tldraw/src/state/tlstate.ts → packages/tldraw/src/state/TLDrawState.ts

   ExceptFirst,
   ExceptFirstTwo,
 } from '~types'
-import { TLDR } from './tldr'
-import { defaultStyle, shapeUtils } from '~shape-utils'
-import * as Commands from './command'
-import { ArgsOfType, getSession } from './session'
-import { sample } from './utils'
-import { createTools, ToolType } from './tool'
-import type { BaseTool } from './tool/BaseTool'
+import {
+  migrate,
+  FileSystemHandle,
+  loadFileHandle,
+  openFromFileSystem,
+  saveToFileSystem,
+} from './data'
+import { TLDR } from './TLDR'
+import { shapeUtils } from '~state/shapes'
+import { defaultStyle } from '~state/shapes/shape-styles'
+import * as Commands from './commands'
+import { ArgsOfType, getSession } from './sessions'
+import { createTools, ToolType } from './tools'
+import type { BaseTool } from './tools/BaseTool'
 import { USER_COLORS, FIT_TO_SCREEN_PADDING } from '~constants'
-import { migrate } from './data/migrate'
-import { loadFileHandle, openFromFileSystem, saveToFileSystem } from './data/filesystem'
-import type { FileSystemHandle } from './data/browser-fs-access'
 
 const uuid = Utils.uniqueId()
 
         users: {
           [uuid]: {
             id: uuid,
-            color: sample(USER_COLORS),
+            color: USER_COLORS[Math.floor(Math.random() * USER_COLORS.length)],
             point: [100, 100],
             selectedIds: [],
             activeShapes: [],
    */
   create = (shapes: TLDrawShape[] = [], bindings: TLDrawBinding[] = []): this => {
     if (shapes.length === 0) return this
-    return this.setState(Commands.create(this.state, shapes, bindings))
+    return this.setState(Commands.createShapes(this.state, shapes, bindings))
   }
 
   /**
    */
   patchCreate = (shapes: TLDrawShape[] = [], bindings: TLDrawBinding[] = []): this => {
     if (shapes.length === 0) return this
-    return this.patchState(Commands.create(this.state, shapes, bindings).after)
+    return this.patchState(Commands.createShapes(this.state, shapes, bindings).after)
   }
 
   /**
    * @param ids The ids of the shapes to change (defaults to selection).
    */
   style = (style: Partial<ShapeStyles>, ids = this.selectedIds): this => {
-    return this.setState(Commands.style(this.state, ids, style))
+    return this.setState(Commands.styleShapes(this.state, ids, style))
   }
 
   /**
    */
   align = (type: AlignType, ids = this.selectedIds): this => {
     if (ids.length < 2) return this
-    return this.setState(Commands.align(this.state, ids, type))
+    return this.setState(Commands.alignShapes(this.state, ids, type))
   }
 
   /**
    */
   distribute = (direction: DistributeType, ids = this.selectedIds): this => {
     if (ids.length < 3) return this
-    return this.setState(Commands.distribute(this.state, ids, direction))
+    return this.setState(Commands.distributeShapes(this.state, ids, direction))
   }
 
   /**
    */
   stretch = (direction: StretchType, ids = this.selectedIds): this => {
     if (ids.length < 2) return this
-    return this.setState(Commands.stretch(this.state, ids, direction))
+    return this.setState(Commands.stretchShapes(this.state, ids, direction))
   }
 
   /**
    */
   flipHorizontal = (ids = this.selectedIds): this => {
     if (ids.length === 0) return this
-    return this.setState(Commands.flip(this.state, ids, FlipType.Horizontal))
+    return this.setState(Commands.flipShapes(this.state, ids, FlipType.Horizontal))
   }
 
   /**
    */
   flipVertical = (ids = this.selectedIds): this => {
     if (ids.length === 0) return this
-    return this.setState(Commands.flip(this.state, ids, FlipType.Vertical))
+    return this.setState(Commands.flipShapes(this.state, ids, FlipType.Vertical))
   }
 
   /**
     ids = this.selectedIds
   ): this => {
     if (ids.length === 0) return this
-    this.setState(Commands.moveToPage(this.state, ids, this.bounds, fromPageId, toPageId))
+    this.setState(Commands.moveShapesToPage(this.state, ids, this.bounds, fromPageId, toPageId))
     return this
   }
 
    */
   moveToBack = (ids = this.selectedIds): this => {
     if (ids.length === 0) return this
-    return this.setState(Commands.move(this.state, ids, MoveType.ToBack))
+    return this.setState(Commands.reorderShapes(this.state, ids, MoveType.ToBack))
   }
 
   /**
    */
   moveBackward = (ids = this.selectedIds): this => {
     if (ids.length === 0) return this
-    return this.setState(Commands.move(this.state, ids, MoveType.Backward))
+    return this.setState(Commands.reorderShapes(this.state, ids, MoveType.Backward))
   }
 
   /**
    */
   moveForward = (ids = this.selectedIds): this => {
     if (ids.length === 0) return this
-    return this.setState(Commands.move(this.state, ids, MoveType.Forward))
+    return this.setState(Commands.reorderShapes(this.state, ids, MoveType.Forward))
   }
 
   /**
    */
   moveToFront = (ids = this.selectedIds): this => {
     if (ids.length === 0) return this
-    return this.setState(Commands.move(this.state, ids, MoveType.ToFront))
+    return this.setState(Commands.reorderShapes(this.state, ids, MoveType.ToFront))
   }
 
   /**
    */
   nudge = (delta: number[], isMajor = false, ids = this.selectedIds): this => {
     if (ids.length === 0) return this
-    return this.setState(Commands.translate(this.state, ids, Vec.mul(delta, isMajor ? 10 : 1)))
+    return this.setState(
+      Commands.translateShapes(this.state, ids, Vec.mul(delta, isMajor ? 10 : 1))
+    )
   }
 
   /**
   duplicate = (ids = this.selectedIds, point?: number[]): this => {
     if (this.readOnly) return this
     if (ids.length === 0) return this
-    return this.setState(Commands.duplicate(this.state, ids, point))
+    return this.setState(Commands.duplicateShapes(this.state, ids, point))
   }
 
   /**
    */
   toggleHidden = (ids = this.selectedIds): this => {
     if (ids.length === 0) return this
-    return this.setState(Commands.toggle(this.state, ids, 'isHidden'))
+    return this.setState(Commands.toggleShapeProp(this.state, ids, 'isHidden'))
   }
 
   /**
    */
   toggleLocked = (ids = this.selectedIds): this => {
     if (ids.length === 0) return this
-    return this.setState(Commands.toggle(this.state, ids, 'isLocked'))
+    return this.setState(Commands.toggleShapeProp(this.state, ids, 'isLocked'))
   }
 
   /**
    */
   toggleAspectRatioLocked = (ids = this.selectedIds): this => {
     if (ids.length === 0) return this
-    return this.setState(Commands.toggle(this.state, ids, 'isAspectRatioLocked'))
+    return this.setState(Commands.toggleShapeProp(this.state, ids, 'isAspectRatioLocked'))
   }
 
   /**
    */
   toggleDecoration = (handleId: string, ids = this.selectedIds): this => {
     if (ids.length === 0 || !(handleId === 'start' || handleId === 'end')) return this
-    return this.setState(Commands.toggleDecoration(this.state, ids, handleId))
+    return this.setState(Commands.toggleShapesDecoration(this.state, ids, handleId))
   }
 
   /**
    */
   rotate = (delta = Math.PI * -0.5, ids = this.selectedIds): this => {
     if (ids.length === 0) return this
-    const change = Commands.rotate(this.state, ids, delta)
+    const change = Commands.rotateShapes(this.state, ids, delta)
     if (!change) return this
     return this.setState(change)
   }
 
     if (ids.length < 2) return this
 
-    const command = Commands.group(this.state, ids, groupId, pageId)
+    const command = Commands.groupShapes(this.state, ids, groupId, pageId)
     if (!command) return this
     return this.setState(command)
   }
 
     if (groups.length === 0) return this
 
-    const command = Commands.ungroup(this.state, ids, groups as GroupShape[], pageId)
+    const command = Commands.ungroupShapes(this.state, ids, groups as GroupShape[], pageId)
     if (!command) return this
     return this.setState(command)
   }
       users: {
         [uuid]: {
           id: uuid,
-          color: sample(USER_COLORS),
+          color: USER_COLORS[0],
           point: [100, 100],
           selectedIds: [],
           activeShapes: [],

packages/tldraw/src/state/command/align/index.ts

-export * from './align.command'

packages/tldraw/src/state/command/change-page/index.ts

-export * from './change-page.command'

packages/tldraw/src/state/command/create-page/index.ts

-export * from './create-page.command'

packages/tldraw/src/state/command/create/index.ts

-export * from './create.command'

packages/tldraw/src/state/command/delete-page/index.ts

-export * from './delete-page.command'

packages/tldraw/src/state/command/delete/index.ts

-export * from './delete.command'

packages/tldraw/src/state/command/distribute/index.ts

-export * from './distribute.command'

packages/tldraw/src/state/command/duplicate-page/index.ts

-export * from './duplicate-page.command'

packages/tldraw/src/state/command/duplicate/index.ts

-export * from './duplicate.command'

packages/tldraw/src/state/command/flip/index.ts

-export * from './flip.command'

packages/tldraw/src/state/command/group/index.ts

-export * from './group.command'

packages/tldraw/src/state/command/index.ts

-export * from './align'
-export * from './change-page'
-export * from './create-page'
-export * from './create'
-export * from './delete-page'
-export * from './delete'
-export * from './distribute'
-export * from './duplicate-page'
-export * from './duplicate'
-export * from './flip'
-export * from './group'
-export * from './move-to-page'
-export * from './move'
-export * from './rename-page'
-export * from './reset-bounds'
-export * from './rotate'
-export * from './stretch'
-export * from './style'
-export * from './toggle-decoration'
-export * from './toggle'
-export * from './translate'
-export * from './ungroup'
-export * from './update'

packages/tldraw/src/state/command/move-to-page/index.ts

-export * from './move-to-page.command'

packages/tldraw/src/state/command/move/index.ts

-export * from './move.command'

packages/tldraw/src/state/command/rename-page/index.ts

-export * from './rename-page.command'

packages/tldraw/src/state/command/reset-bounds/index.ts

-export * from './reset-bounds.command'

packages/tldraw/src/state/command/rotate/index.ts

-export * from './rotate.command'

packages/tldraw/src/state/command/stretch/index.ts

-export * from './stretch.command'

packages/tldraw/src/state/command/style/index.ts

-export * from './style.command'

packages/tldraw/src/state/command/toggle-decoration/index.ts

-export * from './toggle-decoration.command'

packages/tldraw/src/state/command/toggle/index.ts

-export * from './toggle.command'

packages/tldraw/src/state/command/translate/index.ts

-export * from './translate.command'

packages/tldraw/src/state/command/ungroup/index.ts

-export * from './ungroup.command'

packages/tldraw/src/state/command/update/index.ts

-export * from './update.command'

packages/tldraw/src/state/command/align/align.command.spec.ts → packages/tldraw/src/state/commands/alignShapes/alignShapes.spec.ts

 import Vec from '@tldraw/vec'
 import { TLDrawState } from '~state'
-import { mockDocument, TLStateUtils } from '~test'
+import { mockDocument, TLDrawStateUtils } from '~test'
 import { AlignType, TLDrawShapeType } from '~types'
 
 describe('Align command', () => {
 
     tlstate.undo().delete(['rect4']).selectAll().align(AlignType.CenterVertical)
 
-    new TLStateUtils(tlstate).expectShapesToBeAtPoints({
+    new TLDrawStateUtils(tlstate).expectShapesToBeAtPoints({
       rect1: p0,
       rect2: Vec.add(p0, [100, 100]),
       rect3: p1,

packages/tldraw/src/state/command/align/align.command.ts → packages/tldraw/src/state/commands/alignShapes/alignShapes.ts

 import { Utils } from '@tldraw/core'
 import { AlignType, TLDrawCommand, TLDrawShapeType } from '~types'
 import type { Data } from '~types'
-import { TLDR } from '~state/tldr'
+import { TLDR } from '~state/TLDR'
 import Vec from '@tldraw/vec'
 
-export function align(data: Data, ids: string[], type: AlignType): TLDrawCommand {
+export function alignShapes(data: Data, ids: string[], type: AlignType): TLDrawCommand {
   const { currentPageId } = data.appState
 
   const initialShapes = ids.map((id) => TLDR.getShape(data, id, currentPageId))

packages/tldraw/src/state/commands/alignShapes/index.ts

+export * from './alignShapes'

packages/tldraw/src/state/commands/changePage/index.ts

+export * from './changePage'

packages/tldraw/src/state/commands/createPage/index.ts

+export * from './createPage'

packages/tldraw/src/state/command/create/create.command.ts → packages/tldraw/src/state/commands/createShapes/createShapes.ts

 import type { Patch } from 'rko'
-import { TLDR } from '~state/tldr'
+import { TLDR } from '~state/TLDR'
 import type { TLDrawShape, Data, TLDrawCommand, TLDrawBinding } from '~types'
 
-export function create(
+export function createShapes(
   data: Data,
   shapes: TLDrawShape[],
   bindings: TLDrawBinding[] = []

packages/tldraw/src/state/commands/createShapes/index.ts

+export * from './createShapes'

packages/tldraw/src/state/commands/deletePage/index.ts

+export * from './deletePage'

packages/tldraw/src/state/command/delete/delete.command.ts → packages/tldraw/src/state/commands/deleteShapes/deleteShapes.ts

-import { TLDR } from '~state/tldr'
+import { TLDR } from '~state/TLDR'
 import type { Data, TLDrawCommand } from '~types'
-import { removeShapesFromPage } from '../utils/removeShapesFromPage'
-
-// - [ ] Update parents and possibly delete parents
+import { removeShapesFromPage } from '../shared/removeShapesFromPage'
 
 export function deleteShapes(
   data: Data,

packages/tldraw/src/state/commands/deleteShapes/index.ts

+export * from './deleteShapes'

packages/tldraw/src/state/command/distribute/distribute.command.spec.ts → packages/tldraw/src/state/commands/distributeShapes/distributeShapes.spec.ts

 import Vec from '@tldraw/vec'
 import { TLDrawState } from '~state'
-import { mockDocument, TLStateUtils } from '~test'
+import { mockDocument, TLDrawStateUtils } from '~test'
 import { AlignType, DistributeType, TLDrawShapeType } from '~types'
 
 describe('Distribute command', () => {
 
     tlstate.undo().delete(['rect4']).selectAll().distribute(DistributeType.Vertical)
 
-    new TLStateUtils(tlstate).expectShapesToBeAtPoints({
+    new TLDrawStateUtils(tlstate).expectShapesToBeAtPoints({
       rect1: p0,
       rect2: Vec.add(p0, [100, 100]),
       rect3: p1,

packages/tldraw/src/state/command/distribute/distribute.command.ts → packages/tldraw/src/state/commands/distributeShapes/distributeShapes.ts

 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { Utils } from '@tldraw/core'
 import { DistributeType, TLDrawShape, Data, TLDrawCommand, TLDrawShapeType } from '~types'
-import { TLDR } from '~state/tldr'
+import { TLDR } from '~state/TLDR'
 import Vec from '@tldraw/vec'
 
-export function distribute(data: Data, ids: string[], type: DistributeType): TLDrawCommand {
+export function distributeShapes(data: Data, ids: string[], type: DistributeType): TLDrawCommand {
   const { currentPageId } = data.appState
 
   const initialShapes = ids.map((id) => TLDR.getShape(data, id, currentPageId))

packages/tldraw/src/state/commands/distributeShapes/index.ts

+export * from './distributeShapes'

packages/tldraw/src/state/commands/duplicatePage/index.ts

+export * from './duplicatePage'