Asset improvements (#1557)

This PR does the following: - Add `selfHosted.js`, which is a great option for users that wish to self host the assets. Works well for both self hosting from the public folder or via a CDN. - Updates the docs for assets. We now have a dedicated page for assets where all the options are more clearly explained. I also removed the assets explanation from the main docs as the unpkg option should work out of the box and setting up the assets is no longer necessary. - Cleaned up the `refresh-assets` script. We now use common `types.d.ts` file to define our types. All the other options then reuse them. - Pulled out the `formatAssetUrl` into it's own file. It's now static an no longer generated. - `urls.d.ts`, `import.d.ts`, and newly added `selfhosted.d.ts` are now also no longer generated as we can import the types from `types.d.ts`. - You can now pass a subset of `assetUrls` to `<Tldraw />` and it will override the default option with the passed in overrides. This makes it easy to only customizes certain assets (only change the draw font as an example). ### Change Type - [x] `patch` — Bug Fix
2023-06-09 13:43:01 +02:00 · 2023-06-09 13:43:01 +02:00 · bacb307bad
commit bacb307bad
parent 707ddc876f
24 changed files with 682 additions and 608 deletions
--- a/apps/docs/content/docs/assets.mdx
+++ b/apps/docs/content/docs/assets.mdx
@ -0,0 +1,69 @@
+---
+title: Assets
+status: published
+author: steveruizok
+date: 6/9/2023
+order: 9
+---
+
+In order to use the `<Tldraw/>` component, the app must be able to find certain assets. These are contained in the `embed-icons`, `fonts`, `icons`, and `translations` folders. We offer a few different ways of making these assets available to your app.
+
+### 1. Using a public CDN
+
+By default we serve these assets from a [public CDN called unpkg](https://unpkg.com/browse/@tldraw/assets@2.0.0-alpha.12/), so everything should work out of the box and is a good way to get started.
+
+If you would like to customize some of the assets you can pass the customizations to our `<Tldraw />` component. For example, to use a custom icon for the `hand` tool you can do the following:
+
+```javascript
+const assetUrls = {
+    icons: {
+        'tool-hand': './custom-tool-hand.svg',
+    },
+}
+
+<Tldraw assetUrls={assetUrls} />
+```
+
+This will use the custom icon for the `hand` tool and the default assets for everything else.
+
+
+### 2. Hosting the assets yourself
+
+If you want more flexibility you can also host these assets yourself:
+1. Download the `embed-icons`, `fonts`, `icons`, and `translations` folders from the [assets folder](https://github.com/tldraw/tldraw/tree/main/assets) of the tldraw repository.
+2. Place the folders in your project's public path.
+3. Pass `assetUrls` prop to our `<Tldraw/>` component to let the component know where the assets live. 
+
+You can use our `getAssetUrls` helper function from the `@tldraw/assets` package to generate these urls for you.
+```javascript
+import { getAssetUrls } from '@tldraw/assets/selfHosted'
+
+const assetUrls = getAssetUrls()
+
+<Tldraw assetUrls={assetUrls} />
+```
+
+While these files must be available, you can overwrite the individual files: for example, by placing different icons under the same name or modifying / adding translations.
+
+If you use a CDN for hosting these files you can specify the base url of your assets. To recreate the above option of serving the assets from unpkg you would do the following:
+
+```javascript
+const assetUrls = getAssetUrls({
+    baseUrl: 'https://unpkg.com/@tldraw/assets@2.0.0-alpha.12/',
+})
+```
+
+### 3. Using a bundler
+
+If you're using a bundler like webpack or rollup, you can import the assets directly from the `@tldraw/assets` package. Here you can use `getAssetUrlsByMetaUrl` helper function:
+```javascript
+import { getAssetUrlsByMetaUrl } from '@tldraw/assets/urls'
+
+const assetUrls = getAssetUrlsByMetaUrl()
+
+<Tldraw assetUrls={assetUrls} />
+```
+
+### Adding custom assets
+
+We have plans to offer more rich asset customizations in the future (e.g. custom cursors, custom fonts, translations for other languages etc). 
--- a/apps/docs/content/docs/introduction.mdx
+++ b/apps/docs/content/docs/introduction.mdx
@ -30,8 +30,6 @@ yarn add @tldraw/tldraw@alpha signia signia-react
 npm install @tldraw/tldraw@alpha signia signia-react
 ```

-Next, copy the following folders: `icons`, `embed-icons`, `fonts`, and `translations` from the [assets folder](https://github.com/tldraw/tldraw/tree/main/assets). Put them in your project's public path so that, e.g. `your-website.com/icons` points to the icons folder you copied. (Ability to customize the base asset URL is coming soon!)
-
 ## Usage

 You should be able to use the `<Tldraw/>` component in any React editor.
@ -60,7 +58,6 @@ export default function () {
 In addition to the library, you will also need to:

 - import the **CSS files** for the editor and UI
- have the library's **assets** available on the same host
 - probably set a `viewport` meta tag in your **html**.

 See below for more detail on these.
@ -94,24 +91,6 @@ The `<Tldraw/>` component combines several other pieces:

 If you wanted to have more granular control, you could also use those subcomponents directly. See the ["exploded" example](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/5-exploded/ExplodedExample.tsx) for what that would look like.

-### Assets
-
-In order to use the `<Tldraw/>` component, the app must be able to find certain assets. These are contained in the `embed-icons`, `fonts`, `icons`, and `translations` folders. By default we serve these assets from a [public CDN called unpkg](https://unpkg.com/browse/@tldraw/assets@2.0.0-alpha.12/) so everything should work out of the box.
-
-If you want more flexibility you can also host these assets yourself:
-1. Download the `embed-icons`, `fonts`, `icons`, and `translations` folders from the [assets folder](https://github.com/tldraw/tldraw/tree/main/assets) of the tldraw repository.
-2. Place the folders in your project's public path.
-3. Pass `assetUrls` prop to our `<Tldraw/>` component to let the component know where the assets live. You can use our [`getAssetUrlsByMetaUrl` helper](https://github.com/tldraw/tldraw/blob/5d826c926d2b8eea633caccbe1049b9e1b4b9070/packages/assets/urls.js#L32) from the `@tldraw/assets` package.
-```
-import { getAssetUrlsByMetaUrl } from '@tldraw/assets/urls'
-
-const assetUrls = getAssetUrlsByMetaUrl()
-
-<Tldraw assetUrls={assetUrls} />
-```
-
-While these files must be available, you can overwrite the individual files: for example, by placing different icons under the same name or modifying / adding translations.
-
 ### CSS

 In order to use the `<Tldraw/>` component, you must also import a CSS file from the library `@tldraw/editor` library (automatically installed with `@tldraw/tldraw`):
--- a/apps/docs/content/docs/usage.mdx
+++ b/apps/docs/content/docs/usage.mdx
@ -32,7 +32,6 @@ export default function () {
 In addition to the library, you will also need to:

 - import the **CSS files** for the editor and UI
- have the library's **assets** available on the same host
 - probably set a `viewport` meta tag in your **html**.

 See below for more detail on these.
@ -66,24 +65,6 @@ The `<Tldraw/>` component combines several other pieces:

 If you wanted to have more granular control, you could also use those subcomponents directly. See the ["exploded" example](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/5-exploded/ExplodedExample.tsx) for what that would look like.

-### Assets
-
-In order to use the `<Tldraw/>` component, the app must be able to find certain assets. These are contained in the `embed-icons`, `fonts`, `icons`, and `translations` folders. By default we serve these assets from a [public CDN called unpkg](https://unpkg.com/browse/@tldraw/assets@2.0.0-alpha.12/) so everything should work out of the box.
-
-If you want more flexibility you can also host these assets yourself:
-1. Download the `embed-icons`, `fonts`, `icons`, and `translations` folders from the [assets folder](https://github.com/tldraw/tldraw/tree/main/assets) of the tldraw repository.
-2. Place the folders in your project's public path.
-3. Pass `assetUrls` prop to our `<Tldraw/>` component to let the component know where the assets live. You can use our [`getAssetUrlsByMetaUrl` helper](https://github.com/tldraw/tldraw/blob/5d826c926d2b8eea633caccbe1049b9e1b4b9070/packages/assets/urls.js#L32) from the `@tldraw/assets` package.
-```
-import { getAssetUrlsByMetaUrl } from '@tldraw/assets/urls'
-
-const assetUrls = getAssetUrlsByMetaUrl()
-
-<Tldraw assetUrls={assetUrls} />
-```
-
-While these files must be available, you can overwrite the individual files: for example, by placing different icons under the same name or modifying / adding translations.
-
 ### CSS

 In order to use the `<Tldraw/>` component, you must also import a CSS file from the library `@tldraw/editor` library (automatically installed with `@tldraw/tldraw`):
--- a/packages/assets/imports.d.ts
+++ b/packages/assets/imports.d.ts
@ -1,232 +1,2 @@
-// This file is automatically generated by scripts/refresh-assets.ts.
-// Do not edit manually.
-
-type AssetUrl = string | { src: string }
-type AssetUrlOptions = { baseUrl?: string } | ((assetUrl: string) => string)
-
-export function getAssetUrlsByImport(opts?: AssetUrlOptions): {
-	fonts: {
-		monospace: string
-		sansSerif: string
-		serif: string
-		draw: string
-	}
-	icons: {
-		'align-bottom-center': string
-		'align-bottom-left': string
-		'align-bottom-right': string
-		'align-bottom': string
-		'align-center-center': string
-		'align-center-horizontal': string
-		'align-center-left': string
-		'align-center-right': string
-		'align-center-vertical': string
-		'align-left': string
-		'align-right': string
-		'align-top-center': string
-		'align-top-left': string
-		'align-top-right': string
-		'align-top': string
-		'arrow-left': string
-		'arrowhead-arrow': string
-		'arrowhead-bar': string
-		'arrowhead-diamond': string
-		'arrowhead-dot': string
-		'arrowhead-none': string
-		'arrowhead-square': string
-		'arrowhead-triangle-inverted': string
-		'arrowhead-triangle': string
-		'aspect-ratio': string
-		avatar: string
-		blob: string
-		'bring-forward': string
-		'bring-to-front': string
-		check: string
-		'checkbox-checked': string
-		'checkbox-empty': string
-		'chevron-down': string
-		'chevron-left': string
-		'chevron-right': string
-		'chevron-up': string
-		'chevrons-ne': string
-		'chevrons-sw': string
-		'clipboard-copied': string
-		'clipboard-copy': string
-		code: string
-		collab: string
-		color: string
-		comment: string
-		'cross-2': string
-		cross: string
-		'dash-dashed': string
-		'dash-dotted': string
-		'dash-draw': string
-		'dash-solid': string
-		discord: string
-		'distribute-horizontal': string
-		'distribute-vertical': string
-		dot: string
-		'dots-horizontal': string
-		'dots-vertical': string
-		'drag-handle-dots': string
-		duplicate: string
-		edit: string
-		'external-link': string
-		file: string
-		'fill-none': string
-		'fill-pattern': string
-		'fill-semi': string
-		'fill-solid': string
-		follow: string
-		following: string
-		'font-draw': string
-		'font-mono': string
-		'font-sans': string
-		'font-serif': string
-		'geo-arrow-down': string
-		'geo-arrow-left': string
-		'geo-arrow-right': string
-		'geo-arrow-up': string
-		'geo-check-box': string
-		'geo-diamond': string
-		'geo-ellipse': string
-		'geo-hexagon': string
-		'geo-octagon': string
-		'geo-oval': string
-		'geo-pentagon': string
-		'geo-rectangle': string
-		'geo-rhombus-2': string
-		'geo-rhombus': string
-		'geo-star': string
-		'geo-trapezoid': string
-		'geo-triangle': string
-		'geo-x-box': string
-		github: string
-		group: string
-		hidden: string
-		image: string
-		'info-circle': string
-		leading: string
-		link: string
-		'lock-small': string
-		lock: string
-		menu: string
-		minus: string
-		mixed: string
-		pack: string
-		page: string
-		plus: string
-		'question-mark-circle': string
-		'question-mark': string
-		redo: string
-		'reset-zoom': string
-		'rotate-ccw': string
-		'rotate-cw': string
-		ruler: string
-		search: string
-		'send-backward': string
-		'send-to-back': string
-		'settings-horizontal': string
-		'settings-vertical-1': string
-		'settings-vertical': string
-		'share-1': string
-		'share-2': string
-		'size-extra-large': string
-		'size-large': string
-		'size-medium': string
-		'size-small': string
-		'spline-cubic': string
-		'spline-line': string
-		'stack-horizontal': string
-		'stack-vertical': string
-		'stretch-horizontal': string
-		'stretch-vertical': string
-		'text-align-center': string
-		'text-align-justify': string
-		'text-align-left': string
-		'text-align-right': string
-		'tool-arrow': string
-		'tool-embed': string
-		'tool-eraser': string
-		'tool-frame': string
-		'tool-hand': string
-		'tool-highlight': string
-		'tool-laser': string
-		'tool-line': string
-		'tool-media': string
-		'tool-note': string
-		'tool-pencil': string
-		'tool-pointer': string
-		'tool-text': string
-		trash: string
-		'triangle-down': string
-		'triangle-up': string
-		twitter: string
-		undo: string
-		ungroup: string
-		'unlock-small': string
-		unlock: string
-		'vertical-align-center': string
-		'vertical-align-end': string
-		'vertical-align-start': string
-		visible: string
-		'warning-triangle': string
-		'zoom-in': string
-		'zoom-out': string
-	}
-	translations: {
-		ar: string
-		ca: string
-		da: string
-		de: string
-		en: string
-		es: string
-		fa: string
-		fi: string
-		fr: string
-		gl: string
-		he: string
-		'hi-in': string
-		hu: string
-		it: string
-		ja: string
-		'ko-kr': string
-		ku: string
-		languages: string
-		main: string
-		my: string
-		ne: string
-		no: string
-		pl: string
-		'pt-br': string
-		'pt-pt': string
-		ro: string
-		ru: string
-		sv: string
-		te: string
-		th: string
-		tr: string
-		uk: string
-		vi: string
-		'zh-cn': string
-		'zh-tw': string
-	}
-	embedIcons: {
-		codepen: string
-		codesandbox: string
-		excalidraw: string
-		felt: string
-		figma: string
-		github_gist: string
-		google_calendar: string
-		google_maps: string
-		google_slides: string
-		observable: string
-		replit: string
-		scratch: string
-		spotify: string
-		tldraw: string
-		vimeo: string
-		youtube: string
-	}
-}
+import { AssetUrlOptions, AssetUrls } from './types'
+export function getAssetUrlsByImport(opts?: AssetUrlOptions): AssetUrls
--- a/packages/assets/imports.js
+++ b/packages/assets/imports.js
@ -3,6 +3,8 @@

 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="./modules.d.ts" />
+import { formatAssetUrl } from './utils.js'
+
 import embedIconsCodepen from './embed-icons/codepen.png'
 import embedIconsCodesandbox from './embed-icons/codesandbox.png'
 import embedIconsExcalidraw from './embed-icons/excalidraw.png'
@ -220,27 +222,6 @@ import translationsVi from './translations/vi.json'
 import translationsZhCn from './translations/zh-cn.json'
 import translationsZhTw from './translations/zh-tw.json'

-/** @typedef {string | { src: string }} AssetUrl */
-/** @typedef {{ baseUrl?: string } | ((assetUrl: string) => string)} AssetUrlOptions */
-
-/**
- * @param {AssetUrl} assetUrl
- * @param {AssetUrlOptions} [format]
- * @returns {string}
- */
-function formatAssetUrl(assetUrl, format = {}) {
-	const assetUrlString = typeof assetUrl === 'string' ? assetUrl : assetUrl.src
-
-	if (typeof format === 'function') return format(assetUrlString)
-
-	const { baseUrl = '' } = format
-
-	if (assetUrlString.startsWith('data:')) return assetUrlString
-	if (assetUrlString.match(/^https?:\/\//)) return assetUrlString
-
-	return `${baseUrl.replace(/\/$/, '')}/${assetUrlString.replace(/^\.?\//, '')}`
-}
-
 /**
 * @param {AssetUrlOptions} [opts]
 * @public
--- a/packages/assets/package.json
+++ b/packages/assets/package.json
@ -31,8 +31,13 @@
 		"translations",
 		"imports.js",
 		"imports.d.ts",
+		"selfHosted.js",
+		"selfHosted.d.ts",
+		"types.d.ts",
 		"urls.js",
-		"urls.d.ts"
+		"urls.d.ts",
+		"utils.js",
+		"utils.d.ts"
 	],
 	"scripts": {
 		"pack-tarball": "yarn pack",
--- a/packages/assets/selfHosted.d.ts
+++ b/packages/assets/selfHosted.d.ts
@ -0,0 +1,2 @@
+import { AssetUrlOptions, AssetUrls } from './types'
+export function getAssetUrls(opts?: AssetUrlOptions): AssetUrls
--- a/packages/assets/selfHosted.js
+++ b/packages/assets/selfHosted.js
@ -0,0 +1,242 @@
+// This file is automatically generated by scripts/refresh-assets.ts.
+// Do not edit manually.
+
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="./modules.d.ts" />
+import { formatAssetUrl } from './utils.js'
+
+/**
+ * @param {AssetUrlOptions} [opts]
+ * @public
+ */
+export function getAssetUrls(opts) {
+	return {
+		fonts: {
+			monospace: formatAssetUrl('./fonts/IBMPlexMono-Medium.woff2', opts),
+			sansSerif: formatAssetUrl('./fonts/IBMPlexSans-Medium.woff2', opts),
+			serif: formatAssetUrl('./fonts/IBMPlexSerif-Medium.woff2', opts),
+			draw: formatAssetUrl('./fonts/Shantell_Sans-Normal-SemiBold.woff2', opts),
+		},
+		icons: {
+			'align-bottom-center': formatAssetUrl('./icons/icon/align-bottom-center.svg', opts),
+			'align-bottom-left': formatAssetUrl('./icons/icon/align-bottom-left.svg', opts),
+			'align-bottom-right': formatAssetUrl('./icons/icon/align-bottom-right.svg', opts),
+			'align-bottom': formatAssetUrl('./icons/icon/align-bottom.svg', opts),
+			'align-center-center': formatAssetUrl('./icons/icon/align-center-center.svg', opts),
+			'align-center-horizontal': formatAssetUrl('./icons/icon/align-center-horizontal.svg', opts),
+			'align-center-left': formatAssetUrl('./icons/icon/align-center-left.svg', opts),
+			'align-center-right': formatAssetUrl('./icons/icon/align-center-right.svg', opts),
+			'align-center-vertical': formatAssetUrl('./icons/icon/align-center-vertical.svg', opts),
+			'align-left': formatAssetUrl('./icons/icon/align-left.svg', opts),
+			'align-right': formatAssetUrl('./icons/icon/align-right.svg', opts),
+			'align-top-center': formatAssetUrl('./icons/icon/align-top-center.svg', opts),
+			'align-top-left': formatAssetUrl('./icons/icon/align-top-left.svg', opts),
+			'align-top-right': formatAssetUrl('./icons/icon/align-top-right.svg', opts),
+			'align-top': formatAssetUrl('./icons/icon/align-top.svg', opts),
+			'arrow-left': formatAssetUrl('./icons/icon/arrow-left.svg', opts),
+			'arrowhead-arrow': formatAssetUrl('./icons/icon/arrowhead-arrow.svg', opts),
+			'arrowhead-bar': formatAssetUrl('./icons/icon/arrowhead-bar.svg', opts),
+			'arrowhead-diamond': formatAssetUrl('./icons/icon/arrowhead-diamond.svg', opts),
+			'arrowhead-dot': formatAssetUrl('./icons/icon/arrowhead-dot.svg', opts),
+			'arrowhead-none': formatAssetUrl('./icons/icon/arrowhead-none.svg', opts),
+			'arrowhead-square': formatAssetUrl('./icons/icon/arrowhead-square.svg', opts),
+			'arrowhead-triangle-inverted': formatAssetUrl(
+				'./icons/icon/arrowhead-triangle-inverted.svg',
+				opts
+			),
+			'arrowhead-triangle': formatAssetUrl('./icons/icon/arrowhead-triangle.svg', opts),
+			'aspect-ratio': formatAssetUrl('./icons/icon/aspect-ratio.svg', opts),
+			avatar: formatAssetUrl('./icons/icon/avatar.svg', opts),
+			blob: formatAssetUrl('./icons/icon/blob.svg', opts),
+			'bring-forward': formatAssetUrl('./icons/icon/bring-forward.svg', opts),
+			'bring-to-front': formatAssetUrl('./icons/icon/bring-to-front.svg', opts),
+			check: formatAssetUrl('./icons/icon/check.svg', opts),
+			'checkbox-checked': formatAssetUrl('./icons/icon/checkbox-checked.svg', opts),
+			'checkbox-empty': formatAssetUrl('./icons/icon/checkbox-empty.svg', opts),
+			'chevron-down': formatAssetUrl('./icons/icon/chevron-down.svg', opts),
+			'chevron-left': formatAssetUrl('./icons/icon/chevron-left.svg', opts),
+			'chevron-right': formatAssetUrl('./icons/icon/chevron-right.svg', opts),
+			'chevron-up': formatAssetUrl('./icons/icon/chevron-up.svg', opts),
+			'chevrons-ne': formatAssetUrl('./icons/icon/chevrons-ne.svg', opts),
+			'chevrons-sw': formatAssetUrl('./icons/icon/chevrons-sw.svg', opts),
+			'clipboard-copied': formatAssetUrl('./icons/icon/clipboard-copied.svg', opts),
+			'clipboard-copy': formatAssetUrl('./icons/icon/clipboard-copy.svg', opts),
+			code: formatAssetUrl('./icons/icon/code.svg', opts),
+			collab: formatAssetUrl('./icons/icon/collab.svg', opts),
+			color: formatAssetUrl('./icons/icon/color.svg', opts),
+			comment: formatAssetUrl('./icons/icon/comment.svg', opts),
+			'cross-2': formatAssetUrl('./icons/icon/cross-2.svg', opts),
+			cross: formatAssetUrl('./icons/icon/cross.svg', opts),
+			'dash-dashed': formatAssetUrl('./icons/icon/dash-dashed.svg', opts),
+			'dash-dotted': formatAssetUrl('./icons/icon/dash-dotted.svg', opts),
+			'dash-draw': formatAssetUrl('./icons/icon/dash-draw.svg', opts),
+			'dash-solid': formatAssetUrl('./icons/icon/dash-solid.svg', opts),
+			discord: formatAssetUrl('./icons/icon/discord.svg', opts),
+			'distribute-horizontal': formatAssetUrl('./icons/icon/distribute-horizontal.svg', opts),
+			'distribute-vertical': formatAssetUrl('./icons/icon/distribute-vertical.svg', opts),
+			dot: formatAssetUrl('./icons/icon/dot.svg', opts),
+			'dots-horizontal': formatAssetUrl('./icons/icon/dots-horizontal.svg', opts),
+			'dots-vertical': formatAssetUrl('./icons/icon/dots-vertical.svg', opts),
+			'drag-handle-dots': formatAssetUrl('./icons/icon/drag-handle-dots.svg', opts),
+			duplicate: formatAssetUrl('./icons/icon/duplicate.svg', opts),
+			edit: formatAssetUrl('./icons/icon/edit.svg', opts),
+			'external-link': formatAssetUrl('./icons/icon/external-link.svg', opts),
+			file: formatAssetUrl('./icons/icon/file.svg', opts),
+			'fill-none': formatAssetUrl('./icons/icon/fill-none.svg', opts),
+			'fill-pattern': formatAssetUrl('./icons/icon/fill-pattern.svg', opts),
+			'fill-semi': formatAssetUrl('./icons/icon/fill-semi.svg', opts),
+			'fill-solid': formatAssetUrl('./icons/icon/fill-solid.svg', opts),
+			follow: formatAssetUrl('./icons/icon/follow.svg', opts),
+			following: formatAssetUrl('./icons/icon/following.svg', opts),
+			'font-draw': formatAssetUrl('./icons/icon/font-draw.svg', opts),
+			'font-mono': formatAssetUrl('./icons/icon/font-mono.svg', opts),
+			'font-sans': formatAssetUrl('./icons/icon/font-sans.svg', opts),
+			'font-serif': formatAssetUrl('./icons/icon/font-serif.svg', opts),
+			'geo-arrow-down': formatAssetUrl('./icons/icon/geo-arrow-down.svg', opts),
+			'geo-arrow-left': formatAssetUrl('./icons/icon/geo-arrow-left.svg', opts),
+			'geo-arrow-right': formatAssetUrl('./icons/icon/geo-arrow-right.svg', opts),
+			'geo-arrow-up': formatAssetUrl('./icons/icon/geo-arrow-up.svg', opts),
+			'geo-check-box': formatAssetUrl('./icons/icon/geo-check-box.svg', opts),
+			'geo-diamond': formatAssetUrl('./icons/icon/geo-diamond.svg', opts),
+			'geo-ellipse': formatAssetUrl('./icons/icon/geo-ellipse.svg', opts),
+			'geo-hexagon': formatAssetUrl('./icons/icon/geo-hexagon.svg', opts),
+			'geo-octagon': formatAssetUrl('./icons/icon/geo-octagon.svg', opts),
+			'geo-oval': formatAssetUrl('./icons/icon/geo-oval.svg', opts),
+			'geo-pentagon': formatAssetUrl('./icons/icon/geo-pentagon.svg', opts),
+			'geo-rectangle': formatAssetUrl('./icons/icon/geo-rectangle.svg', opts),
+			'geo-rhombus-2': formatAssetUrl('./icons/icon/geo-rhombus-2.svg', opts),
+			'geo-rhombus': formatAssetUrl('./icons/icon/geo-rhombus.svg', opts),
+			'geo-star': formatAssetUrl('./icons/icon/geo-star.svg', opts),
+			'geo-trapezoid': formatAssetUrl('./icons/icon/geo-trapezoid.svg', opts),
+			'geo-triangle': formatAssetUrl('./icons/icon/geo-triangle.svg', opts),
+			'geo-x-box': formatAssetUrl('./icons/icon/geo-x-box.svg', opts),
+			github: formatAssetUrl('./icons/icon/github.svg', opts),
+			group: formatAssetUrl('./icons/icon/group.svg', opts),
+			hidden: formatAssetUrl('./icons/icon/hidden.svg', opts),
+			image: formatAssetUrl('./icons/icon/image.svg', opts),
+			'info-circle': formatAssetUrl('./icons/icon/info-circle.svg', opts),
+			leading: formatAssetUrl('./icons/icon/leading.svg', opts),
+			link: formatAssetUrl('./icons/icon/link.svg', opts),
+			'lock-small': formatAssetUrl('./icons/icon/lock-small.svg', opts),
+			lock: formatAssetUrl('./icons/icon/lock.svg', opts),
+			menu: formatAssetUrl('./icons/icon/menu.svg', opts),
+			minus: formatAssetUrl('./icons/icon/minus.svg', opts),
+			mixed: formatAssetUrl('./icons/icon/mixed.svg', opts),
+			pack: formatAssetUrl('./icons/icon/pack.svg', opts),
+			page: formatAssetUrl('./icons/icon/page.svg', opts),
+			plus: formatAssetUrl('./icons/icon/plus.svg', opts),
+			'question-mark-circle': formatAssetUrl('./icons/icon/question-mark-circle.svg', opts),
+			'question-mark': formatAssetUrl('./icons/icon/question-mark.svg', opts),
+			redo: formatAssetUrl('./icons/icon/redo.svg', opts),
+			'reset-zoom': formatAssetUrl('./icons/icon/reset-zoom.svg', opts),
+			'rotate-ccw': formatAssetUrl('./icons/icon/rotate-ccw.svg', opts),
+			'rotate-cw': formatAssetUrl('./icons/icon/rotate-cw.svg', opts),
+			ruler: formatAssetUrl('./icons/icon/ruler.svg', opts),
+			search: formatAssetUrl('./icons/icon/search.svg', opts),
+			'send-backward': formatAssetUrl('./icons/icon/send-backward.svg', opts),
+			'send-to-back': formatAssetUrl('./icons/icon/send-to-back.svg', opts),
+			'settings-horizontal': formatAssetUrl('./icons/icon/settings-horizontal.svg', opts),
+			'settings-vertical-1': formatAssetUrl('./icons/icon/settings-vertical-1.svg', opts),
+			'settings-vertical': formatAssetUrl('./icons/icon/settings-vertical.svg', opts),
+			'share-1': formatAssetUrl('./icons/icon/share-1.svg', opts),
+			'share-2': formatAssetUrl('./icons/icon/share-2.svg', opts),
+			'size-extra-large': formatAssetUrl('./icons/icon/size-extra-large.svg', opts),
+			'size-large': formatAssetUrl('./icons/icon/size-large.svg', opts),
+			'size-medium': formatAssetUrl('./icons/icon/size-medium.svg', opts),
+			'size-small': formatAssetUrl('./icons/icon/size-small.svg', opts),
+			'spline-cubic': formatAssetUrl('./icons/icon/spline-cubic.svg', opts),
+			'spline-line': formatAssetUrl('./icons/icon/spline-line.svg', opts),
+			'stack-horizontal': formatAssetUrl('./icons/icon/stack-horizontal.svg', opts),
+			'stack-vertical': formatAssetUrl('./icons/icon/stack-vertical.svg', opts),
+			'stretch-horizontal': formatAssetUrl('./icons/icon/stretch-horizontal.svg', opts),
+			'stretch-vertical': formatAssetUrl('./icons/icon/stretch-vertical.svg', opts),
+			'text-align-center': formatAssetUrl('./icons/icon/text-align-center.svg', opts),
+			'text-align-justify': formatAssetUrl('./icons/icon/text-align-justify.svg', opts),
+			'text-align-left': formatAssetUrl('./icons/icon/text-align-left.svg', opts),
+			'text-align-right': formatAssetUrl('./icons/icon/text-align-right.svg', opts),
+			'tool-arrow': formatAssetUrl('./icons/icon/tool-arrow.svg', opts),
+			'tool-embed': formatAssetUrl('./icons/icon/tool-embed.svg', opts),
+			'tool-eraser': formatAssetUrl('./icons/icon/tool-eraser.svg', opts),
+			'tool-frame': formatAssetUrl('./icons/icon/tool-frame.svg', opts),
+			'tool-hand': formatAssetUrl('./icons/icon/tool-hand.svg', opts),
+			'tool-highlight': formatAssetUrl('./icons/icon/tool-highlight.svg', opts),
+			'tool-laser': formatAssetUrl('./icons/icon/tool-laser.svg', opts),
+			'tool-line': formatAssetUrl('./icons/icon/tool-line.svg', opts),
+			'tool-media': formatAssetUrl('./icons/icon/tool-media.svg', opts),
+			'tool-note': formatAssetUrl('./icons/icon/tool-note.svg', opts),
+			'tool-pencil': formatAssetUrl('./icons/icon/tool-pencil.svg', opts),
+			'tool-pointer': formatAssetUrl('./icons/icon/tool-pointer.svg', opts),
+			'tool-text': formatAssetUrl('./icons/icon/tool-text.svg', opts),
+			trash: formatAssetUrl('./icons/icon/trash.svg', opts),
+			'triangle-down': formatAssetUrl('./icons/icon/triangle-down.svg', opts),
+			'triangle-up': formatAssetUrl('./icons/icon/triangle-up.svg', opts),
+			twitter: formatAssetUrl('./icons/icon/twitter.svg', opts),
+			undo: formatAssetUrl('./icons/icon/undo.svg', opts),
+			ungroup: formatAssetUrl('./icons/icon/ungroup.svg', opts),
+			'unlock-small': formatAssetUrl('./icons/icon/unlock-small.svg', opts),
+			unlock: formatAssetUrl('./icons/icon/unlock.svg', opts),
+			'vertical-align-center': formatAssetUrl('./icons/icon/vertical-align-center.svg', opts),
+			'vertical-align-end': formatAssetUrl('./icons/icon/vertical-align-end.svg', opts),
+			'vertical-align-start': formatAssetUrl('./icons/icon/vertical-align-start.svg', opts),
+			visible: formatAssetUrl('./icons/icon/visible.svg', opts),
+			'warning-triangle': formatAssetUrl('./icons/icon/warning-triangle.svg', opts),
+			'zoom-in': formatAssetUrl('./icons/icon/zoom-in.svg', opts),
+			'zoom-out': formatAssetUrl('./icons/icon/zoom-out.svg', opts),
+		},
+		translations: {
+			ar: formatAssetUrl('./translations/ar.json', opts),
+			ca: formatAssetUrl('./translations/ca.json', opts),
+			da: formatAssetUrl('./translations/da.json', opts),
+			de: formatAssetUrl('./translations/de.json', opts),
+			en: formatAssetUrl('./translations/en.json', opts),
+			es: formatAssetUrl('./translations/es.json', opts),
+			fa: formatAssetUrl('./translations/fa.json', opts),
+			fi: formatAssetUrl('./translations/fi.json', opts),
+			fr: formatAssetUrl('./translations/fr.json', opts),
+			gl: formatAssetUrl('./translations/gl.json', opts),
+			he: formatAssetUrl('./translations/he.json', opts),
+			'hi-in': formatAssetUrl('./translations/hi-in.json', opts),
+			hu: formatAssetUrl('./translations/hu.json', opts),
+			it: formatAssetUrl('./translations/it.json', opts),
+			ja: formatAssetUrl('./translations/ja.json', opts),
+			'ko-kr': formatAssetUrl('./translations/ko-kr.json', opts),
+			ku: formatAssetUrl('./translations/ku.json', opts),
+			languages: formatAssetUrl('./translations/languages.json', opts),
+			main: formatAssetUrl('./translations/main.json', opts),
+			my: formatAssetUrl('./translations/my.json', opts),
+			ne: formatAssetUrl('./translations/ne.json', opts),
+			no: formatAssetUrl('./translations/no.json', opts),
+			pl: formatAssetUrl('./translations/pl.json', opts),
+			'pt-br': formatAssetUrl('./translations/pt-br.json', opts),
+			'pt-pt': formatAssetUrl('./translations/pt-pt.json', opts),
+			ro: formatAssetUrl('./translations/ro.json', opts),
+			ru: formatAssetUrl('./translations/ru.json', opts),
+			sv: formatAssetUrl('./translations/sv.json', opts),
+			te: formatAssetUrl('./translations/te.json', opts),
+			th: formatAssetUrl('./translations/th.json', opts),
+			tr: formatAssetUrl('./translations/tr.json', opts),
+			uk: formatAssetUrl('./translations/uk.json', opts),
+			vi: formatAssetUrl('./translations/vi.json', opts),
+			'zh-cn': formatAssetUrl('./translations/zh-cn.json', opts),
+			'zh-tw': formatAssetUrl('./translations/zh-tw.json', opts),
+		},
+		embedIcons: {
+			codepen: formatAssetUrl('./embed-icons/codepen.png', opts),
+			codesandbox: formatAssetUrl('./embed-icons/codesandbox.png', opts),
+			excalidraw: formatAssetUrl('./embed-icons/excalidraw.png', opts),
+			felt: formatAssetUrl('./embed-icons/felt.png', opts),
+			figma: formatAssetUrl('./embed-icons/figma.png', opts),
+			github_gist: formatAssetUrl('./embed-icons/github_gist.png', opts),
+			google_calendar: formatAssetUrl('./embed-icons/google_calendar.png', opts),
+			google_maps: formatAssetUrl('./embed-icons/google_maps.png', opts),
+			google_slides: formatAssetUrl('./embed-icons/google_slides.png', opts),
+			observable: formatAssetUrl('./embed-icons/observable.png', opts),
+			replit: formatAssetUrl('./embed-icons/replit.png', opts),
+			scratch: formatAssetUrl('./embed-icons/scratch.png', opts),
+			spotify: formatAssetUrl('./embed-icons/spotify.png', opts),
+			tldraw: formatAssetUrl('./embed-icons/tldraw.png', opts),
+			vimeo: formatAssetUrl('./embed-icons/vimeo.png', opts),
+			youtube: formatAssetUrl('./embed-icons/youtube.png', opts),
+		},
+	}
+}
--- a/packages/assets/tsconfig.json
+++ b/packages/assets/tsconfig.json
@ -1,6 +1,6 @@
 {
 	"extends": "../../config/tsconfig.base.json",
-	"include": ["urls.js", "imports.js", "modules.d.ts"],
+	"include": ["urls.js", "imports.js", "selfHosted.js", "utils.js", "modules.d.ts"],
 	"exclude": ["node_modules", "dist", ".tsbuild*"],
 	"compilerOptions": {
 		"outDir": "./.tsbuild",
--- a/packages/assets/types.d.ts
+++ b/packages/assets/types.d.ts
@ -0,0 +1,231 @@
+// This file is automatically generated by scripts/refresh-assets.ts.
+// Do not edit manually.
+
+export type AssetUrl = string | { src: string }
+export type AssetUrlOptions = { baseUrl?: string } | ((assetUrl: string) => string)
+export type AssetUrls = {
+	fonts: {
+		monospace: string
+		sansSerif: string
+		serif: string
+		draw: string
+	}
+	icons: {
+		'align-bottom-center': string
+		'align-bottom-left': string
+		'align-bottom-right': string
+		'align-bottom': string
+		'align-center-center': string
+		'align-center-horizontal': string
+		'align-center-left': string
+		'align-center-right': string
+		'align-center-vertical': string
+		'align-left': string
+		'align-right': string
+		'align-top-center': string
+		'align-top-left': string
+		'align-top-right': string
+		'align-top': string
+		'arrow-left': string
+		'arrowhead-arrow': string
+		'arrowhead-bar': string
+		'arrowhead-diamond': string
+		'arrowhead-dot': string
+		'arrowhead-none': string
+		'arrowhead-square': string
+		'arrowhead-triangle-inverted': string
+		'arrowhead-triangle': string
+		'aspect-ratio': string
+		avatar: string
+		blob: string
+		'bring-forward': string
+		'bring-to-front': string
+		check: string
+		'checkbox-checked': string
+		'checkbox-empty': string
+		'chevron-down': string
+		'chevron-left': string
+		'chevron-right': string
+		'chevron-up': string
+		'chevrons-ne': string
+		'chevrons-sw': string
+		'clipboard-copied': string
+		'clipboard-copy': string
+		code: string
+		collab: string
+		color: string
+		comment: string
+		'cross-2': string
+		cross: string
+		'dash-dashed': string
+		'dash-dotted': string
+		'dash-draw': string
+		'dash-solid': string
+		discord: string
+		'distribute-horizontal': string
+		'distribute-vertical': string
+		dot: string
+		'dots-horizontal': string
+		'dots-vertical': string
+		'drag-handle-dots': string
+		duplicate: string
+		edit: string
+		'external-link': string
+		file: string
+		'fill-none': string
+		'fill-pattern': string
+		'fill-semi': string
+		'fill-solid': string
+		follow: string
+		following: string
+		'font-draw': string
+		'font-mono': string
+		'font-sans': string
+		'font-serif': string
+		'geo-arrow-down': string
+		'geo-arrow-left': string
+		'geo-arrow-right': string
+		'geo-arrow-up': string
+		'geo-check-box': string
+		'geo-diamond': string
+		'geo-ellipse': string
+		'geo-hexagon': string
+		'geo-octagon': string
+		'geo-oval': string
+		'geo-pentagon': string
+		'geo-rectangle': string
+		'geo-rhombus-2': string
+		'geo-rhombus': string
+		'geo-star': string
+		'geo-trapezoid': string
+		'geo-triangle': string
+		'geo-x-box': string
+		github: string
+		group: string
+		hidden: string
+		image: string
+		'info-circle': string
+		leading: string
+		link: string
+		'lock-small': string
+		lock: string
+		menu: string
+		minus: string
+		mixed: string
+		pack: string
+		page: string
+		plus: string
+		'question-mark-circle': string
+		'question-mark': string
+		redo: string
+		'reset-zoom': string
+		'rotate-ccw': string
+		'rotate-cw': string
+		ruler: string
+		search: string
+		'send-backward': string
+		'send-to-back': string
+		'settings-horizontal': string
+		'settings-vertical-1': string
+		'settings-vertical': string
+		'share-1': string
+		'share-2': string
+		'size-extra-large': string
+		'size-large': string
+		'size-medium': string
+		'size-small': string
+		'spline-cubic': string
+		'spline-line': string
+		'stack-horizontal': string
+		'stack-vertical': string
+		'stretch-horizontal': string
+		'stretch-vertical': string
+		'text-align-center': string
+		'text-align-justify': string
+		'text-align-left': string
+		'text-align-right': string
+		'tool-arrow': string
+		'tool-embed': string
+		'tool-eraser': string
+		'tool-frame': string
+		'tool-hand': string
+		'tool-highlight': string
+		'tool-laser': string
+		'tool-line': string
+		'tool-media': string
+		'tool-note': string
+		'tool-pencil': string
+		'tool-pointer': string
+		'tool-text': string
+		trash: string
+		'triangle-down': string
+		'triangle-up': string
+		twitter: string
+		undo: string
+		ungroup: string
+		'unlock-small': string
+		unlock: string
+		'vertical-align-center': string
+		'vertical-align-end': string
+		'vertical-align-start': string
+		visible: string
+		'warning-triangle': string
+		'zoom-in': string
+		'zoom-out': string
+	}
+	translations: {
+		ar: string
+		ca: string
+		da: string
+		de: string
+		en: string
+		es: string
+		fa: string
+		fi: string
+		fr: string
+		gl: string
+		he: string
+		'hi-in': string
+		hu: string
+		it: string
+		ja: string
+		'ko-kr': string
+		ku: string
+		languages: string
+		main: string
+		my: string
+		ne: string
+		no: string
+		pl: string
+		'pt-br': string
+		'pt-pt': string
+		ro: string
+		ru: string
+		sv: string
+		te: string
+		th: string
+		tr: string
+		uk: string
+		vi: string
+		'zh-cn': string
+		'zh-tw': string
+	}
+	embedIcons: {
+		codepen: string
+		codesandbox: string
+		excalidraw: string
+		felt: string
+		figma: string
+		github_gist: string
+		google_calendar: string
+		google_maps: string
+		google_slides: string
+		observable: string
+		replit: string
+		scratch: string
+		spotify: string
+		tldraw: string
+		vimeo: string
+		youtube: string
+	}
+}
--- a/packages/assets/urls.d.ts
+++ b/packages/assets/urls.d.ts
@ -1,232 +1,2 @@
-// This file is automatically generated by scripts/refresh-assets.ts.
-// Do not edit manually.
-
-type AssetUrl = string | { src: string }
-type AssetUrlOptions = { baseUrl?: string } | ((assetUrl: string) => string)
-
-export function getAssetUrlsByMetaUrl(opts?: AssetUrlOptions): {
-	fonts: {
-		monospace: string
-		sansSerif: string
-		serif: string
-		draw: string
-	}
-	icons: {
-		'align-bottom-center': string
-		'align-bottom-left': string
-		'align-bottom-right': string
-		'align-bottom': string
-		'align-center-center': string
-		'align-center-horizontal': string
-		'align-center-left': string
-		'align-center-right': string
-		'align-center-vertical': string
-		'align-left': string
-		'align-right': string
-		'align-top-center': string
-		'align-top-left': string
-		'align-top-right': string
-		'align-top': string
-		'arrow-left': string
-		'arrowhead-arrow': string
-		'arrowhead-bar': string
-		'arrowhead-diamond': string
-		'arrowhead-dot': string
-		'arrowhead-none': string
-		'arrowhead-square': string
-		'arrowhead-triangle-inverted': string
-		'arrowhead-triangle': string
-		'aspect-ratio': string
-		avatar: string
-		blob: string
-		'bring-forward': string
-		'bring-to-front': string
-		check: string
-		'checkbox-checked': string
-		'checkbox-empty': string
-		'chevron-down': string
-		'chevron-left': string
-		'chevron-right': string
-		'chevron-up': string
-		'chevrons-ne': string
-		'chevrons-sw': string
-		'clipboard-copied': string
-		'clipboard-copy': string
-		code: string
-		collab: string
-		color: string
-		comment: string
-		'cross-2': string
-		cross: string
-		'dash-dashed': string
-		'dash-dotted': string
-		'dash-draw': string
-		'dash-solid': string
-		discord: string
-		'distribute-horizontal': string
-		'distribute-vertical': string
-		dot: string
-		'dots-horizontal': string
-		'dots-vertical': string
-		'drag-handle-dots': string
-		duplicate: string
-		edit: string
-		'external-link': string
-		file: string
-		'fill-none': string
-		'fill-pattern': string
-		'fill-semi': string
-		'fill-solid': string
-		follow: string
-		following: string
-		'font-draw': string
-		'font-mono': string
-		'font-sans': string
-		'font-serif': string
-		'geo-arrow-down': string
-		'geo-arrow-left': string
-		'geo-arrow-right': string
-		'geo-arrow-up': string
-		'geo-check-box': string
-		'geo-diamond': string
-		'geo-ellipse': string
-		'geo-hexagon': string
-		'geo-octagon': string
-		'geo-oval': string
-		'geo-pentagon': string
-		'geo-rectangle': string
-		'geo-rhombus-2': string
-		'geo-rhombus': string
-		'geo-star': string
-		'geo-trapezoid': string
-		'geo-triangle': string
-		'geo-x-box': string
-		github: string
-		group: string
-		hidden: string
-		image: string
-		'info-circle': string
-		leading: string
-		link: string
-		'lock-small': string
-		lock: string
-		menu: string
-		minus: string
-		mixed: string
-		pack: string
-		page: string
-		plus: string
-		'question-mark-circle': string
-		'question-mark': string
-		redo: string
-		'reset-zoom': string
-		'rotate-ccw': string
-		'rotate-cw': string
-		ruler: string
-		search: string
-		'send-backward': string
-		'send-to-back': string
-		'settings-horizontal': string
-		'settings-vertical-1': string
-		'settings-vertical': string
-		'share-1': string
-		'share-2': string
-		'size-extra-large': string
-		'size-large': string
-		'size-medium': string
-		'size-small': string
-		'spline-cubic': string
-		'spline-line': string
-		'stack-horizontal': string
-		'stack-vertical': string
-		'stretch-horizontal': string
-		'stretch-vertical': string
-		'text-align-center': string
-		'text-align-justify': string
-		'text-align-left': string
-		'text-align-right': string
-		'tool-arrow': string
-		'tool-embed': string
-		'tool-eraser': string
-		'tool-frame': string
-		'tool-hand': string
-		'tool-highlight': string
-		'tool-laser': string
-		'tool-line': string
-		'tool-media': string
-		'tool-note': string
-		'tool-pencil': string
-		'tool-pointer': string
-		'tool-text': string
-		trash: string
-		'triangle-down': string
-		'triangle-up': string
-		twitter: string
-		undo: string
-		ungroup: string
-		'unlock-small': string
-		unlock: string
-		'vertical-align-center': string
-		'vertical-align-end': string
-		'vertical-align-start': string
-		visible: string
-		'warning-triangle': string
-		'zoom-in': string
-		'zoom-out': string
-	}
-	translations: {
-		ar: string
-		ca: string
-		da: string
-		de: string
-		en: string
-		es: string
-		fa: string
-		fi: string
-		fr: string
-		gl: string
-		he: string
-		'hi-in': string
-		hu: string
-		it: string
-		ja: string
-		'ko-kr': string
-		ku: string
-		languages: string
-		main: string
-		my: string
-		ne: string
-		no: string
-		pl: string
-		'pt-br': string
-		'pt-pt': string
-		ro: string
-		ru: string
-		sv: string
-		te: string
-		th: string
-		tr: string
-		uk: string
-		vi: string
-		'zh-cn': string
-		'zh-tw': string
-	}
-	embedIcons: {
-		codepen: string
-		codesandbox: string
-		excalidraw: string
-		felt: string
-		figma: string
-		github_gist: string
-		google_calendar: string
-		google_maps: string
-		google_slides: string
-		observable: string
-		replit: string
-		scratch: string
-		spotify: string
-		tldraw: string
-		vimeo: string
-		youtube: string
-	}
-}
+import { AssetUrlOptions, AssetUrls } from './types'
+export function getAssetUrlsByMetaUrl(opts?: AssetUrlOptions): AssetUrls
--- a/packages/assets/urls.js
+++ b/packages/assets/urls.js
@ -3,27 +3,7 @@

 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="./modules.d.ts" />
-
-/** @typedef {string | { src: string }} AssetUrl */
-/** @typedef {{ baseUrl?: string } | ((assetUrl: string) => string)} AssetUrlOptions */
-
-/**
- * @param {AssetUrl} assetUrl
- * @param {AssetUrlOptions} [format]
- * @returns {string}
- */
-function formatAssetUrl(assetUrl, format = {}) {
-	const assetUrlString = typeof assetUrl === 'string' ? assetUrl : assetUrl.src
-
-	if (typeof format === 'function') return format(assetUrlString)
-
-	const { baseUrl = '' } = format
-
-	if (assetUrlString.startsWith('data:')) return assetUrlString
-	if (assetUrlString.match(/^https?:\/\//)) return assetUrlString
-
-	return `${baseUrl.replace(/\/$/, '')}/${assetUrlString.replace(/^\.?\//, '')}`
-}
+import { formatAssetUrl } from './utils.js'

 /**
 * @param {AssetUrlOptions} [opts]
--- a/packages/assets/utils.d.ts
+++ b/packages/assets/utils.d.ts
@ -0,0 +1,2 @@
+import { AssetUrl, AssetUrlOptions } from './types'
+export function formatAssetUrl(assetUrl: AssetUrl, format: AssetUrlOptions): string
--- a/packages/assets/utils.js
+++ b/packages/assets/utils.js
@ -0,0 +1,20 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="./modules.d.ts" />
+
+/**
+ * @param {AssetUrl} assetUrl
+ * @param {AssetUrlOptions} [format]
+ * @returns {string}
+ */
+export function formatAssetUrl(assetUrl, format = {}) {
+	const assetUrlString = typeof assetUrl === 'string' ? assetUrl : assetUrl.src
+
+	if (typeof format === 'function') return format(assetUrlString)
+
+	const { baseUrl = '' } = format
+
+	if (assetUrlString.startsWith('data:')) return assetUrlString
+	if (assetUrlString.match(/^https?:\/\//)) return assetUrlString
+
+	return `${baseUrl.replace(/\/$/, '')}/${assetUrlString.replace(/^\.?\//, '')}`
+}
--- a/packages/editor/api-report.md
+++ b/packages/editor/api-report.md
@ -24,6 +24,7 @@ import { Migrations } from '@tldraw/store';
 import { Polyline2d } from '@tldraw/primitives';
 import { default as React_2 } from 'react';
 import * as React_3 from 'react';
+import { RecursivePartial } from '@tldraw/utils';
 import { RotateCorner } from '@tldraw/primitives';
 import { SelectionCorner } from '@tldraw/primitives';
 import { SelectionEdge } from '@tldraw/primitives';
@ -2192,7 +2193,7 @@ export type TldrawEditorProps = {
    children?: any;
    shapes?: Record<string, TLShapeInfo>;
    tools?: TLStateNodeConstructor[];
-    assetUrls?: TLEditorAssetUrls;
+    assetUrls?: RecursivePartial<TLEditorAssetUrls>;
    autoFocus?: boolean;
    components?: Partial<TLEditorComponents>;
    onMount?: (editor: Editor) => (() => void) | undefined | void;
--- a/packages/editor/src/lib/TldrawEditor.tsx
+++ b/packages/editor/src/lib/TldrawEditor.tsx
@ -1,8 +1,8 @@
 import { Store, StoreSnapshot } from '@tldraw/store'
 import { TLRecord, TLStore } from '@tldraw/tlschema'
-import { annotateError } from '@tldraw/utils'
+import { RecursivePartial, annotateError } from '@tldraw/utils'
 import React, { memo, useCallback, useLayoutEffect, useState, useSyncExternalStore } from 'react'
-import { TLEditorAssetUrls, defaultEditorAssetUrls } from './assetUrls'
+import { TLEditorAssetUrls, useDefaultEditorAssetsWithOverrides } from './assetUrls'
 import { DefaultErrorFallback } from './components/DefaultErrorFallback'
 import { OptionalErrorBoundary } from './components/ErrorBoundary'
 import { TLShapeInfo } from './config/createTLStore'
@ -39,7 +39,7 @@ export type TldrawEditorProps = {
 	/**
 	 * Urls for where to find fonts and other assets.
 	 */
-	assetUrls?: TLEditorAssetUrls
+	assetUrls?: RecursivePartial<TLEditorAssetUrls>
 	/**
 	 * Whether to automatically focus the editor when it mounts.
 	 */
@ -164,9 +164,8 @@ const TldrawEditorWithLoadingStore = memo(function TldrawEditorBeforeLoading({
 	assetUrls,
 	...rest
 }: TldrawEditorProps & { store: TLStoreWithStatus }) {
-	const { done: preloadingComplete, error: preloadingError } = usePreloadAssets(
-		assetUrls ?? defaultEditorAssetUrls
-	)
+	const assets = useDefaultEditorAssetsWithOverrides(assetUrls)
+	const { done: preloadingComplete, error: preloadingError } = usePreloadAssets(assets)

 	switch (store.status) {
 		case 'error': {
--- a/packages/editor/src/lib/assetUrls.ts
+++ b/packages/editor/src/lib/assetUrls.ts
@ -1,3 +1,5 @@
+import { RecursivePartial } from '@tldraw/utils'
+import { useMemo } from 'react'
 import { version } from '../version'

 /** @public */
@ -24,3 +26,16 @@ export let defaultEditorAssetUrls: TLEditorAssetUrls = {
 export function setDefaultEditorAssetUrls(assetUrls: TLEditorAssetUrls) {
 	defaultEditorAssetUrls = assetUrls
 }
+
+/** @internal */
+export function useDefaultEditorAssetsWithOverrides(
+	overrides?: RecursivePartial<TLEditorAssetUrls>
+): TLEditorAssetUrls {
+	return useMemo(() => {
+		if (!overrides) return defaultEditorAssetUrls
+
+		return {
+			fonts: Object.assign({ ...defaultEditorAssetUrls.fonts }, { ...overrides?.fonts }),
+		}
+	}, [overrides])
+}
--- a/packages/ui/api-report.md
+++ b/packages/ui/api-report.md
@ -13,6 +13,7 @@ import { NamedExoticComponent } from 'react';
 import { default as React_2 } from 'react';
 import * as React_3 from 'react';
 import { ReactNode } from 'react';
+import { RecursivePartial } from '@tldraw/utils';
 import { TLCopyType } from '@tldraw/editor';
 import { TLEditorAssetUrls } from '@tldraw/editor';
 import { TLExportType } from '@tldraw/editor';
@ -224,7 +225,7 @@ export function TldrawUiContextProvider({ overrides, assetUrls, onUiEvent, child
 // @public (undocumented)
 export interface TldrawUiContextProviderProps {
    // (undocumented)
-    assetUrls?: TLUiAssetUrls;
+    assetUrls?: RecursivePartial<TLUiAssetUrls>;
    // (undocumented)
    children?: any;
    // (undocumented)
--- a/packages/ui/src/lib/TldrawUiContextProvider.tsx
+++ b/packages/ui/src/lib/TldrawUiContextProvider.tsx
@ -1,4 +1,5 @@
-import { TLUiAssetUrls, defaultUiAssetUrls } from './assetUrls'
+import { RecursivePartial } from '@tldraw/utils'
+import { TLUiAssetUrls, useDefaultUiAssetUrlsWithOverrides } from './assetUrls'
 import { ActionsProvider } from './hooks/useActions'
 import { ActionsMenuSchemaProvider } from './hooks/useActionsMenuSchema'
 import { AssetUrlsProvider } from './hooks/useAssetUrls'
@ -17,7 +18,7 @@ import { TLUiOverrides, useMergedOverrides, useMergedTranslationOverrides } from

 /** @public */
 export interface TldrawUiContextProviderProps {
-	assetUrls?: TLUiAssetUrls
+	assetUrls?: RecursivePartial<TLUiAssetUrls>
 	overrides?: TLUiOverrides | TLUiOverrides[]
 	onUiEvent?: TLUiEventHandler
 	children?: any
@ -31,7 +32,7 @@ export function TldrawUiContextProvider({
 	children,
 }: TldrawUiContextProviderProps) {
 	return (
-		<AssetUrlsProvider assetUrls={assetUrls ?? defaultUiAssetUrls}>
+		<AssetUrlsProvider assetUrls={useDefaultUiAssetUrlsWithOverrides(assetUrls)}>
 			<TranslationProvider overrides={useMergedTranslationOverrides(overrides)}>
 				<EventsProvider onEvent={onUiEvent}>
 					<ToastsProvider>
--- a/packages/ui/src/lib/assetUrls.ts
+++ b/packages/ui/src/lib/assetUrls.ts
@ -4,6 +4,7 @@ import {
 	TLEditorAssetUrls,
 	defaultEditorAssetUrls,
 } from '@tldraw/editor'
+import { RecursivePartial } from '@tldraw/utils'
 import { version } from '../version'
 import { TLUiIconType, iconTypes } from './icon-types'

@ -39,3 +40,20 @@ export let defaultUiAssetUrls: TLUiAssetUrls = {
 export function setDefaultUiAssetUrls(urls: TLUiAssetUrls) {
 	defaultUiAssetUrls = urls
 }
+
+/** @internal */
+export function useDefaultUiAssetUrlsWithOverrides(
+	overrides?: RecursivePartial<TLUiAssetUrls>
+): TLUiAssetUrls {
+	if (!overrides) return defaultUiAssetUrls
+
+	return {
+		fonts: Object.assign({ ...defaultUiAssetUrls.fonts }, { ...overrides?.fonts }),
+		icons: Object.assign({ ...defaultUiAssetUrls.icons }, { ...overrides?.icons }),
+		embedIcons: Object.assign({ ...defaultUiAssetUrls.embedIcons }, { ...overrides?.embedIcons }),
+		translations: Object.assign(
+			{ ...defaultUiAssetUrls.translations },
+			{ ...overrides?.translations }
+		),
+	}
+}
--- a/packages/utils/api-report.md
+++ b/packages/utils/api-report.md
@ -130,6 +130,11 @@ export function promiseWithResolve<T>(): Promise<T> & {
 // @internal
 export function rafThrottle(fn: () => void): () => void;

+// @public (undocumented)
+export type RecursivePartial<T> = {
+    [P in keyof T]?: RecursivePartial<T[P]>;
+};
+
 // @public (undocumented)
 export type Result<T, E> = ErrorResult<E> | OkResult<T>;

--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@ -26,4 +26,5 @@ export {
 } from './lib/object'
 export { rafThrottle, throttledRaf } from './lib/raf'
 export { sortById } from './lib/sort'
+export type { RecursivePartial } from './lib/types'
 export { isDefined, isNonNull, isNonNullish, structuredClone } from './lib/value'
--- a/packages/utils/src/lib/types.ts
+++ b/packages/utils/src/lib/types.ts
@ -0,0 +1,4 @@
+/** @public */
+export type RecursivePartial<T> = {
+	[P in keyof T]?: RecursivePartial<T[P]>
+}
--- a/scripts/refresh-assets.ts
+++ b/scripts/refresh-assets.ts
@ -256,40 +256,14 @@ async function copyTranslations() {
 	}
 }

-const assetDeclarationFileCommon = `
-	/** @typedef {string | { src: string }} AssetUrl */
-	/** @typedef {{ baseUrl?: string } | ((assetUrl: string) => string)} AssetUrlOptions */
-
-	/**
-	 * @param {AssetUrl} assetUrl
-	 * @param {AssetUrlOptions} [format]
-	 * @returns {string}
-	 */
-	function formatAssetUrl(assetUrl, format = {}) {
-		const assetUrlString = typeof assetUrl === 'string' ? assetUrl : assetUrl.src
-
-		if (typeof format === 'function') return format(assetUrlString)
-
-		const { baseUrl = '' } = format
-
-		if (assetUrlString.startsWith('data:')) return assetUrlString
-		if (assetUrlString.match(/^https?:\\/\\//)) return assetUrlString
-
-		return \`\${baseUrl.replace(/\\/$/, '')}/\${assetUrlString.replace(/^\\.?\\//, '')}\`
-	}
-`
-
 // 4. ASSET DECLARATION FILES
 async function writeUrlBasedAssetDeclarationFile() {
-	const assetDeclarationFilePath = join(BUBLIC_ROOT, 'packages', 'assets', 'urls.js')
-	let assetDeclarationFile = `
+	const codeFilePath = join(BUBLIC_ROOT, 'packages', 'assets', 'urls.js')
+	const codeFile = `
 		// eslint-disable-next-line @typescript-eslint/triple-slash-reference
 		/// <reference path="./modules.d.ts" />
+		import { formatAssetUrl } from './utils.js'

-		${assetDeclarationFileCommon}
-	`
-
-	assetDeclarationFile += `
 		/**
 		 * @param {AssetUrlOptions} [opts]
 		 * @public
@ -312,24 +286,18 @@ async function writeUrlBasedAssetDeclarationFile() {
 		}
 	`

-	await writeCodeFile(
-		'scripts/refresh-assets.ts',
-		'javascript',
-		assetDeclarationFilePath,
-		assetDeclarationFile
-	)
-
-	await writeAssetDeclarationDTSFile('urls', 'getAssetUrlsByMetaUrl')
+	await writeCodeFile('scripts/refresh-assets.ts', 'javascript', codeFilePath, codeFile)
 }
+
 async function writeImportBasedAssetDeclarationFile(): Promise<void> {
 	let imports = `
 		// eslint-disable-next-line @typescript-eslint/triple-slash-reference
 		/// <reference path="./modules.d.ts" />
+		import { formatAssetUrl } from './utils.js'
+
 	`

 	let declarations = `
-		${assetDeclarationFileCommon}
-		
 		/**
 		 * @param {AssetUrlOptions} [opts]
 		 * @public
@ -356,23 +324,50 @@ async function writeImportBasedAssetDeclarationFile(): Promise<void> {
 		}
 	`

-	const assetDeclarationFilePath = join(BUBLIC_ROOT, 'packages', 'assets', 'imports.js')
+	const codeFilePath = join(BUBLIC_ROOT, 'packages', 'assets', 'imports.js')
 	await writeCodeFile(
 		'scripts/refresh-assets.ts',
 		'javascript',
-		assetDeclarationFilePath,
+		codeFilePath,
 		imports + declarations
 	)
-
-	await writeAssetDeclarationDTSFile('imports', 'getAssetUrlsByImport')
 }

-async function writeAssetDeclarationDTSFile(fileName: string, functionName: string) {
-	let dts = `
-		type AssetUrl = string | { src: string }
-		type AssetUrlOptions = { baseUrl?: string } | ((assetUrl: string) => string)
+async function writeSelfHostedAssetDeclarationFile(): Promise<void> {
+	const codeFilePath = join(BUBLIC_ROOT, 'packages', 'assets', 'selfHosted.js')
+	const codeFile = `
+		// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+		/// <reference path="./modules.d.ts" />
+		import { formatAssetUrl } from './utils.js'

-		export function ${functionName}(opts?: AssetUrlOptions): {
+		/**
+		 * @param {AssetUrlOptions} [opts]
+		 * @public
+		 */
+		export function getAssetUrls(opts) {
+			return {
+				${Object.entries(collectedAssetUrls)
+					.flatMap(([type, assets]) => [
+						`${type}: {`,
+						...Object.entries(assets).map(
+							([name, href]) =>
+								`${JSON.stringify(name)}: formatAssetUrl(${JSON.stringify('./' + href)}, opts),`
+						),
+						'},',
+					])
+					.join('\n')}
+			}
+		}
+	`
+
+	await writeCodeFile('scripts/refresh-assets.ts', 'javascript', codeFilePath, codeFile)
+}
+
+async function writeAssetDeclarationDTSFile() {
+	let dts = `
+		export type AssetUrl = string | { src: string }
+		export type AssetUrlOptions = { baseUrl?: string } | ((assetUrl: string) => string)
+		export type AssetUrls = {
 	`

 	for (const [type, assets] of Object.entries(collectedAssetUrls)) {
@ -387,7 +382,7 @@ async function writeAssetDeclarationDTSFile(fileName: string, functionName: stri
 		}
 	`

-	const assetDeclarationFilePath = join(BUBLIC_ROOT, 'packages', 'assets', `${fileName}.d.ts`)
+	const assetDeclarationFilePath = join(BUBLIC_ROOT, 'packages', 'assets', 'types.d.ts')
 	await writeCodeFile('scripts/refresh-assets.ts', 'typescript', assetDeclarationFilePath, dts)
 }

@ -402,8 +397,10 @@ async function main() {
 	nicelog('Copying translations...')
 	await copyTranslations()
 	nicelog('Writing asset declaration file...')
+	await writeAssetDeclarationDTSFile()
 	await writeUrlBasedAssetDeclarationFile()
 	await writeImportBasedAssetDeclarationFile()
+	await writeSelfHostedAssetDeclarationFile()
 	nicelog('Done!')
 }