From 34c4ad1d3370c8c5109109a3ca5f2b80bf6b1f02 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 3 Oct 2026 15:18:46 +0000 Subject: [PATCH 01/15] internal(website): Reorganize Playground into editor/monaco/preview MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Split the 362-line monaco-init into focused modules (setup, typeLibs, theme, navigation, modelPath), group preview execution under preview/, and replace forwarding modules with direct imports. Behavior is unchanged; the new README documents the SSR, incremental-loading, mobile/bot and hidden-tab invariants a future change must keep. - monaco/: setup side effect, table-driven type libs (same chunks and order), cross-tab navigation, `//` model URI helpers - editor/: InteractiveEditor (Monaco or mobile react-live) and StaticEditor (SSR/crawler/loading markup) - userAgent.ts: one source for bot/mobile regexes (isGoogleBot → isBot) - Remove PlaygroundEditor, PlaygroundLiveEditor, DiffEditorChooser aliases, the unused readOnly prop, and unreferenced resources/ - Unit tests for highlight selections and model paths Co-Authored-By: Claude Opus 5.5 (1M context) Claude-Session: https://claude.ai/code/session_015H36Yk4WBpytw9L7RRVCTK --- website/raw-plugin.js | 7 +- website/scripts/generateMonacoPreloads.cjs | 2 +- website/src/components/DiffEditor.tsx | 4 +- website/src/components/DiffEditorChooser.tsx | 6 - website/src/components/DiffEditorMonaco.tsx | 13 +- website/src/components/HooksPlayground.tsx | 17 +- .../Playground/PlaygroundEditor.tsx | 10 - .../Playground/PlaygroundLiveEditor.tsx | 14 - .../Playground/PlaygroundMonacoEditor.tsx | 116 ------ website/src/components/Playground/README.md | 126 ++++++ .../Playground/editor/EditorShell.tsx | 2 +- .../Playground/editor/EditorSurface.tsx | 77 ++-- .../Playground/editor/InteractiveEditor.tsx | 97 +++++ .../Playground/editor/StaticEditor.tsx | 16 + .../useReactLiveTheme.ts} | 0 website/src/components/Playground/index.tsx | 93 ++--- .../components/Playground/isMobileOrBot.ts | 14 - .../src/components/Playground/monaco-init.ts | 362 ------------------ .../__tests__/highlightSelections.test.ts | 24 ++ .../monaco/__tests__/modelPath.test.ts | 16 + .../Playground/monaco/highlightSelections.ts | 35 ++ .../language.ts} | 0 .../components/Playground/monaco/modelPath.ts | 26 ++ .../Playground/monaco/navigation.ts | 117 ++++++ .../{monacoOptions.tsx => monaco/options.ts} | 0 .../preloadManifest.ts} | 0 .../resourceHints.ts} | 2 +- .../src/components/Playground/monaco/setup.ts | 56 +++ .../src/components/Playground/monaco/theme.ts | 33 ++ .../components/Playground/monaco/typeLibs.ts | 222 +++++++++++ .../useAutoHeight.ts} | 0 .../{ => preview}/FixturePreview.tsx | 4 +- .../Playground/preview/LivePreview.tsx | 6 +- .../Playground/{ => preview}/Preview.tsx | 8 +- .../Playground/{ => preview}/PreviewBlock.tsx | 6 +- .../{ => preview}/PreviewWrapper.tsx | 4 +- .../{ => preview}/StoreInspector.tsx | 4 +- .../Playground/{ => preview}/Tree.tsx | 0 .../__tests__/transformCode.test.ts | 0 .../components/Playground/preview/scope.ts | 2 +- .../Playground/{ => preview}/temporal.ts | 0 .../Playground/{ => preview}/transformCode.ts | 0 .../resources/PlaceholderBaseResource.ts | 51 --- .../Playground/resources/TodoResource.ts | 73 ---- .../src/components/Playground/userAgent.ts | 30 ++ website/src/components/StackBlitz.tsx | 4 +- 46 files changed, 893 insertions(+), 806 deletions(-) delete mode 100644 website/src/components/DiffEditorChooser.tsx delete mode 100644 website/src/components/Playground/PlaygroundEditor.tsx delete mode 100644 website/src/components/Playground/PlaygroundLiveEditor.tsx delete mode 100644 website/src/components/Playground/PlaygroundMonacoEditor.tsx create mode 100644 website/src/components/Playground/README.md create mode 100644 website/src/components/Playground/editor/InteractiveEditor.tsx create mode 100644 website/src/components/Playground/editor/StaticEditor.tsx rename website/src/components/Playground/{useReactLiveTheme.tsx => editor/useReactLiveTheme.ts} (100%) delete mode 100644 website/src/components/Playground/isMobileOrBot.ts delete mode 100644 website/src/components/Playground/monaco-init.ts create mode 100644 website/src/components/Playground/monaco/__tests__/highlightSelections.test.ts create mode 100644 website/src/components/Playground/monaco/__tests__/modelPath.test.ts create mode 100644 website/src/components/Playground/monaco/highlightSelections.ts rename website/src/components/Playground/{extensionToMonacoLanguage.tsx => monaco/language.ts} (100%) create mode 100644 website/src/components/Playground/monaco/modelPath.ts create mode 100644 website/src/components/Playground/monaco/navigation.ts rename website/src/components/Playground/{monacoOptions.tsx => monaco/options.ts} (100%) rename website/src/components/Playground/{monacoPreloadManifest.ts => monaco/preloadManifest.ts} (100%) rename website/src/components/Playground/{injectMonacoResourceHints.ts => monaco/resourceHints.ts} (91%) create mode 100644 website/src/components/Playground/monaco/setup.ts create mode 100644 website/src/components/Playground/monaco/theme.ts create mode 100644 website/src/components/Playground/monaco/typeLibs.ts rename website/src/components/Playground/{useAutoHeight.tsx => monaco/useAutoHeight.ts} (100%) rename website/src/components/Playground/{ => preview}/FixturePreview.tsx (95%) rename website/src/components/Playground/{ => preview}/Preview.tsx (91%) rename website/src/components/Playground/{ => preview}/PreviewBlock.tsx (69%) rename website/src/components/Playground/{ => preview}/PreviewWrapper.tsx (87%) rename website/src/components/Playground/{ => preview}/StoreInspector.tsx (90%) rename website/src/components/Playground/{ => preview}/Tree.tsx (100%) rename website/src/components/Playground/{ => preview}/__tests__/transformCode.test.ts (100%) rename website/src/components/Playground/{ => preview}/temporal.ts (100%) rename website/src/components/Playground/{ => preview}/transformCode.ts (100%) delete mode 100644 website/src/components/Playground/resources/PlaceholderBaseResource.ts delete mode 100644 website/src/components/Playground/resources/TodoResource.ts create mode 100644 website/src/components/Playground/userAgent.ts diff --git a/website/raw-plugin.js b/website/raw-plugin.js index 8c6b49bc6240..7ad401083f64 100644 --- a/website/raw-plugin.js +++ b/website/raw-plugin.js @@ -5,10 +5,11 @@ module.exports = function (context, options) { configureWebpack(config, isServer, utils) { return { ignoreWarnings: [ - // Suppress warning about dynamic import expressions in monaco-init.ts - // This is expected behavior for dynamic TypeScript definition loading + // Suppress warning about dynamic import expressions in + // Playground/monaco/typeLibs.ts. This is expected behavior for + // dynamic TypeScript definition loading { - module: /monaco-init\.ts/, + module: /Playground[\\/]monaco[\\/]typeLibs\.ts/, message: /Critical dependency: the request of a dependency is an expression/, }, diff --git a/website/scripts/generateMonacoPreloads.cjs b/website/scripts/generateMonacoPreloads.cjs index bfe383786d5c..22908bc9993a 100644 --- a/website/scripts/generateMonacoPreloads.cjs +++ b/website/scripts/generateMonacoPreloads.cjs @@ -22,7 +22,7 @@ const VS_ROOT = path.dirname( const MONACO_ROOT = path.resolve(VS_ROOT, '../..'); const MANIFEST_PATH = path.join( WEBSITE_ROOT, - 'src/components/Playground/monacoPreloadManifest.ts', + 'src/components/Playground/monaco/preloadManifest.ts', ); /** @returns {{ monacoVersion: string, preloadPaths: string[], prefetchPaths: string[] }} */ diff --git a/website/src/components/DiffEditor.tsx b/website/src/components/DiffEditor.tsx index 149d8b165814..001ff9349e4c 100644 --- a/website/src/components/DiffEditor.tsx +++ b/website/src/components/DiffEditor.tsx @@ -1,7 +1,7 @@ import CodeBlock from '@theme/CodeBlock'; import React, { useMemo } from 'react'; -import DiffEditorChooser from './DiffEditorChooser'; +import DiffEditorMonaco from './DiffEditorMonaco'; import Grid from './Grid'; import { parseCodeDocuments } from './Playground/editor/codeModel'; @@ -23,7 +23,7 @@ export default function DiffEditor({ children }: Props) { ); - return ; + return ; } interface Props { diff --git a/website/src/components/DiffEditorChooser.tsx b/website/src/components/DiffEditorChooser.tsx deleted file mode 100644 index f31a8da400b6..000000000000 --- a/website/src/components/DiffEditorChooser.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import DiffEditorMonaco from './DiffEditorMonaco'; - -// Always use DiffEditorMonaco which handles SSR via -// The mobile/bot detection is handled inside DiffEditorMonaco -const DiffEditorChooser = DiffEditorMonaco; -export default DiffEditorChooser; diff --git a/website/src/components/DiffEditorMonaco.tsx b/website/src/components/DiffEditorMonaco.tsx index 878a5e43e9d4..a88cf26abc91 100644 --- a/website/src/components/DiffEditorMonaco.tsx +++ b/website/src/components/DiffEditorMonaco.tsx @@ -5,12 +5,13 @@ import { type editor } from 'monaco-editor'; import { useMemo } from 'react'; import type { CodeDocument } from './Playground/editor/codeModel'; -import { extensionToMonacoLanguage } from './Playground/extensionToMonacoLanguage'; -import './Playground/monaco-init'; -import { isMobileOrBot } from './Playground/isMobileOrBot'; -import { options } from './Playground/monacoOptions'; +import { extensionToMonacoLanguage } from './Playground/monaco/language'; +import { options } from './Playground/monaco/options'; +import './Playground/monaco/setup'; +import { MONACO_THEME } from './Playground/monaco/theme'; +import useAutoHeight from './Playground/monaco/useAutoHeight'; import styles from './Playground/styles.module.css'; -import useAutoHeight from './Playground/useAutoHeight'; +import { isMobileOrBot } from './Playground/userAgent'; export default function DiffEditor({ documents, fallback }: DiffMonacoProps) { const [original, modified] = useMemo( @@ -48,7 +49,7 @@ export default function DiffEditor({ documents, fallback }: DiffMonacoProps) { options={DIFF_OPTIONS} onMount={handleMount} height={height} - theme="prism" + theme={MONACO_THEME} loading={fallback} // Prevent "TextModel got disposed before DiffEditorWidget model got reset" error // by not letting @monaco-editor/react manage model disposal diff --git a/website/src/components/HooksPlayground.tsx b/website/src/components/HooksPlayground.tsx index 756ac53125cf..35ba60b2d77f 100644 --- a/website/src/components/HooksPlayground.tsx +++ b/website/src/components/HooksPlayground.tsx @@ -1,8 +1,8 @@ -import type { Fixture, Interceptor } from '@data-client/test'; import React, { memo } from 'react'; -import Playground from './Playground'; +import Playground, { type PlaygroundProps } from './Playground'; +/** MDX entry point: wraps one or more code fences in a live Playground. */ const HooksPlayground = ({ children, groupId, @@ -24,6 +24,7 @@ const HooksPlayground = ({ defaultTab={defaultTab} headerControls={headerControls} > + {/* A single fence arrives as one 
 element; unwrap it to its  */}
     {typeof children === 'string' ?
       children
     : Array.isArray(children) ?
@@ -34,15 +35,3 @@ const HooksPlayground = ({
   
 );
 export default memo(HooksPlayground);
-
-interface PlaygroundProps {
-  groupId: string;
-  defaultOpen?: 'y' | 'n';
-  row: boolean;
-  hidden?: boolean;
-  fixtures?: (Fixture | Interceptor)[];
-  getInitialInterceptorData?: () => T;
-  children: React.ReactNode;
-  defaultTab?: string;
-  headerControls?: React.ReactNode;
-}
diff --git a/website/src/components/Playground/PlaygroundEditor.tsx b/website/src/components/Playground/PlaygroundEditor.tsx
deleted file mode 100644
index c9a299b96c2a..000000000000
--- a/website/src/components/Playground/PlaygroundEditor.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import PlaygroundLiveEditor from './PlaygroundLiveEditor';
-import PlaygroundMonacoEditor from './PlaygroundMonacoEditor';
-
-// Always use Monaco editor wrapper - mobile/bot check happens inside
-// This avoids hydration mismatch from module-level navigator checks
-const PlaygroundEditor = PlaygroundMonacoEditor;
-export default PlaygroundEditor;
-
-// Re-export for use as fallback inside Monaco editor
-export { PlaygroundLiveEditor };
diff --git a/website/src/components/Playground/PlaygroundLiveEditor.tsx b/website/src/components/Playground/PlaygroundLiveEditor.tsx
deleted file mode 100644
index 5ecfc3cec133..000000000000
--- a/website/src/components/Playground/PlaygroundLiveEditor.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { memo } from 'react';
-import { LiveEditor } from 'react-live';
-
-const MemoEditor = memo(LiveEditor);
-
-export default function PlaygroundLiveEditor({
-  onChange,
-  code,
-}: {
-  onChange: (value: string) => void;
-  code: string;
-}) {
-  return ;
-}
diff --git a/website/src/components/Playground/PlaygroundMonacoEditor.tsx b/website/src/components/Playground/PlaygroundMonacoEditor.tsx
deleted file mode 100644
index 574b765c7e93..000000000000
--- a/website/src/components/Playground/PlaygroundMonacoEditor.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import Editor from '@monaco-editor/react';
-import type { ISelection } from 'monaco-editor';
-import type * as Monaco from 'monaco-editor';
-import rangeParser from 'parse-numeric-range';
-import { memo, useCallback, useMemo } from 'react';
-import { LiveEditor } from 'react-live';
-import './monaco-init';
-
-import { extensionToMonacoLanguage } from './extensionToMonacoLanguage';
-import { isMobileOrBot } from './isMobileOrBot';
-import { options } from './monacoOptions';
-import PlaygroundLiveEditor from './PlaygroundLiveEditor';
-import useAutoHeight from './useAutoHeight';
-
-// TODO: consider using the ts worker's getEmitOutput to compile rather than babel
-
-function PlaygroundMonacoEditor({
-  onChange,
-  code,
-  path = '',
-  onFocus,
-  tabIndex,
-  highlights,
-  autoFocus = false,
-  isFocused = false,
-  language = 'tsx',
-  readOnly = false,
-}: {
-  onChange: (value: string | undefined) => void;
-  code: string;
-  path?: string;
-  onFocus: (tabIndex: number) => void;
-  tabIndex: number;
-  highlights?: string;
-  autoFocus?: boolean;
-  isFocused?: boolean;
-  language?: string;
-  readOnly?: boolean;
-}) {
-  const editorOptions = useMemo(() => ({ ...options, readOnly }), [readOnly]);
-  const { height, handleMount: handleAutoMount } = useAutoHeight({
-    initialContentHeight: code.split('\n').length * editorOptions.lineHeight,
-    isFocused,
-  });
-
-  const handleMount = useCallback((editor: Monaco.editor.ICodeEditor) => {
-    // autofocus
-    if (autoFocus) editor.focus();
-    // autohighlight
-    const myhighlights = highlights ? rangeParser(highlights) : undefined;
-
-    if (myhighlights) {
-      let selectionStartLineNumber = myhighlights[0];
-      let positionLineNumber = selectionStartLineNumber;
-      const selections: ISelection[] = [];
-      myhighlights.forEach(lineNumber => {
-        // more of same selection
-        if (lineNumber === positionLineNumber) {
-          positionLineNumber++;
-        } else {
-          selections.push({
-            selectionStartLineNumber,
-            selectionStartColumn: 0,
-            positionLineNumber,
-            positionColumn: 0,
-          });
-          selectionStartLineNumber = lineNumber;
-          positionLineNumber = lineNumber + 1;
-        }
-      });
-      selections.push({
-        selectionStartLineNumber,
-        selectionStartColumn: 0,
-        positionLineNumber,
-        positionColumn: 0,
-      });
-      editor.setSelections(selections);
-    }
-
-    // go to definition
-    editor.onDidFocusEditorText(() => {
-      onFocus(tabIndex);
-    });
-
-    handleAutoMount(editor);
-  }, []);
-
-  // loading only shows the initial snapshot, so it need not track code changes
-  const loading = useMemo(
-    () => ,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [language],
-  );
-
-  // Use lightweight editor for mobile/bots
-  // This runs inside BrowserOnly, so navigator is always defined
-  // Check must be after hooks to satisfy React's rules of hooks
-  if (isMobileOrBot()) {
-    return ;
-  }
-
-  return (
-    
-  );
-}
-export default memo(PlaygroundMonacoEditor);
diff --git a/website/src/components/Playground/README.md b/website/src/components/Playground/README.md
new file mode 100644
index 000000000000..3b3ad6dbac29
--- /dev/null
+++ b/website/src/components/Playground/README.md
@@ -0,0 +1,126 @@
+# Playground
+
+Live, editable code examples for the docs, blog and homepage. Read this before
+changing anything here: most of the complexity exists to keep pages fast,
+indexable and hydration-safe, and those behaviors are easy to drop silently.
+
+## Entry points
+
+| Component | Used by | What it renders |
+| --- | --- | --- |
+| `HooksPlayground` (`../HooksPlayground.tsx`) → `Playground` (`index.tsx`) | MDX docs/blog, homepage `Demo` | Editor + live preview + Store inspector |
+| `TypeScriptEditor` (`../TypeScriptEditor.tsx`) | MDX | Editor only (`variant="standalone"`) |
+| `EndpointPlayground` (`../HTTP/EndpointPlayground.tsx`) | MDX | Editor + static HTTP request/response |
+| `DiffEditor` (`../DiffEditor.tsx` → `../DiffEditorMonaco.tsx`) | MDX | Read-only Monaco diff of two fences |
+| `Demo/CodeEditor` (`../Demo/CodeEditor.tsx`) | Homepage | One `HooksPlayground` per protocol tab |
+
+## Layout
+
+```
+index.tsx           Playground: code model, editor/preview ordering, hidden handling
+userAgent.ts        isBot / isMobileOrBot gates
+Boundary.tsx        BrowserOnly + Suspense with one fallback for SSR and loading
+Header.tsx, TabList.tsx, styles.module.css   shared chrome (also used by HTTP/, Demo/)
+editor/             code model + editor UI
+  codeModel.ts        parse MDX fences/strings into documents; edits
+  EditorShell.tsx     react-live LiveProvider supplying the Prism theme
+  EditorSurface.tsx   headers, file tabs, collapse state, per-file TextEditTab
+  StaticEditor.tsx    SSR/crawler/loading markup (Prism, not editable)
+  InteractiveEditor.tsx  client-only: Monaco, or editable react-live on mobile/bots
+monaco/             everything Monaco-specific
+  setup.ts            side-effect init: CDN loader, hints, compiler options, theme, types
+  typeLibs.ts         raw .d.ts chunks from editor-types/ → addExtraLib
+  navigation.ts       cross-tab go-to-definition + import completions
+  modelPath.ts        `//` model URI scheme
+  preloadManifest.ts  GENERATED by website/scripts/generateMonacoPreloads.cjs
+  resourceHints.ts, theme.ts, options.ts, language.ts, useAutoHeight.ts, highlightSelections.ts
+preview/            live execution (loaded lazily, never on the server)
+  LivePreview.tsx     react-live LiveProvider with scope + transformCode
+  Preview.tsx         DataProvider + MockResolver(fixtures) + Store inspector
+  ...
+editor-types/       .d.ts bundles fed to Monaco (raw-loader)
+DesignSystem/       components injected into preview scope
+```
+
+## Invariants
+
+### SSR / SSG and crawlers
+
+- Open files' source is in the static HTML: `TextEditTab` renders
+  `StaticEditor` on the server and during hydration (BrowserOnly fallback).
+  Collapsed/unselected files render nothing until opened.
+- The preview renders `previewLoading` (empty frame + Store toggle) on the
+  server, while loading, for bots, and while `hidden`.
+- Fixtures render server-side as JSON `CodeBlock`s; function responses are
+  BrowserOnly (a stringified function differs between server and client
+  bundles).
+- Never branch on `navigator`/user agent during render outside `BrowserOnly`
+  (hydration mismatch). `isBot` is module-level and only read in the
+  `lazy()` factory (and in StackBlitz after intersection); `isMobileOrBot()`
+  is only called inside BrowserOnly or in `monaco/setup.ts`.
+
+### Incremental JS delivery
+
+- `monaco/setup.ts` runs once when the editor chunk evaluates: injects
+  preload/prefetch ``s for the version-matched CDN files, starts
+  `loader.init()` and the type-lib chunk downloads in parallel.
+  `preloadManifest.ts` is regenerated on every docusaurus config load.
+- Type libs: one webpack chunk per third-party `.d.ts` (`reactDTS`, …) and a
+  single `lazy-once` chunk for `editor-types/@data-client/*`. Failed fetches
+  degrade to empty libs. `website/raw-plugin.js` silences the expected
+  "expression in import" warning for `monaco/typeLibs.ts` by path.
+- Preview code is a lazy chunk (`PreviewWithScope`, prefetched) and
+  `PreviewBlock` a nested lazy chunk (preloaded with its parent).
+- Mobile and bots download none of Monaco or the type libs.
+
+### Mobile and bots
+
+- Mobile: editable react-live editor instead of Monaco; live preview still runs.
+- Bots: same editor fallback; preview stays `previewLoading` (never loads
+  `LivePreview`); StackBlitz embeds never load.
+- `DiffEditor` shows a two-`CodeBlock` grid instead of Monaco.
+
+### Hidden playgrounds (homepage Demo protocol tabs)
+
+- All protocols stay mounted so every protocol's source is in the HTML.
+- `hidden` keeps `StaticEditor` (no Monaco) until first shown, then latches
+  interactive so undo history and go-to-definition survive tab switches.
+- The live preview unmounts while hidden (its store resets).
+
+### Editor
+
+- Fence metastring: `title="…"`, `path="…"`, `collapsed`, `column`, `{1-3}`
+  highlight ranges (pre-selected in Monaco); `language-*` class. Element props
+  override metastring values (Demo passes them directly). `defaultTab`
+  overrides `collapsed`.
+- `row` layout: non-`column` files are tabs (focus switches tab); `column`
+  files stack with collapsible headers. Stacked layout: every titled file gets a header,
+  collapsible when there are several files or fixtures.
+- Collapsed/unselected files stay mounted (`display: none`), never unmounted:
+  their Monaco models must exist for cross-file types, go-to-definition and
+  to keep edits. Monaco is uncontrolled (`defaultValue`), so re-renders never
+  reset the buffer.
+- Fixtures are listed above the editor in stacked layout only.
+- Go-to-definition across files: focusing the target editor reveals its tab.
+  Relies on the `//` model URIs (`monaco/modelPath.ts`).
+- Handlers passed to `InteractiveEditor` are referentially stable so unedited
+  tabs skip re-rendering on keystrokes.
+- Height follows Monaco content size and re-measures when a tab is shown.
+
+### Preview
+
+- All documents are concatenated (deferred with `useDeferredValue`),
+  stripped of imports/exports by `transformCode`, and run `noInline`
+  (`render()`) with `preview/scope.ts` as globals. Keep
+  `monaco/typeLibs.ts` declarations in sync with the scope.
+- Each playground gets its own `DataProvider` store (`MockResolver` serves
+  `fixtures`); `memo(Preview)` keeps it from re-rendering on code edits.
+- Store inspector open state persists per `groupId` via tab storage and
+  avoids scroll jumps; in `row` layout it replaces the result while open.
+- Third-party console noise is demoted only while previews are mounted
+  (`usePlaygroundConsoleDemotion`); never add first-party matchers.
+
+## Tests
+
+`yarn test --selectProjects ReactDOM --testPathPatterns website/src/components/Playground`
+(CI persists only this directory of the website for these tests.)
diff --git a/website/src/components/Playground/editor/EditorShell.tsx b/website/src/components/Playground/editor/EditorShell.tsx
index 2b634d720d8b..864c9010d353 100644
--- a/website/src/components/Playground/editor/EditorShell.tsx
+++ b/website/src/components/Playground/editor/EditorShell.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { LiveProvider } from 'react-live';
 
-import { useReactLiveTheme } from '../useReactLiveTheme';
+import { useReactLiveTheme } from './useReactLiveTheme';
 
 export default function EditorShell({
   children,
diff --git a/website/src/components/Playground/editor/EditorSurface.tsx b/website/src/components/Playground/editor/EditorSurface.tsx
index 48a7d4a58a6d..beb72e97fb6a 100644
--- a/website/src/components/Playground/editor/EditorSurface.tsx
+++ b/website/src/components/Playground/editor/EditorSurface.tsx
@@ -1,20 +1,17 @@
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import Translate from '@docusaurus/Translate';
 import clsx from 'clsx';
-import React, {
-  type ComponentProps,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { LiveEditor } from 'react-live';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import Header from '../Header';
-import Editor from '../PlaygroundEditor';
+import { modelPath, useModelId } from '../monaco/modelPath';
 import styles from '../styles.module.css';
 import TabList from '../TabList';
 import type { CodeDocument, CodeModel } from './codeModel';
+import InteractiveEditor, {
+  type InteractiveEditorProps,
+} from './InteractiveEditor';
+import StaticEditor from './StaticEditor';
 
 export interface EditorSurfaceProps extends CodeModel {
   layout: 'row' | 'stacked';
@@ -34,7 +31,7 @@ export default function EditorSurface({
   fixtureContent,
   headerControls,
 }: EditorSurfaceProps) {
-  const id = useNumericId();
+  const id = useModelId();
   const row = layout === 'row';
   const [closedList, setClosed] = useState(() =>
     documents.map(({ collapsed }) => collapsed),
@@ -42,7 +39,7 @@ export default function EditorSurface({
 
   // Document count and col flags are fixed after the initial parse, so
   // capturing them once keeps these handlers referentially stable. That
-  // stability is what lets memo(PlaygroundMonacoEditor) skip re-rendering
+  // stability is what lets memo(InteractiveEditor) skip re-rendering
   // unedited tabs on every keystroke.
   const colFlags = useRef(documents.map(({ col }) => col)).current;
   const handleTabSwitch = useCallback(
@@ -114,7 +111,7 @@ export default function EditorSurface({
             }
             onChange={handleChanges[index]}
             code={document.value}
-            path={`/${id}/${document.path}`}
+            path={modelPath(id, document.path)}
             isFocused={!closedList[index]}
             language={document.language}
             highlights={document.highlights}
@@ -129,32 +126,20 @@ export default function EditorSurface({
 function TextEditTab({
   hidden,
   interactive,
-  code,
-  language,
-  tabIndex,
-  ...rest
-}: ComponentProps & {
+  ...editorProps
+}: InteractiveEditorProps & {
   hidden: boolean;
   interactive: boolean;
 }) {
-  // Stable across SSR/hydration (do not branch on navigator / isGoogleBot here).
-  const staticView = ;
-
-  // Deferred protocols: keep open-file source in the DOM for SSG/crawlers;
-  // skip Monaco until the sandbox has been shown once.
-  if (!interactive) {
-    return (
-      

-        {hidden ? null : staticView}
-      

+  // SSR + hydration markup: open tabs' source stays in the HTML for crawlers.
+  // Never branch on navigator / user agent outside BrowserOnly.
+  const staticView =
+    hidden ? null : (
+      
     );
-  }
-
-  const fallback = hidden ? <> : staticView;
 
   return (
     

-      
-        {() => (
-          
-        )}
-      
+      {/* Not yet interactive (e.g. never-shown Demo tab): skip Monaco entirely */}
+      {interactive ?
+        
+          {() => }
+        
+      : staticView}
     

   );
 }
@@ -269,11 +250,3 @@ function EditorHeader({
     
   );
 }
-
-// Monaco model URIs are matched with /\/\d+\// in monaco-init.ts.
-function useNumericId() {
-  return useMemo(
-    () => Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(),
-    [],
-  );
-}
diff --git a/website/src/components/Playground/editor/InteractiveEditor.tsx b/website/src/components/Playground/editor/InteractiveEditor.tsx
new file mode 100644
index 000000000000..46c268ab1b1e
--- /dev/null
+++ b/website/src/components/Playground/editor/InteractiveEditor.tsx
@@ -0,0 +1,97 @@
+import Editor from '@monaco-editor/react';
+import type * as Monaco from 'monaco-editor';
+import { memo, useCallback, useMemo } from 'react';
+import { LiveEditor } from 'react-live';
+
+import '../monaco/setup';
+import { highlightSelections } from '../monaco/highlightSelections';
+import { extensionToMonacoLanguage } from '../monaco/language';
+import { options } from '../monaco/options';
+import { MONACO_THEME } from '../monaco/theme';
+import useAutoHeight from '../monaco/useAutoHeight';
+import { isMobileOrBot } from '../userAgent';
+import StaticEditor from './StaticEditor';
+
+// TODO: consider using the ts worker's getEmitOutput to compile rather than babel
+
+const MobileEditor = memo(LiveEditor);
+
+export interface InteractiveEditorProps {
+  onChange: (value: string | undefined) => void;
+  code: string;
+  /** Monaco model path (see ../monaco/modelPath.ts) */
+  path?: string;
+  /** Called with tabIndex whenever this editor gains focus */
+  onFocus: (tabIndex: number) => void;
+  tabIndex: number;
+  /** Code-fence line ranges to pre-select, e.g. `1-3,5` */
+  highlights?: string;
+  autoFocus?: boolean;
+  /** Whether this tab is visible; re-measures height when it becomes so */
+  isFocused?: boolean;
+  language?: string;
+}
+
+/**
+ * Client-only (render inside BrowserOnly): Monaco on desktop, an editable
+ * react-live editor on mobile/bots.
+ */
+function InteractiveEditor({
+  onChange,
+  code,
+  path = '',
+  onFocus,
+  tabIndex,
+  highlights,
+  autoFocus = false,
+  isFocused = false,
+  language = 'tsx',
+}: InteractiveEditorProps) {
+  const { height, handleMount: handleAutoMount } = useAutoHeight({
+    initialContentHeight: code.split('\n').length * options.lineHeight,
+    isFocused,
+  });
+
+  // Mount-time setup only: props read here are fixed for the editor's life
+  const handleMount = useCallback((editor: Monaco.editor.ICodeEditor) => {
+    if (autoFocus) editor.focus();
+    if (highlights) {
+      const selections = highlightSelections(highlights);
+      if (selections.length) editor.setSelections(selections);
+    }
+    // Focus reveals this tab (also how cross-tab go to definition lands)
+    editor.onDidFocusEditorText(() => {
+      onFocus(tabIndex);
+    });
+    handleAutoMount(editor);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // loading only shows the initial snapshot, so it need not track code changes
+  const loading = useMemo(
+    () => ,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [language],
+  );
+
+  // After hooks to satisfy the rules of hooks; safe because we only render
+  // client-side, so navigator is defined and hydration is already done.
+  if (isMobileOrBot()) {
+    return ;
+  }
+
+  return (
+    
+  );
+}
+export default memo(InteractiveEditor);
diff --git a/website/src/components/Playground/editor/StaticEditor.tsx b/website/src/components/Playground/editor/StaticEditor.tsx
new file mode 100644
index 000000000000..0a8a100fd8d8
--- /dev/null
+++ b/website/src/components/Playground/editor/StaticEditor.tsx
@@ -0,0 +1,16 @@
+import { LiveEditor } from 'react-live';
+
+/**
+ * Prism-highlighted, non-editable code. Renders identically on server and
+ * client, so it is the SSG/crawler markup and the placeholder until Monaco
+ * mounts. Needs an EditorShell ancestor for its theme.
+ */
+export default function StaticEditor({
+  code,
+  language,
+}: {
+  code: string;
+  language: string;
+}) {
+  return ;
+}
diff --git a/website/src/components/Playground/useReactLiveTheme.tsx b/website/src/components/Playground/editor/useReactLiveTheme.ts
similarity index 100%
rename from website/src/components/Playground/useReactLiveTheme.tsx
rename to website/src/components/Playground/editor/useReactLiveTheme.ts
diff --git a/website/src/components/Playground/index.tsx b/website/src/components/Playground/index.tsx
index 4ec2a4d9cae9..08ff50827bb0 100644
--- a/website/src/components/Playground/index.tsx
+++ b/website/src/components/Playground/index.tsx
@@ -7,22 +7,27 @@ import Boundary from './Boundary';
 import { useCodeDocuments } from './editor/codeModel';
 import EditorShell from './editor/EditorShell';
 import EditorSurface from './editor/EditorSurface';
-import FixturePreview from './FixturePreview';
-import { isGoogleBot } from './isMobileOrBot';
+import FixturePreview from './preview/FixturePreview';
 import type LivePreviewType from './preview/LivePreview';
-import PreviewWrapper from './PreviewWrapper';
-import { StoreToggle } from './StoreInspector';
+import PreviewWrapper from './preview/PreviewWrapper';
+import { StoreToggle } from './preview/StoreInspector';
 import styles from './styles.module.css';
-import type { FixtureOrInterceptor, PreviewProps } from './types';
+import type { FixtureOrInterceptor } from './types';
+import { isBot } from './userAgent';
 
 export interface PlaygroundProps {
   children: React.ReactNode;
+  /** Tab-storage key for the Store inspector's open/closed choice */
   groupId?: string;
+  /** Store inspector open by default */
   defaultOpen?: 'y' | 'n';
+  /** Tabs for files + editor beside preview (when wide enough) */
   row?: boolean;
+  /** Inactive (e.g. unselected Demo tab): no Monaco until first shown, no preview */
   hidden?: boolean;
   fixtures?: FixtureOrInterceptor[];
   getInitialInterceptorData?: () => T;
+  /** Title of the file tab to open; overrides `collapsed` metastrings */
   defaultTab?: string;
   headerControls?: React.ReactNode;
 }
@@ -38,51 +43,10 @@ export default function Playground({
   defaultTab,
   headerControls,
 }: PlaygroundProps) {
-  const {
-    liveCodeBlock: { playgroundPosition },
-  } = useDocusaurusContext().siteConfig.themeConfig as any;
+  const { playgroundPosition } = (
+    useDocusaurusContext().siteConfig.themeConfig as any
+  ).liveCodeBlock;
 
-  return (
-    

-      

-        
-      

-    

-  );
-}
-
-function PlaygroundContent({
-  reverse,
-  children,
-  row,
-  hidden,
-  fixtures,
-  groupId,
-  defaultOpen,
-  defaultTab,
-  getInitialInterceptorData,
-  headerControls,
-}: ContentProps) {
   const model = useCodeDocuments(children, defaultTab);
   // Defer preview transpilation so editor input remains responsive.
   const code = useDeferredValue(
@@ -113,7 +77,7 @@ function PlaygroundContent({
   const preview =
     hidden ? previewLoading : (
       
-        ({
       
     );
 
-  return <>{reverse ? [preview, editor] : [editor, preview]};
-}
-
-interface ContentProps extends PreviewProps {
-  children: PlaygroundProps['children'];
-  reverse: boolean;
-  hidden: boolean;
-  defaultTab?: string;
-  headerControls?: React.ReactNode;
+  return (
+    

+      

+        {playgroundPosition === 'top' ? [preview, editor] : [editor, preview]}
+      

+    

+  );
 }
 
+/** SSR, crawler, hidden and loading state: empty preview frame + Store toggle */
 const previewLoading = (
   
     

@@ -142,8 +113,8 @@ const previewLoading = (
   
 );
 
-const PreviewWithScopeLazy = lazy(() =>
-  isGoogleBot ?
+const LivePreview = lazy(() =>
+  isBot ?
     Promise.resolve({ default: () => previewLoading })
   : import(
       /* webpackChunkName: 'PreviewWithScope', webpackPrefetch: true */ './preview/LivePreview'
diff --git a/website/src/components/Playground/isMobileOrBot.ts b/website/src/components/Playground/isMobileOrBot.ts
deleted file mode 100644
index dedfedf8eb28..000000000000
--- a/website/src/components/Playground/isMobileOrBot.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/** Shared user-agent patterns for bot/mobile detection. */
-export const BOT_UA_REGEX = /bot|googlebot|crawler|spider|robot|crawling/i;
-export const MOBILE_OR_BOT_UA_REGEX =
-  /bot|googlebot|crawler|spider|robot|crawling|Mobile|Android|BlackBerry/i;
-
-/** True if crawler/bot (SSR-safe). Used for skipping Monaco/Preview load. */
-export const isGoogleBot =
-  typeof navigator === 'object' &&
-  BOT_UA_REGEX.test(navigator?.userAgent ?? '');
-
-/** Check if current browser is mobile or a bot - must be called client-side only */
-export function isMobileOrBot(): boolean {
-  return MOBILE_OR_BOT_UA_REGEX.test(navigator.userAgent);
-}
diff --git a/website/src/components/Playground/monaco-init.ts b/website/src/components/Playground/monaco-init.ts
deleted file mode 100644
index 44b8d3b17919..000000000000
--- a/website/src/components/Playground/monaco-init.ts
+++ /dev/null
@@ -1,362 +0,0 @@
-import { loader } from '@monaco-editor/react';
-import type * as Monaco from 'monaco-editor';
-
-import { injectMonacoResourceHints } from './injectMonacoResourceHints';
-import { MOBILE_OR_BOT_UA_REGEX } from './isMobileOrBot';
-import { MONACO_CDN_VS } from './monacoPreloadManifest';
-
-// Mobile and bots render PlaygroundLiveEditor instead, so skip downloading
-// Monaco and the type bundles entirely. This module runs once per page load.
-if (
-  typeof window !== 'undefined' &&
-  !MOBILE_OR_BOT_UA_REGEX.test(navigator.userAgent)
-) {
-  const rhDeps = [
-    'rest',
-    'rest/next',
-    'react/next',
-    'core/next',
-    'core',
-    'react',
-    'endpoint',
-    'normalizr',
-    'graphql',
-  ] as const;
-
-  const suggestionDependencies = [
-    'react',
-    '@data-client/rest',
-    '@data-client/react',
-    '@data-client/graphql',
-    'bignumber.js',
-  ];
-
-  injectMonacoResourceHints();
-  loader.config({
-    paths: {
-      vs: MONACO_CDN_VS,
-    },
-  });
-  const monacoPromise = loader.init();
-
-  // Fetch type libs in parallel with Monaco CDN bootstrap (no webpackPreload —
-  // that raced high-priority against editor.main). Apply them only after init.
-  const typeLibsPromise = Promise.allSettled([
-    import(
-      /* webpackChunkName: 'reactDTS' */ '!!raw-loader?esModule=false!./editor-types/react.d.ts'
-    ),
-    import(
-      /* webpackChunkName: 'bignumberDTS' */ '!!raw-loader?esModule=false!./editor-types/bignumber.d.ts'
-    ),
-    import(
-      /* webpackChunkName: 'numberflowDTS' */ '!!raw-loader?esModule=false!./editor-types/@number-flow/react.d.ts'
-    ),
-    import(
-      /* webpackChunkName: 'temporalDTS' */ '!!raw-loader?esModule=false!./editor-types/temporal.d.ts'
-    ),
-    import(
-      /* webpackChunkName: 'uuidDTS' */ '!!raw-loader?esModule=false!./editor-types/uuid.d.ts'
-    ),
-    import(
-      /* webpackChunkName: 'qsDTS' */ '!!raw-loader?esModule=false!./editor-types/qs.d.ts'
-    ),
-    import(
-      /* webpackChunkName: 'globalsDTS' */ '!!raw-loader?esModule=false!./editor-types/globals.d.ts'
-    ),
-    ...rhDeps.map(
-      dep =>
-        import(
-          /* webpackChunkName: '[request]', webpackMode: "lazy-once" */ `!!raw-loader?esModule=false!./editor-types/@data-client/${dep}.d.ts`
-        ),
-    ),
-  ]);
-
-  monacoPromise.then(async monaco => {
-    if (!monaco) return;
-    monaco.typescript.typescriptDefaults.setCompilerOptions({
-      allowNonTsExtensions: true,
-      target: monaco.typescript.ScriptTarget.ES2017,
-      jsx: monaco.typescript.JsxEmit.ReactJSX,
-      strict: true,
-      strictNullChecks: true,
-      exactOptionalPropertyTypes: true,
-      lib: ['dom', 'esnext'],
-      module: monaco.typescript.ModuleKind.ESNext,
-      moduleResolution: monaco.typescript.ModuleResolutionKind.NodeJs,
-      allowSyntheticDefaultImports: true,
-      skipLibCheck: true,
-      skipDefaultLibCheck: true,
-      noImplicitAny: false,
-    });
-    // TODO: load theme from docusaurus config so we eliminate DRY violation
-    // see https://microsoft.github.io/monaco-editor/playground.html for full options
-    monaco.editor.defineTheme('prism', {
-      base: 'vs-dark',
-      inherit: true,
-      rules: [
-        { token: 'number', foreground: 'f78c6c' },
-        { token: 'string', foreground: 'b6d986' },
-        {
-          token: 'keyword',
-          fontStyle: 'italic',
-          foreground: '7da4f6',
-        },
-        // type definitions variables like const X or class X
-        { token: 'type', foreground: 'ffcb6b' },
-        { token: 'delimiter', foreground: 'C792EA' },
-
-        { token: 'tag', foreground: 'FF5590' },
-      ],
-      colors: {
-        //'editor.background': '#292d3e',
-        'editor.foreground': '#bfc7d5',
-        //'editor.lineHighlightBorder': '#33384d',
-        'editor.inactiveSelectionBackground': '#484d5b',
-      },
-    });
-    // go to definition
-    monaco.editor.registerEditorOpener({
-      openCodeEditor(
-        _sourceEditor: Monaco.editor.ICodeEditor,
-        resource: Monaco.Uri,
-        selectionOrPosition?: Monaco.IRange | Monaco.IPosition,
-      ) {
-        if (resource.path.startsWith('/')) {
-          // alternatively set model directly in the editor if you have your own tab/navigation implementation\
-          const model = monaco.editor.getModel(resource);
-          const destinationEditor = monaco.editor
-            .getEditors()
-            .find(
-              (editor: Monaco.editor.ICodeEditor) =>
-                editor.getModel() === model,
-            );
-          if (!destinationEditor) return false;
-          // focus event is handled by editor to show that tab
-          destinationEditor.focus();
-          requestIdleCallback(() => {
-            if (monaco.Range.isIRange(selectionOrPosition)) {
-              destinationEditor.revealRangeInCenterIfOutsideViewport(
-                selectionOrPosition,
-              );
-              destinationEditor.setSelection(selectionOrPosition);
-            } else {
-              if (selectionOrPosition) {
-                destinationEditor.revealPositionInCenterIfOutsideViewport(
-                  selectionOrPosition,
-                );
-                destinationEditor.setPosition(selectionOrPosition);
-              }
-            }
-            destinationEditor.focus();
-          });
-
-          return true;
-        }
-        return false;
-      },
-    });
-    // autocomplete imports
-    monaco.languages.registerCompletionItemProvider('typescript', {
-      // These characters should trigger our `provideCompletionItems` function
-      triggerCharacters: ["'", '"', '.', '/'],
-      // Function which returns a list of autocompletion ietems. If we return an empty array, there won't be any autocompletion.
-      provideCompletionItems: (
-        model: Monaco.editor.ITextModel,
-        position: Monaco.Position,
-      ) => {
-        // Get all the text content before the cursor
-        const textUntilPosition = model.getValueInRange({
-          startLineNumber: 1,
-          startColumn: 1,
-          endLineNumber: position.lineNumber,
-          endColumn: position.column,
-        });
-        // Get the current word
-        const word = model.getWordUntilPosition(position);
-        const range = {
-          startLineNumber: position.lineNumber,
-          endLineNumber: position.lineNumber,
-          startColumn: word.startColumn,
-          endColumn: word.endColumn,
-        };
-        // Match things like `from "` and `require("`
-        if (
-          /(([\s|\n]+from\s+)|(\brequire\b\s*\())["|'][^'^"]*$/.test(
-            textUntilPosition,
-          )
-        ) {
-          // It's probably a `import` statement or `require` call
-          if (
-            textUntilPosition.endsWith('.') ||
-            textUntilPosition.endsWith('/')
-          ) {
-            const completions = monaco.editor
-              .getModels()
-              .map(
-                (editorModel: Monaco.editor.ITextModel) => editorModel.uri.path,
-              )
-              .map((path: string) => {
-                const candidateId = /\/\d+\//g.exec(path)?.[0] ?? '';
-                const file = path.substring(candidateId.length - 1);
-                return {
-                  // Show the full file path for label
-                  label: file,
-                  // Don't keep extension for JS files
-                  insertText: file.replace(/\.tsx?$/, ''),
-                  kind: monaco.languages.CompletionItemKind.Module,
-                  range,
-                };
-              });
-            if (!completions.length) return { suggestions: [] };
-            return { suggestions: completions };
-          } else {
-            // User is trying to import a dependency
-            return {
-              suggestions: suggestionDependencies.map(name => ({
-                label: name,
-                //detail: suggestionDependencies[name],
-                kind: monaco.languages.CompletionItemKind.Module,
-                insertText: name,
-                range,
-              })),
-            };
-          }
-        }
-        return { suggestions: [] };
-      },
-    });
-
-    const settles = await typeLibsPromise;
-    const [
-      react,
-      bignumber,
-      numberFlow,
-      temporal,
-      uuid,
-      qs,
-      globals,
-      ...rhLibs
-    ] = settles.map(result =>
-      result.status === 'fulfilled' ? result.value.default : '',
-    );
-
-    monaco.typescript.typescriptDefaults.addExtraLib(
-      `declare module "react/jsx-runtime" {
-        import './';
-      }`,
-      'file:///node_modules/@types/react/jsx-runtime.d.ts',
-    );
-    monaco.typescript.typescriptDefaults.addExtraLib(
-      `import * as React from 'react'
-
-    declare global {
-      namespace JSX {
-        interface IntrinsicElements {
-          strike: React.DetailedHTMLProps, HTMLElement>;
-        }
-      }
-    }`,
-      'file:///node_modules/@types/react/more.d.ts',
-    );
-    monaco.typescript.typescriptDefaults.addExtraLib(
-      `declare function render(component:JSX.Element):void;
-        declare function uuid(): string;
-        declare function CurrentTime(props: {}):JSX.Element;
-        declare function CancelButton(props: { onClick?: () => void }):JSX.Element;
-        declare function Avatar(props: { src: string }):JSX.Element;
-        declare function Formatted({ downColor, formatter, formatterFn, timeout, transition, transitionLength, upColor, value, stylePrefix, }: NumberProps):JSX.Element
-        declare function ResetableErrorBoundary(props: { children: React.ReactNode }):JSX.Element;
-        declare function TextInput(props:Omit, 'size'> & { label?: React.ReactNode; loading?: boolean; size?: 'large' | 'medium' | 'small'; }):JSX.Element;
-        declare function TextArea(props:InputHTMLAttributes & { label?: React.ReactNode;}):JSX.Element;
-        declare function SearchIcon():JSX.Element;
-        declare function Loading():JSX.Element;
-        declare function randomFloatInRange(min: number, max: number, decimals?: number): number;
-        declare interface NumberProps {
-          /**
-           * Color value when the component flashes 'down'.
-           */
-          downColor?: string;
-          /**
-           * One of the built in formatters.
-           */
-          formatter?: 'currency' | 'percentage' | 'number';
-          /**
-           * Pass your own formatter function.
-           */
-          formatterFn?: Formatter;
-          /**
-           * Prefix for the CSS selectors in the DOM.
-           */
-          stylePrefix?: string;
-          /**
-           * Amount of time the flashed state is visible for, in milliseconds.
-           */
-          timeout?: number;
-          /**
-           * Custom CSS transition property.
-           */
-          transition?: string;
-          /**
-           * Transition length, in milliseconds.
-           */
-          transitionLength?: number;
-          /**
-           * Color value when the component flashes 'up'.
-           */
-          upColor?: string;
-          /**
-           * Value to display. The only required prop.
-           */
-          value: number;
-        }`,
-    );
-    monaco.typescript.typescriptDefaults.addExtraLib(
-      `declare module "react" { ${react} }`,
-      'file:///node_modules/@types/react/index.d.ts',
-    );
-    monaco.typescript.typescriptDefaults.addExtraLib(
-      `declare module "bignumber.js" { ${bignumber} }`,
-      'file:///node_modules/bignumber.js/index.d.ts',
-    );
-    monaco.typescript.typescriptDefaults.addExtraLib(
-      `declare module "@number-flow/react" { ${numberFlow} };`,
-      'file:///node_modules/@number-flow/react/index.d.ts',
-    );
-    monaco.typescript.typescriptDefaults.addExtraLib(
-      `declare module "temporal-polyfill" { ${temporal} }`,
-      'file:///node_modules/temporal-polyfill/index.d.ts',
-    );
-    monaco.typescript.typescriptDefaults.addExtraLib(
-      `declare module "uuid" { ${uuid} }`,
-      'file:///node_modules/@types/uuid/index.d.ts',
-    );
-    monaco.typescript.typescriptDefaults.addExtraLib(
-      `declare module "qs" { ${qs} }`,
-      'file:///node_modules/@types/qs/index.d.ts',
-    );
-    monaco.typescript.typescriptDefaults.addExtraLib(
-      `declare globals { ${react} }`,
-    );
-    monaco.typescript.typescriptDefaults.addExtraLib(
-      `declare globals { export { default as NumberFlow } from '@number-flow/react'; }`,
-    );
-    monaco.typescript.typescriptDefaults.addExtraLib(
-      `declare globals { export { Temporal, DateTimeFormat } from 'temporal-polyfill'; }`,
-    );
-
-    rhLibs.forEach((lib, i) => {
-      const dep = rhDeps[i];
-      monaco.typescript.typescriptDefaults.addExtraLib(
-        `declare module "@data-client/${dep}" { ${lib} }`,
-        `file:///node_modules/@data-client/${dep}/index.d.ts`,
-      );
-    });
-
-    monaco.typescript.typescriptDefaults.addExtraLib(
-      `declare globals { ${globals} }`,
-    );
-
-    monaco.typescript.typescriptDefaults.setEagerModelSync(true);
-    return monaco;
-  });
-}
diff --git a/website/src/components/Playground/monaco/__tests__/highlightSelections.test.ts b/website/src/components/Playground/monaco/__tests__/highlightSelections.test.ts
new file mode 100644
index 000000000000..dd3e53cdf497
--- /dev/null
+++ b/website/src/components/Playground/monaco/__tests__/highlightSelections.test.ts
@@ -0,0 +1,24 @@
+/// 
+
+import { highlightSelections } from '../highlightSelections';
+
+const lines = (start: number, end: number) => ({
+  selectionStartLineNumber: start,
+  selectionStartColumn: 0,
+  positionLineNumber: end,
+  positionColumn: 0,
+});
+
+describe('highlightSelections', () => {
+  test('selects a single line through the start of the next', () => {
+    expect(highlightSelections('2')).toEqual([lines(2, 3)]);
+  });
+
+  test('merges consecutive lines and splits gaps', () => {
+    expect(highlightSelections('1-3,5,7-8')).toEqual([
+      lines(1, 4),
+      lines(5, 6),
+      lines(7, 9),
+    ]);
+  });
+});
diff --git a/website/src/components/Playground/monaco/__tests__/modelPath.test.ts b/website/src/components/Playground/monaco/__tests__/modelPath.test.ts
new file mode 100644
index 000000000000..5146668ab481
--- /dev/null
+++ b/website/src/components/Playground/monaco/__tests__/modelPath.test.ts
@@ -0,0 +1,16 @@
+/// 
+
+import { modelPath, stripModelId } from '../modelPath';
+
+describe('model paths', () => {
+  test('round-trips a namespaced file path', () => {
+    expect(modelPath('123', 'src/api.ts')).toBe('/123/src/api.ts');
+    expect(stripModelId(modelPath('123', 'src/api.ts'))).toBe('/src/api.ts');
+  });
+
+  test('leaves paths without an id segment unchanged', () => {
+    expect(stripModelId('/node_modules/react/index.d.ts')).toBe(
+      '/node_modules/react/index.d.ts',
+    );
+  });
+});
diff --git a/website/src/components/Playground/monaco/highlightSelections.ts b/website/src/components/Playground/monaco/highlightSelections.ts
new file mode 100644
index 000000000000..fd19b43ac24b
--- /dev/null
+++ b/website/src/components/Playground/monaco/highlightSelections.ts
@@ -0,0 +1,35 @@
+import type { ISelection } from 'monaco-editor';
+import rangeParser from 'parse-numeric-range';
+
+/**
+ * Converts a code-fence highlight range (`{1-3,5}`) into Monaco selections,
+ * merging consecutive lines into one whole-line selection each.
+ */
+export function highlightSelections(highlights: string): ISelection[] {
+  const lines = rangeParser(highlights);
+  if (!lines.length) return [];
+
+  let selectionStartLineNumber = lines[0];
+  let positionLineNumber = selectionStartLineNumber;
+  const selections: ISelection[] = [];
+  const pushSelection = () =>
+    selections.push({
+      selectionStartLineNumber,
+      selectionStartColumn: 0,
+      positionLineNumber,
+      positionColumn: 0,
+    });
+
+  lines.forEach(lineNumber => {
+    // more of same selection
+    if (lineNumber === positionLineNumber) {
+      positionLineNumber++;
+    } else {
+      pushSelection();
+      selectionStartLineNumber = lineNumber;
+      positionLineNumber = lineNumber + 1;
+    }
+  });
+  pushSelection();
+  return selections;
+}
diff --git a/website/src/components/Playground/extensionToMonacoLanguage.tsx b/website/src/components/Playground/monaco/language.ts
similarity index 100%
rename from website/src/components/Playground/extensionToMonacoLanguage.tsx
rename to website/src/components/Playground/monaco/language.ts
diff --git a/website/src/components/Playground/monaco/modelPath.ts b/website/src/components/Playground/monaco/modelPath.ts
new file mode 100644
index 000000000000..c349573561c8
--- /dev/null
+++ b/website/src/components/Playground/monaco/modelPath.ts
@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+
+/**
+ * Monaco models are shared page-wide, so each editor surface namespaces its
+ * files as `//`. Go-to-definition and import
+ * completions (./navigation.ts) rely on this shape.
+ */
+const MODEL_ID_SEGMENT = /\/\d+\//;
+
+export function modelPath(editorId: string, filePath: string) {
+  return `/${editorId}/${filePath}`;
+}
+
+/** `/123/src/api.ts` → `/src/api.ts` (unchanged when there is no id segment) */
+export function stripModelId(path: string) {
+  const candidateId = MODEL_ID_SEGMENT.exec(path)?.[0] ?? '';
+  return path.substring(candidateId.length - 1);
+}
+
+/** Stable per-mount id. Only used client-side (inside BrowserOnly), so randomness cannot cause hydration mismatches. */
+export function useModelId() {
+  return useMemo(
+    () => Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(),
+    [],
+  );
+}
diff --git a/website/src/components/Playground/monaco/navigation.ts b/website/src/components/Playground/monaco/navigation.ts
new file mode 100644
index 000000000000..20ffdec78888
--- /dev/null
+++ b/website/src/components/Playground/monaco/navigation.ts
@@ -0,0 +1,117 @@
+import type * as Monaco from 'monaco-editor';
+
+import { stripModelId } from './modelPath';
+
+/** Packages offered when completing a bare `from '…'` specifier. */
+const SUGGESTED_DEPENDENCIES = [
+  'react',
+  '@data-client/rest',
+  '@data-client/react',
+  '@data-client/graphql',
+  'bignumber.js',
+];
+
+/**
+ * Cross-tab go-to-definition: focus the editor that owns the target model.
+ * Focusing it makes EditorSurface reveal that tab (see its onFocus handlers).
+ */
+export function registerEditorOpener(monaco: typeof Monaco) {
+  monaco.editor.registerEditorOpener({
+    openCodeEditor(
+      _sourceEditor: Monaco.editor.ICodeEditor,
+      resource: Monaco.Uri,
+      selectionOrPosition?: Monaco.IRange | Monaco.IPosition,
+    ) {
+      if (!resource.path.startsWith('/')) return false;
+
+      const model = monaco.editor.getModel(resource);
+      const destinationEditor = monaco.editor
+        .getEditors()
+        .find(
+          (editor: Monaco.editor.ICodeEditor) => editor.getModel() === model,
+        );
+      if (!destinationEditor) return false;
+      // focus event is handled by editor to show that tab
+      destinationEditor.focus();
+      requestIdleCallback(() => {
+        if (monaco.Range.isIRange(selectionOrPosition)) {
+          destinationEditor.revealRangeInCenterIfOutsideViewport(
+            selectionOrPosition,
+          );
+          destinationEditor.setSelection(selectionOrPosition);
+        } else if (selectionOrPosition) {
+          destinationEditor.revealPositionInCenterIfOutsideViewport(
+            selectionOrPosition,
+          );
+          destinationEditor.setPosition(selectionOrPosition);
+        }
+        destinationEditor.focus();
+      });
+
+      return true;
+    },
+  });
+}
+
+/**
+ * Completes import specifiers: relative paths list the page's other models
+ * (playground tabs), bare specifiers list SUGGESTED_DEPENDENCIES.
+ */
+export function registerImportCompletions(monaco: typeof Monaco) {
+  monaco.languages.registerCompletionItemProvider('typescript', {
+    triggerCharacters: ["'", '"', '.', '/'],
+    provideCompletionItems: (
+      model: Monaco.editor.ITextModel,
+      position: Monaco.Position,
+    ) => {
+      const textUntilPosition = model.getValueInRange({
+        startLineNumber: 1,
+        startColumn: 1,
+        endLineNumber: position.lineNumber,
+        endColumn: position.column,
+      });
+      const word = model.getWordUntilPosition(position);
+      const range = {
+        startLineNumber: position.lineNumber,
+        endLineNumber: position.lineNumber,
+        startColumn: word.startColumn,
+        endColumn: word.endColumn,
+      };
+      // Match things like `from "` and `require("`
+      if (
+        !/(([\s|\n]+from\s+)|(\brequire\b\s*\())["|'][^'^"]*$/.test(
+          textUntilPosition,
+        )
+      ) {
+        return { suggestions: [] };
+      }
+
+      if (textUntilPosition.endsWith('.') || textUntilPosition.endsWith('/')) {
+        return {
+          suggestions: monaco.editor
+            .getModels()
+            .map((editorModel: Monaco.editor.ITextModel) =>
+              stripModelId(editorModel.uri.path),
+            )
+            .map((file: string) => ({
+              // Show the full file path for label
+              label: file,
+              // Don't keep extension for JS files
+              insertText: file.replace(/\.tsx?$/, ''),
+              kind: monaco.languages.CompletionItemKind.Module,
+              range,
+            })),
+        };
+      }
+      // User is trying to import a dependency
+      return {
+        suggestions: SUGGESTED_DEPENDENCIES.map(name => ({
+          label: name,
+          kind: monaco.languages.CompletionItemKind.Module,
+          insertText: name,
+          range,
+        })),
+      };
+    },
+  });
+}
diff --git a/website/src/components/Playground/monacoOptions.tsx b/website/src/components/Playground/monaco/options.ts
similarity index 100%
rename from website/src/components/Playground/monacoOptions.tsx
rename to website/src/components/Playground/monaco/options.ts
diff --git a/website/src/components/Playground/monacoPreloadManifest.ts b/website/src/components/Playground/monaco/preloadManifest.ts
similarity index 100%
rename from website/src/components/Playground/monacoPreloadManifest.ts
rename to website/src/components/Playground/monaco/preloadManifest.ts
diff --git a/website/src/components/Playground/injectMonacoResourceHints.ts b/website/src/components/Playground/monaco/resourceHints.ts
similarity index 91%
rename from website/src/components/Playground/injectMonacoResourceHints.ts
rename to website/src/components/Playground/monaco/resourceHints.ts
index 363a3c8b2167..c393d725f689 100644
--- a/website/src/components/Playground/injectMonacoResourceHints.ts
+++ b/website/src/components/Playground/monaco/resourceHints.ts
@@ -1,4 +1,4 @@
-import { MONACO_CDN_VS, monacoPreloadManifest } from './monacoPreloadManifest';
+import { MONACO_CDN_VS, monacoPreloadManifest } from './preloadManifest';
 
 const RESOURCE_HINT_ATTRIBUTE = 'data-monaco-resource-hint';
 
diff --git a/website/src/components/Playground/monaco/setup.ts b/website/src/components/Playground/monaco/setup.ts
new file mode 100644
index 000000000000..11ca8ba50f37
--- /dev/null
+++ b/website/src/components/Playground/monaco/setup.ts
@@ -0,0 +1,56 @@
+/**
+ * Side-effect module: import it from any component that renders Monaco.
+ *
+ * It runs once per page load, as soon as the importing chunk evaluates (before
+ * any editor mounts), so Monaco's CDN files and our type libs download while
+ * the page hydrates. Mobile and bots never render Monaco (see ../userAgent.ts),
+ * so they skip all of these downloads.
+ */
+import { loader } from '@monaco-editor/react';
+
+import { isMobileOrBot } from '../userAgent';
+import { registerEditorOpener, registerImportCompletions } from './navigation';
+import { MONACO_CDN_VS } from './preloadManifest';
+import { injectMonacoResourceHints } from './resourceHints';
+import { definePrismTheme } from './theme';
+import { addTypeLibs, fetchTypeLibs } from './typeLibs';
+
+if (typeof window !== 'undefined' && !isMobileOrBot()) {
+  injectMonacoResourceHints();
+  loader.config({
+    paths: {
+      vs: MONACO_CDN_VS,
+    },
+  });
+  const monacoPromise = loader.init();
+
+  // Fetch type libs in parallel with Monaco CDN bootstrap (no webpackPreload —
+  // that raced high-priority against editor.main). Apply them only after init.
+  const typeLibsPromise = fetchTypeLibs();
+
+  monacoPromise.then(async monaco => {
+    if (!monaco) return;
+    monaco.typescript.typescriptDefaults.setCompilerOptions({
+      allowNonTsExtensions: true,
+      target: monaco.typescript.ScriptTarget.ES2017,
+      jsx: monaco.typescript.JsxEmit.ReactJSX,
+      strict: true,
+      strictNullChecks: true,
+      exactOptionalPropertyTypes: true,
+      lib: ['dom', 'esnext'],
+      module: monaco.typescript.ModuleKind.ESNext,
+      moduleResolution: monaco.typescript.ModuleResolutionKind.NodeJs,
+      allowSyntheticDefaultImports: true,
+      skipLibCheck: true,
+      skipDefaultLibCheck: true,
+      noImplicitAny: false,
+    });
+    definePrismTheme(monaco);
+    registerEditorOpener(monaco);
+    registerImportCompletions(monaco);
+
+    addTypeLibs(monaco, await typeLibsPromise);
+    monaco.typescript.typescriptDefaults.setEagerModelSync(true);
+    return monaco;
+  });
+}
diff --git a/website/src/components/Playground/monaco/theme.ts b/website/src/components/Playground/monaco/theme.ts
new file mode 100644
index 000000000000..5c8a2549d62f
--- /dev/null
+++ b/website/src/components/Playground/monaco/theme.ts
@@ -0,0 +1,33 @@
+import type * as Monaco from 'monaco-editor';
+
+/** Monaco theme name matching the site's Prism (palenight) code blocks. */
+export const MONACO_THEME = 'prism';
+
+// TODO: load theme from docusaurus config so we eliminate DRY violation
+// see https://microsoft.github.io/monaco-editor/playground.html for full options
+export function definePrismTheme(monaco: typeof Monaco) {
+  monaco.editor.defineTheme(MONACO_THEME, {
+    base: 'vs-dark',
+    inherit: true,
+    rules: [
+      { token: 'number', foreground: 'f78c6c' },
+      { token: 'string', foreground: 'b6d986' },
+      {
+        token: 'keyword',
+        fontStyle: 'italic',
+        foreground: '7da4f6',
+      },
+      // type definitions variables like const X or class X
+      { token: 'type', foreground: 'ffcb6b' },
+      { token: 'delimiter', foreground: 'C792EA' },
+
+      { token: 'tag', foreground: 'FF5590' },
+    ],
+    colors: {
+      //'editor.background': '#292d3e',
+      'editor.foreground': '#bfc7d5',
+      //'editor.lineHighlightBorder': '#33384d',
+      'editor.inactiveSelectionBackground': '#484d5b',
+    },
+  });
+}
diff --git a/website/src/components/Playground/monaco/typeLibs.ts b/website/src/components/Playground/monaco/typeLibs.ts
new file mode 100644
index 000000000000..eb9f9f0fa7be
--- /dev/null
+++ b/website/src/components/Playground/monaco/typeLibs.ts
@@ -0,0 +1,222 @@
+import type * as Monaco from 'monaco-editor';
+
+/**
+ * Type definitions for editor intellisense. Each is a separate webpack chunk
+ * (raw text) fetched in parallel with Monaco's CDN bootstrap; a failed fetch
+ * degrades to an empty lib rather than breaking the editor.
+ */
+
+type RawModule = Promise<{ default: string }>;
+
+/** `declare module ""` libs, mounted at file:///node_modules//index.d.ts */
+const MODULE_LIBS: readonly [
+  name: string,
+  dir: string,
+  load: () => RawModule,
+][] = [
+  [
+    'react',
+    '@types/react',
+    () =>
+      import(
+        /* webpackChunkName: 'reactDTS' */ '!!raw-loader?esModule=false!../editor-types/react.d.ts'
+      ),
+  ],
+  [
+    'bignumber.js',
+    'bignumber.js',
+    () =>
+      import(
+        /* webpackChunkName: 'bignumberDTS' */ '!!raw-loader?esModule=false!../editor-types/bignumber.d.ts'
+      ),
+  ],
+  [
+    '@number-flow/react',
+    '@number-flow/react',
+    () =>
+      import(
+        /* webpackChunkName: 'numberflowDTS' */ '!!raw-loader?esModule=false!../editor-types/@number-flow/react.d.ts'
+      ),
+  ],
+  [
+    'temporal-polyfill',
+    'temporal-polyfill',
+    () =>
+      import(
+        /* webpackChunkName: 'temporalDTS' */ '!!raw-loader?esModule=false!../editor-types/temporal.d.ts'
+      ),
+  ],
+  [
+    'uuid',
+    '@types/uuid',
+    () =>
+      import(
+        /* webpackChunkName: 'uuidDTS' */ '!!raw-loader?esModule=false!../editor-types/uuid.d.ts'
+      ),
+  ],
+  [
+    'qs',
+    '@types/qs',
+    () =>
+      import(
+        /* webpackChunkName: 'qsDTS' */ '!!raw-loader?esModule=false!../editor-types/qs.d.ts'
+      ),
+  ],
+];
+
+/** `@data-client/` libs; one lazy-once chunk for the whole directory */
+const DATA_CLIENT_ENTRIES = [
+  'rest',
+  'rest/next',
+  'react/next',
+  'core/next',
+  'core',
+  'react',
+  'endpoint',
+  'normalizr',
+  'graphql',
+] as const;
+
+/** Playground-only globals (editor-types/globals.d.ts) */
+const loadGlobals = (): RawModule =>
+  import(
+    /* webpackChunkName: 'globalsDTS' */ '!!raw-loader?esModule=false!../editor-types/globals.d.ts'
+  );
+
+/** Ambient declarations for names the preview injects via react-live scope (see ../preview/scope.ts). */
+const PREVIEW_SCOPE_DECLARATIONS = `declare function render(component:JSX.Element):void;
+        declare function uuid(): string;
+        declare function CurrentTime(props: {}):JSX.Element;
+        declare function CancelButton(props: { onClick?: () => void }):JSX.Element;
+        declare function Avatar(props: { src: string }):JSX.Element;
+        declare function Formatted({ downColor, formatter, formatterFn, timeout, transition, transitionLength, upColor, value, stylePrefix, }: NumberProps):JSX.Element
+        declare function ResetableErrorBoundary(props: { children: React.ReactNode }):JSX.Element;
+        declare function TextInput(props:Omit, 'size'> & { label?: React.ReactNode; loading?: boolean; size?: 'large' | 'medium' | 'small'; }):JSX.Element;
+        declare function TextArea(props:InputHTMLAttributes & { label?: React.ReactNode;}):JSX.Element;
+        declare function SearchIcon():JSX.Element;
+        declare function Loading():JSX.Element;
+        declare function randomFloatInRange(min: number, max: number, decimals?: number): number;
+        declare interface NumberProps {
+          /**
+           * Color value when the component flashes 'down'.
+           */
+          downColor?: string;
+          /**
+           * One of the built in formatters.
+           */
+          formatter?: 'currency' | 'percentage' | 'number';
+          /**
+           * Pass your own formatter function.
+           */
+          formatterFn?: Formatter;
+          /**
+           * Prefix for the CSS selectors in the DOM.
+           */
+          stylePrefix?: string;
+          /**
+           * Amount of time the flashed state is visible for, in milliseconds.
+           */
+          timeout?: number;
+          /**
+           * Custom CSS transition property.
+           */
+          transition?: string;
+          /**
+           * Transition length, in milliseconds.
+           */
+          transitionLength?: number;
+          /**
+           * Color value when the component flashes 'up'.
+           */
+          upColor?: string;
+          /**
+           * Value to display. The only required prop.
+           */
+          value: number;
+        }`;
+
+export interface TypeLibs {
+  modules: string[];
+  dataClient: string[];
+  globals: string;
+}
+
+/** Start every type-lib download now; resolves once all have settled. */
+export function fetchTypeLibs(): Promise {
+  const settled = (promises: RawModule[]) =>
+    Promise.allSettled(promises).then(results =>
+      results.map(result =>
+        result.status === 'fulfilled' ? result.value.default : '',
+      ),
+    );
+
+  return Promise.all([
+    settled(MODULE_LIBS.map(([, , load]) => load())),
+    settled([loadGlobals()]),
+    settled(
+      DATA_CLIENT_ENTRIES.map(
+        entry =>
+          import(
+            /* webpackChunkName: '[request]', webpackMode: "lazy-once" */ `!!raw-loader?esModule=false!../editor-types/@data-client/${entry}.d.ts`
+          ),
+      ),
+    ),
+  ]).then(([modules, [globals], dataClient]) => ({
+    modules,
+    dataClient,
+    globals,
+  }));
+}
+
+export function addTypeLibs(
+  monaco: typeof Monaco,
+  { modules, dataClient, globals }: TypeLibs,
+) {
+  const { typescriptDefaults } = monaco.typescript;
+  const react = modules[0];
+
+  typescriptDefaults.addExtraLib(
+    `declare module "react/jsx-runtime" {
+        import './';
+      }`,
+    'file:///node_modules/@types/react/jsx-runtime.d.ts',
+  );
+  typescriptDefaults.addExtraLib(
+    `import * as React from 'react'
+
+    declare global {
+      namespace JSX {
+        interface IntrinsicElements {
+          strike: React.DetailedHTMLProps, HTMLElement>;
+        }
+      }
+    }`,
+    'file:///node_modules/@types/react/more.d.ts',
+  );
+  typescriptDefaults.addExtraLib(PREVIEW_SCOPE_DECLARATIONS);
+
+  MODULE_LIBS.forEach(([name, dir], i) => {
+    typescriptDefaults.addExtraLib(
+      `declare module "${name}" { ${modules[i]} }`,
+      `file:///node_modules/${dir}/index.d.ts`,
+    );
+  });
+
+  // React, NumberFlow and Temporal are also globals in the preview scope
+  typescriptDefaults.addExtraLib(`declare globals { ${react} }`);
+  typescriptDefaults.addExtraLib(
+    `declare globals { export { default as NumberFlow } from '@number-flow/react'; }`,
+  );
+  typescriptDefaults.addExtraLib(
+    `declare globals { export { Temporal, DateTimeFormat } from 'temporal-polyfill'; }`,
+  );
+
+  DATA_CLIENT_ENTRIES.forEach((entry, i) => {
+    typescriptDefaults.addExtraLib(
+      `declare module "@data-client/${entry}" { ${dataClient[i]} }`,
+      `file:///node_modules/@data-client/${entry}/index.d.ts`,
+    );
+  });
+
+  typescriptDefaults.addExtraLib(`declare globals { ${globals} }`);
+}
diff --git a/website/src/components/Playground/useAutoHeight.tsx b/website/src/components/Playground/monaco/useAutoHeight.ts
similarity index 100%
rename from website/src/components/Playground/useAutoHeight.tsx
rename to website/src/components/Playground/monaco/useAutoHeight.ts
diff --git a/website/src/components/Playground/FixturePreview.tsx b/website/src/components/Playground/preview/FixturePreview.tsx
similarity index 95%
rename from website/src/components/Playground/FixturePreview.tsx
rename to website/src/components/Playground/preview/FixturePreview.tsx
index 2b82e937eea6..e900665a3173 100644
--- a/website/src/components/Playground/FixturePreview.tsx
+++ b/website/src/components/Playground/preview/FixturePreview.tsx
@@ -2,8 +2,8 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
 import CodeBlock from '@theme/CodeBlock';
 import { memo, type ReactElement } from 'react';
 
-import styles from './styles.module.css';
-import type { FixtureOrInterceptor } from './types';
+import styles from '../styles.module.css';
+import type { FixtureOrInterceptor } from '../types';
 
 function FixturePreview({ fixtures }: { fixtures: FixtureOrInterceptor[] }) {
   return (
diff --git a/website/src/components/Playground/preview/LivePreview.tsx b/website/src/components/Playground/preview/LivePreview.tsx
index bee9dcac8a80..7183ad4f19fc 100644
--- a/website/src/components/Playground/preview/LivePreview.tsx
+++ b/website/src/components/Playground/preview/LivePreview.tsx
@@ -1,10 +1,10 @@
 import { LiveProvider } from 'react-live';
 
+import Preview from './Preview';
+import PreviewWrapper from './PreviewWrapper';
 import { previewScope } from './scope';
+import transformCode from './transformCode';
 import { usePlaygroundConsoleDemotion } from './usePlaygroundConsoleDemotion';
-import Preview from '../Preview';
-import PreviewWrapper from '../PreviewWrapper';
-import transformCode from '../transformCode';
 import type { PreviewProps } from '../types';
 
 export interface LivePreviewProps extends PreviewProps {
diff --git a/website/src/components/Playground/Preview.tsx b/website/src/components/Playground/preview/Preview.tsx
similarity index 91%
rename from website/src/components/Playground/Preview.tsx
rename to website/src/components/Playground/preview/Preview.tsx
index 21a255592d9d..2718fcf25173 100644
--- a/website/src/components/Playground/Preview.tsx
+++ b/website/src/components/Playground/preview/Preview.tsx
@@ -9,11 +9,11 @@ import { useScrollPositionBlocker } from '@docusaurus/theme-common/internal';
 import clsx from 'clsx';
 import React, { memo, useCallback, useMemo, lazy } from 'react';
 
-import Boundary from './Boundary';
+import Boundary from '../Boundary';
 import StoreInspector from './StoreInspector';
-import styles from './styles.module.css';
-import type { PreviewProps } from './types';
-import { useTabStorage } from '../../utils/tabStorage';
+import { useTabStorage } from '../../../utils/tabStorage';
+import styles from '../styles.module.css';
+import type { PreviewProps } from '../types';
 
 function Preview({
   groupId,
diff --git a/website/src/components/Playground/PreviewBlock.tsx b/website/src/components/Playground/preview/PreviewBlock.tsx
similarity index 69%
rename from website/src/components/Playground/PreviewBlock.tsx
rename to website/src/components/Playground/preview/PreviewBlock.tsx
index 1478dc8f47d8..ddc8417681a6 100644
--- a/website/src/components/Playground/PreviewBlock.tsx
+++ b/website/src/components/Playground/preview/PreviewBlock.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { LiveError, LivePreview } from 'react-live';
 
-import Boundary from './Boundary';
-import { Loading } from './DesignSystem/Loading';
-import styles from './styles.module.css';
+import Boundary from '../Boundary';
+import { Loading } from '../DesignSystem/Loading';
+import styles from '../styles.module.css';
 
 export default function PreviewBlock() {
   return (
diff --git a/website/src/components/Playground/PreviewWrapper.tsx b/website/src/components/Playground/preview/PreviewWrapper.tsx
similarity index 87%
rename from website/src/components/Playground/PreviewWrapper.tsx
rename to website/src/components/Playground/preview/PreviewWrapper.tsx
index db5d2dc189ab..bc3586bf49ec 100644
--- a/website/src/components/Playground/PreviewWrapper.tsx
+++ b/website/src/components/Playground/preview/PreviewWrapper.tsx
@@ -1,8 +1,8 @@
 import Translate from '@docusaurus/Translate';
 import React from 'react';
 
-import Header from './Header';
-import styles from './styles.module.css';
+import Header from '../Header';
+import styles from '../styles.module.css';
 
 export default function PreviewWrapper({ children }: Props) {
   return (
diff --git a/website/src/components/Playground/StoreInspector.tsx b/website/src/components/Playground/preview/StoreInspector.tsx
similarity index 90%
rename from website/src/components/Playground/StoreInspector.tsx
rename to website/src/components/Playground/preview/StoreInspector.tsx
index 113fb8fb92e6..81d861af8e89 100644
--- a/website/src/components/Playground/StoreInspector.tsx
+++ b/website/src/components/Playground/preview/StoreInspector.tsx
@@ -2,7 +2,7 @@ import { StateContext } from '@data-client/react';
 import clsx from 'clsx';
 import React, { useContext, memo, useMemo } from 'react';
 
-import styles from './styles.module.css';
+import styles from '../styles.module.css';
 import Tree from './Tree';
 
 function StoreInspector({
@@ -24,7 +24,7 @@ function StoreInspector({
 }
 export default memo(StoreInspector);
 
-/** Toggle row shared with the preview loading fallback in ./index.tsx */
+/** Toggle row; also rendered (inert) by the preview loading fallback in ../index.tsx */
 export function StoreToggle({
   onClick,
   open = true,
diff --git a/website/src/components/Playground/Tree.tsx b/website/src/components/Playground/preview/Tree.tsx
similarity index 100%
rename from website/src/components/Playground/Tree.tsx
rename to website/src/components/Playground/preview/Tree.tsx
diff --git a/website/src/components/Playground/__tests__/transformCode.test.ts b/website/src/components/Playground/preview/__tests__/transformCode.test.ts
similarity index 100%
rename from website/src/components/Playground/__tests__/transformCode.test.ts
rename to website/src/components/Playground/preview/__tests__/transformCode.test.ts
diff --git a/website/src/components/Playground/preview/scope.ts b/website/src/components/Playground/preview/scope.ts
index 84a4a8aa6120..2bdc881be02f 100644
--- a/website/src/components/Playground/preview/scope.ts
+++ b/website/src/components/Playground/preview/scope.ts
@@ -8,7 +8,7 @@ import { v4 as uuid } from 'uuid';
 
 import ResetableErrorBoundary from '../../ResettableErrorBoundary';
 import * as designSystem from '../DesignSystem';
-import { Temporal, Intl, DateTimeFormat } from '../temporal';
+import { Temporal, Intl, DateTimeFormat } from './temporal';
 
 function randomFloatInRange(min: number, max: number, decimals: number) {
   return parseFloat((Math.random() * (max - min) + min).toFixed(decimals));
diff --git a/website/src/components/Playground/temporal.ts b/website/src/components/Playground/preview/temporal.ts
similarity index 100%
rename from website/src/components/Playground/temporal.ts
rename to website/src/components/Playground/preview/temporal.ts
diff --git a/website/src/components/Playground/transformCode.ts b/website/src/components/Playground/preview/transformCode.ts
similarity index 100%
rename from website/src/components/Playground/transformCode.ts
rename to website/src/components/Playground/preview/transformCode.ts
diff --git a/website/src/components/Playground/resources/PlaceholderBaseResource.ts b/website/src/components/Playground/resources/PlaceholderBaseResource.ts
deleted file mode 100644
index a9a048127417..000000000000
--- a/website/src/components/Playground/resources/PlaceholderBaseResource.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Entity, resource, RestEndpoint, Schema } from '@data-client/rest';
-
-export abstract class PlaceholderEntity extends Entity {
-  id = 0;
-}
-
-/** Common patterns in the https://jsonplaceholder.typicode.com API */
-export function createPlaceholderResource({
-  path,
-  schema,
-  Endpoint = RestEndpoint,
-}: {
-  readonly path: U;
-  readonly schema: S;
-  readonly Endpoint?: typeof RestEndpoint;
-}) {
-  const base = resource({ path, schema, Endpoint });
-  const partialUpdate = base.partialUpdate.extend({
-    fetch: async function (
-      this: ThisParameterType,
-      ...args: Parameters
-    ) {
-      // body only contains what we're changing, but we can find the id in params
-      return {
-        ...(await base.partialUpdate.call(this, ...args)),
-        id: (args[0] as unknown as { id: string | number }).id,
-      };
-    } as typeof base.partialUpdate,
-  });
-  return {
-    ...base,
-    // Endpoint overrides are to compensate for the jsonplaceholder API not returning
-    // the correct ID in certain cases
-    //
-    // This is sometimes needed when you don't control the server API itself
-    // More here: https://dataclient.io/docs/guides/network-transform#case-of-the-missing-id
-    partialUpdate,
-    create: base.create.extend({
-      fetch: async function (
-        this: ThisParameterType,
-        ...args: Parameters
-      ) {
-        // body only contains what we're changing, but we can find the id in params
-        return {
-          ...(await base.create.call(this, ...args)),
-          id: (args[args.length - 1] as unknown as { id: string | number }).id,
-        };
-      } as typeof base.create,
-    }),
-  } as unknown as typeof base;
-}
diff --git a/website/src/components/Playground/resources/TodoResource.ts b/website/src/components/Playground/resources/TodoResource.ts
deleted file mode 100644
index c7559ad7746c..000000000000
--- a/website/src/components/Playground/resources/TodoResource.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { RestEndpoint, RestGenerics } from '@data-client/rest';
-
-import {
-  createPlaceholderResource,
-  PlaceholderEntity,
-} from './PlaceholderBaseResource';
-
-export class Todo extends PlaceholderEntity {
-  readonly userId: number = 0;
-  readonly title: string = '';
-  readonly completed: boolean = false;
-  readonly updatedAt: number = 0;
-
-  static key = 'Todo';
-
-  static shouldUpdate(
-    existingMeta: { date: number; fetchedAt: number },
-    incomingMeta: { date: number; fetchedAt: number },
-    existing: { updatedAt: number },
-    incoming: { updatedAt: number },
-  ) {
-    return (
-      existing.updatedAt === undefined ||
-      existing.updatedAt <= incoming.updatedAt
-    );
-  }
-}
-
-export class TodoEndpoint<
-  O extends RestGenerics = any,
-> extends RestEndpoint {
-  getRequestInit(body?: any) {
-    if (body) {
-      body = { ...body, updatedAt: Date.now() };
-    }
-    return super.getRequestInit.call(this, body);
-  }
-}
-
-const TodoResourceBase = createPlaceholderResource({
-  path: 'https\\://jsonplaceholder.typicode.com/todos/:id',
-  schema: Todo,
-  Endpoint: TodoEndpoint,
-});
-export const TodoResource = {
-  ...TodoResourceBase,
-  partialUpdate: TodoResourceBase.partialUpdate.extend({
-    getOptimisticResponse(snap, params, body) {
-      return {
-        id: params.id,
-        ...snap.get(Todo, { id: params.id }),
-        ...body,
-        updatedAt: snap.fetchedAt,
-      };
-    },
-  }),
-  create: TodoResourceBase.create.extend({
-    getOptimisticResponse(snap, body) {
-      return { ...body, updatedAt: snap.fetchedAt };
-    },
-    update: newResourceId => ({
-      [TodoResourceBase.getList.key()]: (resourceIds: string[] = []) => [
-        ...resourceIds,
-        newResourceId,
-      ],
-    }),
-  }),
-  delete: TodoResourceBase.delete.extend({
-    getOptimisticResponse(snap, params) {
-      return { ...params, updatedAt: snap.fetchedAt };
-    },
-  }),
-};
diff --git a/website/src/components/Playground/userAgent.ts b/website/src/components/Playground/userAgent.ts
new file mode 100644
index 000000000000..1bb59fca5c29
--- /dev/null
+++ b/website/src/components/Playground/userAgent.ts
@@ -0,0 +1,30 @@
+/**
+ * User-agent gates for the playground's heavy client code.
+ *
+ * - Bots/crawlers: never load Monaco or the live preview; the SSG markup
+ *   (static code + empty preview frame) is what gets indexed.
+ * - Mobile: no Monaco (poor touch UX and download cost); an editable
+ *   react-live editor is used instead, but the live preview still runs.
+ */
+const BOT_UA = /bot|googlebot|crawler|spider|robot|crawling/i;
+const MOBILE_UA = /Mobile|Android|BlackBerry/i;
+
+function userAgent(): string {
+  return typeof navigator === 'object' ? (navigator?.userAgent ?? '') : '';
+}
+
+/**
+ * True for crawlers. Evaluated once at module load and false during SSR, so
+ * only use it outside render (e.g. in a `lazy()` factory or an effect) to
+ * avoid hydration mismatches.
+ */
+export const isBot = BOT_UA.test(userAgent());
+
+/**
+ * True for mobile browsers and crawlers. Returns false during SSR, so only
+ * call it client-side after hydration (e.g. inside ``).
+ */
+export function isMobileOrBot(): boolean {
+  const ua = userAgent();
+  return BOT_UA.test(ua) || MOBILE_UA.test(ua);
+}
diff --git a/website/src/components/StackBlitz.tsx b/website/src/components/StackBlitz.tsx
index 369f35c8e2f6..e457e34c3112 100644
--- a/website/src/components/StackBlitz.tsx
+++ b/website/src/components/StackBlitz.tsx
@@ -1,7 +1,7 @@
 import Link from '@docusaurus/Link';
 import type { ReactElement } from 'react';
 
-import { isGoogleBot } from './Playground/isMobileOrBot';
+import { isBot } from './Playground/userAgent';
 import { useHasIntersected } from './useHasIntersected';
 
 export default function StackBlitz({
@@ -49,7 +49,7 @@ export default function StackBlitz({
   const [frameRef, hasIntersected] = useHasIntersected();
 
   let embedElement: ReactElement;
-  if (!hasIntersected || isGoogleBot) {
+  if (!hasIntersected || isBot) {
     embedElement = (
       
     );

From cd885d850b9bed9d5eeb23a1e8ad2ae9affd7764 Mon Sep 17 00:00:00 2001
From: Claude 
Date: Sat, 3 Oct 2026 15:24:52 +0000
Subject: [PATCH 02/15] internal(website): Keep highlightSelections free of
 website-only deps

CI runs Playground unit tests without website dependencies installed,
so parse the highlight range in InteractiveEditor and pass line numbers.

Co-Authored-By: Claude Opus 5.5 (1M context) 
Claude-Session: https://claude.ai/code/session_015H36Yk4WBpytw9L7RRVCTK
---
 .../components/Playground/editor/InteractiveEditor.tsx   | 3 ++-
 .../monaco/__tests__/highlightSelections.test.ts         | 4 ++--
 .../components/Playground/monaco/highlightSelections.ts  | 9 ++++-----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/website/src/components/Playground/editor/InteractiveEditor.tsx b/website/src/components/Playground/editor/InteractiveEditor.tsx
index 46c268ab1b1e..fdfd82dedc31 100644
--- a/website/src/components/Playground/editor/InteractiveEditor.tsx
+++ b/website/src/components/Playground/editor/InteractiveEditor.tsx
@@ -1,5 +1,6 @@
 import Editor from '@monaco-editor/react';
 import type * as Monaco from 'monaco-editor';
+import rangeParser from 'parse-numeric-range';
 import { memo, useCallback, useMemo } from 'react';
 import { LiveEditor } from 'react-live';
 
@@ -56,7 +57,7 @@ function InteractiveEditor({
   const handleMount = useCallback((editor: Monaco.editor.ICodeEditor) => {
     if (autoFocus) editor.focus();
     if (highlights) {
-      const selections = highlightSelections(highlights);
+      const selections = highlightSelections(rangeParser(highlights));
       if (selections.length) editor.setSelections(selections);
     }
     // Focus reveals this tab (also how cross-tab go to definition lands)
diff --git a/website/src/components/Playground/monaco/__tests__/highlightSelections.test.ts b/website/src/components/Playground/monaco/__tests__/highlightSelections.test.ts
index dd3e53cdf497..bd4393594091 100644
--- a/website/src/components/Playground/monaco/__tests__/highlightSelections.test.ts
+++ b/website/src/components/Playground/monaco/__tests__/highlightSelections.test.ts
@@ -11,11 +11,11 @@ const lines = (start: number, end: number) => ({
 
 describe('highlightSelections', () => {
   test('selects a single line through the start of the next', () => {
-    expect(highlightSelections('2')).toEqual([lines(2, 3)]);
+    expect(highlightSelections([2])).toEqual([lines(2, 3)]);
   });
 
   test('merges consecutive lines and splits gaps', () => {
-    expect(highlightSelections('1-3,5,7-8')).toEqual([
+    expect(highlightSelections([1, 2, 3, 5, 7, 8])).toEqual([
       lines(1, 4),
       lines(5, 6),
       lines(7, 9),
diff --git a/website/src/components/Playground/monaco/highlightSelections.ts b/website/src/components/Playground/monaco/highlightSelections.ts
index fd19b43ac24b..c68f00d2a876 100644
--- a/website/src/components/Playground/monaco/highlightSelections.ts
+++ b/website/src/components/Playground/monaco/highlightSelections.ts
@@ -1,12 +1,11 @@
 import type { ISelection } from 'monaco-editor';
-import rangeParser from 'parse-numeric-range';
 
 /**
- * Converts a code-fence highlight range (`{1-3,5}`) into Monaco selections,
- * merging consecutive lines into one whole-line selection each.
+ * Converts sorted highlighted line numbers (parsed from a code-fence range
+ * like `{1-3,5}`) into Monaco selections, merging consecutive lines into one
+ * whole-line selection each.
  */
-export function highlightSelections(highlights: string): ISelection[] {
-  const lines = rangeParser(highlights);
+export function highlightSelections(lines: readonly number[]): ISelection[] {
   if (!lines.length) return [];
 
   let selectionStartLineNumber = lines[0];

From 6ab163c3a8d9b3732d5d0794e8dc8a62d0bb40be Mon Sep 17 00:00:00 2001
From: Claude 
Date: Sat, 3 Oct 2026 15:28:38 +0000
Subject: [PATCH 03/15] internal(website): Cover useModelId and empty highlight
 ranges

Co-Authored-By: Claude Opus 5.5 (1M context) 
Claude-Session: https://claude.ai/code/session_015H36Yk4WBpytw9L7RRVCTK
---
 .../monaco/__tests__/highlightSelections.test.ts    |  4 ++++
 .../Playground/monaco/__tests__/modelPath.test.ts   | 13 ++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/website/src/components/Playground/monaco/__tests__/highlightSelections.test.ts b/website/src/components/Playground/monaco/__tests__/highlightSelections.test.ts
index bd4393594091..43eb292bf540 100644
--- a/website/src/components/Playground/monaco/__tests__/highlightSelections.test.ts
+++ b/website/src/components/Playground/monaco/__tests__/highlightSelections.test.ts
@@ -10,6 +10,10 @@ const lines = (start: number, end: number) => ({
 });
 
 describe('highlightSelections', () => {
+  test('selects nothing without lines', () => {
+    expect(highlightSelections([])).toEqual([]);
+  });
+
   test('selects a single line through the start of the next', () => {
     expect(highlightSelections([2])).toEqual([lines(2, 3)]);
   });
diff --git a/website/src/components/Playground/monaco/__tests__/modelPath.test.ts b/website/src/components/Playground/monaco/__tests__/modelPath.test.ts
index 5146668ab481..8415e7d2ab98 100644
--- a/website/src/components/Playground/monaco/__tests__/modelPath.test.ts
+++ b/website/src/components/Playground/monaco/__tests__/modelPath.test.ts
@@ -1,6 +1,8 @@
 /// 
 
-import { modelPath, stripModelId } from '../modelPath';
+import { renderHook } from '@testing-library/react';
+
+import { modelPath, stripModelId, useModelId } from '../modelPath';
 
 describe('model paths', () => {
   test('round-trips a namespaced file path', () => {
@@ -13,4 +15,13 @@ describe('model paths', () => {
       '/node_modules/react/index.d.ts',
     );
   });
+
+  test('useModelId is numeric and stable across renders', () => {
+    const { result, rerender } = renderHook(() => useModelId());
+    const first = result.current;
+    expect(first).toMatch(/^\d+$/);
+    expect(stripModelId(modelPath(first, 'a.ts'))).toBe('/a.ts');
+    rerender();
+    expect(result.current).toBe(first);
+  });
 });

From cf2de88e98b2da9b8b5126dbc6866dbe8ae48d9b Mon Sep 17 00:00:00 2001
From: Claude 
Date: Sat, 3 Oct 2026 15:57:16 +0000
Subject: [PATCH 04/15] internal(website): Restore PlaygroundEditor,
 PlaygroundLiveEditor, DiffEditorChooser, readOnly and resources

Keep these entry points and the readOnly option available for future
use; they now point at the reorganized editor modules.

Co-Authored-By: Claude Opus 5.5 (1M context) 
Claude-Session: https://claude.ai/code/session_015H36Yk4WBpytw9L7RRVCTK
---
 website/src/components/DiffEditor.tsx         |  4 +-
 website/src/components/DiffEditorChooser.tsx  |  6 ++
 .../Playground/PlaygroundEditor.tsx           | 10 +++
 .../Playground/PlaygroundLiveEditor.tsx       | 14 ++++
 website/src/components/Playground/README.md   |  3 +
 .../Playground/editor/EditorSurface.tsx       |  7 +-
 .../Playground/editor/InteractiveEditor.tsx   | 13 ++--
 .../resources/PlaceholderBaseResource.ts      | 51 +++++++++++++
 .../Playground/resources/TodoResource.ts      | 73 +++++++++++++++++++
 9 files changed, 169 insertions(+), 12 deletions(-)
 create mode 100644 website/src/components/DiffEditorChooser.tsx
 create mode 100644 website/src/components/Playground/PlaygroundEditor.tsx
 create mode 100644 website/src/components/Playground/PlaygroundLiveEditor.tsx
 create mode 100644 website/src/components/Playground/resources/PlaceholderBaseResource.ts
 create mode 100644 website/src/components/Playground/resources/TodoResource.ts

diff --git a/website/src/components/DiffEditor.tsx b/website/src/components/DiffEditor.tsx
index 001ff9349e4c..149d8b165814 100644
--- a/website/src/components/DiffEditor.tsx
+++ b/website/src/components/DiffEditor.tsx
@@ -1,7 +1,7 @@
 import CodeBlock from '@theme/CodeBlock';
 import React, { useMemo } from 'react';
 
-import DiffEditorMonaco from './DiffEditorMonaco';
+import DiffEditorChooser from './DiffEditorChooser';
 import Grid from './Grid';
 import { parseCodeDocuments } from './Playground/editor/codeModel';
 
@@ -23,7 +23,7 @@ export default function DiffEditor({ children }: Props) {
     
   );
 
-  return ;
+  return ;
 }
 
 interface Props {
diff --git a/website/src/components/DiffEditorChooser.tsx b/website/src/components/DiffEditorChooser.tsx
new file mode 100644
index 000000000000..f31a8da400b6
--- /dev/null
+++ b/website/src/components/DiffEditorChooser.tsx
@@ -0,0 +1,6 @@
+import DiffEditorMonaco from './DiffEditorMonaco';
+
+// Always use DiffEditorMonaco which handles SSR via 
+// The mobile/bot detection is handled inside DiffEditorMonaco
+const DiffEditorChooser = DiffEditorMonaco;
+export default DiffEditorChooser;
diff --git a/website/src/components/Playground/PlaygroundEditor.tsx b/website/src/components/Playground/PlaygroundEditor.tsx
new file mode 100644
index 000000000000..e9796fbb16bd
--- /dev/null
+++ b/website/src/components/Playground/PlaygroundEditor.tsx
@@ -0,0 +1,10 @@
+import InteractiveEditor from './editor/InteractiveEditor';
+import PlaygroundLiveEditor from './PlaygroundLiveEditor';
+
+// Always use Monaco editor wrapper - mobile/bot check happens inside
+// This avoids hydration mismatch from module-level navigator checks
+const PlaygroundEditor = InteractiveEditor;
+export default PlaygroundEditor;
+
+// Re-export for use as fallback inside Monaco editor
+export { PlaygroundLiveEditor };
diff --git a/website/src/components/Playground/PlaygroundLiveEditor.tsx b/website/src/components/Playground/PlaygroundLiveEditor.tsx
new file mode 100644
index 000000000000..5ecfc3cec133
--- /dev/null
+++ b/website/src/components/Playground/PlaygroundLiveEditor.tsx
@@ -0,0 +1,14 @@
+import React, { memo } from 'react';
+import { LiveEditor } from 'react-live';
+
+const MemoEditor = memo(LiveEditor);
+
+export default function PlaygroundLiveEditor({
+  onChange,
+  code,
+}: {
+  onChange: (value: string) => void;
+  code: string;
+}) {
+  return ;
+}
diff --git a/website/src/components/Playground/README.md b/website/src/components/Playground/README.md
index 3b3ad6dbac29..e730f2c790aa 100644
--- a/website/src/components/Playground/README.md
+++ b/website/src/components/Playground/README.md
@@ -19,6 +19,9 @@ indexable and hydration-safe, and those behaviors are easy to drop silently.
 ```
 index.tsx           Playground: code model, editor/preview ordering, hidden handling
 userAgent.ts        isBot / isMobileOrBot gates
+PlaygroundEditor.tsx  editor entry used by EditorSurface (aliases editor/InteractiveEditor)
+PlaygroundLiveEditor.tsx  editable react-live editor (mobile/bot fallback)
+resources/          sample resources (currently unreferenced; kept for future demos)
 Boundary.tsx        BrowserOnly + Suspense with one fallback for SSR and loading
 Header.tsx, TabList.tsx, styles.module.css   shared chrome (also used by HTTP/, Demo/)
 editor/             code model + editor UI
diff --git a/website/src/components/Playground/editor/EditorSurface.tsx b/website/src/components/Playground/editor/EditorSurface.tsx
index beb72e97fb6a..92a690d89c75 100644
--- a/website/src/components/Playground/editor/EditorSurface.tsx
+++ b/website/src/components/Playground/editor/EditorSurface.tsx
@@ -5,12 +5,11 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import Header from '../Header';
 import { modelPath, useModelId } from '../monaco/modelPath';
+import Editor from '../PlaygroundEditor';
 import styles from '../styles.module.css';
 import TabList from '../TabList';
 import type { CodeDocument, CodeModel } from './codeModel';
-import InteractiveEditor, {
-  type InteractiveEditorProps,
-} from './InteractiveEditor';
+import type { InteractiveEditorProps } from './InteractiveEditor';
 import StaticEditor from './StaticEditor';
 
 export interface EditorSurfaceProps extends CodeModel {
@@ -150,7 +149,7 @@ function TextEditTab({
       {/* Not yet interactive (e.g. never-shown Demo tab): skip Monaco entirely */}
       {interactive ?
         
-          {() => }
+          {() => }
         
       : staticView}
     

diff --git a/website/src/components/Playground/editor/InteractiveEditor.tsx b/website/src/components/Playground/editor/InteractiveEditor.tsx
index fdfd82dedc31..df7efb2a6192 100644
--- a/website/src/components/Playground/editor/InteractiveEditor.tsx
+++ b/website/src/components/Playground/editor/InteractiveEditor.tsx
@@ -2,7 +2,6 @@ import Editor from '@monaco-editor/react';
 import type * as Monaco from 'monaco-editor';
 import rangeParser from 'parse-numeric-range';
 import { memo, useCallback, useMemo } from 'react';
-import { LiveEditor } from 'react-live';
 
 import '../monaco/setup';
 import { highlightSelections } from '../monaco/highlightSelections';
@@ -10,13 +9,12 @@ import { extensionToMonacoLanguage } from '../monaco/language';
 import { options } from '../monaco/options';
 import { MONACO_THEME } from '../monaco/theme';
 import useAutoHeight from '../monaco/useAutoHeight';
+import PlaygroundLiveEditor from '../PlaygroundLiveEditor';
 import { isMobileOrBot } from '../userAgent';
 import StaticEditor from './StaticEditor';
 
 // TODO: consider using the ts worker's getEmitOutput to compile rather than babel
 
-const MobileEditor = memo(LiveEditor);
-
 export interface InteractiveEditorProps {
   onChange: (value: string | undefined) => void;
   code: string;
@@ -31,6 +29,7 @@ export interface InteractiveEditorProps {
   /** Whether this tab is visible; re-measures height when it becomes so */
   isFocused?: boolean;
   language?: string;
+  readOnly?: boolean;
 }
 
 /**
@@ -47,9 +46,11 @@ function InteractiveEditor({
   autoFocus = false,
   isFocused = false,
   language = 'tsx',
+  readOnly = false,
 }: InteractiveEditorProps) {
+  const editorOptions = useMemo(() => ({ ...options, readOnly }), [readOnly]);
   const { height, handleMount: handleAutoMount } = useAutoHeight({
-    initialContentHeight: code.split('\n').length * options.lineHeight,
+    initialContentHeight: code.split('\n').length * editorOptions.lineHeight,
     isFocused,
   });
 
@@ -78,7 +79,7 @@ function InteractiveEditor({
   // After hooks to satisfy the rules of hooks; safe because we only render
   // client-side, so navigator is defined and hydration is already done.
   if (isMobileOrBot()) {
-    return ;
+    return ;
   }
 
   return (
@@ -87,7 +88,7 @@ function InteractiveEditor({
       defaultLanguage={extensionToMonacoLanguage(language)}
       onChange={onChange}
       defaultValue={code}
-      options={options}
+      options={editorOptions}
       theme={MONACO_THEME}
       onMount={handleMount}
       height={height}
diff --git a/website/src/components/Playground/resources/PlaceholderBaseResource.ts b/website/src/components/Playground/resources/PlaceholderBaseResource.ts
new file mode 100644
index 000000000000..a9a048127417
--- /dev/null
+++ b/website/src/components/Playground/resources/PlaceholderBaseResource.ts
@@ -0,0 +1,51 @@
+import { Entity, resource, RestEndpoint, Schema } from '@data-client/rest';
+
+export abstract class PlaceholderEntity extends Entity {
+  id = 0;
+}
+
+/** Common patterns in the https://jsonplaceholder.typicode.com API */
+export function createPlaceholderResource({
+  path,
+  schema,
+  Endpoint = RestEndpoint,
+}: {
+  readonly path: U;
+  readonly schema: S;
+  readonly Endpoint?: typeof RestEndpoint;
+}) {
+  const base = resource({ path, schema, Endpoint });
+  const partialUpdate = base.partialUpdate.extend({
+    fetch: async function (
+      this: ThisParameterType,
+      ...args: Parameters
+    ) {
+      // body only contains what we're changing, but we can find the id in params
+      return {
+        ...(await base.partialUpdate.call(this, ...args)),
+        id: (args[0] as unknown as { id: string | number }).id,
+      };
+    } as typeof base.partialUpdate,
+  });
+  return {
+    ...base,
+    // Endpoint overrides are to compensate for the jsonplaceholder API not returning
+    // the correct ID in certain cases
+    //
+    // This is sometimes needed when you don't control the server API itself
+    // More here: https://dataclient.io/docs/guides/network-transform#case-of-the-missing-id
+    partialUpdate,
+    create: base.create.extend({
+      fetch: async function (
+        this: ThisParameterType,
+        ...args: Parameters
+      ) {
+        // body only contains what we're changing, but we can find the id in params
+        return {
+          ...(await base.create.call(this, ...args)),
+          id: (args[args.length - 1] as unknown as { id: string | number }).id,
+        };
+      } as typeof base.create,
+    }),
+  } as unknown as typeof base;
+}
diff --git a/website/src/components/Playground/resources/TodoResource.ts b/website/src/components/Playground/resources/TodoResource.ts
new file mode 100644
index 000000000000..c7559ad7746c
--- /dev/null
+++ b/website/src/components/Playground/resources/TodoResource.ts
@@ -0,0 +1,73 @@
+import { RestEndpoint, RestGenerics } from '@data-client/rest';
+
+import {
+  createPlaceholderResource,
+  PlaceholderEntity,
+} from './PlaceholderBaseResource';
+
+export class Todo extends PlaceholderEntity {
+  readonly userId: number = 0;
+  readonly title: string = '';
+  readonly completed: boolean = false;
+  readonly updatedAt: number = 0;
+
+  static key = 'Todo';
+
+  static shouldUpdate(
+    existingMeta: { date: number; fetchedAt: number },
+    incomingMeta: { date: number; fetchedAt: number },
+    existing: { updatedAt: number },
+    incoming: { updatedAt: number },
+  ) {
+    return (
+      existing.updatedAt === undefined ||
+      existing.updatedAt <= incoming.updatedAt
+    );
+  }
+}
+
+export class TodoEndpoint<
+  O extends RestGenerics = any,
+> extends RestEndpoint {
+  getRequestInit(body?: any) {
+    if (body) {
+      body = { ...body, updatedAt: Date.now() };
+    }
+    return super.getRequestInit.call(this, body);
+  }
+}
+
+const TodoResourceBase = createPlaceholderResource({
+  path: 'https\\://jsonplaceholder.typicode.com/todos/:id',
+  schema: Todo,
+  Endpoint: TodoEndpoint,
+});
+export const TodoResource = {
+  ...TodoResourceBase,
+  partialUpdate: TodoResourceBase.partialUpdate.extend({
+    getOptimisticResponse(snap, params, body) {
+      return {
+        id: params.id,
+        ...snap.get(Todo, { id: params.id }),
+        ...body,
+        updatedAt: snap.fetchedAt,
+      };
+    },
+  }),
+  create: TodoResourceBase.create.extend({
+    getOptimisticResponse(snap, body) {
+      return { ...body, updatedAt: snap.fetchedAt };
+    },
+    update: newResourceId => ({
+      [TodoResourceBase.getList.key()]: (resourceIds: string[] = []) => [
+        ...resourceIds,
+        newResourceId,
+      ],
+    }),
+  }),
+  delete: TodoResourceBase.delete.extend({
+    getOptimisticResponse(snap, params) {
+      return { ...params, updatedAt: snap.fetchedAt };
+    },
+  }),
+};

From 82bf2d06f9ca91d30e1cb03a130bdb859b7cfe7d Mon Sep 17 00:00:00 2001
From: Cursor Agent 
Date: Sat, 3 Oct 2026 16:11:15 +0000
Subject: [PATCH 05/15] internal(website): Restore deletions Staff already
 accepted

cf2de88e brought the dead files and the unused editor prop back.
This commit restores the deletions Staff already accepted.

Review: https://github.com/reactive/data-client/pull/4104#pullrequestreview-5401577634

Co-authored-by: Nathaniel Tucker 
---
 website/src/components/DiffEditor.tsx         |  4 +-
 website/src/components/DiffEditorChooser.tsx  |  6 --
 .../Playground/PlaygroundEditor.tsx           | 10 ---
 website/src/components/Playground/README.md   |  2 -
 .../Playground/editor/EditorSurface.tsx       |  7 +-
 .../Playground/editor/InteractiveEditor.tsx   |  7 +-
 .../resources/PlaceholderBaseResource.ts      | 51 -------------
 .../Playground/resources/TodoResource.ts      | 73 -------------------
 8 files changed, 8 insertions(+), 152 deletions(-)
 delete mode 100644 website/src/components/DiffEditorChooser.tsx
 delete mode 100644 website/src/components/Playground/PlaygroundEditor.tsx
 delete mode 100644 website/src/components/Playground/resources/PlaceholderBaseResource.ts
 delete mode 100644 website/src/components/Playground/resources/TodoResource.ts

diff --git a/website/src/components/DiffEditor.tsx b/website/src/components/DiffEditor.tsx
index 149d8b165814..001ff9349e4c 100644
--- a/website/src/components/DiffEditor.tsx
+++ b/website/src/components/DiffEditor.tsx
@@ -1,7 +1,7 @@
 import CodeBlock from '@theme/CodeBlock';
 import React, { useMemo } from 'react';
 
-import DiffEditorChooser from './DiffEditorChooser';
+import DiffEditorMonaco from './DiffEditorMonaco';
 import Grid from './Grid';
 import { parseCodeDocuments } from './Playground/editor/codeModel';
 
@@ -23,7 +23,7 @@ export default function DiffEditor({ children }: Props) {
     
   );
 
-  return ;
+  return ;
 }
 
 interface Props {
diff --git a/website/src/components/DiffEditorChooser.tsx b/website/src/components/DiffEditorChooser.tsx
deleted file mode 100644
index f31a8da400b6..000000000000
--- a/website/src/components/DiffEditorChooser.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import DiffEditorMonaco from './DiffEditorMonaco';
-
-// Always use DiffEditorMonaco which handles SSR via 
-// The mobile/bot detection is handled inside DiffEditorMonaco
-const DiffEditorChooser = DiffEditorMonaco;
-export default DiffEditorChooser;
diff --git a/website/src/components/Playground/PlaygroundEditor.tsx b/website/src/components/Playground/PlaygroundEditor.tsx
deleted file mode 100644
index e9796fbb16bd..000000000000
--- a/website/src/components/Playground/PlaygroundEditor.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import InteractiveEditor from './editor/InteractiveEditor';
-import PlaygroundLiveEditor from './PlaygroundLiveEditor';
-
-// Always use Monaco editor wrapper - mobile/bot check happens inside
-// This avoids hydration mismatch from module-level navigator checks
-const PlaygroundEditor = InteractiveEditor;
-export default PlaygroundEditor;
-
-// Re-export for use as fallback inside Monaco editor
-export { PlaygroundLiveEditor };
diff --git a/website/src/components/Playground/README.md b/website/src/components/Playground/README.md
index e730f2c790aa..e4894f429226 100644
--- a/website/src/components/Playground/README.md
+++ b/website/src/components/Playground/README.md
@@ -19,9 +19,7 @@ indexable and hydration-safe, and those behaviors are easy to drop silently.
 ```
 index.tsx           Playground: code model, editor/preview ordering, hidden handling
 userAgent.ts        isBot / isMobileOrBot gates
-PlaygroundEditor.tsx  editor entry used by EditorSurface (aliases editor/InteractiveEditor)
 PlaygroundLiveEditor.tsx  editable react-live editor (mobile/bot fallback)
-resources/          sample resources (currently unreferenced; kept for future demos)
 Boundary.tsx        BrowserOnly + Suspense with one fallback for SSR and loading
 Header.tsx, TabList.tsx, styles.module.css   shared chrome (also used by HTTP/, Demo/)
 editor/             code model + editor UI
diff --git a/website/src/components/Playground/editor/EditorSurface.tsx b/website/src/components/Playground/editor/EditorSurface.tsx
index 92a690d89c75..beb72e97fb6a 100644
--- a/website/src/components/Playground/editor/EditorSurface.tsx
+++ b/website/src/components/Playground/editor/EditorSurface.tsx
@@ -5,11 +5,12 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import Header from '../Header';
 import { modelPath, useModelId } from '../monaco/modelPath';
-import Editor from '../PlaygroundEditor';
 import styles from '../styles.module.css';
 import TabList from '../TabList';
 import type { CodeDocument, CodeModel } from './codeModel';
-import type { InteractiveEditorProps } from './InteractiveEditor';
+import InteractiveEditor, {
+  type InteractiveEditorProps,
+} from './InteractiveEditor';
 import StaticEditor from './StaticEditor';
 
 export interface EditorSurfaceProps extends CodeModel {
@@ -149,7 +150,7 @@ function TextEditTab({
       {/* Not yet interactive (e.g. never-shown Demo tab): skip Monaco entirely */}
       {interactive ?
         
-          {() => }
+          {() => }
         
       : staticView}
     
diff --git a/website/src/components/Playground/editor/InteractiveEditor.tsx b/website/src/components/Playground/editor/InteractiveEditor.tsx
index df7efb2a6192..5ae9292cc219 100644
--- a/website/src/components/Playground/editor/InteractiveEditor.tsx
+++ b/website/src/components/Playground/editor/InteractiveEditor.tsx
@@ -29,7 +29,6 @@ export interface InteractiveEditorProps {
   /** Whether this tab is visible; re-measures height when it becomes so */
   isFocused?: boolean;
   language?: string;
-  readOnly?: boolean;
 }
 
 /**
@@ -46,11 +45,9 @@ function InteractiveEditor({
   autoFocus = false,
   isFocused = false,
   language = 'tsx',
-  readOnly = false,
 }: InteractiveEditorProps) {
-  const editorOptions = useMemo(() => ({ ...options, readOnly }), [readOnly]);
   const { height, handleMount: handleAutoMount } = useAutoHeight({
-    initialContentHeight: code.split('\n').length * editorOptions.lineHeight,
+    initialContentHeight: code.split('\n').length * options.lineHeight,
     isFocused,
   });
 
@@ -88,7 +85,7 @@ function InteractiveEditor({
       defaultLanguage={extensionToMonacoLanguage(language)}
       onChange={onChange}
       defaultValue={code}
-      options={editorOptions}
+      options={options}
       theme={MONACO_THEME}
       onMount={handleMount}
       height={height}
diff --git a/website/src/components/Playground/resources/PlaceholderBaseResource.ts b/website/src/components/Playground/resources/PlaceholderBaseResource.ts
deleted file mode 100644
index a9a048127417..000000000000
--- a/website/src/components/Playground/resources/PlaceholderBaseResource.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Entity, resource, RestEndpoint, Schema } from '@data-client/rest';
-
-export abstract class PlaceholderEntity extends Entity {
-  id = 0;
-}
-
-/** Common patterns in the https://jsonplaceholder.typicode.com API */
-export function createPlaceholderResource({
-  path,
-  schema,
-  Endpoint = RestEndpoint,
-}: {
-  readonly path: U;
-  readonly schema: S;
-  readonly Endpoint?: typeof RestEndpoint;
-}) {
-  const base = resource({ path, schema, Endpoint });
-  const partialUpdate = base.partialUpdate.extend({
-    fetch: async function (
-      this: ThisParameterType,
-      ...args: Parameters
-    ) {
-      // body only contains what we're changing, but we can find the id in params
-      return {
-        ...(await base.partialUpdate.call(this, ...args)),
-        id: (args[0] as unknown as { id: string | number }).id,
-      };
-    } as typeof base.partialUpdate,
-  });
-  return {
-    ...base,
-    // Endpoint overrides are to compensate for the jsonplaceholder API not returning
-    // the correct ID in certain cases
-    //
-    // This is sometimes needed when you don't control the server API itself
-    // More here: https://dataclient.io/docs/guides/network-transform#case-of-the-missing-id
-    partialUpdate,
-    create: base.create.extend({
-      fetch: async function (
-        this: ThisParameterType,
-        ...args: Parameters
-      ) {
-        // body only contains what we're changing, but we can find the id in params
-        return {
-          ...(await base.create.call(this, ...args)),
-          id: (args[args.length - 1] as unknown as { id: string | number }).id,
-        };
-      } as typeof base.create,
-    }),
-  } as unknown as typeof base;
-}
diff --git a/website/src/components/Playground/resources/TodoResource.ts b/website/src/components/Playground/resources/TodoResource.ts
deleted file mode 100644
index c7559ad7746c..000000000000
--- a/website/src/components/Playground/resources/TodoResource.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { RestEndpoint, RestGenerics } from '@data-client/rest';
-
-import {
-  createPlaceholderResource,
-  PlaceholderEntity,
-} from './PlaceholderBaseResource';
-
-export class Todo extends PlaceholderEntity {
-  readonly userId: number = 0;
-  readonly title: string = '';
-  readonly completed: boolean = false;
-  readonly updatedAt: number = 0;
-
-  static key = 'Todo';
-
-  static shouldUpdate(
-    existingMeta: { date: number; fetchedAt: number },
-    incomingMeta: { date: number; fetchedAt: number },
-    existing: { updatedAt: number },
-    incoming: { updatedAt: number },
-  ) {
-    return (
-      existing.updatedAt === undefined ||
-      existing.updatedAt <= incoming.updatedAt
-    );
-  }
-}
-
-export class TodoEndpoint<
-  O extends RestGenerics = any,
-> extends RestEndpoint {
-  getRequestInit(body?: any) {
-    if (body) {
-      body = { ...body, updatedAt: Date.now() };
-    }
-    return super.getRequestInit.call(this, body);
-  }
-}
-
-const TodoResourceBase = createPlaceholderResource({
-  path: 'https\\://jsonplaceholder.typicode.com/todos/:id',
-  schema: Todo,
-  Endpoint: TodoEndpoint,
-});
-export const TodoResource = {
-  ...TodoResourceBase,
-  partialUpdate: TodoResourceBase.partialUpdate.extend({
-    getOptimisticResponse(snap, params, body) {
-      return {
-        id: params.id,
-        ...snap.get(Todo, { id: params.id }),
-        ...body,
-        updatedAt: snap.fetchedAt,
-      };
-    },
-  }),
-  create: TodoResourceBase.create.extend({
-    getOptimisticResponse(snap, body) {
-      return { ...body, updatedAt: snap.fetchedAt };
-    },
-    update: newResourceId => ({
-      [TodoResourceBase.getList.key()]: (resourceIds: string[] = []) => [
-        ...resourceIds,
-        newResourceId,
-      ],
-    }),
-  }),
-  delete: TodoResourceBase.delete.extend({
-    getOptimisticResponse(snap, params) {
-      return { ...params, updatedAt: snap.fetchedAt };
-    },
-  }),
-};

From c529c24cfe6791076e5028cc9b43fc4138d28e19 Mon Sep 17 00:00:00 2001
From: Claude 
Date: Sat, 3 Oct 2026 18:50:25 +0000
Subject: [PATCH 06/15] internal(website): Keep restored Playground files and
 readOnly prop

Reverts 82bf2d0 per Nathaniel's choice to keep PlaygroundEditor,
DiffEditorChooser, the readOnly prop and Playground/resources for now.

Co-Authored-By: Claude Opus 5.5 (1M context) 
Claude-Session: https://claude.ai/code/session_015H36Yk4WBpytw9L7RRVCTK
---
 website/src/components/DiffEditor.tsx         |  4 +-
 website/src/components/DiffEditorChooser.tsx  |  6 ++
 .../Playground/PlaygroundEditor.tsx           | 10 +++
 website/src/components/Playground/README.md   |  2 +
 .../Playground/editor/EditorSurface.tsx       |  7 +-
 .../Playground/editor/InteractiveEditor.tsx   |  7 +-
 .../resources/PlaceholderBaseResource.ts      | 51 +++++++++++++
 .../Playground/resources/TodoResource.ts      | 73 +++++++++++++++++++
 8 files changed, 152 insertions(+), 8 deletions(-)
 create mode 100644 website/src/components/DiffEditorChooser.tsx
 create mode 100644 website/src/components/Playground/PlaygroundEditor.tsx
 create mode 100644 website/src/components/Playground/resources/PlaceholderBaseResource.ts
 create mode 100644 website/src/components/Playground/resources/TodoResource.ts

diff --git a/website/src/components/DiffEditor.tsx b/website/src/components/DiffEditor.tsx
index 001ff9349e4c..149d8b165814 100644
--- a/website/src/components/DiffEditor.tsx
+++ b/website/src/components/DiffEditor.tsx
@@ -1,7 +1,7 @@
 import CodeBlock from '@theme/CodeBlock';
 import React, { useMemo } from 'react';
 
-import DiffEditorMonaco from './DiffEditorMonaco';
+import DiffEditorChooser from './DiffEditorChooser';
 import Grid from './Grid';
 import { parseCodeDocuments } from './Playground/editor/codeModel';
 
@@ -23,7 +23,7 @@ export default function DiffEditor({ children }: Props) {
     
   );
 
-  return ;
+  return ;
 }
 
 interface Props {
diff --git a/website/src/components/DiffEditorChooser.tsx b/website/src/components/DiffEditorChooser.tsx
new file mode 100644
index 000000000000..f31a8da400b6
--- /dev/null
+++ b/website/src/components/DiffEditorChooser.tsx
@@ -0,0 +1,6 @@
+import DiffEditorMonaco from './DiffEditorMonaco';
+
+// Always use DiffEditorMonaco which handles SSR via 
+// The mobile/bot detection is handled inside DiffEditorMonaco
+const DiffEditorChooser = DiffEditorMonaco;
+export default DiffEditorChooser;
diff --git a/website/src/components/Playground/PlaygroundEditor.tsx b/website/src/components/Playground/PlaygroundEditor.tsx
new file mode 100644
index 000000000000..e9796fbb16bd
--- /dev/null
+++ b/website/src/components/Playground/PlaygroundEditor.tsx
@@ -0,0 +1,10 @@
+import InteractiveEditor from './editor/InteractiveEditor';
+import PlaygroundLiveEditor from './PlaygroundLiveEditor';
+
+// Always use Monaco editor wrapper - mobile/bot check happens inside
+// This avoids hydration mismatch from module-level navigator checks
+const PlaygroundEditor = InteractiveEditor;
+export default PlaygroundEditor;
+
+// Re-export for use as fallback inside Monaco editor
+export { PlaygroundLiveEditor };
diff --git a/website/src/components/Playground/README.md b/website/src/components/Playground/README.md
index e4894f429226..e730f2c790aa 100644
--- a/website/src/components/Playground/README.md
+++ b/website/src/components/Playground/README.md
@@ -19,7 +19,9 @@ indexable and hydration-safe, and those behaviors are easy to drop silently.
 ```
 index.tsx           Playground: code model, editor/preview ordering, hidden handling
 userAgent.ts        isBot / isMobileOrBot gates
+PlaygroundEditor.tsx  editor entry used by EditorSurface (aliases editor/InteractiveEditor)
 PlaygroundLiveEditor.tsx  editable react-live editor (mobile/bot fallback)
+resources/          sample resources (currently unreferenced; kept for future demos)
 Boundary.tsx        BrowserOnly + Suspense with one fallback for SSR and loading
 Header.tsx, TabList.tsx, styles.module.css   shared chrome (also used by HTTP/, Demo/)
 editor/             code model + editor UI
diff --git a/website/src/components/Playground/editor/EditorSurface.tsx b/website/src/components/Playground/editor/EditorSurface.tsx
index beb72e97fb6a..92a690d89c75 100644
--- a/website/src/components/Playground/editor/EditorSurface.tsx
+++ b/website/src/components/Playground/editor/EditorSurface.tsx
@@ -5,12 +5,11 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import Header from '../Header';
 import { modelPath, useModelId } from '../monaco/modelPath';
+import Editor from '../PlaygroundEditor';
 import styles from '../styles.module.css';
 import TabList from '../TabList';
 import type { CodeDocument, CodeModel } from './codeModel';
-import InteractiveEditor, {
-  type InteractiveEditorProps,
-} from './InteractiveEditor';
+import type { InteractiveEditorProps } from './InteractiveEditor';
 import StaticEditor from './StaticEditor';
 
 export interface EditorSurfaceProps extends CodeModel {
@@ -150,7 +149,7 @@ function TextEditTab({
       {/* Not yet interactive (e.g. never-shown Demo tab): skip Monaco entirely */}
       {interactive ?
         
-          {() => }
+          {() => }
         
       : staticView}
     
diff --git a/website/src/components/Playground/editor/InteractiveEditor.tsx b/website/src/components/Playground/editor/InteractiveEditor.tsx
index 5ae9292cc219..df7efb2a6192 100644
--- a/website/src/components/Playground/editor/InteractiveEditor.tsx
+++ b/website/src/components/Playground/editor/InteractiveEditor.tsx
@@ -29,6 +29,7 @@ export interface InteractiveEditorProps {
   /** Whether this tab is visible; re-measures height when it becomes so */
   isFocused?: boolean;
   language?: string;
+  readOnly?: boolean;
 }
 
 /**
@@ -45,9 +46,11 @@ function InteractiveEditor({
   autoFocus = false,
   isFocused = false,
   language = 'tsx',
+  readOnly = false,
 }: InteractiveEditorProps) {
+  const editorOptions = useMemo(() => ({ ...options, readOnly }), [readOnly]);
   const { height, handleMount: handleAutoMount } = useAutoHeight({
-    initialContentHeight: code.split('\n').length * options.lineHeight,
+    initialContentHeight: code.split('\n').length * editorOptions.lineHeight,
     isFocused,
   });
 
@@ -85,7 +88,7 @@ function InteractiveEditor({
       defaultLanguage={extensionToMonacoLanguage(language)}
       onChange={onChange}
       defaultValue={code}
-      options={options}
+      options={editorOptions}
       theme={MONACO_THEME}
       onMount={handleMount}
       height={height}
diff --git a/website/src/components/Playground/resources/PlaceholderBaseResource.ts b/website/src/components/Playground/resources/PlaceholderBaseResource.ts
new file mode 100644
index 000000000000..a9a048127417
--- /dev/null
+++ b/website/src/components/Playground/resources/PlaceholderBaseResource.ts
@@ -0,0 +1,51 @@
+import { Entity, resource, RestEndpoint, Schema } from '@data-client/rest';
+
+export abstract class PlaceholderEntity extends Entity {
+  id = 0;
+}
+
+/** Common patterns in the https://jsonplaceholder.typicode.com API */
+export function createPlaceholderResource({
+  path,
+  schema,
+  Endpoint = RestEndpoint,
+}: {
+  readonly path: U;
+  readonly schema: S;
+  readonly Endpoint?: typeof RestEndpoint;
+}) {
+  const base = resource({ path, schema, Endpoint });
+  const partialUpdate = base.partialUpdate.extend({
+    fetch: async function (
+      this: ThisParameterType,
+      ...args: Parameters
+    ) {
+      // body only contains what we're changing, but we can find the id in params
+      return {
+        ...(await base.partialUpdate.call(this, ...args)),
+        id: (args[0] as unknown as { id: string | number }).id,
+      };
+    } as typeof base.partialUpdate,
+  });
+  return {
+    ...base,
+    // Endpoint overrides are to compensate for the jsonplaceholder API not returning
+    // the correct ID in certain cases
+    //
+    // This is sometimes needed when you don't control the server API itself
+    // More here: https://dataclient.io/docs/guides/network-transform#case-of-the-missing-id
+    partialUpdate,
+    create: base.create.extend({
+      fetch: async function (
+        this: ThisParameterType,
+        ...args: Parameters
+      ) {
+        // body only contains what we're changing, but we can find the id in params
+        return {
+          ...(await base.create.call(this, ...args)),
+          id: (args[args.length - 1] as unknown as { id: string | number }).id,
+        };
+      } as typeof base.create,
+    }),
+  } as unknown as typeof base;
+}
diff --git a/website/src/components/Playground/resources/TodoResource.ts b/website/src/components/Playground/resources/TodoResource.ts
new file mode 100644
index 000000000000..c7559ad7746c
--- /dev/null
+++ b/website/src/components/Playground/resources/TodoResource.ts
@@ -0,0 +1,73 @@
+import { RestEndpoint, RestGenerics } from '@data-client/rest';
+
+import {
+  createPlaceholderResource,
+  PlaceholderEntity,
+} from './PlaceholderBaseResource';
+
+export class Todo extends PlaceholderEntity {
+  readonly userId: number = 0;
+  readonly title: string = '';
+  readonly completed: boolean = false;
+  readonly updatedAt: number = 0;
+
+  static key = 'Todo';
+
+  static shouldUpdate(
+    existingMeta: { date: number; fetchedAt: number },
+    incomingMeta: { date: number; fetchedAt: number },
+    existing: { updatedAt: number },
+    incoming: { updatedAt: number },
+  ) {
+    return (
+      existing.updatedAt === undefined ||
+      existing.updatedAt <= incoming.updatedAt
+    );
+  }
+}
+
+export class TodoEndpoint<
+  O extends RestGenerics = any,
+> extends RestEndpoint {
+  getRequestInit(body?: any) {
+    if (body) {
+      body = { ...body, updatedAt: Date.now() };
+    }
+    return super.getRequestInit.call(this, body);
+  }
+}
+
+const TodoResourceBase = createPlaceholderResource({
+  path: 'https\\://jsonplaceholder.typicode.com/todos/:id',
+  schema: Todo,
+  Endpoint: TodoEndpoint,
+});
+export const TodoResource = {
+  ...TodoResourceBase,
+  partialUpdate: TodoResourceBase.partialUpdate.extend({
+    getOptimisticResponse(snap, params, body) {
+      return {
+        id: params.id,
+        ...snap.get(Todo, { id: params.id }),
+        ...body,
+        updatedAt: snap.fetchedAt,
+      };
+    },
+  }),
+  create: TodoResourceBase.create.extend({
+    getOptimisticResponse(snap, body) {
+      return { ...body, updatedAt: snap.fetchedAt };
+    },
+    update: newResourceId => ({
+      [TodoResourceBase.getList.key()]: (resourceIds: string[] = []) => [
+        ...resourceIds,
+        newResourceId,
+      ],
+    }),
+  }),
+  delete: TodoResourceBase.delete.extend({
+    getOptimisticResponse(snap, params) {
+      return { ...params, updatedAt: snap.fetchedAt };
+    },
+  }),
+};

From 7bf8c88e0fdd19e18445d6a8a999d7fcd88fb9e3 Mon Sep 17 00:00:00 2001
From: Claude 
Date: Sat, 3 Oct 2026 21:59:52 +0000
Subject: [PATCH 07/15] internal(website): Correct useModelId comment and
 DiffEditor README chain

Co-Authored-By: Claude Opus 5.5 (1M context) 
Claude-Session: https://claude.ai/code/session_015H36Yk4WBpytw9L7RRVCTK
---
 website/src/components/Playground/README.md           | 2 +-
 website/src/components/Playground/monaco/modelPath.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/src/components/Playground/README.md b/website/src/components/Playground/README.md
index e730f2c790aa..3dc21eaaa338 100644
--- a/website/src/components/Playground/README.md
+++ b/website/src/components/Playground/README.md
@@ -11,7 +11,7 @@ indexable and hydration-safe, and those behaviors are easy to drop silently.
 | `HooksPlayground` (`../HooksPlayground.tsx`) → `Playground` (`index.tsx`) | MDX docs/blog, homepage `Demo` | Editor + live preview + Store inspector |
 | `TypeScriptEditor` (`../TypeScriptEditor.tsx`) | MDX | Editor only (`variant="standalone"`) |
 | `EndpointPlayground` (`../HTTP/EndpointPlayground.tsx`) | MDX | Editor + static HTTP request/response |
-| `DiffEditor` (`../DiffEditor.tsx` → `../DiffEditorMonaco.tsx`) | MDX | Read-only Monaco diff of two fences |
+| `DiffEditor` (`../DiffEditor.tsx` → `../DiffEditorChooser.tsx` → `../DiffEditorMonaco.tsx`) | MDX | Read-only Monaco diff of two fences |
 | `Demo/CodeEditor` (`../Demo/CodeEditor.tsx`) | Homepage | One `HooksPlayground` per protocol tab |
 
 ## Layout
diff --git a/website/src/components/Playground/monaco/modelPath.ts b/website/src/components/Playground/monaco/modelPath.ts
index c349573561c8..15e53fde23b5 100644
--- a/website/src/components/Playground/monaco/modelPath.ts
+++ b/website/src/components/Playground/monaco/modelPath.ts
@@ -17,7 +17,7 @@ export function stripModelId(path: string) {
   return path.substring(candidateId.length - 1);
 }
 
-/** Stable per-mount id. Only used client-side (inside BrowserOnly), so randomness cannot cause hydration mismatches. */
+/** Stable per-mount id. Also runs during SSR, but the id only reaches Monaco (inside BrowserOnly), never markup, so randomness cannot cause hydration mismatches. */
 export function useModelId() {
   return useMemo(
     () => Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(),

From f5d35620903a7e70acba93d49e425398fc04843b Mon Sep 17 00:00:00 2001
From: Claude 
Date: Sat, 3 Oct 2026 23:40:36 +0000
Subject: [PATCH 08/15] internal(website): Scope import completions per
 playground, accept bare path= metastrings

Import completions for relative paths now list only files from the same
playground instead of every Monaco model on the page. Fence metastrings
accept unquoted path=a.ts (used in docs/rest/api/RestEndpoint.md). Also
prettier-formats the Playground README.

Co-Authored-By: Claude Opus 5.5 (1M context) 
Claude-Session: https://claude.ai/code/session_015H36Yk4WBpytw9L7RRVCTK
---
 website/src/components/Playground/README.md   | 18 +++++-----
 .../editor/__tests__/codeModel.test.tsx       |  9 +++++
 .../components/Playground/editor/codeModel.ts |  6 +++-
 .../monaco/__tests__/modelPath.test.ts        | 19 ++++++++++-
 .../components/Playground/monaco/modelPath.ts | 20 +++++++++++
 .../Playground/monaco/navigation.ts           | 34 ++++++++++---------
 6 files changed, 80 insertions(+), 26 deletions(-)

diff --git a/website/src/components/Playground/README.md b/website/src/components/Playground/README.md
index 3dc21eaaa338..babc9166761f 100644
--- a/website/src/components/Playground/README.md
+++ b/website/src/components/Playground/README.md
@@ -6,13 +6,13 @@ indexable and hydration-safe, and those behaviors are easy to drop silently.
 
 ## Entry points
 
-| Component | Used by | What it renders |
-| --- | --- | --- |
-| `HooksPlayground` (`../HooksPlayground.tsx`) → `Playground` (`index.tsx`) | MDX docs/blog, homepage `Demo` | Editor + live preview + Store inspector |
-| `TypeScriptEditor` (`../TypeScriptEditor.tsx`) | MDX | Editor only (`variant="standalone"`) |
-| `EndpointPlayground` (`../HTTP/EndpointPlayground.tsx`) | MDX | Editor + static HTTP request/response |
-| `DiffEditor` (`../DiffEditor.tsx` → `../DiffEditorChooser.tsx` → `../DiffEditorMonaco.tsx`) | MDX | Read-only Monaco diff of two fences |
-| `Demo/CodeEditor` (`../Demo/CodeEditor.tsx`) | Homepage | One `HooksPlayground` per protocol tab |
+| Component                                                                                   | Used by                        | What it renders                         |
+| ------------------------------------------------------------------------------------------- | ------------------------------ | --------------------------------------- |
+| `HooksPlayground` (`../HooksPlayground.tsx`) → `Playground` (`index.tsx`)                   | MDX docs/blog, homepage `Demo` | Editor + live preview + Store inspector |
+| `TypeScriptEditor` (`../TypeScriptEditor.tsx`)                                              | MDX                            | Editor only (`variant="standalone"`)    |
+| `EndpointPlayground` (`../HTTP/EndpointPlayground.tsx`)                                     | MDX                            | Editor + static HTTP request/response   |
+| `DiffEditor` (`../DiffEditor.tsx` → `../DiffEditorChooser.tsx` → `../DiffEditorMonaco.tsx`) | MDX                            | Read-only Monaco diff of two fences     |
+| `Demo/CodeEditor` (`../Demo/CodeEditor.tsx`)                                                | Homepage                       | One `HooksPlayground` per protocol tab  |
 
 ## Layout
 
@@ -92,7 +92,7 @@ DesignSystem/       components injected into preview scope
 
 ### Editor
 
-- Fence metastring: `title="…"`, `path="…"`, `collapsed`, `column`, `{1-3}`
+- Fence metastring: `title="…"`, `path="…"` (or bare `path=a.ts`), `collapsed`, `column`, `{1-3}`
   highlight ranges (pre-selected in Monaco); `language-*` class. Element props
   override metastring values (Demo passes them directly). `defaultTab`
   overrides `collapsed`.
@@ -106,6 +106,8 @@ DesignSystem/       components injected into preview scope
 - Fixtures are listed above the editor in stacked layout only.
 - Go-to-definition across files: focusing the target editor reveals its tab.
   Relies on the `//` model URIs (`monaco/modelPath.ts`).
+- Relative import completions list only the other files of the same
+  playground (same model id).
 - Handlers passed to `InteractiveEditor` are referentially stable so unedited
   tabs skip re-rendering on keystrokes.
 - Height follows Monaco content size and re-measures when a tab is shown.
diff --git a/website/src/components/Playground/editor/__tests__/codeModel.test.tsx b/website/src/components/Playground/editor/__tests__/codeModel.test.tsx
index aaa9c33c3fea..8d40fd2b6e9f 100644
--- a/website/src/components/Playground/editor/__tests__/codeModel.test.tsx
+++ b/website/src/components/Playground/editor/__tests__/codeModel.test.tsx
@@ -50,6 +50,15 @@ describe('code document model', () => {
     ]);
   });
 
+  test('accepts an unquoted path', () => {
+    expect(
+      parseCodeDocuments([
+        code({ metastring: 'path=Todo.ts' }, 'a'),
+        code({ metastring: "title='T' path='src/b.ts' {1}" }, 'b'),
+      ]).map(({ path }) => path),
+    ).toEqual(['Todo.ts', 'src/b.ts']);
+  });
+
   test('updates only the addressed document', () => {
     const documents = parseCodeDocuments([
       code({ metastring: 'title="One"' }, 'one'),
diff --git a/website/src/components/Playground/editor/codeModel.ts b/website/src/components/Playground/editor/codeModel.ts
index e076a2b2cde2..e300f6026a81 100644
--- a/website/src/components/Playground/editor/codeModel.ts
+++ b/website/src/components/Playground/editor/codeModel.ts
@@ -58,7 +58,11 @@ export function parseCodeDocuments(
           defaultTab ? title !== defaultTab : /\bcollapsed\b/.test(metastring),
         col: /\bcolumn\b/.test(metastring),
         path:
-          metastring.match(/path=(?["'])(?.*?)\1/)?.groups?.path ||
+          // quoted (path="a.ts") or bare (path=a.ts)
+          /path=(?:(["'])(.*?)\1|([^\s"']+))/
+            .exec(metastring)
+            ?.slice(2)
+            .find(Boolean) ||
           (fileBase.includes('.') ? fileBase : `${fileBase}.${extension}`),
         highlights: /\{([\d\-,.]+)\}/.exec(metastring)?.[1],
         language,
diff --git a/website/src/components/Playground/monaco/__tests__/modelPath.test.ts b/website/src/components/Playground/monaco/__tests__/modelPath.test.ts
index 8415e7d2ab98..03d4c3d69774 100644
--- a/website/src/components/Playground/monaco/__tests__/modelPath.test.ts
+++ b/website/src/components/Playground/monaco/__tests__/modelPath.test.ts
@@ -2,7 +2,12 @@
 
 import { renderHook } from '@testing-library/react';
 
-import { modelPath, stripModelId, useModelId } from '../modelPath';
+import {
+  modelPath,
+  siblingFilePaths,
+  stripModelId,
+  useModelId,
+} from '../modelPath';
 
 describe('model paths', () => {
   test('round-trips a namespaced file path', () => {
@@ -16,6 +21,18 @@ describe('model paths', () => {
     );
   });
 
+  test('siblingFilePaths lists only other files in the same editor', () => {
+    expect(
+      siblingFilePaths('/1/index.tsx', [
+        '/1/index.tsx',
+        '/1/api.ts',
+        '/2/other.ts',
+        '/12/near-miss.ts',
+        '/node_modules/react/index.d.ts',
+      ]),
+    ).toEqual(['/api.ts']);
+  });
+
   test('useModelId is numeric and stable across renders', () => {
     const { result, rerender } = renderHook(() => useModelId());
     const first = result.current;
diff --git a/website/src/components/Playground/monaco/modelPath.ts b/website/src/components/Playground/monaco/modelPath.ts
index 15e53fde23b5..a636509c9fa2 100644
--- a/website/src/components/Playground/monaco/modelPath.ts
+++ b/website/src/components/Playground/monaco/modelPath.ts
@@ -6,6 +6,7 @@ import { useMemo } from 'react';
  * completions (./navigation.ts) rely on this shape.
  */
 const MODEL_ID_SEGMENT = /\/\d+\//;
+const MODEL_ID_ROOT = /^\/\d+\//;
 
 export function modelPath(editorId: string, filePath: string) {
   return `/${editorId}/${filePath}`;
@@ -17,6 +18,25 @@ export function stripModelId(path: string) {
   return path.substring(candidateId.length - 1);
 }
 
+/** `/123/src/api.ts` → `/123/` (undefined when there is no id segment) */
+function modelIdSegment(path: string) {
+  return MODEL_ID_ROOT.exec(path)?.[0];
+}
+
+/**
+ * Other files in the same editor surface as `currentPath`, id stripped:
+ * import completions should not offer files from other playgrounds on the page.
+ */
+export function siblingFilePaths(
+  currentPath: string,
+  modelPaths: readonly string[],
+): string[] {
+  const id = modelIdSegment(currentPath);
+  return modelPaths
+    .filter(path => path !== currentPath && modelIdSegment(path) === id)
+    .map(stripModelId);
+}
+
 /** Stable per-mount id. Also runs during SSR, but the id only reaches Monaco (inside BrowserOnly), never markup, so randomness cannot cause hydration mismatches. */
 export function useModelId() {
   return useMemo(
diff --git a/website/src/components/Playground/monaco/navigation.ts b/website/src/components/Playground/monaco/navigation.ts
index 20ffdec78888..782059b3f516 100644
--- a/website/src/components/Playground/monaco/navigation.ts
+++ b/website/src/components/Playground/monaco/navigation.ts
@@ -1,6 +1,6 @@
 import type * as Monaco from 'monaco-editor';
 
-import { stripModelId } from './modelPath';
+import { siblingFilePaths } from './modelPath';
 
 /** Packages offered when completing a bare `from '…'` specifier. */
 const SUGGESTED_DEPENDENCIES = [
@@ -54,8 +54,8 @@ export function registerEditorOpener(monaco: typeof Monaco) {
 }
 
 /**
- * Completes import specifiers: relative paths list the page's other models
- * (playground tabs), bare specifiers list SUGGESTED_DEPENDENCIES.
+ * Completes import specifiers: relative paths list the other files in the
+ * same playground, bare specifiers list SUGGESTED_DEPENDENCIES.
  */
 export function registerImportCompletions(monaco: typeof Monaco) {
   monaco.languages.registerCompletionItemProvider('typescript', {
@@ -88,19 +88,21 @@ export function registerImportCompletions(monaco: typeof Monaco) {
 
       if (textUntilPosition.endsWith('.') || textUntilPosition.endsWith('/')) {
         return {
-          suggestions: monaco.editor
-            .getModels()
-            .map((editorModel: Monaco.editor.ITextModel) =>
-              stripModelId(editorModel.uri.path),
-            )
-            .map((file: string) => ({
-              // Show the full file path for label
-              label: file,
-              // Don't keep extension for JS files
-              insertText: file.replace(/\.tsx?$/, ''),
-              kind: monaco.languages.CompletionItemKind.Module,
-              range,
-            })),
+          suggestions: siblingFilePaths(
+            model.uri.path,
+            monaco.editor
+              .getModels()
+              .map(
+                (editorModel: Monaco.editor.ITextModel) => editorModel.uri.path,
+              ),
+          ).map((file: string) => ({
+            // Show the full file path for label
+            label: file,
+            // Don't keep extension for JS files
+            insertText: file.replace(/\.tsx?$/, ''),
+            kind: monaco.languages.CompletionItemKind.Module,
+            range,
+          })),
         };
       }
       // User is trying to import a dependency

From a896871181289f751694bad26cf966177bc96959 Mon Sep 17 00:00:00 2001
From: Claude 
Date: Sun, 4 Oct 2026 01:51:36 +0000
Subject: [PATCH 09/15] internal(website): Declare playground editor globals
 with valid TypeScript
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`declare globals { … }` is not TypeScript; the playground globals only typed
because parser error recovery leaked the wrapped declarations into global
scope, and DateTimeFormat silently became `any`.

Mount editor-types/globals.d.ts as a module and alias its exports, React,
JSX, NumberFlow, Temporal, DateTimeFormat and Manager into `declare global`.
Also type TextInput/TextArea/Formatted props that referenced unresolved names.

Co-Authored-By: Claude Opus 5.5 (1M context) 
Claude-Session: https://claude.ai/code/session_01TkVym3YjjuSjBKhLLwvZm6
---
 .../Playground/DesignSystem/TextArea.tsx      |  4 +-
 website/src/components/Playground/README.md   |  4 +-
 .../components/Playground/monaco/typeLibs.ts  | 95 +++++++++++++++----
 3 files changed, 83 insertions(+), 20 deletions(-)

diff --git a/website/src/components/Playground/DesignSystem/TextArea.tsx b/website/src/components/Playground/DesignSystem/TextArea.tsx
index b86e484d4fff..8a2bf832f2cc 100644
--- a/website/src/components/Playground/DesignSystem/TextArea.tsx
+++ b/website/src/components/Playground/DesignSystem/TextArea.tsx
@@ -1,10 +1,10 @@
 import classnames from 'clsx';
-import React, { type InputHTMLAttributes } from 'react';
+import React, { type TextareaHTMLAttributes } from 'react';
 
 export function TextArea({
   label,
   ...props
-}: InputHTMLAttributes & {
+}: TextareaHTMLAttributes & {
   label?: React.ReactNode;
 }) {
   return (
diff --git a/website/src/components/Playground/README.md b/website/src/components/Playground/README.md
index babc9166761f..05a26e4874af 100644
--- a/website/src/components/Playground/README.md
+++ b/website/src/components/Playground/README.md
@@ -117,7 +117,9 @@ DesignSystem/       components injected into preview scope
 - All documents are concatenated (deferred with `useDeferredValue`),
   stripped of imports/exports by `transformCode`, and run `noInline`
   (`render()`) with `preview/scope.ts` as globals. Keep
-  `monaco/typeLibs.ts` declarations in sync with the scope.
+  `monaco/typeLibs.ts` declarations in sync with the scope: `globalScopeLib()`
+  aliases library exports into `declare global` (valid TS only; never
+  `declare globals`), and `Array`/`Object` keep their built-in types.
 - Each playground gets its own `DataProvider` store (`MockResolver` serves
   `fixtures`); `memo(Preview)` keeps it from re-rendering on code edits.
 - Store inspector open state persists per `groupId` via tab storage and
diff --git a/website/src/components/Playground/monaco/typeLibs.ts b/website/src/components/Playground/monaco/typeLibs.ts
index eb9f9f0fa7be..465b48111168 100644
--- a/website/src/components/Playground/monaco/typeLibs.ts
+++ b/website/src/components/Playground/monaco/typeLibs.ts
@@ -91,8 +91,8 @@ const PREVIEW_SCOPE_DECLARATIONS = `declare function render(component:JSX.Elemen
         declare function Avatar(props: { src: string }):JSX.Element;
         declare function Formatted({ downColor, formatter, formatterFn, timeout, transition, transitionLength, upColor, value, stylePrefix, }: NumberProps):JSX.Element
         declare function ResetableErrorBoundary(props: { children: React.ReactNode }):JSX.Element;
-        declare function TextInput(props:Omit, 'size'> & { label?: React.ReactNode; loading?: boolean; size?: 'large' | 'medium' | 'small'; }):JSX.Element;
-        declare function TextArea(props:InputHTMLAttributes & { label?: React.ReactNode;}):JSX.Element;
+        declare function TextInput(props:Omit, 'size'> & { label?: React.ReactNode; loading?: boolean; size?: 'large' | 'medium' | 'small'; }):JSX.Element;
+        declare function TextArea(props:React.TextareaHTMLAttributes & { label?: React.ReactNode;}):JSX.Element;
         declare function SearchIcon():JSX.Element;
         declare function Loading():JSX.Element;
         declare function randomFloatInRange(min: number, max: number, decimals?: number): number;
@@ -108,7 +108,7 @@ const PREVIEW_SCOPE_DECLARATIONS = `declare function render(component:JSX.Elemen
           /**
            * Pass your own formatter function.
            */
-          formatterFn?: Formatter;
+          formatterFn?: (value: number) => string;
           /**
            * Prefix for the CSS selectors in the DOM.
            */
@@ -173,7 +173,6 @@ export function addTypeLibs(
   { modules, dataClient, globals }: TypeLibs,
 ) {
   const { typescriptDefaults } = monaco.typescript;
-  const react = modules[0];
 
   typescriptDefaults.addExtraLib(
     `declare module "react/jsx-runtime" {
@@ -182,15 +181,14 @@ export function addTypeLibs(
     'file:///node_modules/@types/react/jsx-runtime.d.ts',
   );
   typescriptDefaults.addExtraLib(
-    `import * as React from 'react'
-
-    declare global {
+    `declare module 'react' {
       namespace JSX {
         interface IntrinsicElements {
           strike: React.DetailedHTMLProps, HTMLElement>;
         }
       }
-    }`,
+    }
+    export {};`,
     'file:///node_modules/@types/react/more.d.ts',
   );
   typescriptDefaults.addExtraLib(PREVIEW_SCOPE_DECLARATIONS);
@@ -202,21 +200,84 @@ export function addTypeLibs(
     );
   });
 
-  // React, NumberFlow and Temporal are also globals in the preview scope
-  typescriptDefaults.addExtraLib(`declare globals { ${react} }`);
+  DATA_CLIENT_ENTRIES.forEach((entry, i) => {
+    typescriptDefaults.addExtraLib(
+      `declare module "@data-client/${entry}" { ${dataClient[i]} }`,
+      `file:///node_modules/@data-client/${entry}/index.d.ts`,
+    );
+  });
+
+  const { source, names } = parseGlobalsLib(globals);
   typescriptDefaults.addExtraLib(
-    `declare globals { export { default as NumberFlow } from '@number-flow/react'; }`,
+    `declare module "${GLOBALS_MODULE}" { ${source} }`,
+    `file:///node_modules/${GLOBALS_MODULE}/index.d.ts`,
   );
   typescriptDefaults.addExtraLib(
-    `declare globals { export { Temporal, DateTimeFormat } from 'temporal-polyfill'; }`,
+    globalScopeLib(names),
+    'file:///node_modules/@types/playground-scope/index.d.ts',
   );
+}
 
-  DATA_CLIENT_ENTRIES.forEach((entry, i) => {
-    typescriptDefaults.addExtraLib(
-      `declare module "@data-client/${entry}" { ${dataClient[i]} }`,
-      `file:///node_modules/@data-client/${entry}/index.d.ts`,
+/** Module name for editor-types/globals.d.ts; only globalScopeLib() imports it. */
+const GLOBALS_MODULE = 'playground-globals';
+
+/**
+ * Names the preview scope provides that would redeclare a built-in global.
+ * They keep their built-in types (use `schema.Array`, `schema.Object`).
+ */
+const BUILTIN_NAMES = new Set(['Array', 'Object']);
+
+/** Top-level `export { … };` lists (not `export { … } from '…'` re-exports) */
+const EXPORT_LIST = /^export\s*\{([^}]*)\}\s*;/gm;
+
+/**
+ * globals.d.ts is a rollup-generated module that exports its declarations
+ * through a top-level `export { … };` list. Returns those names, and the source
+ * with `type` markers removed from the list so `import X = M.X` can alias
+ * type-only exports too.
+ */
+function parseGlobalsLib(globals: string): {
+  source: string;
+  names: string[];
+} {
+  const names: string[] = [];
+  const source = globals.replace(EXPORT_LIST, (_, list: string) => {
+    const specifiers = list
+      .split(',')
+      .map(specifier => specifier.trim().replace(/^type\s+/, ''))
+      .filter(Boolean);
+    specifiers.forEach(specifier =>
+      names.push(specifier.split(/\s+as\s+/).pop() as string),
     );
+    return `export { ${specifiers.join(', ')} };`;
   });
+  if (globals && !names.length)
+    console.warn('Playground: no exports found in globals.d.ts');
+  return {
+    source,
+    names: names.filter(name => name !== 'default' && !BUILTIN_NAMES.has(name)),
+  };
+}
+
+/**
+ * Declares the preview scope's library exports (../preview/scope.ts) as
+ * globals, so playground code can use them without imports.
+ */
+function globalScopeLib(scopeNames: string[]): string {
+  return `import * as _React from 'react';
+import _NumberFlow from '@number-flow/react';
+import { Temporal as _Temporal, Intl as _Intl } from 'temporal-polyfill';
+import type { ActionTypes, Manager as _Manager } from '@data-client/core';
+import * as _globals from '${GLOBALS_MODULE}';
 
-  typescriptDefaults.addExtraLib(`declare globals { ${globals} }`);
+declare global {
+  export import React = _React;
+  export import JSX = _React.JSX;
+  const NumberFlow: typeof _NumberFlow;
+  export import Temporal = _Temporal;
+  export import DateTimeFormat = _Intl.DateTimeFormat;
+  // type-only re-export in globals.d.ts, which \`import =\` can't alias
+  interface Manager extends _Manager {}
+${scopeNames.map(name => `  export import ${name} = _globals.${name};`).join('\n')}
+}`;
 }

From bc2c8407469fdb5490b03e53ee26f9ddb106427f Mon Sep 17 00:00:00 2001
From: Claude 
Date: Sun, 4 Oct 2026 01:54:50 +0000
Subject: [PATCH 10/15] internal(website): Type use and mockFetch playground
 globals

Co-Authored-By: Claude Opus 5.5 (1M context) 
Claude-Session: https://claude.ai/code/session_01TkVym3YjjuSjBKhLLwvZm6
---
 website/src/components/Playground/monaco/typeLibs.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/website/src/components/Playground/monaco/typeLibs.ts b/website/src/components/Playground/monaco/typeLibs.ts
index 465b48111168..167737aecb04 100644
--- a/website/src/components/Playground/monaco/typeLibs.ts
+++ b/website/src/components/Playground/monaco/typeLibs.ts
@@ -96,6 +96,7 @@ const PREVIEW_SCOPE_DECLARATIONS = `declare function render(component:JSX.Elemen
         declare function SearchIcon():JSX.Element;
         declare function Loading():JSX.Element;
         declare function randomFloatInRange(min: number, max: number, decimals?: number): number;
+        declare function mockFetch(getResponse: (...args: any[]) => T, name?: string, delay?: number): (...args: any[]) => Promise;
         declare interface NumberProps {
           /**
            * Color value when the component flashes 'down'.
@@ -273,6 +274,7 @@ import * as _globals from '${GLOBALS_MODULE}';
 declare global {
   export import React = _React;
   export import JSX = _React.JSX;
+  export import use = _React.use;
   const NumberFlow: typeof _NumberFlow;
   export import Temporal = _Temporal;
   export import DateTimeFormat = _Intl.DateTimeFormat;

From 2b1c92d619ef3e8c18a06b58f51abba8a92bc01a Mon Sep 17 00:00:00 2001
From: Nathaniel Tucker 
Date: Sat, 3 Oct 2026 23:18:53 -0400
Subject: [PATCH 11/15] internal(website): Type React jsx-runtime,
 path-to-regexp and bignumber.js in playgrounds (#4137)

Mount real declarations for `react/jsx-runtime` (was an empty stub),
`path-to-regexp` (never mounted, so @data-client/rest's PathFunction and
ParamData were unresolved) and `bignumber.js` (stub whose types were never
mounted), and declare `BigNumber` as a playground global since the preview
scope provides it.


Claude-Session: https://claude.ai/code/session_01W5R8xxJwz7dAy3Uk2v5eH5

Co-authored-by: Claude 
---
 scripts/copywebsitetypes.sh                   |    5 +-
 .../Playground/editor-types/bignumber.d.ts    | 1929 ++++++++++++++++-
 .../editor-types/path-to-regexp.d.ts          |  147 ++
 .../editor-types/react-jsx-runtime.d.ts       |   24 +
 .../components/Playground/monaco/typeLibs.ts  |   44 +-
 5 files changed, 2129 insertions(+), 20 deletions(-)
 create mode 100644 website/src/components/Playground/editor-types/path-to-regexp.d.ts
 create mode 100644 website/src/components/Playground/editor-types/react-jsx-runtime.d.ts

diff --git a/scripts/copywebsitetypes.sh b/scripts/copywebsitetypes.sh
index ec58c61dfe77..e78704317d9b 100755
--- a/scripts/copywebsitetypes.sh
+++ b/scripts/copywebsitetypes.sh
@@ -14,9 +14,12 @@ cp ./packages/react/nextjs.d.ts ./website/src/components/Playground/editor-types
 cp ./packages/react/ssr.d.ts ./website/src/components/Playground/editor-types/@data-client/react/ssr.d.ts
 cp ./packages/react/redux.d.ts ./website/src/components/Playground/editor-types/@data-client/react/redux.d.ts
 cp ./node_modules/@types/react/index.d.ts ./website/src/components/Playground/editor-types/react.d.ts
+# ambient module declarations can't use relative imports
+sed 's#from "\./"#from "react"#' ./node_modules/@types/react/jsx-runtime.d.ts > ./website/src/components/Playground/editor-types/react-jsx-runtime.d.ts
 cp ./node_modules/temporal-spec/index.d.ts ./website/src/components/Playground/editor-types/temporal.d.ts
-cp ./node_modules/bignumber.js/bignumber.d.ts ./website/src/components/Playground/editor-types/bignumber.d.ts
+cp ./node_modules/bignumber.js/dist/bignumber.d.mts ./website/src/components/Playground/editor-types/bignumber.d.ts
 cp ./node_modules/@types/qs/index.d.ts ./website/src/components/Playground/editor-types/qs.d.ts
+cp ./node_modules/path-to-regexp/dist/index.d.ts ./website/src/components/Playground/editor-types/path-to-regexp.d.ts
 yarn run rollup --config ./scripts/rollup-plugins/uuid-types.rollup.config.js
 cp ./node_modules/@number-flow/react/dist/index.d.ts ./website/src/components/Playground/editor-types/@number-flow/react.d.ts
 rm ./website/src/components/Playground/editor-types/globals.d.ts
diff --git a/website/src/components/Playground/editor-types/bignumber.d.ts b/website/src/components/Playground/editor-types/bignumber.d.ts
index 3ee5405a6210..578d93ca8891 100644
--- a/website/src/components/Playground/editor-types/bignumber.d.ts
+++ b/website/src/components/Playground/editor-types/bignumber.d.ts
@@ -1,5 +1,1928 @@
-/// 
+// Type definitions for bignumber.js v11.1
+// Project: https://github.com/MikeMcl/bignumber.js
+// Definitions by: Michael Mclaughlin 
+// Definitions: https://github.com/MikeMcl/bignumber.js
 
-export = BigNumber;
+// Documentation: http://mikemcl.github.io/bignumber.js/
+//
+//   class     BigNumber
+//   type      BigNumber.Constructor
+//   type      BigNumber.ModuloMode
+//   type      BigNumber.RoundingMode
+//   type      BigNumber.Value
+//   interface BigNumber.Config
+//   interface BigNumber.Format
+//   interface BigNumber.Instance
+//
+// Example:
+//
+//   import {BigNumber} from "bignumber.js"
+//   //import BigNumber from "bignumber.js"
+//   //import BigNumber = require("bignumber.js");
+//
+//   let rm: BigNumber.RoundingMode = BigNumber.ROUND_UP;
+//   let f: BigNumber.Format = { decimalSeparator: ',' };
+//   let c: BigNumber.Config = { DECIMAL_PLACES: 4, ROUNDING_MODE: rm, FORMAT: f };
+//   BigNumber.config(c);
+//
+//   let v: BigNumber.Value = '12345.6789';
+//   let b: BigNumber = new BigNumber(v);
+//
+// The use of compiler option `--strictNullChecks` is recommended.
 
-export as namespace BigNumber;
+declare namespace BigNumber {
+
+  /** See `BigNumber.config` (alias `BigNumber.set`) and `BigNumber.clone`. */
+  interface Config {
+
+    /**
+     * An integer, 0 to 1e+9. Default value: 20.
+     *
+     * The maximum number of decimal places of the result of operations involving division, i.e.
+     * division, square root and base conversion operations, and exponentiation when the exponent is
+     * negative.
+     *
+     * ```ts
+     * BigNumber.config({ DECIMAL_PLACES: 5 })
+     * BigNumber.set({ DECIMAL_PLACES: 5 })
+     * ```
+     */
+    DECIMAL_PLACES?: number;
+
+    /**
+     * An integer, 0 to 8. Default value: `BigNumber.ROUND_HALF_UP` (4).
+     *
+     * The rounding mode used in operations that involve division (see `DECIMAL_PLACES`) and the
+     * default rounding mode of the `decimalPlaces`, `precision`, `toExponential`, `toFixed`,
+     * `toFormat` and `toPrecision` methods.
+     *
+     * The modes are available as enumerated properties of the BigNumber constructor.
+     *
+     * ```ts
+     * BigNumber.config({ ROUNDING_MODE: 0 })
+     * BigNumber.set({ ROUNDING_MODE: BigNumber.ROUND_UP })
+     * ```
+     */
+    ROUNDING_MODE?: BigNumber.RoundingMode;
+
+    /**
+     * An integer, 0 to 1e+9, or an array, [-1e+9 to 0, 0 to 1e+9].
+     * Default value: `[-7, 21]`.
+     *
+     * The exponent value(s) at which `toString` returns exponential notation.
+     *
+     * If a single number is assigned, the value is the exponent magnitude.
+     *
+     * If an array of two numbers is assigned then the first number is the negative exponent value at
+     * and beneath which exponential notation is used, and the second number is the positive exponent
+     * value at and above which exponential notation is used.
+     *
+     * For example, to emulate JavaScript numbers in terms of the exponent values at which they begin
+     * to use exponential notation, use `[-7, 21]`.
+     *
+     * ```ts
+     * BigNumber.config({ EXPONENTIAL_AT: 2 })
+     * new BigNumber(12.3)         // '12.3'        e is only 1
+     * new BigNumber(123)          // '1.23e+2'
+     * new BigNumber(0.123)        // '0.123'       e is only -1
+     * new BigNumber(0.0123)       // '1.23e-2'
+     *
+     * BigNumber.config({ EXPONENTIAL_AT: [-7, 21] })
+     * new BigNumber(123456789)    // '123456789'   e is only 8
+     * new BigNumber(0.000000123)  // '1.23e-7'
+     *
+     * // Almost never return exponential notation:
+     * BigNumber.config({ EXPONENTIAL_AT: 1e+9 })
+     *
+     * // Always return exponential notation:
+     * BigNumber.config({ EXPONENTIAL_AT: 0 })
+     * ```
+     *
+     * Regardless of the value of `EXPONENTIAL_AT`, the `toFixed` method will always return a value in
+     * normal notation and the `toExponential` method will always return a value in exponential form.
+     * Calling `toString` with a base argument, e.g. `toString(10)`, will also always return normal
+     * notation.
+     */
+    EXPONENTIAL_AT?: number | [number, number];
+
+    /**
+     * An integer, magnitude 1 to 1e+9, or an array, [-1e+9 to -1, 1 to 1e+9].
+     * Default value: `[-1e+9, 1e+9]`.
+     *
+     * The exponent value(s) beyond which overflow to Infinity and underflow to zero occurs.
+     *
+     * If a single number is assigned, it is the maximum exponent magnitude: values wth a positive
+     * exponent of greater magnitude become Infinity and those with a negative exponent of greater
+     * magnitude become zero.
+     *
+     * If an array of two numbers is assigned then the first number is the negative exponent limit and
+     * the second number is the positive exponent limit.
+     *
+     * For example, to emulate JavaScript numbers in terms of the exponent values at which they
+     * become zero and Infinity, use [-324, 308].
+     *
+     * ```ts
+     * BigNumber.config({ RANGE: 500 })
+     * BigNumber.config().RANGE     // [ -500, 500 ]
+     * new BigNumber('9.999e499')   // '9.999e+499'
+     * new BigNumber('1e500')       // 'Infinity'
+     * new BigNumber('1e-499')      // '1e-499'
+     * new BigNumber('1e-500')      // '0'
+     *
+     * BigNumber.config({ RANGE: [-3, 4] })
+     * new BigNumber(99999)         // '99999'      e is only 4
+     * new BigNumber(100000)        // 'Infinity'   e is 5
+     * new BigNumber(0.001)         // '0.01'       e is only -3
+     * new BigNumber(0.0001)        // '0'          e is -4
+     * ```
+     * The largest possible magnitude of a finite BigNumber is 9.999...e+1000000000.
+     * The smallest possible magnitude of a non-zero BigNumber is 1e-1000000000.
+     */
+    RANGE?: number | [number, number];
+
+    /**
+     * A boolean: `true` or `false`. Default value: `false`.
+     *
+     * The value that determines whether cryptographically-secure pseudo-random number generation is
+     * used. If `CRYPTO` is set to true then the random method will generate random digits using
+     * `crypto.getRandomValues` in browsers that support it, or `crypto.randomBytes` if using a
+     * version of Node.js that supports it.
+     *
+     * If neither function is supported by the host environment then attempting to set `CRYPTO` to
+     * `true` will fail and an exception will be thrown.
+     *
+     * If `CRYPTO` is `false` then the source of randomness used will be `Math.random` (which is
+     * assumed to generate at least 30 bits of randomness).
+     *
+     * See `BigNumber.random`.
+     *
+     * ```ts
+     * // Node.js
+     * global.crypto = require('crypto')
+     *
+     * BigNumber.config({ CRYPTO: true })
+     * BigNumber.config().CRYPTO       // true
+     * BigNumber.random()              // 0.54340758610486147524
+     * ```
+     */
+    CRYPTO?: boolean;
+
+    /**
+     * A boolean: `true` or `false`. Default value: `true`.
+     *
+     * The value that determines whether an exception is thrown or a BigNumber with value `NaN`
+     * is returned when an invalid value is passed to the constructor or a method as the value
+     * of a BigNumber.
+     *
+     * If `STRICT` is `true` then a BigNumber Error is thrown if the value is not of type
+     * BigNumber, number, string, or BigInt, or if the value is a string that is not a
+     * valid numeric value.
+     *
+     * If `STRICT` is `false` then a BigNumber with value `NaN` is returned if the value is not
+     * a valid numeric value. Types unsupported when `STRICT` is `true` are first converted to
+     * a string.
+     *
+     * ```ts
+     * BigNumber.config({ STRICT: false })
+     * new BigNumber('blurgh')     // 'NaN'
+     * ```
+     */
+    STRICT?: boolean;
+
+    /**
+     * An integer, 0, 1, 3, 6 or 9. Default value: `BigNumber.ROUND_DOWN` (1).
+     *
+     * The modulo mode used when calculating the modulus: `a mod n`.
+     * The quotient, `q = a / n`, is calculated according to the `ROUNDING_MODE` that corresponds to
+     * the chosen `MODULO_MODE`.
+     * The remainder, `r`, is calculated as: `r = a - n * q`.
+     *
+     * The modes that are most commonly used for the modulus/remainder operation are shown in the
+     * following table. Although the other rounding modes can be used, they may not give useful
+     * results.
+     *
+     * Property           | Value | Description
+     * :------------------|:------|:------------------------------------------------------------------
+     *  `ROUND_UP`        |   0   | The remainder is positive if the dividend is negative.
+     *  `ROUND_DOWN`      |   1   | The remainder has the same sign as the dividend.
+     *                    |       | Uses 'truncating division' and matches JavaScript's `%` operator .
+     *  `ROUND_FLOOR`     |   3   | The remainder has the same sign as the divisor.
+     *                    |       | This matches Python's `%` operator.
+     *  `ROUND_HALF_EVEN` |   6   | The IEEE 754 remainder function.
+     *  `EUCLID`          |   9   | The remainder is always positive.
+     *                    |       | Euclidian division: `q = sign(n) * floor(a / abs(n))`
+     *
+     * The rounding/modulo modes are available as enumerated properties of the BigNumber constructor.
+     *
+     * See `modulo`.
+     *
+     * ```ts
+     * BigNumber.config({ MODULO_MODE: BigNumber.EUCLID })
+     * BigNumber.set({ MODULO_MODE: 9 })          // equivalent
+     * ```
+     */
+    MODULO_MODE?: BigNumber.ModuloMode;
+
+    /**
+     * An integer, 0 to 1e+9. Default value: 0.
+     *
+     * The maximum precision, i.e. number of significant digits, of the result of the power operation
+     * - unless a modulus is specified.
+     *
+     * If set to 0, the number of significant digits will not be limited.
+     *
+     * See `exponentiatedBy`.
+     *
+     * ```ts
+     * BigNumber.config({ POW_PRECISION: 100 })
+     * ```
+     */
+    POW_PRECISION?: number;
+
+    /**
+     * An object including any number of the properties shown below.
+     *
+     * The object configures the format of the string returned by the `toFormat` method.
+     * The example below shows the properties of the object that are recognised, and
+     * their default values.
+     *
+     * Unlike the other configuration properties, the values of the properties of the `FORMAT` object
+     * will not be checked for validity - the existing object will simply be replaced by the object
+     * that is passed in.
+     *
+     * See `toFormat`.
+     *
+     * ```ts
+     * BigNumber.config({
+     *   FORMAT: {
+     *     // string to prepend
+     *     prefix: '',
+     *     // the negative sign
+     *     negativeSign: '-',
+     *     // the positive sign
+     *     positiveSign: '',
+     *     // the decimal separator
+     *     decimalSeparator: '.',
+     *     // the grouping separator of the integer part
+     *     groupSeparator: ',',
+     *     // the primary grouping size of the integer part
+     *     groupSize: 3,
+     *     // the secondary grouping size of the integer part
+     *     secondaryGroupSize: 0,
+     *     // the grouping separator of the fraction part
+     *     fractionGroupSeparator: '',
+     *     // the grouping size of the fraction part
+     *     fractionGroupSize: 0,
+    *     // string to append
+    *     suffix: ''
+     *   }
+     * })
+     * ```
+     */
+    FORMAT?: BigNumber.Format;
+
+    /**
+     * The alphabet used for base conversion. The length of the alphabet corresponds to the maximum
+     * value of the base argument that can be passed to the BigNumber constructor or `toString`.
+     *
+     * Default value: `'0123456789abcdefghijklmnopqrstuvwxyz'`.
+     *
+    * There is no maximum length for the alphabet, but it must be at least two characters long,
+    * and it must not contain whitespace or a repeated character, or the sign indicators '+' and
+    * '-', or the decimal separator '.'.
+     *
+     * ```ts
+     * // duodecimal (base 12)
+     * BigNumber.config({ ALPHABET: '0123456789TE' })
+     * x = new BigNumber('T', 12)
+     * x.toString()                // '10'
+     * x.toString(12)              // 'T'
+     * ```
+     */
+    ALPHABET?: string;
+  }
+
+  /** See `FORMAT` and `toFormat`. */
+  interface Format {
+
+    /** The string to prepend. */
+    prefix?: string;
+
+    /** The negative sign. */
+    negativeSign?: string;
+
+    /** The positive sign. */
+    positiveSign?: string;
+
+    /** The decimal separator. */
+    decimalSeparator?: string;
+
+    /** The grouping separator of the integer part. */
+    groupSeparator?: string;
+
+    /** The primary grouping size of the integer part. */
+    groupSize?: number;
+
+    /** The secondary grouping size of the integer part. */
+    secondaryGroupSize?: number;
+
+    /** The grouping separator of the fraction part. */
+    fractionGroupSeparator?: string;
+
+    /** The grouping size of the fraction part. */
+    fractionGroupSize?: number;
+
+    /** The string to append. */
+    suffix?: string;
+  }
+
+  interface Instance {
+
+    /** The coefficient of the value of this BigNumber, an array of base 1e14 integer numbers, or null. */
+    readonly c: number[] | null;
+
+    /** The exponent of the value of this BigNumber, an integer number, -1000000000 to 1000000000, or null. */
+    readonly e: number | null;
+
+    /** The sign of the value of this BigNumber, -1, 1, or null. */
+    readonly s: number | null;
+
+    [key: string]: any;
+  }
+
+  type Constructor = typeof BigNumber;
+  type ModuloMode = 0 | 1 | 3 | 6 | 9;
+  type RoundingMode = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  type Value = string | number | bigint | Instance;
+}
+
+declare class BigNumber implements BigNumber.Instance {
+
+  /** Used internally to identify a BigNumber instance. */
+  private readonly _isBigNumber: true;
+
+  /** The coefficient of the value of this BigNumber, an array of base 1e14 integer numbers, or null. */
+  readonly c: number[] | null;
+
+  /** The exponent of the value of this BigNumber, an integer number, -1000000000 to 1000000000, or null. */
+  readonly e: number | null;
+
+  /** The sign of the value of this BigNumber, -1, 1, or null. */
+  readonly s: number | null;
+
+  /**
+   * Returns a new instance of a BigNumber object with value `n`, where `n` is a numeric value in
+   * the specified `base`, or base 10 if `base` is omitted.
+   *
+   * ```ts
+   * x = new BigNumber(0.1)                   // '0.1'
+   * // 'new' is optional
+   * y = BigNumber(x)                         // '0.1'
+   * ```
+   *
+   * Note that the BigNumber constructor accepts an `n` of type `number` purely as a convenience
+   * so that string quotes don't have to be typed when entering literal values, and that it is
+   * the `toString` value of `n` that is used rather than its underlying binary floating point
+   * value converted to decimal.
+   *
+   * If `n` is a decimal value and a `base` is not specified, it can be in normal or exponential
+   * notation. If a `base` is specified, `n` must be a string in normal notation. Values in any
+   * base can have fraction digits, i.e. digits after the decimal point.
+   *
+   * ```ts
+   * new BigNumber(43210)                     // '43210'
+   * new BigNumber('4.321e+4')                // '43210'
+   * new BigNumber('-735.0918e-430')          // '-7.350918e-428'
+   * new BigNumber('123412421.234324', 5)     // '607236.557696'
+   * ```
+   *
+   * Signed `0`, signed `Infinity` and `NaN` are supported.
+   *
+   * ```ts
+   * new BigNumber('-Infinity')               // '-Infinity'
+   * new BigNumber(NaN)                       // 'NaN'
+   * new BigNumber(-0)                        // '0'
+   * new BigNumber('.5')                      // '0.5'
+   * new BigNumber('+2')                      // '2'
+   * ```
+   *
+   * String values in hexadecimal literal form, e.g. `'0xff'`, are valid, as are string values with
+   * the octal and binary prefixs `'0o'` and `'0b'`. String values in octal literal form without the
+   * prefix will be interpreted as decimals, e.g. `'011'` is interpreted as 11, not 9.
+   *
+   * ```ts
+   * new BigNumber('-10110100.1', 2)          // '-180.5'
+   * new BigNumber('-0b10110100.1')           // '-180.5'
+   * new BigNumber('ff.8', 16)                // '255.5'
+   * new BigNumber('0xff.8')                  // '255.5'
+   * ```
+   *
+   * String values may contain underscores as numeric separators.
+   * Each underscore must be between two digits.
+   *
+   * new BigNumber('1_000_000.000_5')         // '1000000.0005'
+   * new BigNumber('0xff_ff')                 // '65535'
+   * new BigNumber('1010_1111', 2)            // '175'
+   *
+   * If a base is specified, `n` is converted to a decimal BigNumber value rounded according to
+   * the current `DECIMAL_PLACES` and `ROUNDING_MODE` settings.
+   *
+   * ```ts
+   * BigNumber.config({ DECIMAL_PLACES: 5 })
+   * new BigNumber('xy.z', 36)                // '1222.97222'
+   * ```
+   *
+   * An error is thrown if `base` is invalid.
+   *
+   * There is no limit to the number of digits of a value of type string (other than that of
+   * JavaScript's maximum array size). See `RANGE` to set the maximum and minimum possible exponent
+   * value of a BigNumber.
+   *
+   * ```ts
+   * new BigNumber('5032485723458348569331745.33434346346912144534543')
+   * new BigNumber('4.321e10000000')
+   * ```
+   *
+   * If `n` is a value of an unsupported type or not a valid numeric value then a BigNumber Error
+   * is thrown, unless `STRICT` is `false`, whereupon a BigNumber with value `NaN` is returned.
+   * See `STRICT` for more details.
+   *
+   * ```ts
+   * new BigNumber('.1*')                    // '[BigNumber Error] Not a number: .1*'
+   * new BigNumber('blurgh')                 // '[BigNumber Error] Not a number: blurgh'
+   * new BigNumber('9', 2)                   // '[BigNumber Error] Not a base 2 number: 9'
+   * ```
+   *
+   * In advanced usage, a BigNumber can also be created from a plain object with `c`, `e` and `s`
+   * properties, representing its coefficient, exponent and sign respectively, if an `_isBigNumber`
+   * property with the value `true` is also present.
+   *
+   * ```ts
+   * new BigNumber({ s: 1, e: 2, c: [ 777, 12300000000000 ], _isBigNumber: true })    // '777.123'
+   * ```
+   *
+   * See `toObject` for converting a BigNumber to a plain object.
+   *
+   * @param n A numeric value.
+   * @param base The base of `n`, integer, 2 to 36 (or `ALPHABET.length`, see `ALPHABET`).
+   */
+  constructor(n: BigNumber.Value);
+  constructor(n: string, base: number);
+
+  /**
+   * Returns a BigNumber whose value is the absolute value, i.e. the magnitude, of the value of this
+   * BigNumber.
+   *
+   * The return value is always exact and unrounded.
+   *
+   * ```ts
+   * x = new BigNumber(-0.8)
+   * x.absoluteValue()           // '0.8'
+   * ```
+   */
+  absoluteValue(): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the absolute value, i.e. the magnitude, of the value of this
+   * BigNumber.
+   *
+   * The return value is always exact and unrounded.
+   *
+   * ```ts
+   * x = new BigNumber(-0.8)
+   * x.abs()                     // '0.8'
+   * ```
+   */
+  abs(): BigNumber;
+
+  /**
+   *  Returns |                                                               |
+   * :-------:|:--------------------------------------------------------------|
+   *     1    | If the value of this BigNumber is greater than the value of `n`
+   *    -1    | If the value of this BigNumber is less than the value of `n`
+   *     0    | If this BigNumber and `n` have the same value
+   *   null   | If the value of either this BigNumber or `n` is `NaN`
+   *
+   * ```ts
+   *
+   * x = new BigNumber(Infinity)
+   * y = new BigNumber(5)
+   * x.comparedTo(y)                 // 1
+   * x.comparedTo(x.minus(1))        // 0
+   * y.comparedTo(NaN)               // null
+   * y.comparedTo('110', 2)          // -1
+   * ```
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  comparedTo(n: BigNumber.Value): 1 | -1 | 0 | null;
+  comparedTo(n: string, base: number): 1 | -1 | 0 | null;
+
+  /**
+   * Returns a BigNumber whose value is the value of this BigNumber rounded to `decimalPlaces`
+   * using `roundingMode`.
+   *
+   * If `decimalPlaces` is omitted, the return value is the number of decimal places of the value
+   * of this BigNumber, or `null` if the value of this BigNumber is ±`Infinity` or `NaN`.
+   *
+   * If `roundingMode` is omitted, `ROUNDING_MODE` is used.
+   *
+   * Throws if `decimalPlaces` or `roundingMode` is invalid.
+   *
+   * ```ts
+   * x = new BigNumber(1234.56)
+   * x.decimalPlaces()                      // 2
+   * x.decimalPlaces(1)                     // '1234.6'
+   * x.decimalPlaces(2)                     // '1234.56'
+   * x.decimalPlaces(-2)                    // '1200'
+   * x.decimalPlaces(10)                    // '1234.56'
+   * x.decimalPlaces(0, 1)                  // '1234'
+   * x.decimalPlaces(0, 6)                  // '1235'
+   * x.decimalPlaces(1, 1)                  // '1234.5'
+   * x.decimalPlaces(1, BigNumber.ROUND_HALF_EVEN)     // '1234.6'
+   * x                                      // '1234.56'
+   * y = new BigNumber('9.9e-101')
+   * y.decimalPlaces()                      // 102
+   * ```
+   *
+   * @param [decimalPlaces] Decimal places, integer, -1e+9 to 1e+9.
+   * @param [roundingMode] Rounding mode, integer, 0 to 8.
+   */
+  decimalPlaces(): number | null;
+  decimalPlaces(decimalPlaces: number, roundingMode?: BigNumber.RoundingMode): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the value of this BigNumber rounded to `decimalPlaces`
+   * using `roundingMode`.
+   *
+   * If `decimalPlaces` is omitted, the return value is the number of decimal places of the value
+   * of this BigNumber, or `null` if the value of this BigNumber is ±`Infinity` or `NaN`.
+   *
+   * If `roundingMode` is omitted, `ROUNDING_MODE` is used.
+   *
+   * Throws if `decimalPlaces` or `roundingMode` is invalid.
+   *
+   * ```ts
+   * x = new BigNumber(1234.56)
+   * x.dp()                                 // 2
+   * x.dp(1)                                // '1234.6'
+   * x.dp(2)                                // '1234.56'
+   * x.dp(-2)                               // '1200'
+   * x.dp(10)                               // '1234.56'
+   * x.dp(0, 1)                             // '1234'
+   * x.dp(0, 6)                             // '1235'
+   * x.dp(1, 1)                             // '1234.5'
+   * x.dp(1, BigNumber.ROUND_HALF_EVEN)     // '1234.6'
+   * x                                      // '1234.56'
+   * y = new BigNumber('9.9e-101')
+   * y.dp()                                 // 102
+   * ```
+   *
+   * @param [decimalPlaces] Decimal places, integer, -1e+9 to 1e+9.
+   * @param [roundingMode] Rounding mode, integer, 0 to 8.
+   */
+  dp(): number | null;
+  dp(decimalPlaces: number, roundingMode?: BigNumber.RoundingMode): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the value of this BigNumber divided by `n`, rounded
+   * according to the current `DECIMAL_PLACES` and `ROUNDING_MODE` settings.
+   *
+   * ```ts
+   * x = new BigNumber(355)
+   * y = new BigNumber(113)
+   * x.dividedBy(y)                  // '3.14159292035398230088'
+   * x.dividedBy(5)                  // '71'
+   * x.dividedBy('47', 16)           // '5'
+   * ```
+   *
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  dividedBy(n: BigNumber.Value): BigNumber;
+  dividedBy(n: string, base: number): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the value of this BigNumber divided by `n`, rounded
+   * according to the current `DECIMAL_PLACES` and `ROUNDING_MODE` settings.
+   *
+   * ```ts
+   * x = new BigNumber(355)
+   * y = new BigNumber(113)
+   * x.div(y)                    // '3.14159292035398230088'
+   * x.div(5)                    // '71'
+   * x.div('47', 16)             // '5'
+   * ```
+   *
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  div(n: BigNumber.Value): BigNumber;
+  div(n: string, base: number): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the integer part of dividing the value of this BigNumber by
+   * `n`.
+   *
+   * ```ts
+   * x = new BigNumber(5)
+   * y = new BigNumber(3)
+   * x.dividedToIntegerBy(y)              // '1'
+   * x.dividedToIntegerBy(0.7)            // '7'
+   * x.dividedToIntegerBy('0.f', 16)      // '5'
+   * ```
+   *
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  dividedToIntegerBy(n: BigNumber.Value): BigNumber;
+  dividedToIntegerBy(n: string, base: number): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the integer part of dividing the value of this BigNumber by
+   * `n`.
+   *
+   * ```ts
+   * x = new BigNumber(5)
+   * y = new BigNumber(3)
+   * x.idiv(y)                       // '1'
+   * x.idiv(0.7)                     // '7'
+   * x.idiv('0.f', 16)               // '5'
+   * ```
+   *
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  idiv(n: BigNumber.Value): BigNumber;
+  idiv(n: string, base: number): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the value of this BigNumber exponentiated by `n`, i.e.
+   * raised to the power `n`, and optionally modulo a modulus `m`.
+   *
+   * If `n` is negative the result is rounded according to the current `DECIMAL_PLACES` and
+   * `ROUNDING_MODE` settings.
+   *
+   * As the number of digits of the result of the power operation can grow so large so quickly,
+   * e.g. 123.456**10000 has over 50000 digits, the number of significant digits calculated is
+   * limited to the value of the `POW_PRECISION` setting (unless a modulus `m` is specified).
+   *
+   * By default `POW_PRECISION` is set to 0. This means that an unlimited number of significant
+   * digits will be calculated, and that the method's performance will decrease dramatically for
+   * larger exponents.
+   *
+   * If `m` is specified and the value of `m`, `n` and this BigNumber are integers and `n` is
+   * positive, then a fast modular exponentiation algorithm is used, otherwise the operation will
+   * be performed as `x.exponentiatedBy(n).modulo(m)` with a `POW_PRECISION` of 0.
+   *
+   * Throws if `n` is not an integer.
+   *
+   * ```ts
+   * Math.pow(0.7, 2)                    // 0.48999999999999994
+   * x = new BigNumber(0.7)
+   * x.exponentiatedBy(2)                // '0.49'
+   * BigNumber(3).exponentiatedBy(-2)    // '0.11111111111111111111'
+   * ```
+   *
+   * @param n The exponent, an integer.
+   * @param [m] The modulus.
+   */
+  exponentiatedBy(n: BigNumber.Value, m?: BigNumber.Value): BigNumber;
+  exponentiatedBy(n: number, m?: BigNumber.Value): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the value of this BigNumber exponentiated by `n`, i.e.
+   * raised to the power `n`, and optionally modulo a modulus `m`.
+   *
+   * If `n` is negative the result is rounded according to the current `DECIMAL_PLACES` and
+   * `ROUNDING_MODE` settings.
+   *
+   * As the number of digits of the result of the power operation can grow so large so quickly,
+   * e.g. 123.456**10000 has over 50000 digits, the number of significant digits calculated is
+   * limited to the value of the `POW_PRECISION` setting (unless a modulus `m` is specified).
+   *
+   * By default `POW_PRECISION` is set to 0. This means that an unlimited number of significant
+   * digits will be calculated, and that the method's performance will decrease dramatically for
+   * larger exponents.
+   *
+   * If `m` is specified and the value of `m`, `n` and this BigNumber are integers and `n` is
+   * positive, then a fast modular exponentiation algorithm is used, otherwise the operation will
+   * be performed as `x.pow(n).modulo(m)` with a `POW_PRECISION` of 0.
+   *
+   * Throws if `n` is not an integer.
+   *
+   * ```ts
+   * Math.pow(0.7, 2)                   // 0.48999999999999994
+   * x = new BigNumber(0.7)
+   * x.pow(2)                           // '0.49'
+   * BigNumber(3).pow(-2)               // '0.11111111111111111111'
+   * ```
+   *
+   * @param n The exponent, an integer.
+   * @param [m] The modulus.
+   */
+  pow(n: BigNumber.Value, m?: BigNumber.Value): BigNumber;
+  pow(n: number, m?: BigNumber.Value): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the value of this BigNumber rounded to an integer using
+   * rounding mode `rm`.
+   *
+   * If `rm` is omitted, `ROUNDING_MODE` is used.
+   *
+   * Throws if `rm` is invalid.
+   *
+   * ```ts
+   * x = new BigNumber(123.456)
+   * x.integerValue()                        // '123'
+   * x.integerValue(BigNumber.ROUND_CEIL)    // '124'
+   * y = new BigNumber(-12.7)
+   * y.integerValue()                        // '-13'
+   * x.integerValue(BigNumber.ROUND_DOWN)    // '-12'
+   * ```
+   *
+   * @param {BigNumber.RoundingMode} [rm] The roundng mode, an integer, 0 to 8.
+   */
+  integerValue(rm?: BigNumber.RoundingMode): BigNumber;
+
+  /**
+   * Returns `true` if the value of this BigNumber is equal to the value of `n`, otherwise returns
+   * `false`.
+   *
+   * As with JavaScript, `NaN` does not equal `NaN`.
+   *
+   * ```ts
+   * 0 === 1e-324                           // true
+   * x = new BigNumber(0)
+   * x.isEqualTo('1e-324')                  // false
+   * BigNumber(-0).isEqualTo(x)             // true  ( -0 === 0 )
+   * BigNumber(255).isEqualTo('ff', 16)     // true
+   *
+   * y = new BigNumber(NaN)
+   * y.isEqualTo(NaN)                // false
+   * ```
+   *
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  isEqualTo(n: BigNumber.Value): boolean;
+  isEqualTo(n: string, base: number): boolean;
+
+  /**
+   * Returns `true` if the value of this BigNumber is equal to the value of `n`, otherwise returns
+   * `false`.
+   *
+   * As with JavaScript, `NaN` does not equal `NaN`.
+   *
+   * ```ts
+   * 0 === 1e-324                    // true
+   * x = new BigNumber(0)
+   * x.eq('1e-324')                  // false
+   * BigNumber(-0).eq(x)             // true  ( -0 === 0 )
+   * BigNumber(255).eq('ff', 16)     // true
+   *
+   * y = new BigNumber(NaN)
+   * y.eq(NaN)                       // false
+   * ```
+   *
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  eq(n: BigNumber.Value): boolean;
+  eq(n: string, base: number): boolean;
+
+  /**
+   * Returns `true` if the value of this BigNumber is a finite number, otherwise returns `false`.
+   *
+   * The only possible non-finite values of a BigNumber are `NaN`, `Infinity` and `-Infinity`.
+   *
+   * ```ts
+   * x = new BigNumber(1)
+   * x.isFinite()                    // true
+   * y = new BigNumber(Infinity)
+   * y.isFinite()                    // false
+   * ```
+   */
+  isFinite(): boolean;
+
+  /**
+   * Returns `true` if the value of this BigNumber is greater than the value of `n`, otherwise
+   * returns `false`.
+   *
+   * ```ts
+   * 0.1 > (0.3 - 0.2)                             // true
+   * x = new BigNumber(0.1)
+   * x.isGreaterThan(BigNumber(0.3).minus(0.2))    // false
+   * BigNumber(0).isGreaterThan(x)                 // false
+   * BigNumber('11', 3).isGreaterThan('11.1', 2)   // true
+   * ```
+   *
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  isGreaterThan(n: BigNumber.Value): boolean;
+  isGreaterThan(n: string, base: number): boolean;
+
+  /**
+   * Returns `true` if the value of this BigNumber is greater than the value of `n`, otherwise
+   * returns `false`.
+   *
+   * ```ts
+   * 0.1 > (0.3 - 0.2)                  // true
+   * x = new BigNumber(0.1)
+   * x.gt(BigNumber(0.3).minus(0.2))    // false
+   * BigNumber(0).gt(x)                 // false
+   * BigNumber('11', 3).gt('11.1', 2)   // true
+   * ```
+   *
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  gt(n: BigNumber.Value): boolean;
+  gt(n: string, base: number): boolean;
+
+  /**
+   * Returns `true` if the value of this BigNumber is greater than or equal to the value of `n`,
+   * otherwise returns `false`.
+   *
+   * ```ts
+   * (0.3 - 0.2) >= 0.1                                  // false
+   * x = new BigNumber(0.3).minus(0.2)
+   * x.isGreaterThanOrEqualTo(0.1)                       // true
+   * BigNumber(1).isGreaterThanOrEqualTo(x)              // true
+   * BigNumber('10', 18).isGreaterThanOrEqualTo('i', 36) // true
+   * ```
+   *
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  isGreaterThanOrEqualTo(n: BigNumber.Value): boolean;
+  isGreaterThanOrEqualTo(n: string, base: number): boolean;
+
+  /**
+   * Returns `true` if the value of this BigNumber is greater than or equal to the value of `n`,
+   * otherwise returns `false`.
+   *
+   * ```ts
+   * (0.3 - 0.2) >= 0.1                    // false
+   * x = new BigNumber(0.3).minus(0.2)
+   * x.gte(0.1)                            // true
+   * BigNumber(1).gte(x)                   // true
+   * BigNumber('10', 18).gte('i', 36)      // true
+   * ```
+   *
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  gte(n: BigNumber.Value): boolean;
+  gte(n: string, base: number): boolean;
+
+  /**
+   * Returns `true` if the value of this BigNumber is an integer, otherwise returns `false`.
+   *
+   * ```ts
+   * x = new BigNumber(1)
+   * x.isInteger()                   // true
+   * y = new BigNumber(123.456)
+   * y.isInteger()                   // false
+   * ```
+   */
+  isInteger(): boolean;
+
+  /**
+   * Returns `true` if the value of this BigNumber is less than the value of `n`, otherwise returns
+   * `false`.
+   *
+   * ```ts
+   * (0.3 - 0.2) < 0.1                        // true
+   * x = new BigNumber(0.3).minus(0.2)
+   * x.isLessThan(0.1)                        // false
+   * BigNumber(0).isLessThan(x)               // true
+   * BigNumber('11.1', 2).isLessThan('11', 3) // true
+   * ```
+   *
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  isLessThan(n: BigNumber.Value): boolean;
+  isLessThan(n: string, base: number): boolean;
+
+  /**
+   * Returns `true` if the value of this BigNumber is less than the value of `n`, otherwise returns
+   * `false`.
+   *
+   * ```ts
+   * (0.3 - 0.2) < 0.1                       // true
+   * x = new BigNumber(0.3).minus(0.2)
+   * x.lt(0.1)                               // false
+   * BigNumber(0).lt(x)                      // true
+   * BigNumber('11.1', 2).lt('11', 3)        // true
+   * ```
+   *
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  lt(n: BigNumber.Value): boolean;
+  lt(n: string, base: number): boolean;
+
+  /**
+   * Returns `true` if the value of this BigNumber is less than or equal to the value of `n`,
+   * otherwise returns `false`.
+   *
+   * ```ts
+   * 0.1 <= (0.3 - 0.2)                                 // false
+   * x = new BigNumber(0.1)
+   * x.isLessThanOrEqualTo(BigNumber(0.3).minus(0.2))   // true
+   * BigNumber(-1).isLessThanOrEqualTo(x)               // true
+   * BigNumber('10', 18).isLessThanOrEqualTo('i', 36)   // true
+   * ```
+   *
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  isLessThanOrEqualTo(n: BigNumber.Value): boolean;
+  isLessThanOrEqualTo(n: string, base: number): boolean;
+
+  /**
+   * Returns `true` if the value of this BigNumber is less than or equal to the value of `n`,
+   * otherwise returns `false`.
+   *
+   * ```ts
+   * 0.1 <= (0.3 - 0.2)                  // false
+   * x = new BigNumber(0.1)
+   * x.lte(BigNumber(0.3).minus(0.2))    // true
+   * BigNumber(-1).lte(x)                // true
+   * BigNumber('10', 18).lte('i', 36)    // true
+   * ```
+   *
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  lte(n: BigNumber.Value): boolean;
+  lte(n: string, base: number): boolean;
+
+  /**
+   * Returns `true` if the value of this BigNumber is `NaN`, otherwise returns `false`.
+   *
+   * ```ts
+   * x = new BigNumber(NaN)
+   * x.isNaN()                       // true
+   * y = new BigNumber('Infinity')
+   * y.isNaN()                       // false
+   * ```
+   */
+  isNaN(): boolean;
+
+  /**
+   * Returns `true` if the value of this BigNumber is negative, otherwise returns `false`.
+   *
+   * ```ts
+   * x = new BigNumber(-0)
+   * x.isNegative()                  // true
+   * y = new BigNumber(2)
+   * y.isNegative()                  // false
+   * ```
+   */
+  isNegative(): boolean;
+
+  /**
+   * Returns `true` if the value of this BigNumber is positive, otherwise returns `false`.
+   *
+   * ```ts
+   * x = new BigNumber(-0)
+   * x.isPositive()                  // false
+   * y = new BigNumber(2)
+   * y.isPositive()                  // true
+   * ```
+   */
+  isPositive(): boolean;
+
+  /**
+   * Returns `true` if the value of this BigNumber is zero or minus zero, otherwise returns `false`.
+   *
+   * ```ts
+   * x = new BigNumber(-0)
+   * x.isZero()                 // true
+   * ```
+   */
+  isZero(): boolean;
+
+  /**
+   * Returns a BigNumber whose value is the value of this BigNumber minus `n`.
+   *
+   * The return value is always exact and unrounded.
+   *
+   * ```ts
+   * 0.3 - 0.1                       // 0.19999999999999998
+   * x = new BigNumber(0.3)
+   * x.minus(0.1)                    // '0.2'
+   * x.minus('0.6', 20)              // '0'
+   * ```
+   *
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  minus(n: BigNumber.Value): BigNumber;
+  minus(n: string, base: number): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the value of this BigNumber modulo `n`, i.e. the integer
+   * remainder of dividing this BigNumber by `n`.
+   *
+   * The value returned, and in particular its sign, is dependent on the value of the `MODULO_MODE`
+   * setting of this BigNumber constructor. If it is 1 (default value), the result will have the
+   * same sign as this BigNumber, and it will match that of Javascript's `%` operator (within the
+   * limits of double precision) and BigDecimal's `remainder` method.
+   *
+   * The return value is always exact and unrounded.
+   *
+   * See `MODULO_MODE` for a description of the other modulo modes.
+   *
+   * ```ts
+   * 1 % 0.9                         // 0.09999999999999998
+   * x = new BigNumber(1)
+   * x.modulo(0.9)                   // '0.1'
+   * y = new BigNumber(33)
+   * y.modulo('a', 33)               // '3'
+   * ```
+   *
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  modulo(n: BigNumber.Value): BigNumber;
+  modulo(n: string, base: number): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the value of this BigNumber modulo `n`, i.e. the integer
+   * remainder of dividing this BigNumber by `n`.
+   *
+   * The value returned, and in particular its sign, is dependent on the value of the `MODULO_MODE`
+   * setting of this BigNumber constructor. If it is 1 (default value), the result will have the
+   * same sign as this BigNumber, and it will match that of Javascript's `%` operator (within the
+   * limits of double precision) and BigDecimal's `remainder` method.
+   *
+   * The return value is always exact and unrounded.
+   *
+   * See `MODULO_MODE` for a description of the other modulo modes.
+   *
+   * ```ts
+   * 1 % 0.9                      // 0.09999999999999998
+   * x = new BigNumber(1)
+   * x.mod(0.9)                   // '0.1'
+   * y = new BigNumber(33)
+   * y.mod('a', 33)               // '3'
+   * ```
+   *
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  mod(n: BigNumber.Value): BigNumber;
+  mod(n: string, base: number): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the value of this BigNumber multiplied by `n`.
+   *
+   * The return value is always exact and unrounded.
+   *
+   * ```ts
+   * 0.6 * 3                                // 1.7999999999999998
+   * x = new BigNumber(0.6)
+   * y = x.multipliedBy(3)                  // '1.8'
+   * BigNumber('7e+500').multipliedBy(y)    // '1.26e+501'
+   * x.multipliedBy('-a', 16)               // '-6'
+   * ```
+   *
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  multipliedBy(n: BigNumber.Value): BigNumber;
+  multipliedBy(n: string, base: number): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the value of this BigNumber multiplied by `n`.
+   *
+   * The return value is always exact and unrounded.
+   *
+   * ```ts
+   * 0.6 * 3                         // 1.7999999999999998
+   * x = new BigNumber(0.6)
+   * y = x.times(3)                  // '1.8'
+   * BigNumber('7e+500').times(y)    // '1.26e+501'
+   * x.times('-a', 16)               // '-6'
+   * ```
+   *
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  times(n: BigNumber.Value): BigNumber;
+  times(n: string, base: number): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the value of this BigNumber negated, i.e. multiplied by -1.
+   *
+   * ```ts
+   * x = new BigNumber(1.8)
+   * x.negated()                     // '-1.8'
+   * y = new BigNumber(-1.3)
+   * y.negated()                     // '1.3'
+   * ```
+   */
+  negated(): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the value of this BigNumber plus `n`.
+   *
+   * The return value is always exact and unrounded.
+   *
+   * ```ts
+   * 0.1 + 0.2                       // 0.30000000000000004
+   * x = new BigNumber(0.1)
+   * y = x.plus(0.2)                 // '0.3'
+   * BigNumber(0.7).plus(x).plus(y)  // '1.1'
+   * x.plus('0.1', 8)                // '0.225'
+   * ```
+   *
+   * @param n A numeric value.
+   * @param [base] The base of n.
+   */
+  plus(n: BigNumber.Value): BigNumber;
+  plus(n: string, base: number): BigNumber;
+
+  /**
+   * Returns the number of significant digits of the value of this BigNumber, or `null` if the value
+   * of this BigNumber is ±`Infinity` or `NaN`.
+   *
+   * If `includeZeros` is true then any trailing zeros of the integer part of the value of this
+   * BigNumber are counted as significant digits, otherwise they are not.
+   *
+   * Throws if `includeZeros` is invalid.
+   *
+   * ```ts
+   * x = new BigNumber(9876.54321)
+   * x.precision()                         // 9
+   * y = new BigNumber(987000)
+   * y.precision(false)                    // 3
+   * y.precision(true)                     // 6
+   * ```
+   *
+   * @param [includeZeros] Whether to include integer trailing zeros in the significant digit count.
+   */
+  precision(includeZeros?: boolean): number;
+
+  /**
+   * Returns a BigNumber whose value is the value of this BigNumber rounded to
+   * `significantDigits` using `roundingMode`.
+   *
+   * If `roundingMode` is omitted, `ROUNDING_MODE` will be used.
+   *
+   * Throws if `significantDigits` or `roundingMode` is invalid.
+   *
+   * ```ts
+   * x = new BigNumber(9876.54321)
+   * x.precision(6)                         // '9876.54'
+   * x.precision(6, BigNumber.ROUND_UP)     // '9876.55'
+   * x.precision(2)                         // '9900'
+   * x.precision(2, 1)                      // '9800'
+   * x                                      // '9876.54321'
+   * ```
+   *
+   * @param significantDigits Significant digits, integer, 1 to 1e+9.
+   * @param [roundingMode] Rounding mode, integer, 0 to 8.
+   */
+  precision(significantDigits: number, roundingMode?: BigNumber.RoundingMode): BigNumber;
+
+  /**
+   * Returns the number of significant digits of the value of this BigNumber,
+   * or `null` if the value of this BigNumber is ±`Infinity` or `NaN`.
+   *
+   * If `includeZeros` is true then any trailing zeros of the integer part of
+   * the value of this BigNumber are counted as significant digits, otherwise
+   * they are not.
+   *
+   * Throws if `includeZeros` is invalid.
+   *
+   * ```ts
+   * x = new BigNumber(9876.54321)
+   * x.sd()                         // 9
+   * y = new BigNumber(987000)
+   * y.sd(false)                    // 3
+   * y.sd(true)                     // 6
+   * ```
+   *
+   * @param [includeZeros] Whether to include integer trailing zeros in the significant digit count.
+   */
+  sd(includeZeros?: boolean): number;
+
+  /**
+   * Returns a BigNumber whose value is the value of this BigNumber rounded to a precision of
+   * `significantDigits` significant digits using rounding mode `roundingMode`.
+   *
+   * If `roundingMode` is omitted, `ROUNDING_MODE` will be used.
+   *
+   * Throws if `significantDigits` or `roundingMode` is invalid.
+   *
+   * ```ts
+   * x = new BigNumber(9876.54321)
+   * x.sd(6)                           // '9876.54'
+   * x.sd(6, BigNumber.ROUND_UP)       // '9876.55'
+   * x.sd(2)                           // '9900'
+   * x.sd(2, 1)                        // '9800'
+   * x                                 // '9876.54321'
+   * ```
+   *
+   * @param significantDigits Significant digits, integer, 1 to 1e+9.
+   * @param [roundingMode] Rounding mode, integer, 0 to 8.
+   */
+  sd(significantDigits: number, roundingMode?: BigNumber.RoundingMode): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the value of this BigNumber shifted by `n` places.
+   *
+   * The shift is of the decimal point, i.e. of powers of ten, and is to the left if `n` is negative
+   * or to the right if `n` is positive.
+   *
+   * The return value is always exact and unrounded.
+   *
+   * Throws if `n` is invalid.
+   *
+   * ```ts
+   * x = new BigNumber(1.23)
+   * x.shiftedBy(3)                      // '1230'
+   * x.shiftedBy(-3)                     // '0.00123'
+   * ```
+   *
+   * @param n The shift value, integer, -9007199254740991 to 9007199254740991.
+   */
+  shiftedBy(n: number): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the square root of the value of this BigNumber, rounded
+   * according to the current `DECIMAL_PLACES` and `ROUNDING_MODE` settings.
+   *
+   * The return value will be correctly rounded, i.e. rounded as if the result was first calculated
+   * to an infinite number of correct digits before rounding.
+   *
+   * ```ts
+   * x = new BigNumber(16)
+   * x.squareRoot()                  // '4'
+   * y = new BigNumber(3)
+   * y.squareRoot()                  // '1.73205080756887729353'
+   * ```
+   */
+  squareRoot(): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the square root of the value of this BigNumber, rounded
+   * according to the current `DECIMAL_PLACES` and `ROUNDING_MODE` settings.
+   *
+   * The return value will be correctly rounded, i.e. rounded as if the result was first calculated
+   * to an infinite number of correct digits before rounding.
+   *
+   * ```ts
+   * x = new BigNumber(16)
+   * x.sqrt()                  // '4'
+   * y = new BigNumber(3)
+   * y.sqrt()                  // '1.73205080756887729353'
+   * ```
+   */
+  sqrt(): BigNumber;
+
+  /**
+   * Returns the value of this BigNumber as a JavaScript BigInt.
+   *
+   * If the value is not an integer, it is rounded to an integer using `roundingMode`,
+   * or `ROUNDING_MODE` if `roundingMode` is omitted or is `null` or `undefined`.
+   *
+   * If the value of this BigNumber is not finite (`Infinity`, `-Infinity` or `NaN`),
+   * `null` is returned.
+   *
+   * This method is only available if `BigInt` is supported in the environment.
+   *
+   * Throws if `roundingMode` is invalid.
+   *
+   * ```ts
+   * x = new BigNumber(123)
+   * x.toBigInt()                    // 123n
+   *
+   * y = new BigNumber('9999999999999999999999999999999')
+   * y.toBigInt()                    // 9999999999999999999999999999999n
+   *
+   * z = new BigNumber(1.5)
+   * z.toBigInt()                    // 2n       (default ROUND_HALF_UP)
+   * z.toBigInt(1)                   // 1n       (ROUND_DOWN)
+   *
+   * new BigNumber(Infinity).toBigInt()   // null
+   * new BigNumber(NaN).toBigInt()        // null
+   * ```
+   *
+   * @param [roundingMode] Rounding mode, integer, 0 to 8.
+   */
+  toBigInt(roundingMode?: BigNumber.RoundingMode): bigint | null;
+
+  /**
+   * Returns a string representing the value of this BigNumber in exponential notation rounded
+   * to `decimalPlaces` using `roundingMode`, i.e. with one digit before the decimal point and
+   * `decimalPlaces` digits after it.
+   *
+   * If the value of this BigNumber in exponential notation has fewer than `decimalPlaces` fraction
+   * digits, the return value will be appended with zeros accordingly.
+   *
+   * If `decimalPlaces` is omitted, the return value will be the full value of this BigNumber
+   * in exponential notation.
+   *
+   * If `roundingMode` is omitted, `ROUNDING_MODE` is used.
+   *
+   * Throws if `decimalPlaces` or `roundingMode` is invalid.
+   *
+   * ```ts
+   * x = 45.6
+   * y = new BigNumber(x)
+   * x.toExponential()               // '4.56e+1'
+   * y.toExponential()               // '4.56e+1'
+   * x.toExponential(0)              // '5e+1'
+   * y.toExponential(0)              // '5e+1'
+   * x.toExponential(1)              // '4.6e+1'
+   * y.toExponential(1)              // '4.6e+1'
+   * y.toExponential(1, 1)           // '4.5e+1'  (ROUND_DOWN)
+   * x.toExponential(3)              // '4.560e+1'
+   * y.toExponential(3)              // '4.560e+1'
+   * ```
+   *
+   * @param [decimalPlaces] Decimal places, integer, 0 to 1e+9.
+   * @param [roundingMode] Rounding mode, integer, 0 to 8.
+   */
+  toExponential(decimalPlaces: number, roundingMode?: BigNumber.RoundingMode): string;
+  toExponential(): string;
+
+  /**
+   * Return a string representing the value of this BigNumber in fixed-point notation rounded
+   * to `decimalPlaces` using `roundingMode`.
+   *
+   * If `decimalPlaces` is negative, round to the corresponding number of digits to the left
+   * of the decimal point.
+   *
+   * Unlike `Number.prototype.toFixed`, which returns exponential notation if a number is greater
+   * or equal to 10**21, this method will always return normal notation.
+   *
+   * If `decimalPlaces` is omitted, the return value will be the full value of this BigNumber in
+   * normal notation. This is also unlike `Number.prototype.toFixed`, which returns the value to
+   * zero decimal places. It is useful when normal notation is required and the current
+   * `EXPONENTIAL_AT` setting causes `toString` to return exponential notation.
+   *
+   * If `roundingMode` is omitted, `ROUNDING_MODE` is used.
+   *
+   * Throws if `decimalPlaces` or `roundingMode` is invalid.
+   *
+   * ```ts
+   * x = 3.456
+   * y = new BigNumber(x)
+   * x.toFixed()                     // '3'
+   * y.toFixed()                     // '3.456'
+   * y.toFixed(0)                    // '3'
+   * x.toFixed(2)                    // '3.46'
+   * y.toFixed(2)                    // '3.46'
+   * y.toFixed(2, 1)                 // '3.45'  (ROUND_DOWN)
+   * x.toFixed(5)                    // '3.45600'
+   *
+   * z = new BigNumber(1234.5)
+   * z.toFixed(-1)                   // '1230'
+   * z.toFixed(-2)                   // '1200'
+   * ```
+   *
+   * @param [decimalPlaces] Decimal places, integer, -1e+9 to 1e+9.
+   * @param [roundingMode] Rounding mode, integer, 0 to 8.
+   */
+  toFixed(decimalPlaces: number, roundingMode?: BigNumber.RoundingMode): string;
+  toFixed(): string;
+
+  /**
+   * Returns a string representing the value of this BigNumber in normal (fixed-point)
+   * notation rounded to `decimalPlaces` using `roundingMode`, and formatted according to the
+   * properties of the `options` or `FORMAT` object.
+   *
+   * The options object may contain some or all of the properties of `BigNumber.Format`.
+   * Any property not included will fall back to the corresponding value in `FORMAT`.
+   *
+   * If `decimalPlaces` is omitted and the first argument is an object, it is interpreted as
+   * `options`. If `roundingMode` is omitted and the second argument is an object, it is
+   * interpreted as `options`.
+   *
+   * If `decimalPlaces` is negative, round to the corresponding number of digits to the left of
+   * the decimal point.
+   *
+   * If `decimalPlaces` is an array, it is `[minimum, maximum]`, where `minimum` and `maximum`
+   * are integers, `0` to `MAX` inclusive, or `null` or `undefined`. `maximum` limits the number
+   * of decimal places and `minimum` preserves them or adds trailing zeros.
+   *
+   * If `roundingMode` is omitted or null, `ROUNDING_MODE` is used.
+   *
+   * Throws if `options` is not an object, or if `decimalPlaces` or `roundingMode` is invalid,
+   * or if the minimum exceeds the maximum in a `decimalPlaces` array.
+   *
+   * ```ts
+   * x = new BigNumber('123456789.123456789')
+   *
+   * BigNumber.config({
+   *   FORMAT: { groupSeparator: ',', groupSize: 3 }
+   * })
+   *
+   * x.toFormat()                              // '123,456,789.123456789'
+   * x.toFormat(2)                             // '123,456,789.12'
+   * x.toFormat([2, 5])                        // '123,456,789.12346'
+   * x.toFormat([0, 3], { prefix: '$' })       // '$123,456,789.123'
+   *
+   * y = new BigNumber('100')
+   * y.toFormat([2, null])                     // '100.00'
+   * ```
+   *
+   * @param [decimalPlaces] Decimal places, integer, -1e+9 to 1e+9, or [minimum, maximum] where
+   * minimum and maximum are integers, 0 to 1e+9, null, or undefined.
+   * @param [roundingMode] Rounding mode, integer, 0 to 8.
+   * @param [options] Formatting options object. See `BigNumber.Format`.
+   */
+  toFormat(options?: BigNumber.Format): string;
+  toFormat(
+    decimalPlaces: number |
+                   [number | null | undefined] |
+                   [number | null | undefined, number | null | undefined],
+    options: BigNumber.Format
+  ): string;
+  toFormat(
+    decimalPlaces: number |
+                   [number | null | undefined] |
+                   [number | null | undefined, number | null | undefined],
+    roundingMode?: BigNumber.RoundingMode,
+    options?: BigNumber.Format
+  ): string;
+
+  /**
+   * Returns an array of two BigNumbers representing the value of this BigNumber as a
+   * simple fraction with an integer numerator and an integer denominator.
+   * The denominator will be a positive value less than or equal to `max_denominator`.
+   * If a maximum denominator, `max_denominator`, is not specified, the denominator
+   * will be the lowest value necessary to represent the number exactly.
+   *
+   * If the value of this BigNumber is `Infinity`, `-Infinity`, or `NaN`, the returned
+   * fraction is `[1, 0]`, `[-1, 0]`, or `[0, 0]` respectively.
+   *
+   * Throws if `max_denominator` is invalid.
+   *
+   * ```ts
+   * x = new BigNumber(1.75)
+   * x.toFraction()                  // '7, 4'
+   *
+   * pi = new BigNumber('3.14159265358')
+   * pi.toFraction()                 // '157079632679,50000000000'
+   * pi.toFraction(100000)           // '312689, 99532'
+   * pi.toFraction(10000)            // '355, 113'
+   * pi.toFraction(100)              // '311, 99'
+   * pi.toFraction(10)               // '22, 7'
+   * pi.toFraction(1)                // '3, 1'
+   *
+   * y = new BigNumber('-Infinity')
+   * y.toFraction()                  // '-1, 0'
+   * z = new BigNumber(NaN)
+   * z.toFraction()                  // '0, 0'
+   * ```
+   *
+   * @param [max_denominator] The maximum denominator, integer > 0, or Infinity.
+   */
+  toFraction(max_denominator?: BigNumber.Value): [BigNumber, BigNumber];
+
+  /** As `valueOf`. */
+  toJSON(): string;
+
+  /**
+   * Returns the value of this BigNumber as a JavaScript primitive number.
+   *
+   * Using the unary plus operator gives the same result.
+   *
+   * ```ts
+   * x = new BigNumber(456.789)
+   * x.toNumber()                    // 456.789
+   * +x                              // 456.789
+   *
+   * y = new BigNumber('45987349857634085409857349856430985')
+   * y.toNumber()                    // 4.598734985763409e+34
+   *
+   * z = new BigNumber(-0)
+   * 1 / z.toNumber()                // -Infinity
+   * 1 / +z                          // -Infinity
+   * ```
+   */
+  toNumber(): number;
+
+  /**
+   * Returns a plain object with `c`, `e` and `s` properties representing the coefficient,
+   * exponent and sign of this BigNumber.
+   *
+   * The returned object can be passed to the `BigNumber` constructor (with a `_isBigNumber`
+   * property) to recreate the BigNumber without the overhead of parsing the string value.
+   *
+   * ```ts
+   * x = new BigNumber('777.123')
+   * obj = x.toObject()              // { c: [ 777, 12300000000000 ], e: 2, s: 1 }
+   *
+   * obj._isBigNumber = true
+   * y = new BigNumber(obj)
+   * x.isEqualTo(y)                  // true
+   * ```
+   */
+  toObject(): { c: number[] | null; e: number | null; s: number | null };
+
+  /**
+   * Returns a string representing the value of this BigNumber rounded to `significantDigits`
+   * using `roundingMode`.
+   *
+   * If `significantDigits` is less than the number of digits necessary to represent the integer
+   * part of the value in normal (fixed-point) notation, then exponential notation is used.
+   *
+   * If `significantDigits` is omitted, then the return value is the same as `n.toString()`.
+   *
+   * If `roundingMode` is omitted, `ROUNDING_MODE` is used.
+   *
+   * Throws if `significantDigits` or `roundingMode` is invalid.
+   *
+   * ```ts
+   * x = 45.6
+   * y = new BigNumber(x)
+   * x.toPrecision()                 // '45.6'
+   * y.toPrecision()                 // '45.6'
+   * x.toPrecision(1)                // '5e+1'
+   * y.toPrecision(1)                // '5e+1'
+   * y.toPrecision(2, 0)             // '4.6e+1'  (ROUND_UP)
+   * y.toPrecision(2, 1)             // '4.5e+1'  (ROUND_DOWN)
+   * x.toPrecision(5)                // '45.600'
+   * y.toPrecision(5)                // '45.600'
+   * ```
+   *
+   * @param [significantDigits] Significant digits, integer, 1 to 1e+9.
+   * @param [roundingMode] Rounding mode, integer 0 to 8.
+   */
+  toPrecision(significantDigits: number, roundingMode?: BigNumber.RoundingMode): string;
+  toPrecision(): string;
+
+  /**
+   * Returns a string representing the value of this BigNumber in base `base`, or base 10 if `base`
+   * is omitted.
+   *
+   * If a base is specified the value is rounded according to the current `DECIMAL_PLACES`
+   * and `ROUNDING_MODE` settings.
+   *
+   * If a base is not specified, and this BigNumber has a positive exponent that is equal to or
+   * greater than the positive component of the current `EXPONENTIAL_AT` setting, or a negative
+   * exponent equal to or less than the negative component of the setting, then exponential notation
+   * is returned.
+   *
+   * Throws if `base` is invalid.
+   *
+   * ```ts
+   * x = new BigNumber(750000)
+   * x.toString()                    // '750000'
+   * BigNumber.config({ EXPONENTIAL_AT: 5 })
+   * x.toString()                    // '7.5e+5'
+   *
+   * y = new BigNumber(362.875)
+   * y.toString(2)                   // '101101010.111'
+   * y.toString(9)                   // '442.77777777777777777778'
+   * y.toString(32)                  // 'ba.s'
+   *
+   * BigNumber.config({ DECIMAL_PLACES: 4 });
+   * z = new BigNumber('1.23456789')
+   * z.toString()                    // '1.23456789'
+   * z.toString(10)                  // '1.2346'
+   * ```
+   *
+   * @param [base] The base, integer, 2 to 36 (or `ALPHABET.length`, see `ALPHABET`).
+   */
+  toString(base?: number): string;
+
+  /**
+   * As `toString`, but does not accept a base argument and includes the minus sign for negative
+   * zero.
+   *
+   * ``ts
+   * x = new BigNumber('-0')
+   * x.toString()                    // '0'
+   * x.valueOf()                     // '-0'
+   * y = new BigNumber('1.777e+457')
+   * y.valueOf()                     // '1.777e+457'
+   * ```
+   */
+  valueOf(): string;
+
+  /** Helps ES6 import. */
+  private static readonly default: BigNumber.Constructor;
+
+  /** Helps ES6 import. */
+  private static readonly BigNumber: BigNumber.Constructor;
+
+  /** Rounds away from zero. */
+  static readonly ROUND_UP: 0;
+
+  /** Rounds towards zero. */
+  static readonly ROUND_DOWN: 1;
+
+  /** Rounds towards Infinity. */
+  static readonly ROUND_CEIL: 2;
+
+  /** Rounds towards -Infinity. */
+  static readonly ROUND_FLOOR: 3;
+
+  /** Rounds towards nearest neighbour. If equidistant, rounds away from zero . */
+  static readonly ROUND_HALF_UP: 4;
+
+  /** Rounds towards nearest neighbour. If equidistant, rounds towards zero. */
+  static readonly ROUND_HALF_DOWN: 5;
+
+  /** Rounds towards nearest neighbour. If equidistant, rounds towards even neighbour. */
+  static readonly ROUND_HALF_EVEN: 6;
+
+  /** Rounds towards nearest neighbour. If equidistant, rounds towards Infinity. */
+  static readonly ROUND_HALF_CEIL: 7;
+
+  /** Rounds towards nearest neighbour. If equidistant, rounds towards -Infinity. */
+  static readonly ROUND_HALF_FLOOR: 8;
+
+  /** See `MODULO_MODE`. */
+  static readonly EUCLID: 9;
+
+  /**
+   * Returns a new independent BigNumber constructor with configuration as described by `object`, or
+   * with the default configuration if object is omitted.
+   *
+   * Throws if `object` is not an object.
+   *
+   * ```ts
+   * BigNumber.config({ DECIMAL_PLACES: 5 })
+   * BN = BigNumber.clone({ DECIMAL_PLACES: 9 })
+   *
+   * x = new BigNumber(1)
+   * y = new BN(1)
+   *
+   * x.div(3)                        // 0.33333
+   * y.div(3)                        // 0.333333333
+   *
+   * // BN = BigNumber.clone({ DECIMAL_PLACES: 9 }) is equivalent to:
+   * BN = BigNumber.clone()
+   * BN.config({ DECIMAL_PLACES: 9 })
+   * ```
+   *
+   * @param [object] The configuration object.
+   */
+  static clone(object?: BigNumber.Config): BigNumber.Constructor;
+
+  /**
+   * Configures the settings that apply to this BigNumber constructor.
+   *
+   * The configuration object, `object`, contains any number of the properties shown in the example
+   * below.
+   *
+   * Returns an object with the above properties and their current values.
+   *
+   * Throws if `object` is not an object, or if an invalid value is assigned to one or more of the
+   * properties.
+   *
+   * ```ts
+   * BigNumber.config({
+   *     DECIMAL_PLACES: 40,
+   *     ROUNDING_MODE: BigNumber.ROUND_HALF_CEIL,
+   *     EXPONENTIAL_AT: [-10, 20],
+   *     RANGE: [-500, 500],
+   *     CRYPTO: true,
+   *     MODULO_MODE: BigNumber.ROUND_FLOOR,
+   *     POW_PRECISION: 80,
+   *     FORMAT: {
+   *         groupSize: 3,
+   *         groupSeparator: ' ',
+   *         decimalSeparator: ','
+   *     },
+   *     ALPHABET: '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$_'
+   * });
+   *
+   * BigNumber.config().DECIMAL_PLACES        // 40
+   * ```
+   *
+   * @param object The configuration object.
+   */
+  static config(object?: BigNumber.Config): BigNumber.Config;
+
+  /**
+   * Returns a BigNumber whose value is parsed from a formatted string `str`.
+   *
+   * The formatting described in `options` is stripped from `str` and the
+   * result is passed to the BigNumber constructor.
+   *
+   * If `options` is omitted, `FORMAT` is used. Any property not provided
+   * falls back to the corresponding `FORMAT` property.
+   *
+   * Throws if `str` is not a string or `options` is not an object.
+   *
+   * ```ts
+   * BigNumber.fromFormat('$1,234,567.89', { prefix: '$' })
+   *   // '1234567.89'
+   *
+   * BigNumber.fromFormat('€-1.234.567,89', {
+   *   prefix: '€',
+   *   decimalSeparator: ',',
+   *   groupSeparator: '.'
+   * })  // '-1234567.89'
+   *
+   * x = new BigNumber('-1234567.891')
+   * opts = { prefix: '$' }
+   * x.toFormat(2, opts)                      // '$-1,234,567.89'
+   * BigNumber.fromFormat('$-1,234,567.89', opts)
+   *   // '-1234567.89'
+   * ```
+   *
+   * @param str A formatted numeric string.
+   * @param [options] Formatting options object. See `BigNumber.Format`.
+   */
+  static fromFormat(str: string, options?: BigNumber.Format): BigNumber;
+
+  /**
+   * Returns `true` if `value` is a BigNumber instance or  an object
+   * with valid coefficient (`c`, exponent (`e`) and sign (`s`)
+   * properties that the BigNumber constructor will accept, otherwise
+   * returns `false`. See `toObject`.
+   *
+   * ```ts
+   * x = 42
+   * y = new BigNumber(x)
+   *
+   * BigNumber.isBigNumber(x)             // false
+   * y instanceof BigNumber               // true
+   * BigNumber.isBigNumber(y)             // true
+   *
+   * BN = BigNumber.clone();
+   * z = new BN(x)
+   * z instanceof BigNumber               // false
+   * BigNumber.isBigNumber(z)             // true
+   * ```
+   *
+   * @param value The value to test.
+   */
+  static isBigNumber(value: any): value is BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the maximum of the arguments.
+   *
+   * The return value is always exact and unrounded.
+   *
+   * ```ts
+   * x = new BigNumber('3257869345.0378653')
+   * BigNumber.maximum(4e9, x, '123456789.9')      // '4000000000'
+   *
+   * arr = [12, '13', new BigNumber(14)]
+   * BigNumber.maximum.apply(null, arr)            // '14'
+   * ```
+   *
+   * @param n A numeric value.
+   */
+  static maximum(...n: BigNumber.Value[]): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the maximum of the arguments.
+   *
+   * The return value is always exact and unrounded.
+   *
+   * ```ts
+   * x = new BigNumber('3257869345.0378653')
+   * BigNumber.max(4e9, x, '123456789.9')      // '4000000000'
+   *
+   * arr = [12, '13', new BigNumber(14)]
+   * BigNumber.max.apply(null, arr)            // '14'
+   * ```
+   *
+   * @param n A numeric value.
+   */
+  static max(...n: BigNumber.Value[]): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the minimum of the arguments.
+   *
+   * The return value is always exact and unrounded.
+   *
+   * ```ts
+   * x = new BigNumber('3257869345.0378653')
+   * BigNumber.minimum(4e9, x, '123456789.9')          // '123456789.9'
+   *
+   * arr = [2, new BigNumber(-14), '-15.9999', -12]
+   * BigNumber.minimum.apply(null, arr)                // '-15.9999'
+   * ```
+   *
+   * @param n A numeric value.
+   */
+  static minimum(...n: BigNumber.Value[]): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the minimum of the arguments.
+   *
+   * The return value is always exact and unrounded.
+   *
+   * ```ts
+   * x = new BigNumber('3257869345.0378653')
+   * BigNumber.min(4e9, x, '123456789.9')             // '123456789.9'
+   *
+   * arr = [2, new BigNumber(-14), '-15.9999', -12]
+   * BigNumber.min.apply(null, arr)                   // '-15.9999'
+   * ```
+   *
+   * @param n A numeric value.
+   */
+  static min(...n: BigNumber.Value[]): BigNumber;
+
+  /**
+   * Returns a new BigNumber with a pseudo-random value equal to or greater than 0 and less than 1.
+   *
+   * The return value will have `decimalPlaces` decimal places, or less if trailing zeros are
+   * produced. If `decimalPlaces` is omitted, the current `DECIMAL_PLACES` setting will be used.
+   *
+   * Depending on the value of this BigNumber constructor's `CRYPTO` setting and the support for the
+   * `crypto` object in the host environment, the random digits of the return value are generated by
+   * either `Math.random` (fastest), `crypto.getRandomValues` (Web Cryptography API in recent
+   * browsers) or `crypto.randomBytes` (Node.js).
+   *
+   * To be able to set `CRYPTO` to true when using Node.js, the `crypto` object must be available
+   * globally:
+   *
+   * ```ts
+   * global.crypto = require('crypto')
+   * ```
+   *
+   * If `CRYPTO` is true, i.e. one of the `crypto` methods is to be used, the value of a returned
+   * BigNumber should be cryptographically secure and statistically indistinguishable from a random
+   * value.
+   *
+   * Throws if `decimalPlaces` is invalid.
+   *
+   * ```ts
+   * BigNumber.config({ DECIMAL_PLACES: 10 })
+   * BigNumber.random()              // '0.4117936847'
+   * BigNumber.random(20)            // '0.78193327636914089009'
+   * ```
+   *
+   * @param [decimalPlaces] Decimal places, integer, 0 to 1e+9.
+   */
+  static random(decimalPlaces?: number): BigNumber;
+
+  /**
+   * Returns a BigNumber whose value is the sum of the arguments,
+   * or zero if there are none.
+   *
+   * The return value is always exact and unrounded.
+   *
+   * ```ts
+   * x = new BigNumber('3257869345.0378653')
+   * BigNumber.sum(4e9, x, '123456789.9')      // '7381326134.9378653'
+   *
+   * arr = [2, new BigNumber(14), '15.9999', 12]
+   * BigNumber.sum.apply(null, arr)            // '43.9999'
+   * ```
+   *
+   * @param n A numeric value.
+   */
+  static sum(...n: BigNumber.Value[]): BigNumber;
+
+  /**
+   * Configures the settings that apply to this BigNumber constructor.
+   *
+   * The configuration object, `object`, contains any number of the properties shown in the example
+   * below.
+   *
+   * Returns an object with the above properties and their current values.
+   *
+   * Throws if `object` is not an object, or if an invalid value is assigned to one or more of the
+   * properties.
+   *
+   * ```ts
+   * BigNumber.set({
+   *     DECIMAL_PLACES: 40,
+   *     ROUNDING_MODE: BigNumber.ROUND_HALF_CEIL,
+   *     EXPONENTIAL_AT: [-10, 20],
+   *     RANGE: [-500, 500],
+   *     CRYPTO: true,
+   *     MODULO_MODE: BigNumber.ROUND_FLOOR,
+   *     POW_PRECISION: 80,
+   *     FORMAT: {
+   *         groupSize: 3,
+   *         groupSeparator: ' ',
+   *         decimalSeparator: ','
+   *     },
+   *     ALPHABET: '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$_'
+   * });
+   *
+   * BigNumber.set().DECIMAL_PLACES        // 40
+   * ```
+   *
+   * @param object The configuration object.
+   */
+  static set(object?: BigNumber.Config): BigNumber.Config;
+}
+
+declare function BigNumber(n: BigNumber.Value): BigNumber;
+declare function BigNumber(n: string, base: number): BigNumber;
+
+export { BigNumber };
+
+export default BigNumber;
diff --git a/website/src/components/Playground/editor-types/path-to-regexp.d.ts b/website/src/components/Playground/editor-types/path-to-regexp.d.ts
new file mode 100644
index 000000000000..c173a4403c3d
--- /dev/null
+++ b/website/src/components/Playground/editor-types/path-to-regexp.d.ts
@@ -0,0 +1,147 @@
+/**
+ * Encode a string into another string.
+ */
+export type Encode = (value: string) => string;
+/**
+ * Decode a string into another string.
+ */
+export type Decode = (value: string) => string;
+export interface ParseOptions {
+    /**
+     * A function for encoding input strings.
+     */
+    encodePath?: Encode;
+}
+export interface PathToRegexpOptions {
+    /**
+     * Matches the path completely without trailing characters. (default: `true`)
+     */
+    end?: boolean;
+    /**
+     * Allows optional trailing delimiter to match. (default: `true`)
+     */
+    trailing?: boolean;
+    /**
+     * Match will be case sensitive. (default: `false`)
+     */
+    sensitive?: boolean;
+    /**
+     * The default delimiter for segments. (default: `'/'`)
+     */
+    delimiter?: string;
+}
+export interface MatchOptions extends PathToRegexpOptions {
+    /**
+     * Function for decoding strings for params, or `false` to disable entirely. (default: `decodeURIComponent`)
+     */
+    decode?: Decode | false;
+}
+export interface CompileOptions {
+    /**
+     * Function for encoding input strings for output into the path, or `false` to disable entirely. (default: `encodeURIComponent`)
+     */
+    encode?: Encode | false;
+    /**
+     * The default delimiter for segments. (default: `'/'`)
+     */
+    delimiter?: string;
+}
+/**
+ * Plain text.
+ */
+export interface Text {
+    type: "text";
+    value: string;
+}
+/**
+ * A parameter designed to match arbitrary text within a segment.
+ */
+export interface Parameter {
+    type: "param";
+    name: string;
+}
+/**
+ * A wildcard parameter designed to match multiple segments.
+ */
+export interface Wildcard {
+    type: "wildcard";
+    name: string;
+}
+/**
+ * A set of possible tokens to expand when matching.
+ */
+export interface Group {
+    type: "group";
+    tokens: Token[];
+}
+/**
+ * A token that corresponds with a regexp capture.
+ */
+export type Key = Parameter | Wildcard;
+/**
+ * A sequence of `path-to-regexp` keys that match capturing groups.
+ */
+export type Keys = Array;
+/**
+ * A sequence of path match characters.
+ */
+export type Token = Text | Parameter | Wildcard | Group;
+/**
+ * Tokenized path instance.
+ */
+export declare class TokenData {
+    readonly tokens: Token[];
+    readonly originalPath?: string | undefined;
+    constructor(tokens: Token[], originalPath?: string | undefined);
+}
+/**
+ * ParseError is thrown when there is an error processing the path.
+ */
+export declare class PathError extends TypeError {
+    readonly originalPath: string | undefined;
+    constructor(message: string, originalPath: string | undefined);
+}
+/**
+ * Parse a string for the raw tokens.
+ */
+export declare function parse(str: string, options?: ParseOptions): TokenData;
+/**
+ * Compile a string to a template function for the path.
+ */
+export declare function compile
(path: Path, options?: CompileOptions & ParseOptions): (params?: P) => string;
+export type ParamData = Partial>;
+export type PathFunction
 = (data?: P) => string;
+/**
+ * A match result contains data about the path match.
+ */
+export interface MatchResult
 {
+    path: string;
+    params: P;
+}
+/**
+ * A match is either `false` (no match) or a match result.
+ */
+export type Match
 = false | MatchResult
;
+/**
+ * The match function takes a string and returns whether it matched the path.
+ */
+export type MatchFunction
 = (path: string) => Match
;
+/**
+ * Supported path types.
+ */
+export type Path = string | TokenData;
+/**
+ * Transform a path into a match function.
+ */
+export declare function match
(path: Path | Path[], options?: MatchOptions & ParseOptions): MatchFunction
;
+/**
+ * Transform a path into a regular expression and capture keys.
+ */
+export declare function pathToRegexp(path: Path | Path[], options?: PathToRegexpOptions & ParseOptions): {
+    regexp: RegExp;
+    keys: Keys;
+};
+/**
+ * Stringify token data into a path string.
+ */
+export declare function stringify(data: TokenData): string;
diff --git a/website/src/components/Playground/editor-types/react-jsx-runtime.d.ts b/website/src/components/Playground/editor-types/react-jsx-runtime.d.ts
new file mode 100644
index 000000000000..afc4a3d0116a
--- /dev/null
+++ b/website/src/components/Playground/editor-types/react-jsx-runtime.d.ts
@@ -0,0 +1,24 @@
+import * as React from "react";
+export { Fragment, JSX } from "react";
+
+/**
+ * Create a React element.
+ *
+ * You should not use this function directly. Use JSX and a transpiler instead.
+ */
+export function jsx(
+    type: React.ElementType,
+    props: unknown,
+    key?: React.Key,
+): React.ReactElement;
+
+/**
+ * Create a React element.
+ *
+ * You should not use this function directly. Use JSX and a transpiler instead.
+ */
+export function jsxs(
+    type: React.ElementType,
+    props: unknown,
+    key?: React.Key,
+): React.ReactElement;
diff --git a/website/src/components/Playground/monaco/typeLibs.ts b/website/src/components/Playground/monaco/typeLibs.ts
index 167737aecb04..21bd8af2c041 100644
--- a/website/src/components/Playground/monaco/typeLibs.ts
+++ b/website/src/components/Playground/monaco/typeLibs.ts
@@ -8,23 +8,31 @@ import type * as Monaco from 'monaco-editor';
 
 type RawModule = Promise<{ default: string }>;
 
-/** `declare module ""` libs, mounted at file:///node_modules/
/index.d.ts */
+/** `declare module ""` libs, mounted at file:///node_modules/ */
 const MODULE_LIBS: readonly [
   name: string,
-  dir: string,
+  file: string,
   load: () => RawModule,
 ][] = [
   [
     'react',
-    '@types/react',
+    '@types/react/index.d.ts',
     () =>
       import(
         /* webpackChunkName: 'reactDTS' */ '!!raw-loader?esModule=false!../editor-types/react.d.ts'
       ),
   ],
+  [
+    'react/jsx-runtime',
+    '@types/react/jsx-runtime.d.ts',
+    () =>
+      import(
+        /* webpackChunkName: 'reactJsxRuntimeDTS' */ '!!raw-loader?esModule=false!../editor-types/react-jsx-runtime.d.ts'
+      ),
+  ],
   [
     'bignumber.js',
-    'bignumber.js',
+    'bignumber.js/index.d.ts',
     () =>
       import(
         /* webpackChunkName: 'bignumberDTS' */ '!!raw-loader?esModule=false!../editor-types/bignumber.d.ts'
@@ -32,7 +40,7 @@ const MODULE_LIBS: readonly [
   ],
   [
     '@number-flow/react',
-    '@number-flow/react',
+    '@number-flow/react/index.d.ts',
     () =>
       import(
         /* webpackChunkName: 'numberflowDTS' */ '!!raw-loader?esModule=false!../editor-types/@number-flow/react.d.ts'
@@ -40,7 +48,7 @@ const MODULE_LIBS: readonly [
   ],
   [
     'temporal-polyfill',
-    'temporal-polyfill',
+    'temporal-polyfill/index.d.ts',
     () =>
       import(
         /* webpackChunkName: 'temporalDTS' */ '!!raw-loader?esModule=false!../editor-types/temporal.d.ts'
@@ -48,7 +56,7 @@ const MODULE_LIBS: readonly [
   ],
   [
     'uuid',
-    '@types/uuid',
+    '@types/uuid/index.d.ts',
     () =>
       import(
         /* webpackChunkName: 'uuidDTS' */ '!!raw-loader?esModule=false!../editor-types/uuid.d.ts'
@@ -56,12 +64,20 @@ const MODULE_LIBS: readonly [
   ],
   [
     'qs',
-    '@types/qs',
+    '@types/qs/index.d.ts',
     () =>
       import(
         /* webpackChunkName: 'qsDTS' */ '!!raw-loader?esModule=false!../editor-types/qs.d.ts'
       ),
   ],
+  [
+    'path-to-regexp',
+    'path-to-regexp/index.d.ts',
+    () =>
+      import(
+        /* webpackChunkName: 'pathToRegexpDTS' */ '!!raw-loader?esModule=false!../editor-types/path-to-regexp.d.ts'
+      ),
+  ],
 ];
 
 /** `@data-client/` libs; one lazy-once chunk for the whole directory */
@@ -175,12 +191,6 @@ export function addTypeLibs(
 ) {
   const { typescriptDefaults } = monaco.typescript;
 
-  typescriptDefaults.addExtraLib(
-    `declare module "react/jsx-runtime" {
-        import './';
-      }`,
-    'file:///node_modules/@types/react/jsx-runtime.d.ts',
-  );
   typescriptDefaults.addExtraLib(
     `declare module 'react' {
       namespace JSX {
@@ -194,10 +204,10 @@ export function addTypeLibs(
   );
   typescriptDefaults.addExtraLib(PREVIEW_SCOPE_DECLARATIONS);
 
-  MODULE_LIBS.forEach(([name, dir], i) => {
+  MODULE_LIBS.forEach(([name, file], i) => {
     typescriptDefaults.addExtraLib(
       `declare module "${name}" { ${modules[i]} }`,
-      `file:///node_modules/${dir}/index.d.ts`,
+      `file:///node_modules/${file}`,
     );
   });
 
@@ -268,6 +278,7 @@ function globalScopeLib(scopeNames: string[]): string {
   return `import * as _React from 'react';
 import _NumberFlow from '@number-flow/react';
 import { Temporal as _Temporal, Intl as _Intl } from 'temporal-polyfill';
+import _BigNumber from 'bignumber.js';
 import type { ActionTypes, Manager as _Manager } from '@data-client/core';
 import * as _globals from '${GLOBALS_MODULE}';
 
@@ -278,6 +289,7 @@ declare global {
   const NumberFlow: typeof _NumberFlow;
   export import Temporal = _Temporal;
   export import DateTimeFormat = _Intl.DateTimeFormat;
+  export import BigNumber = _BigNumber;
   // type-only re-export in globals.d.ts, which \`import =\` can't alias
   interface Manager extends _Manager {}
 ${scopeNames.map(name => `  export import ${name} = _globals.${name};`).join('\n')}

From d2328361f6f8342d706fe1537b907c616029128f Mon Sep 17 00:00:00 2001
From: Nathaniel Tucker 
Date: Sat, 3 Oct 2026 23:57:39 -0400
Subject: [PATCH 12/15] internal(website): Type csstype and number-flow in
 playgrounds (#4139)

* internal(website): Type React jsx-runtime, path-to-regexp and bignumber.js in playgrounds

Mount real declarations for `react/jsx-runtime` (was an empty stub),
`path-to-regexp` (never mounted, so @data-client/rest's PathFunction and
ParamData were unresolved) and `bignumber.js` (stub whose types were never
mounted), and declare `BigNumber` as a playground global since the preview
scope provides it.

Co-Authored-By: Claude Opus 5.5 (1M context) 
Claude-Session: https://claude.ai/code/session_01W5R8xxJwz7dAy3Uk2v5eH5

* internal(website): Type csstype and number-flow in playgrounds

React's CSSProperties and NumberFlow's props resolved through unmounted
modules, so style values and NumberFlow format/trend/plugins were any.
Mount csstype (comments stripped, 85KB -> 31KB gzipped) and a bundled
number-flow/lite; number-flow/plugins re-exports from it.

Co-Authored-By: Claude Opus 5.5 (1M context) 
Claude-Session: https://claude.ai/code/session_01SP4rqYKdew65uNyP8xeJ9m

* internal(website): Bundle @number-flow/react types with number-flow

Bundle @number-flow/react's .d.ts with its number-flow/lite and
number-flow/plugins imports inlined, instead of mounting those as
separate modules with a hand-written plugins stub. uuid and number-flow
now share one editor-types rollup config and resolver.

Co-Authored-By: Claude Opus 5.5 (1M context) 
Claude-Session: https://claude.ai/code/session_01SP4rqYKdew65uNyP8xeJ9m

---------

Co-authored-by: Claude 
---
 scripts/copywebsitetypes.sh                   |    4 +-
 .../editor-types.rollup.config.js             |   42 +
 .../uuid-types.rollup.config.js               |   42 -
 scripts/strip-dts-comments.mjs                |   16 +
 .../editor-types/@number-flow/react.d.ts      |  194 +-
 .../Playground/editor-types/csstype.d.ts      | 2708 +++++++++++++++++
 .../components/Playground/monaco/typeLibs.ts  |    8 +
 7 files changed, 2966 insertions(+), 48 deletions(-)
 create mode 100644 scripts/rollup-plugins/editor-types.rollup.config.js
 delete mode 100644 scripts/rollup-plugins/uuid-types.rollup.config.js
 create mode 100644 scripts/strip-dts-comments.mjs
 create mode 100644 website/src/components/Playground/editor-types/csstype.d.ts

diff --git a/scripts/copywebsitetypes.sh b/scripts/copywebsitetypes.sh
index e78704317d9b..fc644dded06f 100755
--- a/scripts/copywebsitetypes.sh
+++ b/scripts/copywebsitetypes.sh
@@ -14,13 +14,13 @@ cp ./packages/react/nextjs.d.ts ./website/src/components/Playground/editor-types
 cp ./packages/react/ssr.d.ts ./website/src/components/Playground/editor-types/@data-client/react/ssr.d.ts
 cp ./packages/react/redux.d.ts ./website/src/components/Playground/editor-types/@data-client/react/redux.d.ts
 cp ./node_modules/@types/react/index.d.ts ./website/src/components/Playground/editor-types/react.d.ts
+node ./scripts/strip-dts-comments.mjs ./node_modules/csstype/index.d.ts ./website/src/components/Playground/editor-types/csstype.d.ts
 # ambient module declarations can't use relative imports
 sed 's#from "\./"#from "react"#' ./node_modules/@types/react/jsx-runtime.d.ts > ./website/src/components/Playground/editor-types/react-jsx-runtime.d.ts
 cp ./node_modules/temporal-spec/index.d.ts ./website/src/components/Playground/editor-types/temporal.d.ts
 cp ./node_modules/bignumber.js/dist/bignumber.d.mts ./website/src/components/Playground/editor-types/bignumber.d.ts
 cp ./node_modules/@types/qs/index.d.ts ./website/src/components/Playground/editor-types/qs.d.ts
 cp ./node_modules/path-to-regexp/dist/index.d.ts ./website/src/components/Playground/editor-types/path-to-regexp.d.ts
-yarn run rollup --config ./scripts/rollup-plugins/uuid-types.rollup.config.js
-cp ./node_modules/@number-flow/react/dist/index.d.ts ./website/src/components/Playground/editor-types/@number-flow/react.d.ts
+yarn run rollup --config ./scripts/rollup-plugins/editor-types.rollup.config.js
 rm ./website/src/components/Playground/editor-types/globals.d.ts
 yarn run rollup --config ./scripts/rollup-plugins/globals.rollup.config.js
\ No newline at end of file
diff --git a/scripts/rollup-plugins/editor-types.rollup.config.js b/scripts/rollup-plugins/editor-types.rollup.config.js
new file mode 100644
index 000000000000..f81eef58bd7c
--- /dev/null
+++ b/scripts/rollup-plugins/editor-types.rollup.config.js
@@ -0,0 +1,42 @@
+import fs from 'fs';
+import path from 'path';
+import dts from 'rollup-plugin-dts';
+
+// Bundles a package's .d.ts into one file for the playground editor
+// (website/src/components/Playground/monaco/typeLibs.ts)
+
+const EDITOR_TYPES = './website/src/components/Playground/editor-types';
+
+// rollup-plugin-dts can't resolve relative imports written as './x.js' or './x'
+const resolveRelativeDts = {
+  name: 'resolve-relative-dts',
+  resolveId(source, importer) {
+    if (!importer || !source.startsWith('.')) return null;
+    const base = path.resolve(
+      path.dirname(importer),
+      source.replace(/\.js$/, ''),
+    );
+    return (
+      [`${base}.d.ts`, path.join(base, 'index.d.ts')].find(file =>
+        fs.existsSync(file),
+      ) ?? null
+    );
+  },
+};
+
+const editorTypes = (input, output, external = []) => ({
+  input,
+  output: { file: `${EDITOR_TYPES}/${output}`, format: 'es' },
+  external,
+  plugins: [resolveRelativeDts, dts({ respectExternal: true })],
+});
+
+export default [
+  editorTypes('./node_modules/uuid/dist/index.d.ts', 'uuid.d.ts'),
+  // inlines number-flow/lite and number-flow/plugins
+  editorTypes(
+    './node_modules/@number-flow/react/dist/index.d.ts',
+    '@number-flow/react.d.ts',
+    ['react'],
+  ),
+];
diff --git a/scripts/rollup-plugins/uuid-types.rollup.config.js b/scripts/rollup-plugins/uuid-types.rollup.config.js
deleted file mode 100644
index 3407942976e5..000000000000
--- a/scripts/rollup-plugins/uuid-types.rollup.config.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import dts from 'rollup-plugin-dts';
-import { fileURLToPath } from 'url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-const resolveJsAsDts = {
-  name: 'resolve-js-as-dts',
-  resolveId(source, importer) {
-    if (source.endsWith('.js') && importer) {
-      // For .js imports in .d.ts files, try to resolve to .d.ts
-      const dtsFile = source.replace(/\.js$/, '.d.ts');
-      const fullPath = path.resolve(path.dirname(importer), dtsFile);
-      if (fs.existsSync(fullPath)) {
-        return fullPath;
-      }
-    }
-    return null;
-  },
-};
-
-export default [
-  {
-    input: path.resolve(__dirname, '../../node_modules/uuid/dist/index.d.ts'),
-    output: [
-      {
-        file: path.resolve(
-          __dirname,
-          '../../website/src/components/Playground/editor-types/uuid.d.ts',
-        ),
-        format: 'es',
-      },
-    ],
-    plugins: [
-      resolveJsAsDts,
-      dts({
-        respectExternal: false, // Bundle everything
-      }),
-    ],
-  },
-];
diff --git a/scripts/strip-dts-comments.mjs b/scripts/strip-dts-comments.mjs
new file mode 100644
index 000000000000..2a7b347b002e
--- /dev/null
+++ b/scripts/strip-dts-comments.mjs
@@ -0,0 +1,16 @@
+// usage: node scripts/strip-dts-comments.mjs  
+// Reprints a declaration file without comments, for editor types whose JSDoc
+// dwarfs the declarations (csstype's MDN docs are ~75% of the file).
+import fs from 'fs';
+import ts from 'typescript';
+
+const [input, output] = process.argv.slice(2);
+const source = ts.createSourceFile(
+  input,
+  fs.readFileSync(input, 'utf8'),
+  ts.ScriptTarget.Latest,
+);
+fs.writeFileSync(
+  output,
+  ts.createPrinter({ removeComments: true }).printFile(source),
+);
diff --git a/website/src/components/Playground/editor-types/@number-flow/react.d.ts b/website/src/components/Playground/editor-types/@number-flow/react.d.ts
index 3f6eebd64a3c..943a390aaefb 100644
--- a/website/src/components/Playground/editor-types/@number-flow/react.d.ts
+++ b/website/src/components/Playground/editor-types/@number-flow/react.d.ts
@@ -1,7 +1,193 @@
-export * from 'number-flow/plugins';
 import * as React from 'react';
-import NumberFlowLite, { Value, Format, Props } from 'number-flow/lite';
-export { Format, NumberPartType, Trend, Value } from 'number-flow/lite';
+
+type ExcludeReadonly = {
+    -readonly [K in keyof T as T[K] extends Readonly ? never : K]: T[K];
+};
+type HTMLProps = Partial & {
+    part: string;
+}>;
+type Justify = 'left' | 'right';
+
+type NumberPartType = Exclude | 'sign' | 'prefix' | 'suffix';
+type IntegerPart = {
+    type: NumberPartType & 'integer';
+    value: number;
+};
+type FractionPart = {
+    type: NumberPartType & 'fraction';
+    value: number;
+};
+type DigitPart = IntegerPart | FractionPart;
+type SymbolPart = {
+    type: Exclude;
+    value: string;
+};
+type NumberPartKey = string;
+type KeyedPart = {
+    key: NumberPartKey;
+};
+type KeyedDigitPart = DigitPart & KeyedPart & {
+    pos: number;
+};
+type KeyedSymbolPart = SymbolPart & KeyedPart;
+type KeyedNumberPart = KeyedDigitPart | KeyedSymbolPart;
+type Format = Omit & {
+    notation?: Exclude;
+};
+type Value = Exclude[0], bigint | undefined>;
+declare function formatToData(value: Value, formatter: Intl.NumberFormat, prefix?: string, suffix?: string): {
+    pre: KeyedNumberPart[];
+    integer: KeyedNumberPart[];
+    fraction: KeyedNumberPart[];
+    post: KeyedNumberPart[];
+    valueAsString: string;
+    value: number;
+};
+type Data = ReturnType;
+
+declare const ServerSafeHTMLElement: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+
+type Trend = number | ((oldValue: number, value: number) => number);
+type DigitOptions = {
+    max?: number;
+};
+type Digits = Record;
+interface Props {
+    transformTiming: EffectTiming;
+    spinTiming: EffectTiming | undefined;
+    opacityTiming: EffectTiming;
+    animated: boolean;
+    respectMotionPreference: boolean;
+    trend: Trend;
+    plugins?: Plugin[];
+    digits: Digits | undefined;
+}
+interface NumberFlowLite extends Props {
+}
+/**
+ * @internal Used for framework wrappers
+ */
+declare class NumberFlowLite extends ServerSafeHTMLElement implements Props {
+    /**
+     * Use `private _private` properties instead of `#private` to avoid # polyfill and
+     * reduce bundle size. Also, use `readonly` properties instead of getters to save on bundle
+     * size, even though you have to do gross stuff like `(this as Mutable<...>)` until TS
+     * supports e.g. https://github.com/microsoft/TypeScript/issues/37487
+     */
+    static defaultProps: Props;
+    constructor();
+    private _animated;
+    get animated(): boolean;
+    set animated(val: boolean);
+    readonly created: boolean;
+    private _pre?;
+    private _num?;
+    private _post?;
+    readonly computedTrend?: number;
+    readonly computedAnimated: boolean;
+    private _internals?;
+    private _data?;
+    /**
+     * @internal
+     */
+    batched: boolean;
+    /**
+     * @internal
+     */
+    set data(data: Data | undefined);
+    private _preUpdated;
+    /**
+     * @internal
+     */
+    willUpdate(): void;
+    private _abortAnimationsFinish?;
+    /**
+     * @internal
+     */
+    didUpdate(): void;
+}
+type SectionProps = {
+    justify: Justify;
+} & HTMLProps<'span'>;
+declare abstract class Section {
+    readonly flow: NumberFlowLite;
+    readonly el: HTMLSpanElement;
+    readonly justify: Justify;
+    protected children: Map>;
+    constructor(flow: NumberFlowLite, parts: KeyedNumberPart[], { justify, className, ...props }: SectionProps, children?: (chars: Node[]) => Node[]);
+    protected addChar(part: KeyedNumberPart, { startDigitsAtZero, ...props }?: {
+        startDigitsAtZero?: boolean;
+    } & Pick): Digit | Sym;
+    private onCharRemove;
+    protected unpop(char: Char): void;
+    protected pop(chars: Map): void;
+    protected addNewAndUpdateExisting(parts: KeyedNumberPart[]): void;
+    private _prevOffset?;
+    willUpdate(): void;
+    didUpdate(): void;
+}
+type OnRemove = () => void;
+interface AnimatePresenceProps {
+    onRemove?: OnRemove;
+    animateIn?: boolean;
+}
+declare class AnimatePresence {
+    readonly flow: NumberFlowLite;
+    readonly el: HTMLElement;
+    private _present;
+    private _onRemove?;
+    constructor(flow: NumberFlowLite, el: HTMLElement, { onRemove, animateIn }?: AnimatePresenceProps);
+    get present(): boolean;
+    private _remove;
+    set present(val: boolean);
+}
+interface CharProps extends AnimatePresenceProps {
+}
+declare abstract class Char
 extends AnimatePresence {
+    readonly section: Section;
+    protected value: P['value'];
+    readonly el: HTMLSpanElement;
+    constructor(section: Section, value: P['value'], el: HTMLSpanElement, props?: AnimatePresenceProps);
+    abstract willUpdate(parentRect: DOMRect): void;
+    abstract update(value: P['value']): void;
+    abstract didUpdate(parentRect: DOMRect): void;
+}
+declare class Digit extends Char {
+    readonly pos: number;
+    private _numbers;
+    readonly length: number;
+    constructor(section: Section, type: KeyedDigitPart['type'], value: KeyedDigitPart['value'], pos: number, props?: CharProps);
+    private _prevValue?;
+    private _prevCenter?;
+    willUpdate(parentRect: DOMRect): void;
+    update(value: KeyedDigitPart['value']): void;
+    didUpdate(parentRect: DOMRect): void;
+    getDelta(): number;
+    private _onAnimationsFinish;
+}
+declare class Sym extends Char {
+    private type;
+    constructor(section: Section, type: KeyedSymbolPart['type'], value: KeyedSymbolPart['value'], props?: CharProps);
+    private _children;
+    private _prevOffset?;
+    willUpdate(parentRect: DOMRect): void;
+    private _onChildRemove;
+    update(value: KeyedSymbolPart['value']): void;
+    didUpdate(parentRect: DOMRect): void;
+}
+
+/**
+ * Makes number transitions appear to pass through in between numbers.
+ */
+declare const continuous: Plugin;
+
+type Plugin = {
+    onUpdate?(data: Data, prev: Data, context: NumberFlowLite): void;
+    getDelta?(value: number, prev: number, context: Digit): number | void;
+};
 
 declare const OBSERVED_ATTRIBUTES: readonly ["data", "digits"];
 type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
@@ -47,4 +233,4 @@ declare function useCanAnimate({ respectMotionPreference }?: {
     respectMotionPreference?: boolean | undefined;
 }): boolean;
 
-export { NumberFlowElement, NumberFlowGroup, type NumberFlowProps, NumberFlow as default, styles, useCanAnimate, useIsSupported, usePrefersReducedMotion };
+export { type Format, NumberFlowElement, NumberFlowGroup, type NumberFlowProps, type NumberPartType, type Plugin, type Trend, type Value, continuous, NumberFlow as default, styles, useCanAnimate, useIsSupported, usePrefersReducedMotion };
diff --git a/website/src/components/Playground/editor-types/csstype.d.ts b/website/src/components/Playground/editor-types/csstype.d.ts
new file mode 100644
index 000000000000..67ee92fc5e51
--- /dev/null
+++ b/website/src/components/Playground/editor-types/csstype.d.ts
@@ -0,0 +1,2708 @@
+export {};
+export type PropertyValue = TValue extends Array ? Array : TValue extends infer TUnpacked & {} ? TUnpacked : TValue;
+export type Fallback = {
+    [P in keyof T]: T[P] | readonly NonNullable[];
+};
+export interface StandardLonghandProperties {
+    accentColor?: Property.AccentColor | undefined;
+    alignContent?: Property.AlignContent | undefined;
+    alignItems?: Property.AlignItems | undefined;
+    alignSelf?: Property.AlignSelf | undefined;
+    alignTracks?: Property.AlignTracks | undefined;
+    alignmentBaseline?: Property.AlignmentBaseline | undefined;
+    anchorName?: Property.AnchorName | undefined;
+    anchorScope?: Property.AnchorScope | undefined;
+    animationComposition?: Property.AnimationComposition | undefined;
+    animationDelay?: Property.AnimationDelay | undefined;
+    animationDirection?: Property.AnimationDirection | undefined;
+    animationDuration?: Property.AnimationDuration | undefined;
+    animationFillMode?: Property.AnimationFillMode | undefined;
+    animationIterationCount?: Property.AnimationIterationCount | undefined;
+    animationName?: Property.AnimationName | undefined;
+    animationPlayState?: Property.AnimationPlayState | undefined;
+    animationRangeEnd?: Property.AnimationRangeEnd | undefined;
+    animationRangeStart?: Property.AnimationRangeStart | undefined;
+    animationTimeline?: Property.AnimationTimeline | undefined;
+    animationTimingFunction?: Property.AnimationTimingFunction | undefined;
+    appearance?: Property.Appearance | undefined;
+    aspectRatio?: Property.AspectRatio | undefined;
+    backdropFilter?: Property.BackdropFilter | undefined;
+    backfaceVisibility?: Property.BackfaceVisibility | undefined;
+    backgroundAttachment?: Property.BackgroundAttachment | undefined;
+    backgroundBlendMode?: Property.BackgroundBlendMode | undefined;
+    backgroundClip?: Property.BackgroundClip | undefined;
+    backgroundColor?: Property.BackgroundColor | undefined;
+    backgroundImage?: Property.BackgroundImage | undefined;
+    backgroundOrigin?: Property.BackgroundOrigin | undefined;
+    backgroundPositionX?: Property.BackgroundPositionX | undefined;
+    backgroundPositionY?: Property.BackgroundPositionY | undefined;
+    backgroundRepeat?: Property.BackgroundRepeat | undefined;
+    backgroundSize?: Property.BackgroundSize | undefined;
+    baselineShift?: Property.BaselineShift | undefined;
+    blockSize?: Property.BlockSize | undefined;
+    borderBlockEndColor?: Property.BorderBlockEndColor | undefined;
+    borderBlockEndStyle?: Property.BorderBlockEndStyle | undefined;
+    borderBlockEndWidth?: Property.BorderBlockEndWidth | undefined;
+    borderBlockStartColor?: Property.BorderBlockStartColor | undefined;
+    borderBlockStartStyle?: Property.BorderBlockStartStyle | undefined;
+    borderBlockStartWidth?: Property.BorderBlockStartWidth | undefined;
+    borderBottomColor?: Property.BorderBottomColor | undefined;
+    borderBottomLeftRadius?: Property.BorderBottomLeftRadius | undefined;
+    borderBottomRightRadius?: Property.BorderBottomRightRadius | undefined;
+    borderBottomStyle?: Property.BorderBottomStyle | undefined;
+    borderBottomWidth?: Property.BorderBottomWidth | undefined;
+    borderCollapse?: Property.BorderCollapse | undefined;
+    borderEndEndRadius?: Property.BorderEndEndRadius | undefined;
+    borderEndStartRadius?: Property.BorderEndStartRadius | undefined;
+    borderImageOutset?: Property.BorderImageOutset | undefined;
+    borderImageRepeat?: Property.BorderImageRepeat | undefined;
+    borderImageSlice?: Property.BorderImageSlice | undefined;
+    borderImageSource?: Property.BorderImageSource | undefined;
+    borderImageWidth?: Property.BorderImageWidth | undefined;
+    borderInlineEndColor?: Property.BorderInlineEndColor | undefined;
+    borderInlineEndStyle?: Property.BorderInlineEndStyle | undefined;
+    borderInlineEndWidth?: Property.BorderInlineEndWidth | undefined;
+    borderInlineStartColor?: Property.BorderInlineStartColor | undefined;
+    borderInlineStartStyle?: Property.BorderInlineStartStyle | undefined;
+    borderInlineStartWidth?: Property.BorderInlineStartWidth | undefined;
+    borderLeftColor?: Property.BorderLeftColor | undefined;
+    borderLeftStyle?: Property.BorderLeftStyle | undefined;
+    borderLeftWidth?: Property.BorderLeftWidth | undefined;
+    borderRightColor?: Property.BorderRightColor | undefined;
+    borderRightStyle?: Property.BorderRightStyle | undefined;
+    borderRightWidth?: Property.BorderRightWidth | undefined;
+    borderSpacing?: Property.BorderSpacing | undefined;
+    borderStartEndRadius?: Property.BorderStartEndRadius | undefined;
+    borderStartStartRadius?: Property.BorderStartStartRadius | undefined;
+    borderTopColor?: Property.BorderTopColor | undefined;
+    borderTopLeftRadius?: Property.BorderTopLeftRadius | undefined;
+    borderTopRightRadius?: Property.BorderTopRightRadius | undefined;
+    borderTopStyle?: Property.BorderTopStyle | undefined;
+    borderTopWidth?: Property.BorderTopWidth | undefined;
+    bottom?: Property.Bottom | undefined;
+    boxDecorationBreak?: Property.BoxDecorationBreak | undefined;
+    boxShadow?: Property.BoxShadow | undefined;
+    boxSizing?: Property.BoxSizing | undefined;
+    breakAfter?: Property.BreakAfter | undefined;
+    breakBefore?: Property.BreakBefore | undefined;
+    breakInside?: Property.BreakInside | undefined;
+    captionSide?: Property.CaptionSide | undefined;
+    caretColor?: Property.CaretColor | undefined;
+    caretShape?: Property.CaretShape | undefined;
+    clear?: Property.Clear | undefined;
+    clipPath?: Property.ClipPath | undefined;
+    clipRule?: Property.ClipRule | undefined;
+    color?: Property.Color | undefined;
+    colorAdjust?: Property.PrintColorAdjust | undefined;
+    colorInterpolationFilters?: Property.ColorInterpolationFilters | undefined;
+    colorScheme?: Property.ColorScheme | undefined;
+    columnCount?: Property.ColumnCount | undefined;
+    columnFill?: Property.ColumnFill | undefined;
+    columnGap?: Property.ColumnGap | undefined;
+    columnRuleColor?: Property.ColumnRuleColor | undefined;
+    columnRuleStyle?: Property.ColumnRuleStyle | undefined;
+    columnRuleWidth?: Property.ColumnRuleWidth | undefined;
+    columnSpan?: Property.ColumnSpan | undefined;
+    columnWidth?: Property.ColumnWidth | undefined;
+    contain?: Property.Contain | undefined;
+    containIntrinsicBlockSize?: Property.ContainIntrinsicBlockSize | undefined;
+    containIntrinsicHeight?: Property.ContainIntrinsicHeight | undefined;
+    containIntrinsicInlineSize?: Property.ContainIntrinsicInlineSize | undefined;
+    containIntrinsicWidth?: Property.ContainIntrinsicWidth | undefined;
+    containerName?: Property.ContainerName | undefined;
+    containerType?: Property.ContainerType | undefined;
+    content?: Property.Content | undefined;
+    contentVisibility?: Property.ContentVisibility | undefined;
+    counterIncrement?: Property.CounterIncrement | undefined;
+    counterReset?: Property.CounterReset | undefined;
+    counterSet?: Property.CounterSet | undefined;
+    cursor?: Property.Cursor | undefined;
+    cx?: Property.Cx | undefined;
+    cy?: Property.Cy | undefined;
+    d?: Property.D | undefined;
+    direction?: Property.Direction | undefined;
+    display?: Property.Display | undefined;
+    dominantBaseline?: Property.DominantBaseline | undefined;
+    emptyCells?: Property.EmptyCells | undefined;
+    fieldSizing?: Property.FieldSizing | undefined;
+    fill?: Property.Fill | undefined;
+    fillOpacity?: Property.FillOpacity | undefined;
+    fillRule?: Property.FillRule | undefined;
+    filter?: Property.Filter | undefined;
+    flexBasis?: Property.FlexBasis | undefined;
+    flexDirection?: Property.FlexDirection | undefined;
+    flexGrow?: Property.FlexGrow | undefined;
+    flexShrink?: Property.FlexShrink | undefined;
+    flexWrap?: Property.FlexWrap | undefined;
+    float?: Property.Float | undefined;
+    floodColor?: Property.FloodColor | undefined;
+    floodOpacity?: Property.FloodOpacity | undefined;
+    fontFamily?: Property.FontFamily | undefined;
+    fontFeatureSettings?: Property.FontFeatureSettings | undefined;
+    fontKerning?: Property.FontKerning | undefined;
+    fontLanguageOverride?: Property.FontLanguageOverride | undefined;
+    fontOpticalSizing?: Property.FontOpticalSizing | undefined;
+    fontPalette?: Property.FontPalette | undefined;
+    fontSize?: Property.FontSize | undefined;
+    fontSizeAdjust?: Property.FontSizeAdjust | undefined;
+    fontSmooth?: Property.FontSmooth | undefined;
+    fontStyle?: Property.FontStyle | undefined;
+    fontSynthesis?: Property.FontSynthesis | undefined;
+    fontSynthesisPosition?: Property.FontSynthesisPosition | undefined;
+    fontSynthesisSmallCaps?: Property.FontSynthesisSmallCaps | undefined;
+    fontSynthesisStyle?: Property.FontSynthesisStyle | undefined;
+    fontSynthesisWeight?: Property.FontSynthesisWeight | undefined;
+    fontVariant?: Property.FontVariant | undefined;
+    fontVariantAlternates?: Property.FontVariantAlternates | undefined;
+    fontVariantCaps?: Property.FontVariantCaps | undefined;
+    fontVariantEastAsian?: Property.FontVariantEastAsian | undefined;
+    fontVariantEmoji?: Property.FontVariantEmoji | undefined;
+    fontVariantLigatures?: Property.FontVariantLigatures | undefined;
+    fontVariantNumeric?: Property.FontVariantNumeric | undefined;
+    fontVariantPosition?: Property.FontVariantPosition | undefined;
+    fontVariationSettings?: Property.FontVariationSettings | undefined;
+    fontWeight?: Property.FontWeight | undefined;
+    fontWidth?: Property.FontWidth | undefined;
+    forcedColorAdjust?: Property.ForcedColorAdjust | undefined;
+    gridAutoColumns?: Property.GridAutoColumns | undefined;
+    gridAutoFlow?: Property.GridAutoFlow | undefined;
+    gridAutoRows?: Property.GridAutoRows | undefined;
+    gridColumnEnd?: Property.GridColumnEnd | undefined;
+    gridColumnStart?: Property.GridColumnStart | undefined;
+    gridRowEnd?: Property.GridRowEnd | undefined;
+    gridRowStart?: Property.GridRowStart | undefined;
+    gridTemplateAreas?: Property.GridTemplateAreas | undefined;
+    gridTemplateColumns?: Property.GridTemplateColumns | undefined;
+    gridTemplateRows?: Property.GridTemplateRows | undefined;
+    hangingPunctuation?: Property.HangingPunctuation | undefined;
+    height?: Property.Height | undefined;
+    hyphenateCharacter?: Property.HyphenateCharacter | undefined;
+    hyphenateLimitChars?: Property.HyphenateLimitChars | undefined;
+    hyphens?: Property.Hyphens | undefined;
+    imageOrientation?: Property.ImageOrientation | undefined;
+    imageRendering?: Property.ImageRendering | undefined;
+    imageResolution?: Property.ImageResolution | undefined;
+    initialLetter?: Property.InitialLetter | undefined;
+    initialLetterAlign?: Property.InitialLetterAlign | undefined;
+    inlineSize?: Property.InlineSize | undefined;
+    insetBlockEnd?: Property.InsetBlockEnd | undefined;
+    insetBlockStart?: Property.InsetBlockStart | undefined;
+    insetInlineEnd?: Property.InsetInlineEnd | undefined;
+    insetInlineStart?: Property.InsetInlineStart | undefined;
+    interpolateSize?: Property.InterpolateSize | undefined;
+    isolation?: Property.Isolation | undefined;
+    justifyContent?: Property.JustifyContent | undefined;
+    justifyItems?: Property.JustifyItems | undefined;
+    justifySelf?: Property.JustifySelf | undefined;
+    justifyTracks?: Property.JustifyTracks | undefined;
+    left?: Property.Left | undefined;
+    letterSpacing?: Property.LetterSpacing | undefined;
+    lightingColor?: Property.LightingColor | undefined;
+    lineBreak?: Property.LineBreak | undefined;
+    lineHeight?: Property.LineHeight | undefined;
+    lineHeightStep?: Property.LineHeightStep | undefined;
+    listStyleImage?: Property.ListStyleImage | undefined;
+    listStylePosition?: Property.ListStylePosition | undefined;
+    listStyleType?: Property.ListStyleType | undefined;
+    marginBlockEnd?: Property.MarginBlockEnd | undefined;
+    marginBlockStart?: Property.MarginBlockStart | undefined;
+    marginBottom?: Property.MarginBottom | undefined;
+    marginInlineEnd?: Property.MarginInlineEnd | undefined;
+    marginInlineStart?: Property.MarginInlineStart | undefined;
+    marginLeft?: Property.MarginLeft | undefined;
+    marginRight?: Property.MarginRight | undefined;
+    marginTop?: Property.MarginTop | undefined;
+    marginTrim?: Property.MarginTrim | undefined;
+    marker?: Property.Marker | undefined;
+    markerEnd?: Property.MarkerEnd | undefined;
+    markerMid?: Property.MarkerMid | undefined;
+    markerStart?: Property.MarkerStart | undefined;
+    maskBorderMode?: Property.MaskBorderMode | undefined;
+    maskBorderOutset?: Property.MaskBorderOutset | undefined;
+    maskBorderRepeat?: Property.MaskBorderRepeat | undefined;
+    maskBorderSlice?: Property.MaskBorderSlice | undefined;
+    maskBorderSource?: Property.MaskBorderSource | undefined;
+    maskBorderWidth?: Property.MaskBorderWidth | undefined;
+    maskClip?: Property.MaskClip | undefined;
+    maskComposite?: Property.MaskComposite | undefined;
+    maskImage?: Property.MaskImage | undefined;
+    maskMode?: Property.MaskMode | undefined;
+    maskOrigin?: Property.MaskOrigin | undefined;
+    maskPosition?: Property.MaskPosition | undefined;
+    maskRepeat?: Property.MaskRepeat | undefined;
+    maskSize?: Property.MaskSize | undefined;
+    maskType?: Property.MaskType | undefined;
+    masonryAutoFlow?: Property.MasonryAutoFlow | undefined;
+    mathDepth?: Property.MathDepth | undefined;
+    mathShift?: Property.MathShift | undefined;
+    mathStyle?: Property.MathStyle | undefined;
+    maxBlockSize?: Property.MaxBlockSize | undefined;
+    maxHeight?: Property.MaxHeight | undefined;
+    maxInlineSize?: Property.MaxInlineSize | undefined;
+    maxLines?: Property.MaxLines | undefined;
+    maxWidth?: Property.MaxWidth | undefined;
+    minBlockSize?: Property.MinBlockSize | undefined;
+    minHeight?: Property.MinHeight | undefined;
+    minInlineSize?: Property.MinInlineSize | undefined;
+    minWidth?: Property.MinWidth | undefined;
+    mixBlendMode?: Property.MixBlendMode | undefined;
+    motionDistance?: Property.OffsetDistance | undefined;
+    motionPath?: Property.OffsetPath | undefined;
+    motionRotation?: Property.OffsetRotate | undefined;
+    objectFit?: Property.ObjectFit | undefined;
+    objectPosition?: Property.ObjectPosition | undefined;
+    objectViewBox?: Property.ObjectViewBox | undefined;
+    offsetAnchor?: Property.OffsetAnchor | undefined;
+    offsetDistance?: Property.OffsetDistance | undefined;
+    offsetPath?: Property.OffsetPath | undefined;
+    offsetPosition?: Property.OffsetPosition | undefined;
+    offsetRotate?: Property.OffsetRotate | undefined;
+    offsetRotation?: Property.OffsetRotate | undefined;
+    opacity?: Property.Opacity | undefined;
+    order?: Property.Order | undefined;
+    orphans?: Property.Orphans | undefined;
+    outlineColor?: Property.OutlineColor | undefined;
+    outlineOffset?: Property.OutlineOffset | undefined;
+    outlineStyle?: Property.OutlineStyle | undefined;
+    outlineWidth?: Property.OutlineWidth | undefined;
+    overflowAnchor?: Property.OverflowAnchor | undefined;
+    overflowBlock?: Property.OverflowBlock | undefined;
+    overflowClipBox?: Property.OverflowClipBox | undefined;
+    overflowClipMargin?: Property.OverflowClipMargin | undefined;
+    overflowInline?: Property.OverflowInline | undefined;
+    overflowWrap?: Property.OverflowWrap | undefined;
+    overflowX?: Property.OverflowX | undefined;
+    overflowY?: Property.OverflowY | undefined;
+    overlay?: Property.Overlay | undefined;
+    overscrollBehaviorBlock?: Property.OverscrollBehaviorBlock | undefined;
+    overscrollBehaviorInline?: Property.OverscrollBehaviorInline | undefined;
+    overscrollBehaviorX?: Property.OverscrollBehaviorX | undefined;
+    overscrollBehaviorY?: Property.OverscrollBehaviorY | undefined;
+    paddingBlockEnd?: Property.PaddingBlockEnd | undefined;
+    paddingBlockStart?: Property.PaddingBlockStart | undefined;
+    paddingBottom?: Property.PaddingBottom | undefined;
+    paddingInlineEnd?: Property.PaddingInlineEnd | undefined;
+    paddingInlineStart?: Property.PaddingInlineStart | undefined;
+    paddingLeft?: Property.PaddingLeft | undefined;
+    paddingRight?: Property.PaddingRight | undefined;
+    paddingTop?: Property.PaddingTop | undefined;
+    page?: Property.Page | undefined;
+    paintOrder?: Property.PaintOrder | undefined;
+    perspective?: Property.Perspective | undefined;
+    perspectiveOrigin?: Property.PerspectiveOrigin | undefined;
+    pointerEvents?: Property.PointerEvents | undefined;
+    position?: Property.Position | undefined;
+    positionAnchor?: Property.PositionAnchor | undefined;
+    positionArea?: Property.PositionArea | undefined;
+    positionTryFallbacks?: Property.PositionTryFallbacks | undefined;
+    positionTryOrder?: Property.PositionTryOrder | undefined;
+    positionVisibility?: Property.PositionVisibility | undefined;
+    printColorAdjust?: Property.PrintColorAdjust | undefined;
+    quotes?: Property.Quotes | undefined;
+    r?: Property.R | undefined;
+    resize?: Property.Resize | undefined;
+    right?: Property.Right | undefined;
+    rotate?: Property.Rotate | undefined;
+    rowGap?: Property.RowGap | undefined;
+    rubyAlign?: Property.RubyAlign | undefined;
+    rubyMerge?: Property.RubyMerge | undefined;
+    rubyOverhang?: Property.RubyOverhang | undefined;
+    rubyPosition?: Property.RubyPosition | undefined;
+    rx?: Property.Rx | undefined;
+    ry?: Property.Ry | undefined;
+    scale?: Property.Scale | undefined;
+    scrollBehavior?: Property.ScrollBehavior | undefined;
+    scrollInitialTarget?: Property.ScrollInitialTarget | undefined;
+    scrollMarginBlockEnd?: Property.ScrollMarginBlockEnd | undefined;
+    scrollMarginBlockStart?: Property.ScrollMarginBlockStart | undefined;
+    scrollMarginBottom?: Property.ScrollMarginBottom | undefined;
+    scrollMarginInlineEnd?: Property.ScrollMarginInlineEnd | undefined;
+    scrollMarginInlineStart?: Property.ScrollMarginInlineStart | undefined;
+    scrollMarginLeft?: Property.ScrollMarginLeft | undefined;
+    scrollMarginRight?: Property.ScrollMarginRight | undefined;
+    scrollMarginTop?: Property.ScrollMarginTop | undefined;
+    scrollPaddingBlockEnd?: Property.ScrollPaddingBlockEnd | undefined;
+    scrollPaddingBlockStart?: Property.ScrollPaddingBlockStart | undefined;
+    scrollPaddingBottom?: Property.ScrollPaddingBottom | undefined;
+    scrollPaddingInlineEnd?: Property.ScrollPaddingInlineEnd | undefined;
+    scrollPaddingInlineStart?: Property.ScrollPaddingInlineStart | undefined;
+    scrollPaddingLeft?: Property.ScrollPaddingLeft | undefined;
+    scrollPaddingRight?: Property.ScrollPaddingRight | undefined;
+    scrollPaddingTop?: Property.ScrollPaddingTop | undefined;
+    scrollSnapAlign?: Property.ScrollSnapAlign | undefined;
+    scrollSnapMarginBottom?: Property.ScrollMarginBottom | undefined;
+    scrollSnapMarginLeft?: Property.ScrollMarginLeft | undefined;
+    scrollSnapMarginRight?: Property.ScrollMarginRight | undefined;
+    scrollSnapMarginTop?: Property.ScrollMarginTop | undefined;
+    scrollSnapStop?: Property.ScrollSnapStop | undefined;
+    scrollSnapType?: Property.ScrollSnapType | undefined;
+    scrollTimelineAxis?: Property.ScrollTimelineAxis | undefined;
+    scrollTimelineName?: Property.ScrollTimelineName | undefined;
+    scrollbarColor?: Property.ScrollbarColor | undefined;
+    scrollbarGutter?: Property.ScrollbarGutter | undefined;
+    scrollbarWidth?: Property.ScrollbarWidth | undefined;
+    shapeImageThreshold?: Property.ShapeImageThreshold | undefined;
+    shapeMargin?: Property.ShapeMargin | undefined;
+    shapeOutside?: Property.ShapeOutside | undefined;
+    shapeRendering?: Property.ShapeRendering | undefined;
+    speakAs?: Property.SpeakAs | undefined;
+    stopColor?: Property.StopColor | undefined;
+    stopOpacity?: Property.StopOpacity | undefined;
+    stroke?: Property.Stroke | undefined;
+    strokeColor?: Property.StrokeColor | undefined;
+    strokeDasharray?: Property.StrokeDasharray | undefined;
+    strokeDashoffset?: Property.StrokeDashoffset | undefined;
+    strokeLinecap?: Property.StrokeLinecap | undefined;
+    strokeLinejoin?: Property.StrokeLinejoin | undefined;
+    strokeMiterlimit?: Property.StrokeMiterlimit | undefined;
+    strokeOpacity?: Property.StrokeOpacity | undefined;
+    strokeWidth?: Property.StrokeWidth | undefined;
+    tabSize?: Property.TabSize | undefined;
+    tableLayout?: Property.TableLayout | undefined;
+    textAlign?: Property.TextAlign | undefined;
+    textAlignLast?: Property.TextAlignLast | undefined;
+    textAnchor?: Property.TextAnchor | undefined;
+    textAutospace?: Property.TextAutospace | undefined;
+    textBox?: Property.TextBox | undefined;
+    textBoxEdge?: Property.TextBoxEdge | undefined;
+    textBoxTrim?: Property.TextBoxTrim | undefined;
+    textCombineUpright?: Property.TextCombineUpright | undefined;
+    textDecorationColor?: Property.TextDecorationColor | undefined;
+    textDecorationLine?: Property.TextDecorationLine | undefined;
+    textDecorationSkip?: Property.TextDecorationSkip | undefined;
+    textDecorationSkipInk?: Property.TextDecorationSkipInk | undefined;
+    textDecorationStyle?: Property.TextDecorationStyle | undefined;
+    textDecorationThickness?: Property.TextDecorationThickness | undefined;
+    textEmphasisColor?: Property.TextEmphasisColor | undefined;
+    textEmphasisPosition?: Property.TextEmphasisPosition | undefined;
+    textEmphasisStyle?: Property.TextEmphasisStyle | undefined;
+    textIndent?: Property.TextIndent | undefined;
+    textJustify?: Property.TextJustify | undefined;
+    textOrientation?: Property.TextOrientation | undefined;
+    textOverflow?: Property.TextOverflow | undefined;
+    textRendering?: Property.TextRendering | undefined;
+    textShadow?: Property.TextShadow | undefined;
+    textSizeAdjust?: Property.TextSizeAdjust | undefined;
+    textSpacingTrim?: Property.TextSpacingTrim | undefined;
+    textTransform?: Property.TextTransform | undefined;
+    textUnderlineOffset?: Property.TextUnderlineOffset | undefined;
+    textUnderlinePosition?: Property.TextUnderlinePosition | undefined;
+    textWrapMode?: Property.TextWrapMode | undefined;
+    textWrapStyle?: Property.TextWrapStyle | undefined;
+    timelineScope?: Property.TimelineScope | undefined;
+    top?: Property.Top | undefined;
+    touchAction?: Property.TouchAction | undefined;
+    transform?: Property.Transform | undefined;
+    transformBox?: Property.TransformBox | undefined;
+    transformOrigin?: Property.TransformOrigin | undefined;
+    transformStyle?: Property.TransformStyle | undefined;
+    transitionBehavior?: Property.TransitionBehavior | undefined;
+    transitionDelay?: Property.TransitionDelay | undefined;
+    transitionDuration?: Property.TransitionDuration | undefined;
+    transitionProperty?: Property.TransitionProperty | undefined;
+    transitionTimingFunction?: Property.TransitionTimingFunction | undefined;
+    translate?: Property.Translate | undefined;
+    unicodeBidi?: Property.UnicodeBidi | undefined;
+    userSelect?: Property.UserSelect | undefined;
+    vectorEffect?: Property.VectorEffect | undefined;
+    verticalAlign?: Property.VerticalAlign | undefined;
+    viewTimelineAxis?: Property.ViewTimelineAxis | undefined;
+    viewTimelineInset?: Property.ViewTimelineInset | undefined;
+    viewTimelineName?: Property.ViewTimelineName | undefined;
+    viewTransitionClass?: Property.ViewTransitionClass | undefined;
+    viewTransitionName?: Property.ViewTransitionName | undefined;
+    visibility?: Property.Visibility | undefined;
+    whiteSpace?: Property.WhiteSpace | undefined;
+    whiteSpaceCollapse?: Property.WhiteSpaceCollapse | undefined;
+    widows?: Property.Widows | undefined;
+    width?: Property.Width | undefined;
+    willChange?: Property.WillChange | undefined;
+    wordBreak?: Property.WordBreak | undefined;
+    wordSpacing?: Property.WordSpacing | undefined;
+    wordWrap?: Property.WordWrap | undefined;
+    writingMode?: Property.WritingMode | undefined;
+    x?: Property.X | undefined;
+    y?: Property.Y | undefined;
+    zIndex?: Property.ZIndex | undefined;
+    zoom?: Property.Zoom | undefined;
+}
+export interface StandardShorthandProperties {
+    all?: Property.All | undefined;
+    animation?: Property.Animation | undefined;
+    animationRange?: Property.AnimationRange | undefined;
+    background?: Property.Background | undefined;
+    backgroundPosition?: Property.BackgroundPosition | undefined;
+    border?: Property.Border | undefined;
+    borderBlock?: Property.BorderBlock | undefined;
+    borderBlockColor?: Property.BorderBlockColor | undefined;
+    borderBlockEnd?: Property.BorderBlockEnd | undefined;
+    borderBlockStart?: Property.BorderBlockStart | undefined;
+    borderBlockStyle?: Property.BorderBlockStyle | undefined;
+    borderBlockWidth?: Property.BorderBlockWidth | undefined;
+    borderBottom?: Property.BorderBottom | undefined;
+    borderColor?: Property.BorderColor | undefined;
+    borderImage?: Property.BorderImage | undefined;
+    borderInline?: Property.BorderInline | undefined;
+    borderInlineColor?: Property.BorderInlineColor | undefined;
+    borderInlineEnd?: Property.BorderInlineEnd | undefined;
+    borderInlineStart?: Property.BorderInlineStart | undefined;
+    borderInlineStyle?: Property.BorderInlineStyle | undefined;
+    borderInlineWidth?: Property.BorderInlineWidth | undefined;
+    borderLeft?: Property.BorderLeft | undefined;
+    borderRadius?: Property.BorderRadius | undefined;
+    borderRight?: Property.BorderRight | undefined;
+    borderStyle?: Property.BorderStyle | undefined;
+    borderTop?: Property.BorderTop | undefined;
+    borderWidth?: Property.BorderWidth | undefined;
+    caret?: Property.Caret | undefined;
+    columnRule?: Property.ColumnRule | undefined;
+    columns?: Property.Columns | undefined;
+    containIntrinsicSize?: Property.ContainIntrinsicSize | undefined;
+    container?: Property.Container | undefined;
+    flex?: Property.Flex | undefined;
+    flexFlow?: Property.FlexFlow | undefined;
+    font?: Property.Font | undefined;
+    gap?: Property.Gap | undefined;
+    grid?: Property.Grid | undefined;
+    gridArea?: Property.GridArea | undefined;
+    gridColumn?: Property.GridColumn | undefined;
+    gridRow?: Property.GridRow | undefined;
+    gridTemplate?: Property.GridTemplate | undefined;
+    inset?: Property.Inset | undefined;
+    insetBlock?: Property.InsetBlock | undefined;
+    insetInline?: Property.InsetInline | undefined;
+    lineClamp?: Property.LineClamp | undefined;
+    listStyle?: Property.ListStyle | undefined;
+    margin?: Property.Margin | undefined;
+    marginBlock?: Property.MarginBlock | undefined;
+    marginInline?: Property.MarginInline | undefined;
+    mask?: Property.Mask | undefined;
+    maskBorder?: Property.MaskBorder | undefined;
+    motion?: Property.Offset | undefined;
+    offset?: Property.Offset | undefined;
+    outline?: Property.Outline | undefined;
+    overflow?: Property.Overflow | undefined;
+    overscrollBehavior?: Property.OverscrollBehavior | undefined;
+    padding?: Property.Padding | undefined;
+    paddingBlock?: Property.PaddingBlock | undefined;
+    paddingInline?: Property.PaddingInline | undefined;
+    placeContent?: Property.PlaceContent | undefined;
+    placeItems?: Property.PlaceItems | undefined;
+    placeSelf?: Property.PlaceSelf | undefined;
+    positionTry?: Property.PositionTry | undefined;
+    scrollMargin?: Property.ScrollMargin | undefined;
+    scrollMarginBlock?: Property.ScrollMarginBlock | undefined;
+    scrollMarginInline?: Property.ScrollMarginInline | undefined;
+    scrollPadding?: Property.ScrollPadding | undefined;
+    scrollPaddingBlock?: Property.ScrollPaddingBlock | undefined;
+    scrollPaddingInline?: Property.ScrollPaddingInline | undefined;
+    scrollSnapMargin?: Property.ScrollMargin | undefined;
+    scrollTimeline?: Property.ScrollTimeline | undefined;
+    textDecoration?: Property.TextDecoration | undefined;
+    textEmphasis?: Property.TextEmphasis | undefined;
+    textWrap?: Property.TextWrap | undefined;
+    transition?: Property.Transition | undefined;
+    viewTimeline?: Property.ViewTimeline | undefined;
+}
+export interface StandardProperties extends StandardLonghandProperties, StandardShorthandProperties {
+}
+export interface VendorLonghandProperties {
+    MozAnimationDelay?: Property.AnimationDelay | undefined;
+    MozAnimationDirection?: Property.AnimationDirection | undefined;
+    MozAnimationDuration?: Property.AnimationDuration | undefined;
+    MozAnimationFillMode?: Property.AnimationFillMode | undefined;
+    MozAnimationIterationCount?: Property.AnimationIterationCount | undefined;
+    MozAnimationName?: Property.AnimationName | undefined;
+    MozAnimationPlayState?: Property.AnimationPlayState | undefined;
+    MozAnimationTimingFunction?: Property.AnimationTimingFunction | undefined;
+    MozAppearance?: Property.MozAppearance | undefined;
+    MozBackfaceVisibility?: Property.BackfaceVisibility | undefined;
+    MozBinding?: Property.MozBinding | undefined;
+    MozBorderBottomColors?: Property.MozBorderBottomColors | undefined;
+    MozBorderEndColor?: Property.BorderInlineEndColor | undefined;
+    MozBorderEndStyle?: Property.BorderInlineEndStyle | undefined;
+    MozBorderEndWidth?: Property.BorderInlineEndWidth | undefined;
+    MozBorderLeftColors?: Property.MozBorderLeftColors | undefined;
+    MozBorderRightColors?: Property.MozBorderRightColors | undefined;
+    MozBorderStartColor?: Property.BorderInlineStartColor | undefined;
+    MozBorderStartStyle?: Property.BorderInlineStartStyle | undefined;
+    MozBorderTopColors?: Property.MozBorderTopColors | undefined;
+    MozBoxSizing?: Property.BoxSizing | undefined;
+    MozColumnRuleColor?: Property.ColumnRuleColor | undefined;
+    MozColumnRuleStyle?: Property.ColumnRuleStyle | undefined;
+    MozColumnRuleWidth?: Property.ColumnRuleWidth | undefined;
+    MozColumnWidth?: Property.ColumnWidth | undefined;
+    MozContextProperties?: Property.MozContextProperties | undefined;
+    MozFontFeatureSettings?: Property.FontFeatureSettings | undefined;
+    MozFontLanguageOverride?: Property.FontLanguageOverride | undefined;
+    MozHyphens?: Property.Hyphens | undefined;
+    MozMarginEnd?: Property.MarginInlineEnd | undefined;
+    MozMarginStart?: Property.MarginInlineStart | undefined;
+    MozOrient?: Property.MozOrient | undefined;
+    MozOsxFontSmoothing?: Property.FontSmooth | undefined;
+    MozOutlineRadiusBottomleft?: Property.MozOutlineRadiusBottomleft | undefined;
+    MozOutlineRadiusBottomright?: Property.MozOutlineRadiusBottomright | undefined;
+    MozOutlineRadiusTopleft?: Property.MozOutlineRadiusTopleft | undefined;
+    MozOutlineRadiusTopright?: Property.MozOutlineRadiusTopright | undefined;
+    MozPaddingEnd?: Property.PaddingInlineEnd | undefined;
+    MozPaddingStart?: Property.PaddingInlineStart | undefined;
+    MozPerspective?: Property.Perspective | undefined;
+    MozPerspectiveOrigin?: Property.PerspectiveOrigin | undefined;
+    MozStackSizing?: Property.MozStackSizing | undefined;
+    MozTabSize?: Property.TabSize | undefined;
+    MozTextBlink?: Property.MozTextBlink | undefined;
+    MozTextSizeAdjust?: Property.TextSizeAdjust | undefined;
+    MozTransform?: Property.Transform | undefined;
+    MozTransformOrigin?: Property.TransformOrigin | undefined;
+    MozTransformStyle?: Property.TransformStyle | undefined;
+    MozUserModify?: Property.MozUserModify | undefined;
+    MozUserSelect?: Property.UserSelect | undefined;
+    MozWindowDragging?: Property.MozWindowDragging | undefined;
+    MozWindowShadow?: Property.MozWindowShadow | undefined;
+    msAccelerator?: Property.MsAccelerator | undefined;
+    msBlockProgression?: Property.MsBlockProgression | undefined;
+    msContentZoomChaining?: Property.MsContentZoomChaining | undefined;
+    msContentZoomLimitMax?: Property.MsContentZoomLimitMax | undefined;
+    msContentZoomLimitMin?: Property.MsContentZoomLimitMin | undefined;
+    msContentZoomSnapPoints?: Property.MsContentZoomSnapPoints | undefined;
+    msContentZoomSnapType?: Property.MsContentZoomSnapType | undefined;
+    msContentZooming?: Property.MsContentZooming | undefined;
+    msFilter?: Property.MsFilter | undefined;
+    msFlexDirection?: Property.FlexDirection | undefined;
+    msFlexPositive?: Property.FlexGrow | undefined;
+    msFlowFrom?: Property.MsFlowFrom | undefined;
+    msFlowInto?: Property.MsFlowInto | undefined;
+    msGridColumns?: Property.MsGridColumns | undefined;
+    msGridRows?: Property.MsGridRows | undefined;
+    msHighContrastAdjust?: Property.MsHighContrastAdjust | undefined;
+    msHyphenateLimitChars?: Property.MsHyphenateLimitChars | undefined;
+    msHyphenateLimitLines?: Property.MsHyphenateLimitLines | undefined;
+    msHyphenateLimitZone?: Property.MsHyphenateLimitZone | undefined;
+    msHyphens?: Property.Hyphens | undefined;
+    msImeAlign?: Property.MsImeAlign | undefined;
+    msLineBreak?: Property.LineBreak | undefined;
+    msOrder?: Property.Order | undefined;
+    msOverflowStyle?: Property.MsOverflowStyle | undefined;
+    msOverflowX?: Property.OverflowX | undefined;
+    msOverflowY?: Property.OverflowY | undefined;
+    msScrollChaining?: Property.MsScrollChaining | undefined;
+    msScrollLimitXMax?: Property.MsScrollLimitXMax | undefined;
+    msScrollLimitXMin?: Property.MsScrollLimitXMin | undefined;
+    msScrollLimitYMax?: Property.MsScrollLimitYMax | undefined;
+    msScrollLimitYMin?: Property.MsScrollLimitYMin | undefined;
+    msScrollRails?: Property.MsScrollRails | undefined;
+    msScrollSnapPointsX?: Property.MsScrollSnapPointsX | undefined;
+    msScrollSnapPointsY?: Property.MsScrollSnapPointsY | undefined;
+    msScrollSnapType?: Property.MsScrollSnapType | undefined;
+    msScrollTranslation?: Property.MsScrollTranslation | undefined;
+    msScrollbar3dlightColor?: Property.MsScrollbar3dlightColor | undefined;
+    msScrollbarArrowColor?: Property.MsScrollbarArrowColor | undefined;
+    msScrollbarBaseColor?: Property.MsScrollbarBaseColor | undefined;
+    msScrollbarDarkshadowColor?: Property.MsScrollbarDarkshadowColor | undefined;
+    msScrollbarFaceColor?: Property.MsScrollbarFaceColor | undefined;
+    msScrollbarHighlightColor?: Property.MsScrollbarHighlightColor | undefined;
+    msScrollbarShadowColor?: Property.MsScrollbarShadowColor | undefined;
+    msScrollbarTrackColor?: Property.MsScrollbarTrackColor | undefined;
+    msTextAutospace?: Property.MsTextAutospace | undefined;
+    msTextCombineHorizontal?: Property.TextCombineUpright | undefined;
+    msTextOverflow?: Property.TextOverflow | undefined;
+    msTouchAction?: Property.TouchAction | undefined;
+    msTouchSelect?: Property.MsTouchSelect | undefined;
+    msTransform?: Property.Transform | undefined;
+    msTransformOrigin?: Property.TransformOrigin | undefined;
+    msTransitionDelay?: Property.TransitionDelay | undefined;
+    msTransitionDuration?: Property.TransitionDuration | undefined;
+    msTransitionProperty?: Property.TransitionProperty | undefined;
+    msTransitionTimingFunction?: Property.TransitionTimingFunction | undefined;
+    msUserSelect?: Property.MsUserSelect | undefined;
+    msWordBreak?: Property.WordBreak | undefined;
+    msWrapFlow?: Property.MsWrapFlow | undefined;
+    msWrapMargin?: Property.MsWrapMargin | undefined;
+    msWrapThrough?: Property.MsWrapThrough | undefined;
+    msWritingMode?: Property.WritingMode | undefined;
+    WebkitAlignContent?: Property.AlignContent | undefined;
+    WebkitAlignItems?: Property.AlignItems | undefined;
+    WebkitAlignSelf?: Property.AlignSelf | undefined;
+    WebkitAnimationDelay?: Property.AnimationDelay | undefined;
+    WebkitAnimationDirection?: Property.AnimationDirection | undefined;
+    WebkitAnimationDuration?: Property.AnimationDuration | undefined;
+    WebkitAnimationFillMode?: Property.AnimationFillMode | undefined;
+    WebkitAnimationIterationCount?: Property.AnimationIterationCount | undefined;
+    WebkitAnimationName?: Property.AnimationName | undefined;
+    WebkitAnimationPlayState?: Property.AnimationPlayState | undefined;
+    WebkitAnimationTimingFunction?: Property.AnimationTimingFunction | undefined;
+    WebkitAppearance?: Property.WebkitAppearance | undefined;
+    WebkitBackdropFilter?: Property.BackdropFilter | undefined;
+    WebkitBackfaceVisibility?: Property.BackfaceVisibility | undefined;
+    WebkitBackgroundClip?: Property.BackgroundClip | undefined;
+    WebkitBackgroundOrigin?: Property.BackgroundOrigin | undefined;
+    WebkitBackgroundSize?: Property.BackgroundSize | undefined;
+    WebkitBorderBeforeColor?: Property.WebkitBorderBeforeColor | undefined;
+    WebkitBorderBeforeStyle?: Property.WebkitBorderBeforeStyle | undefined;
+    WebkitBorderBeforeWidth?: Property.WebkitBorderBeforeWidth | undefined;
+    WebkitBorderBottomLeftRadius?: Property.BorderBottomLeftRadius | undefined;
+    WebkitBorderBottomRightRadius?: Property.BorderBottomRightRadius | undefined;
+    WebkitBorderImageSlice?: Property.BorderImageSlice | undefined;
+    WebkitBorderTopLeftRadius?: Property.BorderTopLeftRadius | undefined;
+    WebkitBorderTopRightRadius?: Property.BorderTopRightRadius | undefined;
+    WebkitBoxDecorationBreak?: Property.BoxDecorationBreak | undefined;
+    WebkitBoxReflect?: Property.WebkitBoxReflect | undefined;
+    WebkitBoxShadow?: Property.BoxShadow | undefined;
+    WebkitBoxSizing?: Property.BoxSizing | undefined;
+    WebkitClipPath?: Property.ClipPath | undefined;
+    WebkitColumnCount?: Property.ColumnCount | undefined;
+    WebkitColumnFill?: Property.ColumnFill | undefined;
+    WebkitColumnRuleColor?: Property.ColumnRuleColor | undefined;
+    WebkitColumnRuleStyle?: Property.ColumnRuleStyle | undefined;
+    WebkitColumnRuleWidth?: Property.ColumnRuleWidth | undefined;
+    WebkitColumnSpan?: Property.ColumnSpan | undefined;
+    WebkitColumnWidth?: Property.ColumnWidth | undefined;
+    WebkitFilter?: Property.Filter | undefined;
+    WebkitFlexBasis?: Property.FlexBasis | undefined;
+    WebkitFlexDirection?: Property.FlexDirection | undefined;
+    WebkitFlexGrow?: Property.FlexGrow | undefined;
+    WebkitFlexShrink?: Property.FlexShrink | undefined;
+    WebkitFlexWrap?: Property.FlexWrap | undefined;
+    WebkitFontFeatureSettings?: Property.FontFeatureSettings | undefined;
+    WebkitFontKerning?: Property.FontKerning | undefined;
+    WebkitFontSmoothing?: Property.FontSmooth | undefined;
+    WebkitFontVariantLigatures?: Property.FontVariantLigatures | undefined;
+    WebkitHyphenateCharacter?: Property.HyphenateCharacter | undefined;
+    WebkitHyphens?: Property.Hyphens | undefined;
+    WebkitInitialLetter?: Property.InitialLetter | undefined;
+    WebkitJustifyContent?: Property.JustifyContent | undefined;
+    WebkitLineBreak?: Property.LineBreak | undefined;
+    WebkitLineClamp?: Property.WebkitLineClamp | undefined;
+    WebkitLogicalHeight?: Property.BlockSize | undefined;
+    WebkitLogicalWidth?: Property.InlineSize | undefined;
+    WebkitMarginEnd?: Property.MarginInlineEnd | undefined;
+    WebkitMarginStart?: Property.MarginInlineStart | undefined;
+    WebkitMaskAttachment?: Property.WebkitMaskAttachment | undefined;
+    WebkitMaskBoxImageOutset?: Property.MaskBorderOutset | undefined;
+    WebkitMaskBoxImageRepeat?: Property.MaskBorderRepeat | undefined;
+    WebkitMaskBoxImageSlice?: Property.MaskBorderSlice | undefined;
+    WebkitMaskBoxImageSource?: Property.MaskBorderSource | undefined;
+    WebkitMaskBoxImageWidth?: Property.MaskBorderWidth | undefined;
+    WebkitMaskClip?: Property.WebkitMaskClip | undefined;
+    WebkitMaskComposite?: Property.WebkitMaskComposite | undefined;
+    WebkitMaskImage?: Property.WebkitMaskImage | undefined;
+    WebkitMaskOrigin?: Property.WebkitMaskOrigin | undefined;
+    WebkitMaskPosition?: Property.WebkitMaskPosition | undefined;
+    WebkitMaskPositionX?: Property.WebkitMaskPositionX | undefined;
+    WebkitMaskPositionY?: Property.WebkitMaskPositionY | undefined;
+    WebkitMaskRepeat?: Property.WebkitMaskRepeat | undefined;
+    WebkitMaskRepeatX?: Property.WebkitMaskRepeatX | undefined;
+    WebkitMaskRepeatY?: Property.WebkitMaskRepeatY | undefined;
+    WebkitMaskSize?: Property.WebkitMaskSize | undefined;
+    WebkitMaxInlineSize?: Property.MaxInlineSize | undefined;
+    WebkitOrder?: Property.Order | undefined;
+    WebkitOverflowScrolling?: Property.WebkitOverflowScrolling | undefined;
+    WebkitPaddingEnd?: Property.PaddingInlineEnd | undefined;
+    WebkitPaddingStart?: Property.PaddingInlineStart | undefined;
+    WebkitPerspective?: Property.Perspective | undefined;
+    WebkitPerspectiveOrigin?: Property.PerspectiveOrigin | undefined;
+    WebkitPrintColorAdjust?: Property.PrintColorAdjust | undefined;
+    WebkitRubyPosition?: Property.RubyPosition | undefined;
+    WebkitScrollSnapType?: Property.ScrollSnapType | undefined;
+    WebkitShapeMargin?: Property.ShapeMargin | undefined;
+    WebkitTapHighlightColor?: Property.WebkitTapHighlightColor | undefined;
+    WebkitTextCombine?: Property.TextCombineUpright | undefined;
+    WebkitTextDecorationColor?: Property.TextDecorationColor | undefined;
+    WebkitTextDecorationLine?: Property.TextDecorationLine | undefined;
+    WebkitTextDecorationSkip?: Property.TextDecorationSkip | undefined;
+    WebkitTextDecorationStyle?: Property.TextDecorationStyle | undefined;
+    WebkitTextEmphasisColor?: Property.TextEmphasisColor | undefined;
+    WebkitTextEmphasisPosition?: Property.TextEmphasisPosition | undefined;
+    WebkitTextEmphasisStyle?: Property.TextEmphasisStyle | undefined;
+    WebkitTextFillColor?: Property.WebkitTextFillColor | undefined;
+    WebkitTextOrientation?: Property.TextOrientation | undefined;
+    WebkitTextSizeAdjust?: Property.TextSizeAdjust | undefined;
+    WebkitTextStrokeColor?: Property.WebkitTextStrokeColor | undefined;
+    WebkitTextStrokeWidth?: Property.WebkitTextStrokeWidth | undefined;
+    WebkitTextUnderlinePosition?: Property.TextUnderlinePosition | undefined;
+    WebkitTouchCallout?: Property.WebkitTouchCallout | undefined;
+    WebkitTransform?: Property.Transform | undefined;
+    WebkitTransformOrigin?: Property.TransformOrigin | undefined;
+    WebkitTransformStyle?: Property.TransformStyle | undefined;
+    WebkitTransitionDelay?: Property.TransitionDelay | undefined;
+    WebkitTransitionDuration?: Property.TransitionDuration | undefined;
+    WebkitTransitionProperty?: Property.TransitionProperty | undefined;
+    WebkitTransitionTimingFunction?: Property.TransitionTimingFunction | undefined;
+    WebkitUserModify?: Property.WebkitUserModify | undefined;
+    WebkitUserSelect?: Property.WebkitUserSelect | undefined;
+    WebkitWritingMode?: Property.WritingMode | undefined;
+}
+export interface VendorShorthandProperties {
+    MozAnimation?: Property.Animation | undefined;
+    MozBorderImage?: Property.BorderImage | undefined;
+    MozColumnRule?: Property.ColumnRule | undefined;
+    MozColumns?: Property.Columns | undefined;
+    MozOutlineRadius?: Property.MozOutlineRadius | undefined;
+    MozTransition?: Property.Transition | undefined;
+    msContentZoomLimit?: Property.MsContentZoomLimit | undefined;
+    msContentZoomSnap?: Property.MsContentZoomSnap | undefined;
+    msFlex?: Property.Flex | undefined;
+    msScrollLimit?: Property.MsScrollLimit | undefined;
+    msScrollSnapX?: Property.MsScrollSnapX | undefined;
+    msScrollSnapY?: Property.MsScrollSnapY | undefined;
+    msTransition?: Property.Transition | undefined;
+    WebkitAnimation?: Property.Animation | undefined;
+    WebkitBorderBefore?: Property.WebkitBorderBefore | undefined;
+    WebkitBorderImage?: Property.BorderImage | undefined;
+    WebkitBorderRadius?: Property.BorderRadius | undefined;
+    WebkitColumnRule?: Property.ColumnRule | undefined;
+    WebkitColumns?: Property.Columns | undefined;
+    WebkitFlex?: Property.Flex | undefined;
+    WebkitFlexFlow?: Property.FlexFlow | undefined;
+    WebkitMask?: Property.WebkitMask | undefined;
+    WebkitMaskBoxImage?: Property.MaskBorder | undefined;
+    WebkitTextEmphasis?: Property.TextEmphasis | undefined;
+    WebkitTextStroke?: Property.WebkitTextStroke | undefined;
+    WebkitTransition?: Property.Transition | undefined;
+}
+export interface VendorProperties extends VendorLonghandProperties, VendorShorthandProperties {
+}
+export interface ObsoleteProperties {
+    boxAlign?: Property.BoxAlign | undefined;
+    boxDirection?: Property.BoxDirection | undefined;
+    boxFlex?: Property.BoxFlex | undefined;
+    boxFlexGroup?: Property.BoxFlexGroup | undefined;
+    boxLines?: Property.BoxLines | undefined;
+    boxOrdinalGroup?: Property.BoxOrdinalGroup | undefined;
+    boxOrient?: Property.BoxOrient | undefined;
+    boxPack?: Property.BoxPack | undefined;
+    clip?: Property.Clip | undefined;
+    fontStretch?: Property.FontStretch | undefined;
+    gridColumnGap?: Property.GridColumnGap | undefined;
+    gridGap?: Property.GridGap | undefined;
+    gridRowGap?: Property.GridRowGap | undefined;
+    imeMode?: Property.ImeMode | undefined;
+    insetArea?: Property.PositionArea | undefined;
+    offsetBlock?: Property.InsetBlock | undefined;
+    offsetBlockEnd?: Property.InsetBlockEnd | undefined;
+    offsetBlockStart?: Property.InsetBlockStart | undefined;
+    offsetInline?: Property.InsetInline | undefined;
+    offsetInlineEnd?: Property.InsetInlineEnd | undefined;
+    offsetInlineStart?: Property.InsetInlineStart | undefined;
+    pageBreakAfter?: Property.PageBreakAfter | undefined;
+    pageBreakBefore?: Property.PageBreakBefore | undefined;
+    pageBreakInside?: Property.PageBreakInside | undefined;
+    positionTryOptions?: Property.PositionTryFallbacks | undefined;
+    scrollSnapCoordinate?: Property.ScrollSnapCoordinate | undefined;
+    scrollSnapDestination?: Property.ScrollSnapDestination | undefined;
+    scrollSnapPointsX?: Property.ScrollSnapPointsX | undefined;
+    scrollSnapPointsY?: Property.ScrollSnapPointsY | undefined;
+    scrollSnapTypeX?: Property.ScrollSnapTypeX | undefined;
+    scrollSnapTypeY?: Property.ScrollSnapTypeY | undefined;
+    KhtmlBoxAlign?: Property.BoxAlign | undefined;
+    KhtmlBoxDirection?: Property.BoxDirection | undefined;
+    KhtmlBoxFlex?: Property.BoxFlex | undefined;
+    KhtmlBoxFlexGroup?: Property.BoxFlexGroup | undefined;
+    KhtmlBoxLines?: Property.BoxLines | undefined;
+    KhtmlBoxOrdinalGroup?: Property.BoxOrdinalGroup | undefined;
+    KhtmlBoxOrient?: Property.BoxOrient | undefined;
+    KhtmlBoxPack?: Property.BoxPack | undefined;
+    KhtmlLineBreak?: Property.LineBreak | undefined;
+    KhtmlOpacity?: Property.Opacity | undefined;
+    KhtmlUserSelect?: Property.UserSelect | undefined;
+    MozBackgroundClip?: Property.BackgroundClip | undefined;
+    MozBackgroundOrigin?: Property.BackgroundOrigin | undefined;
+    MozBackgroundSize?: Property.BackgroundSize | undefined;
+    MozBorderRadius?: Property.BorderRadius | undefined;
+    MozBorderRadiusBottomleft?: Property.BorderBottomLeftRadius | undefined;
+    MozBorderRadiusBottomright?: Property.BorderBottomRightRadius | undefined;
+    MozBorderRadiusTopleft?: Property.BorderTopLeftRadius | undefined;
+    MozBorderRadiusTopright?: Property.BorderTopRightRadius | undefined;
+    MozBoxAlign?: Property.BoxAlign | undefined;
+    MozBoxDirection?: Property.BoxDirection | undefined;
+    MozBoxFlex?: Property.BoxFlex | undefined;
+    MozBoxOrdinalGroup?: Property.BoxOrdinalGroup | undefined;
+    MozBoxOrient?: Property.BoxOrient | undefined;
+    MozBoxPack?: Property.BoxPack | undefined;
+    MozBoxShadow?: Property.BoxShadow | undefined;
+    MozColumnCount?: Property.ColumnCount | undefined;
+    MozColumnFill?: Property.ColumnFill | undefined;
+    MozFloatEdge?: Property.MozFloatEdge | undefined;
+    MozForceBrokenImageIcon?: Property.MozForceBrokenImageIcon | undefined;
+    MozOpacity?: Property.Opacity | undefined;
+    MozOutline?: Property.Outline | undefined;
+    MozOutlineColor?: Property.OutlineColor | undefined;
+    MozOutlineStyle?: Property.OutlineStyle | undefined;
+    MozOutlineWidth?: Property.OutlineWidth | undefined;
+    MozTextAlignLast?: Property.TextAlignLast | undefined;
+    MozTextDecorationColor?: Property.TextDecorationColor | undefined;
+    MozTextDecorationLine?: Property.TextDecorationLine | undefined;
+    MozTextDecorationStyle?: Property.TextDecorationStyle | undefined;
+    MozTransitionDelay?: Property.TransitionDelay | undefined;
+    MozTransitionDuration?: Property.TransitionDuration | undefined;
+    MozTransitionProperty?: Property.TransitionProperty | undefined;
+    MozTransitionTimingFunction?: Property.TransitionTimingFunction | undefined;
+    MozUserFocus?: Property.MozUserFocus | undefined;
+    MozUserInput?: Property.MozUserInput | undefined;
+    msImeMode?: Property.ImeMode | undefined;
+    OAnimation?: Property.Animation | undefined;
+    OAnimationDelay?: Property.AnimationDelay | undefined;
+    OAnimationDirection?: Property.AnimationDirection | undefined;
+    OAnimationDuration?: Property.AnimationDuration | undefined;
+    OAnimationFillMode?: Property.AnimationFillMode | undefined;
+    OAnimationIterationCount?: Property.AnimationIterationCount | undefined;
+    OAnimationName?: Property.AnimationName | undefined;
+    OAnimationPlayState?: Property.AnimationPlayState | undefined;
+    OAnimationTimingFunction?: Property.AnimationTimingFunction | undefined;
+    OBackgroundSize?: Property.BackgroundSize | undefined;
+    OBorderImage?: Property.BorderImage | undefined;
+    OObjectFit?: Property.ObjectFit | undefined;
+    OObjectPosition?: Property.ObjectPosition | undefined;
+    OTabSize?: Property.TabSize | undefined;
+    OTextOverflow?: Property.TextOverflow | undefined;
+    OTransform?: Property.Transform | undefined;
+    OTransformOrigin?: Property.TransformOrigin | undefined;
+    OTransition?: Property.Transition | undefined;
+    OTransitionDelay?: Property.TransitionDelay | undefined;
+    OTransitionDuration?: Property.TransitionDuration | undefined;
+    OTransitionProperty?: Property.TransitionProperty | undefined;
+    OTransitionTimingFunction?: Property.TransitionTimingFunction | undefined;
+    WebkitBoxAlign?: Property.BoxAlign | undefined;
+    WebkitBoxDirection?: Property.BoxDirection | undefined;
+    WebkitBoxFlex?: Property.BoxFlex | undefined;
+    WebkitBoxFlexGroup?: Property.BoxFlexGroup | undefined;
+    WebkitBoxLines?: Property.BoxLines | undefined;
+    WebkitBoxOrdinalGroup?: Property.BoxOrdinalGroup | undefined;
+    WebkitBoxOrient?: Property.BoxOrient | undefined;
+    WebkitBoxPack?: Property.BoxPack | undefined;
+}
+export interface SvgProperties {
+    alignmentBaseline?: Property.AlignmentBaseline | undefined;
+    baselineShift?: Property.BaselineShift | undefined;
+    clip?: Property.Clip | undefined;
+    clipPath?: Property.ClipPath | undefined;
+    clipRule?: Property.ClipRule | undefined;
+    color?: Property.Color | undefined;
+    colorInterpolation?: Property.ColorInterpolation | undefined;
+    colorRendering?: Property.ColorRendering | undefined;
+    cursor?: Property.Cursor | undefined;
+    direction?: Property.Direction | undefined;
+    display?: Property.Display | undefined;
+    dominantBaseline?: Property.DominantBaseline | undefined;
+    fill?: Property.Fill | undefined;
+    fillOpacity?: Property.FillOpacity | undefined;
+    fillRule?: Property.FillRule | undefined;
+    filter?: Property.Filter | undefined;
+    floodColor?: Property.FloodColor | undefined;
+    floodOpacity?: Property.FloodOpacity | undefined;
+    font?: Property.Font | undefined;
+    fontFamily?: Property.FontFamily | undefined;
+    fontSize?: Property.FontSize | undefined;
+    fontSizeAdjust?: Property.FontSizeAdjust | undefined;
+    fontStretch?: Property.FontStretch | undefined;
+    fontStyle?: Property.FontStyle | undefined;
+    fontVariant?: Property.FontVariant | undefined;
+    fontWeight?: Property.FontWeight | undefined;
+    glyphOrientationVertical?: Property.GlyphOrientationVertical | undefined;
+    imageRendering?: Property.ImageRendering | undefined;
+    letterSpacing?: Property.LetterSpacing | undefined;
+    lightingColor?: Property.LightingColor | undefined;
+    lineHeight?: Property.LineHeight | undefined;
+    marker?: Property.Marker | undefined;
+    markerEnd?: Property.MarkerEnd | undefined;
+    markerMid?: Property.MarkerMid | undefined;
+    markerStart?: Property.MarkerStart | undefined;
+    mask?: Property.Mask | undefined;
+    opacity?: Property.Opacity | undefined;
+    overflow?: Property.Overflow | undefined;
+    paintOrder?: Property.PaintOrder | undefined;
+    pointerEvents?: Property.PointerEvents | undefined;
+    shapeRendering?: Property.ShapeRendering | undefined;
+    stopColor?: Property.StopColor | undefined;
+    stopOpacity?: Property.StopOpacity | undefined;
+    stroke?: Property.Stroke | undefined;
+    strokeDasharray?: Property.StrokeDasharray | undefined;
+    strokeDashoffset?: Property.StrokeDashoffset | undefined;
+    strokeLinecap?: Property.StrokeLinecap | undefined;
+    strokeLinejoin?: Property.StrokeLinejoin | undefined;
+    strokeMiterlimit?: Property.StrokeMiterlimit | undefined;
+    strokeOpacity?: Property.StrokeOpacity | undefined;
+    strokeWidth?: Property.StrokeWidth | undefined;
+    textAnchor?: Property.TextAnchor | undefined;
+    textDecoration?: Property.TextDecoration | undefined;
+    textRendering?: Property.TextRendering | undefined;
+    unicodeBidi?: Property.UnicodeBidi | undefined;
+    vectorEffect?: Property.VectorEffect | undefined;
+    visibility?: Property.Visibility | undefined;
+    whiteSpace?: Property.WhiteSpace | undefined;
+    wordSpacing?: Property.WordSpacing | undefined;
+    writingMode?: Property.WritingMode | undefined;
+}
+export interface Properties extends StandardProperties, VendorProperties, ObsoleteProperties, SvgProperties {
+}
+export interface StandardLonghandPropertiesHyphen {
+    "accent-color"?: Property.AccentColor | undefined;
+    "align-content"?: Property.AlignContent | undefined;
+    "align-items"?: Property.AlignItems | undefined;
+    "align-self"?: Property.AlignSelf | undefined;
+    "align-tracks"?: Property.AlignTracks | undefined;
+    "alignment-baseline"?: Property.AlignmentBaseline | undefined;
+    "anchor-name"?: Property.AnchorName | undefined;
+    "anchor-scope"?: Property.AnchorScope | undefined;
+    "animation-composition"?: Property.AnimationComposition | undefined;
+    "animation-delay"?: Property.AnimationDelay | undefined;
+    "animation-direction"?: Property.AnimationDirection | undefined;
+    "animation-duration"?: Property.AnimationDuration | undefined;
+    "animation-fill-mode"?: Property.AnimationFillMode | undefined;
+    "animation-iteration-count"?: Property.AnimationIterationCount | undefined;
+    "animation-name"?: Property.AnimationName | undefined;
+    "animation-play-state"?: Property.AnimationPlayState | undefined;
+    "animation-range-end"?: Property.AnimationRangeEnd | undefined;
+    "animation-range-start"?: Property.AnimationRangeStart | undefined;
+    "animation-timeline"?: Property.AnimationTimeline | undefined;
+    "animation-timing-function"?: Property.AnimationTimingFunction | undefined;
+    appearance?: Property.Appearance | undefined;
+    "aspect-ratio"?: Property.AspectRatio | undefined;
+    "backdrop-filter"?: Property.BackdropFilter | undefined;
+    "backface-visibility"?: Property.BackfaceVisibility | undefined;
+    "background-attachment"?: Property.BackgroundAttachment | undefined;
+    "background-blend-mode"?: Property.BackgroundBlendMode | undefined;
+    "background-clip"?: Property.BackgroundClip | undefined;
+    "background-color"?: Property.BackgroundColor | undefined;
+    "background-image"?: Property.BackgroundImage | undefined;
+    "background-origin"?: Property.BackgroundOrigin | undefined;
+    "background-position-x"?: Property.BackgroundPositionX | undefined;
+    "background-position-y"?: Property.BackgroundPositionY | undefined;
+    "background-repeat"?: Property.BackgroundRepeat | undefined;
+    "background-size"?: Property.BackgroundSize | undefined;
+    "baseline-shift"?: Property.BaselineShift | undefined;
+    "block-size"?: Property.BlockSize | undefined;
+    "border-block-end-color"?: Property.BorderBlockEndColor | undefined;
+    "border-block-end-style"?: Property.BorderBlockEndStyle | undefined;
+    "border-block-end-width"?: Property.BorderBlockEndWidth | undefined;
+    "border-block-start-color"?: Property.BorderBlockStartColor | undefined;
+    "border-block-start-style"?: Property.BorderBlockStartStyle | undefined;
+    "border-block-start-width"?: Property.BorderBlockStartWidth | undefined;
+    "border-bottom-color"?: Property.BorderBottomColor | undefined;
+    "border-bottom-left-radius"?: Property.BorderBottomLeftRadius | undefined;
+    "border-bottom-right-radius"?: Property.BorderBottomRightRadius | undefined;
+    "border-bottom-style"?: Property.BorderBottomStyle | undefined;
+    "border-bottom-width"?: Property.BorderBottomWidth | undefined;
+    "border-collapse"?: Property.BorderCollapse | undefined;
+    "border-end-end-radius"?: Property.BorderEndEndRadius | undefined;
+    "border-end-start-radius"?: Property.BorderEndStartRadius | undefined;
+    "border-image-outset"?: Property.BorderImageOutset | undefined;
+    "border-image-repeat"?: Property.BorderImageRepeat | undefined;
+    "border-image-slice"?: Property.BorderImageSlice | undefined;
+    "border-image-source"?: Property.BorderImageSource | undefined;
+    "border-image-width"?: Property.BorderImageWidth | undefined;
+    "border-inline-end-color"?: Property.BorderInlineEndColor | undefined;
+    "border-inline-end-style"?: Property.BorderInlineEndStyle | undefined;
+    "border-inline-end-width"?: Property.BorderInlineEndWidth | undefined;
+    "border-inline-start-color"?: Property.BorderInlineStartColor | undefined;
+    "border-inline-start-style"?: Property.BorderInlineStartStyle | undefined;
+    "border-inline-start-width"?: Property.BorderInlineStartWidth | undefined;
+    "border-left-color"?: Property.BorderLeftColor | undefined;
+    "border-left-style"?: Property.BorderLeftStyle | undefined;
+    "border-left-width"?: Property.BorderLeftWidth | undefined;
+    "border-right-color"?: Property.BorderRightColor | undefined;
+    "border-right-style"?: Property.BorderRightStyle | undefined;
+    "border-right-width"?: Property.BorderRightWidth | undefined;
+    "border-spacing"?: Property.BorderSpacing | undefined;
+    "border-start-end-radius"?: Property.BorderStartEndRadius | undefined;
+    "border-start-start-radius"?: Property.BorderStartStartRadius | undefined;
+    "border-top-color"?: Property.BorderTopColor | undefined;
+    "border-top-left-radius"?: Property.BorderTopLeftRadius | undefined;
+    "border-top-right-radius"?: Property.BorderTopRightRadius | undefined;
+    "border-top-style"?: Property.BorderTopStyle | undefined;
+    "border-top-width"?: Property.BorderTopWidth | undefined;
+    bottom?: Property.Bottom | undefined;
+    "box-decoration-break"?: Property.BoxDecorationBreak | undefined;
+    "box-shadow"?: Property.BoxShadow | undefined;
+    "box-sizing"?: Property.BoxSizing | undefined;
+    "break-after"?: Property.BreakAfter | undefined;
+    "break-before"?: Property.BreakBefore | undefined;
+    "break-inside"?: Property.BreakInside | undefined;
+    "caption-side"?: Property.CaptionSide | undefined;
+    "caret-color"?: Property.CaretColor | undefined;
+    "caret-shape"?: Property.CaretShape | undefined;
+    clear?: Property.Clear | undefined;
+    "clip-path"?: Property.ClipPath | undefined;
+    "clip-rule"?: Property.ClipRule | undefined;
+    color?: Property.Color | undefined;
+    "color-adjust"?: Property.PrintColorAdjust | undefined;
+    "color-interpolation-filters"?: Property.ColorInterpolationFilters | undefined;
+    "color-scheme"?: Property.ColorScheme | undefined;
+    "column-count"?: Property.ColumnCount | undefined;
+    "column-fill"?: Property.ColumnFill | undefined;
+    "column-gap"?: Property.ColumnGap | undefined;
+    "column-rule-color"?: Property.ColumnRuleColor | undefined;
+    "column-rule-style"?: Property.ColumnRuleStyle | undefined;
+    "column-rule-width"?: Property.ColumnRuleWidth | undefined;
+    "column-span"?: Property.ColumnSpan | undefined;
+    "column-width"?: Property.ColumnWidth | undefined;
+    contain?: Property.Contain | undefined;
+    "contain-intrinsic-block-size"?: Property.ContainIntrinsicBlockSize | undefined;
+    "contain-intrinsic-height"?: Property.ContainIntrinsicHeight | undefined;
+    "contain-intrinsic-inline-size"?: Property.ContainIntrinsicInlineSize | undefined;
+    "contain-intrinsic-width"?: Property.ContainIntrinsicWidth | undefined;
+    "container-name"?: Property.ContainerName | undefined;
+    "container-type"?: Property.ContainerType | undefined;
+    content?: Property.Content | undefined;
+    "content-visibility"?: Property.ContentVisibility | undefined;
+    "counter-increment"?: Property.CounterIncrement | undefined;
+    "counter-reset"?: Property.CounterReset | undefined;
+    "counter-set"?: Property.CounterSet | undefined;
+    cursor?: Property.Cursor | undefined;
+    cx?: Property.Cx | undefined;
+    cy?: Property.Cy | undefined;
+    d?: Property.D | undefined;
+    direction?: Property.Direction | undefined;
+    display?: Property.Display | undefined;
+    "dominant-baseline"?: Property.DominantBaseline | undefined;
+    "empty-cells"?: Property.EmptyCells | undefined;
+    "field-sizing"?: Property.FieldSizing | undefined;
+    fill?: Property.Fill | undefined;
+    "fill-opacity"?: Property.FillOpacity | undefined;
+    "fill-rule"?: Property.FillRule | undefined;
+    filter?: Property.Filter | undefined;
+    "flex-basis"?: Property.FlexBasis | undefined;
+    "flex-direction"?: Property.FlexDirection | undefined;
+    "flex-grow"?: Property.FlexGrow | undefined;
+    "flex-shrink"?: Property.FlexShrink | undefined;
+    "flex-wrap"?: Property.FlexWrap | undefined;
+    float?: Property.Float | undefined;
+    "flood-color"?: Property.FloodColor | undefined;
+    "flood-opacity"?: Property.FloodOpacity | undefined;
+    "font-family"?: Property.FontFamily | undefined;
+    "font-feature-settings"?: Property.FontFeatureSettings | undefined;
+    "font-kerning"?: Property.FontKerning | undefined;
+    "font-language-override"?: Property.FontLanguageOverride | undefined;
+    "font-optical-sizing"?: Property.FontOpticalSizing | undefined;
+    "font-palette"?: Property.FontPalette | undefined;
+    "font-size"?: Property.FontSize | undefined;
+    "font-size-adjust"?: Property.FontSizeAdjust | undefined;
+    "font-smooth"?: Property.FontSmooth | undefined;
+    "font-style"?: Property.FontStyle | undefined;
+    "font-synthesis"?: Property.FontSynthesis | undefined;
+    "font-synthesis-position"?: Property.FontSynthesisPosition | undefined;
+    "font-synthesis-small-caps"?: Property.FontSynthesisSmallCaps | undefined;
+    "font-synthesis-style"?: Property.FontSynthesisStyle | undefined;
+    "font-synthesis-weight"?: Property.FontSynthesisWeight | undefined;
+    "font-variant"?: Property.FontVariant | undefined;
+    "font-variant-alternates"?: Property.FontVariantAlternates | undefined;
+    "font-variant-caps"?: Property.FontVariantCaps | undefined;
+    "font-variant-east-asian"?: Property.FontVariantEastAsian | undefined;
+    "font-variant-emoji"?: Property.FontVariantEmoji | undefined;
+    "font-variant-ligatures"?: Property.FontVariantLigatures | undefined;
+    "font-variant-numeric"?: Property.FontVariantNumeric | undefined;
+    "font-variant-position"?: Property.FontVariantPosition | undefined;
+    "font-variation-settings"?: Property.FontVariationSettings | undefined;
+    "font-weight"?: Property.FontWeight | undefined;
+    "font-width"?: Property.FontWidth | undefined;
+    "forced-color-adjust"?: Property.ForcedColorAdjust | undefined;
+    "grid-auto-columns"?: Property.GridAutoColumns | undefined;
+    "grid-auto-flow"?: Property.GridAutoFlow | undefined;
+    "grid-auto-rows"?: Property.GridAutoRows | undefined;
+    "grid-column-end"?: Property.GridColumnEnd | undefined;
+    "grid-column-start"?: Property.GridColumnStart | undefined;
+    "grid-row-end"?: Property.GridRowEnd | undefined;
+    "grid-row-start"?: Property.GridRowStart | undefined;
+    "grid-template-areas"?: Property.GridTemplateAreas | undefined;
+    "grid-template-columns"?: Property.GridTemplateColumns | undefined;
+    "grid-template-rows"?: Property.GridTemplateRows | undefined;
+    "hanging-punctuation"?: Property.HangingPunctuation | undefined;
+    height?: Property.Height | undefined;
+    "hyphenate-character"?: Property.HyphenateCharacter | undefined;
+    "hyphenate-limit-chars"?: Property.HyphenateLimitChars | undefined;
+    hyphens?: Property.Hyphens | undefined;
+    "image-orientation"?: Property.ImageOrientation | undefined;
+    "image-rendering"?: Property.ImageRendering | undefined;
+    "image-resolution"?: Property.ImageResolution | undefined;
+    "initial-letter"?: Property.InitialLetter | undefined;
+    "initial-letter-align"?: Property.InitialLetterAlign | undefined;
+    "inline-size"?: Property.InlineSize | undefined;
+    "inset-block-end"?: Property.InsetBlockEnd | undefined;
+    "inset-block-start"?: Property.InsetBlockStart | undefined;
+    "inset-inline-end"?: Property.InsetInlineEnd | undefined;
+    "inset-inline-start"?: Property.InsetInlineStart | undefined;
+    "interpolate-size"?: Property.InterpolateSize | undefined;
+    isolation?: Property.Isolation | undefined;
+    "justify-content"?: Property.JustifyContent | undefined;
+    "justify-items"?: Property.JustifyItems | undefined;
+    "justify-self"?: Property.JustifySelf | undefined;
+    "justify-tracks"?: Property.JustifyTracks | undefined;
+    left?: Property.Left | undefined;
+    "letter-spacing"?: Property.LetterSpacing | undefined;
+    "lighting-color"?: Property.LightingColor | undefined;
+    "line-break"?: Property.LineBreak | undefined;
+    "line-height"?: Property.LineHeight | undefined;
+    "line-height-step"?: Property.LineHeightStep | undefined;
+    "list-style-image"?: Property.ListStyleImage | undefined;
+    "list-style-position"?: Property.ListStylePosition | undefined;
+    "list-style-type"?: Property.ListStyleType | undefined;
+    "margin-block-end"?: Property.MarginBlockEnd | undefined;
+    "margin-block-start"?: Property.MarginBlockStart | undefined;
+    "margin-bottom"?: Property.MarginBottom | undefined;
+    "margin-inline-end"?: Property.MarginInlineEnd | undefined;
+    "margin-inline-start"?: Property.MarginInlineStart | undefined;
+    "margin-left"?: Property.MarginLeft | undefined;
+    "margin-right"?: Property.MarginRight | undefined;
+    "margin-top"?: Property.MarginTop | undefined;
+    "margin-trim"?: Property.MarginTrim | undefined;
+    marker?: Property.Marker | undefined;
+    "marker-end"?: Property.MarkerEnd | undefined;
+    "marker-mid"?: Property.MarkerMid | undefined;
+    "marker-start"?: Property.MarkerStart | undefined;
+    "mask-border-mode"?: Property.MaskBorderMode | undefined;
+    "mask-border-outset"?: Property.MaskBorderOutset | undefined;
+    "mask-border-repeat"?: Property.MaskBorderRepeat | undefined;
+    "mask-border-slice"?: Property.MaskBorderSlice | undefined;
+    "mask-border-source"?: Property.MaskBorderSource | undefined;
+    "mask-border-width"?: Property.MaskBorderWidth | undefined;
+    "mask-clip"?: Property.MaskClip | undefined;
+    "mask-composite"?: Property.MaskComposite | undefined;
+    "mask-image"?: Property.MaskImage | undefined;
+    "mask-mode"?: Property.MaskMode | undefined;
+    "mask-origin"?: Property.MaskOrigin | undefined;
+    "mask-position"?: Property.MaskPosition | undefined;
+    "mask-repeat"?: Property.MaskRepeat | undefined;
+    "mask-size"?: Property.MaskSize | undefined;
+    "mask-type"?: Property.MaskType | undefined;
+    "masonry-auto-flow"?: Property.MasonryAutoFlow | undefined;
+    "math-depth"?: Property.MathDepth | undefined;
+    "math-shift"?: Property.MathShift | undefined;
+    "math-style"?: Property.MathStyle | undefined;
+    "max-block-size"?: Property.MaxBlockSize | undefined;
+    "max-height"?: Property.MaxHeight | undefined;
+    "max-inline-size"?: Property.MaxInlineSize | undefined;
+    "max-lines"?: Property.MaxLines | undefined;
+    "max-width"?: Property.MaxWidth | undefined;
+    "min-block-size"?: Property.MinBlockSize | undefined;
+    "min-height"?: Property.MinHeight | undefined;
+    "min-inline-size"?: Property.MinInlineSize | undefined;
+    "min-width"?: Property.MinWidth | undefined;
+    "mix-blend-mode"?: Property.MixBlendMode | undefined;
+    "motion-distance"?: Property.OffsetDistance | undefined;
+    "motion-path"?: Property.OffsetPath | undefined;
+    "motion-rotation"?: Property.OffsetRotate | undefined;
+    "object-fit"?: Property.ObjectFit | undefined;
+    "object-position"?: Property.ObjectPosition | undefined;
+    "object-view-box"?: Property.ObjectViewBox | undefined;
+    "offset-anchor"?: Property.OffsetAnchor | undefined;
+    "offset-distance"?: Property.OffsetDistance | undefined;
+    "offset-path"?: Property.OffsetPath | undefined;
+    "offset-position"?: Property.OffsetPosition | undefined;
+    "offset-rotate"?: Property.OffsetRotate | undefined;
+    "offset-rotation"?: Property.OffsetRotate | undefined;
+    opacity?: Property.Opacity | undefined;
+    order?: Property.Order | undefined;
+    orphans?: Property.Orphans | undefined;
+    "outline-color"?: Property.OutlineColor | undefined;
+    "outline-offset"?: Property.OutlineOffset | undefined;
+    "outline-style"?: Property.OutlineStyle | undefined;
+    "outline-width"?: Property.OutlineWidth | undefined;
+    "overflow-anchor"?: Property.OverflowAnchor | undefined;
+    "overflow-block"?: Property.OverflowBlock | undefined;
+    "overflow-clip-box"?: Property.OverflowClipBox | undefined;
+    "overflow-clip-margin"?: Property.OverflowClipMargin | undefined;
+    "overflow-inline"?: Property.OverflowInline | undefined;
+    "overflow-wrap"?: Property.OverflowWrap | undefined;
+    "overflow-x"?: Property.OverflowX | undefined;
+    "overflow-y"?: Property.OverflowY | undefined;
+    overlay?: Property.Overlay | undefined;
+    "overscroll-behavior-block"?: Property.OverscrollBehaviorBlock | undefined;
+    "overscroll-behavior-inline"?: Property.OverscrollBehaviorInline | undefined;
+    "overscroll-behavior-x"?: Property.OverscrollBehaviorX | undefined;
+    "overscroll-behavior-y"?: Property.OverscrollBehaviorY | undefined;
+    "padding-block-end"?: Property.PaddingBlockEnd | undefined;
+    "padding-block-start"?: Property.PaddingBlockStart | undefined;
+    "padding-bottom"?: Property.PaddingBottom | undefined;
+    "padding-inline-end"?: Property.PaddingInlineEnd | undefined;
+    "padding-inline-start"?: Property.PaddingInlineStart | undefined;
+    "padding-left"?: Property.PaddingLeft | undefined;
+    "padding-right"?: Property.PaddingRight | undefined;
+    "padding-top"?: Property.PaddingTop | undefined;
+    page?: Property.Page | undefined;
+    "paint-order"?: Property.PaintOrder | undefined;
+    perspective?: Property.Perspective | undefined;
+    "perspective-origin"?: Property.PerspectiveOrigin | undefined;
+    "pointer-events"?: Property.PointerEvents | undefined;
+    position?: Property.Position | undefined;
+    "position-anchor"?: Property.PositionAnchor | undefined;
+    "position-area"?: Property.PositionArea | undefined;
+    "position-try-fallbacks"?: Property.PositionTryFallbacks | undefined;
+    "position-try-order"?: Property.PositionTryOrder | undefined;
+    "position-visibility"?: Property.PositionVisibility | undefined;
+    "print-color-adjust"?: Property.PrintColorAdjust | undefined;
+    quotes?: Property.Quotes | undefined;
+    r?: Property.R | undefined;
+    resize?: Property.Resize | undefined;
+    right?: Property.Right | undefined;
+    rotate?: Property.Rotate | undefined;
+    "row-gap"?: Property.RowGap | undefined;
+    "ruby-align"?: Property.RubyAlign | undefined;
+    "ruby-merge"?: Property.RubyMerge | undefined;
+    "ruby-overhang"?: Property.RubyOverhang | undefined;
+    "ruby-position"?: Property.RubyPosition | undefined;
+    rx?: Property.Rx | undefined;
+    ry?: Property.Ry | undefined;
+    scale?: Property.Scale | undefined;
+    "scroll-behavior"?: Property.ScrollBehavior | undefined;
+    "scroll-initial-target"?: Property.ScrollInitialTarget | undefined;
+    "scroll-margin-block-end"?: Property.ScrollMarginBlockEnd | undefined;
+    "scroll-margin-block-start"?: Property.ScrollMarginBlockStart | undefined;
+    "scroll-margin-bottom"?: Property.ScrollMarginBottom | undefined;
+    "scroll-margin-inline-end"?: Property.ScrollMarginInlineEnd | undefined;
+    "scroll-margin-inline-start"?: Property.ScrollMarginInlineStart | undefined;
+    "scroll-margin-left"?: Property.ScrollMarginLeft | undefined;
+    "scroll-margin-right"?: Property.ScrollMarginRight | undefined;
+    "scroll-margin-top"?: Property.ScrollMarginTop | undefined;
+    "scroll-padding-block-end"?: Property.ScrollPaddingBlockEnd | undefined;
+    "scroll-padding-block-start"?: Property.ScrollPaddingBlockStart | undefined;
+    "scroll-padding-bottom"?: Property.ScrollPaddingBottom | undefined;
+    "scroll-padding-inline-end"?: Property.ScrollPaddingInlineEnd | undefined;
+    "scroll-padding-inline-start"?: Property.ScrollPaddingInlineStart | undefined;
+    "scroll-padding-left"?: Property.ScrollPaddingLeft | undefined;
+    "scroll-padding-right"?: Property.ScrollPaddingRight | undefined;
+    "scroll-padding-top"?: Property.ScrollPaddingTop | undefined;
+    "scroll-snap-align"?: Property.ScrollSnapAlign | undefined;
+    "scroll-snap-margin-bottom"?: Property.ScrollMarginBottom | undefined;
+    "scroll-snap-margin-left"?: Property.ScrollMarginLeft | undefined;
+    "scroll-snap-margin-right"?: Property.ScrollMarginRight | undefined;
+    "scroll-snap-margin-top"?: Property.ScrollMarginTop | undefined;
+    "scroll-snap-stop"?: Property.ScrollSnapStop | undefined;
+    "scroll-snap-type"?: Property.ScrollSnapType | undefined;
+    "scroll-timeline-axis"?: Property.ScrollTimelineAxis | undefined;
+    "scroll-timeline-name"?: Property.ScrollTimelineName | undefined;
+    "scrollbar-color"?: Property.ScrollbarColor | undefined;
+    "scrollbar-gutter"?: Property.ScrollbarGutter | undefined;
+    "scrollbar-width"?: Property.ScrollbarWidth | undefined;
+    "shape-image-threshold"?: Property.ShapeImageThreshold | undefined;
+    "shape-margin"?: Property.ShapeMargin | undefined;
+    "shape-outside"?: Property.ShapeOutside | undefined;
+    "shape-rendering"?: Property.ShapeRendering | undefined;
+    "speak-as"?: Property.SpeakAs | undefined;
+    "stop-color"?: Property.StopColor | undefined;
+    "stop-opacity"?: Property.StopOpacity | undefined;
+    stroke?: Property.Stroke | undefined;
+    "stroke-color"?: Property.StrokeColor | undefined;
+    "stroke-dasharray"?: Property.StrokeDasharray | undefined;
+    "stroke-dashoffset"?: Property.StrokeDashoffset | undefined;
+    "stroke-linecap"?: Property.StrokeLinecap | undefined;
+    "stroke-linejoin"?: Property.StrokeLinejoin | undefined;
+    "stroke-miterlimit"?: Property.StrokeMiterlimit | undefined;
+    "stroke-opacity"?: Property.StrokeOpacity | undefined;
+    "stroke-width"?: Property.StrokeWidth | undefined;
+    "tab-size"?: Property.TabSize | undefined;
+    "table-layout"?: Property.TableLayout | undefined;
+    "text-align"?: Property.TextAlign | undefined;
+    "text-align-last"?: Property.TextAlignLast | undefined;
+    "text-anchor"?: Property.TextAnchor | undefined;
+    "text-autospace"?: Property.TextAutospace | undefined;
+    "text-box"?: Property.TextBox | undefined;
+    "text-box-edge"?: Property.TextBoxEdge | undefined;
+    "text-box-trim"?: Property.TextBoxTrim | undefined;
+    "text-combine-upright"?: Property.TextCombineUpright | undefined;
+    "text-decoration-color"?: Property.TextDecorationColor | undefined;
+    "text-decoration-line"?: Property.TextDecorationLine | undefined;
+    "text-decoration-skip"?: Property.TextDecorationSkip | undefined;
+    "text-decoration-skip-ink"?: Property.TextDecorationSkipInk | undefined;
+    "text-decoration-style"?: Property.TextDecorationStyle | undefined;
+    "text-decoration-thickness"?: Property.TextDecorationThickness | undefined;
+    "text-emphasis-color"?: Property.TextEmphasisColor | undefined;
+    "text-emphasis-position"?: Property.TextEmphasisPosition | undefined;
+    "text-emphasis-style"?: Property.TextEmphasisStyle | undefined;
+    "text-indent"?: Property.TextIndent | undefined;
+    "text-justify"?: Property.TextJustify | undefined;
+    "text-orientation"?: Property.TextOrientation | undefined;
+    "text-overflow"?: Property.TextOverflow | undefined;
+    "text-rendering"?: Property.TextRendering | undefined;
+    "text-shadow"?: Property.TextShadow | undefined;
+    "text-size-adjust"?: Property.TextSizeAdjust | undefined;
+    "text-spacing-trim"?: Property.TextSpacingTrim | undefined;
+    "text-transform"?: Property.TextTransform | undefined;
+    "text-underline-offset"?: Property.TextUnderlineOffset | undefined;
+    "text-underline-position"?: Property.TextUnderlinePosition | undefined;
+    "text-wrap-mode"?: Property.TextWrapMode | undefined;
+    "text-wrap-style"?: Property.TextWrapStyle | undefined;
+    "timeline-scope"?: Property.TimelineScope | undefined;
+    top?: Property.Top | undefined;
+    "touch-action"?: Property.TouchAction | undefined;
+    transform?: Property.Transform | undefined;
+    "transform-box"?: Property.TransformBox | undefined;
+    "transform-origin"?: Property.TransformOrigin | undefined;
+    "transform-style"?: Property.TransformStyle | undefined;
+    "transition-behavior"?: Property.TransitionBehavior | undefined;
+    "transition-delay"?: Property.TransitionDelay | undefined;
+    "transition-duration"?: Property.TransitionDuration | undefined;
+    "transition-property"?: Property.TransitionProperty | undefined;
+    "transition-timing-function"?: Property.TransitionTimingFunction | undefined;
+    translate?: Property.Translate | undefined;
+    "unicode-bidi"?: Property.UnicodeBidi | undefined;
+    "user-select"?: Property.UserSelect | undefined;
+    "vector-effect"?: Property.VectorEffect | undefined;
+    "vertical-align"?: Property.VerticalAlign | undefined;
+    "view-timeline-axis"?: Property.ViewTimelineAxis | undefined;
+    "view-timeline-inset"?: Property.ViewTimelineInset | undefined;
+    "view-timeline-name"?: Property.ViewTimelineName | undefined;
+    "view-transition-class"?: Property.ViewTransitionClass | undefined;
+    "view-transition-name"?: Property.ViewTransitionName | undefined;
+    visibility?: Property.Visibility | undefined;
+    "white-space"?: Property.WhiteSpace | undefined;
+    "white-space-collapse"?: Property.WhiteSpaceCollapse | undefined;
+    widows?: Property.Widows | undefined;
+    width?: Property.Width | undefined;
+    "will-change"?: Property.WillChange | undefined;
+    "word-break"?: Property.WordBreak | undefined;
+    "word-spacing"?: Property.WordSpacing | undefined;
+    "word-wrap"?: Property.WordWrap | undefined;
+    "writing-mode"?: Property.WritingMode | undefined;
+    x?: Property.X | undefined;
+    y?: Property.Y | undefined;
+    "z-index"?: Property.ZIndex | undefined;
+    zoom?: Property.Zoom | undefined;
+}
+export interface StandardShorthandPropertiesHyphen {
+    all?: Property.All | undefined;
+    animation?: Property.Animation | undefined;
+    "animation-range"?: Property.AnimationRange | undefined;
+    background?: Property.Background | undefined;
+    "background-position"?: Property.BackgroundPosition | undefined;
+    border?: Property.Border | undefined;
+    "border-block"?: Property.BorderBlock | undefined;
+    "border-block-color"?: Property.BorderBlockColor | undefined;
+    "border-block-end"?: Property.BorderBlockEnd | undefined;
+    "border-block-start"?: Property.BorderBlockStart | undefined;
+    "border-block-style"?: Property.BorderBlockStyle | undefined;
+    "border-block-width"?: Property.BorderBlockWidth | undefined;
+    "border-bottom"?: Property.BorderBottom | undefined;
+    "border-color"?: Property.BorderColor | undefined;
+    "border-image"?: Property.BorderImage | undefined;
+    "border-inline"?: Property.BorderInline | undefined;
+    "border-inline-color"?: Property.BorderInlineColor | undefined;
+    "border-inline-end"?: Property.BorderInlineEnd | undefined;
+    "border-inline-start"?: Property.BorderInlineStart | undefined;
+    "border-inline-style"?: Property.BorderInlineStyle | undefined;
+    "border-inline-width"?: Property.BorderInlineWidth | undefined;
+    "border-left"?: Property.BorderLeft | undefined;
+    "border-radius"?: Property.BorderRadius | undefined;
+    "border-right"?: Property.BorderRight | undefined;
+    "border-style"?: Property.BorderStyle | undefined;
+    "border-top"?: Property.BorderTop | undefined;
+    "border-width"?: Property.BorderWidth | undefined;
+    caret?: Property.Caret | undefined;
+    "column-rule"?: Property.ColumnRule | undefined;
+    columns?: Property.Columns | undefined;
+    "contain-intrinsic-size"?: Property.ContainIntrinsicSize | undefined;
+    container?: Property.Container | undefined;
+    flex?: Property.Flex | undefined;
+    "flex-flow"?: Property.FlexFlow | undefined;
+    font?: Property.Font | undefined;
+    gap?: Property.Gap | undefined;
+    grid?: Property.Grid | undefined;
+    "grid-area"?: Property.GridArea | undefined;
+    "grid-column"?: Property.GridColumn | undefined;
+    "grid-row"?: Property.GridRow | undefined;
+    "grid-template"?: Property.GridTemplate | undefined;
+    inset?: Property.Inset | undefined;
+    "inset-block"?: Property.InsetBlock | undefined;
+    "inset-inline"?: Property.InsetInline | undefined;
+    "line-clamp"?: Property.LineClamp | undefined;
+    "list-style"?: Property.ListStyle | undefined;
+    margin?: Property.Margin | undefined;
+    "margin-block"?: Property.MarginBlock | undefined;
+    "margin-inline"?: Property.MarginInline | undefined;
+    mask?: Property.Mask | undefined;
+    "mask-border"?: Property.MaskBorder | undefined;
+    motion?: Property.Offset | undefined;
+    offset?: Property.Offset | undefined;
+    outline?: Property.Outline | undefined;
+    overflow?: Property.Overflow | undefined;
+    "overscroll-behavior"?: Property.OverscrollBehavior | undefined;
+    padding?: Property.Padding | undefined;
+    "padding-block"?: Property.PaddingBlock | undefined;
+    "padding-inline"?: Property.PaddingInline | undefined;
+    "place-content"?: Property.PlaceContent | undefined;
+    "place-items"?: Property.PlaceItems | undefined;
+    "place-self"?: Property.PlaceSelf | undefined;
+    "position-try"?: Property.PositionTry | undefined;
+    "scroll-margin"?: Property.ScrollMargin | undefined;
+    "scroll-margin-block"?: Property.ScrollMarginBlock | undefined;
+    "scroll-margin-inline"?: Property.ScrollMarginInline | undefined;
+    "scroll-padding"?: Property.ScrollPadding | undefined;
+    "scroll-padding-block"?: Property.ScrollPaddingBlock | undefined;
+    "scroll-padding-inline"?: Property.ScrollPaddingInline | undefined;
+    "scroll-snap-margin"?: Property.ScrollMargin | undefined;
+    "scroll-timeline"?: Property.ScrollTimeline | undefined;
+    "text-decoration"?: Property.TextDecoration | undefined;
+    "text-emphasis"?: Property.TextEmphasis | undefined;
+    "text-wrap"?: Property.TextWrap | undefined;
+    transition?: Property.Transition | undefined;
+    "view-timeline"?: Property.ViewTimeline | undefined;
+}
+export interface StandardPropertiesHyphen extends StandardLonghandPropertiesHyphen, StandardShorthandPropertiesHyphen {
+}
+export interface VendorLonghandPropertiesHyphen {
+    "-moz-animation-delay"?: Property.AnimationDelay | undefined;
+    "-moz-animation-direction"?: Property.AnimationDirection | undefined;
+    "-moz-animation-duration"?: Property.AnimationDuration | undefined;
+    "-moz-animation-fill-mode"?: Property.AnimationFillMode | undefined;
+    "-moz-animation-iteration-count"?: Property.AnimationIterationCount | undefined;
+    "-moz-animation-name"?: Property.AnimationName | undefined;
+    "-moz-animation-play-state"?: Property.AnimationPlayState | undefined;
+    "-moz-animation-timing-function"?: Property.AnimationTimingFunction | undefined;
+    "-moz-appearance"?: Property.MozAppearance | undefined;
+    "-moz-backface-visibility"?: Property.BackfaceVisibility | undefined;
+    "-moz-binding"?: Property.MozBinding | undefined;
+    "-moz-border-bottom-colors"?: Property.MozBorderBottomColors | undefined;
+    "-moz-border-end-color"?: Property.BorderInlineEndColor | undefined;
+    "-moz-border-end-style"?: Property.BorderInlineEndStyle | undefined;
+    "-moz-border-end-width"?: Property.BorderInlineEndWidth | undefined;
+    "-moz-border-left-colors"?: Property.MozBorderLeftColors | undefined;
+    "-moz-border-right-colors"?: Property.MozBorderRightColors | undefined;
+    "-moz-border-start-color"?: Property.BorderInlineStartColor | undefined;
+    "-moz-border-start-style"?: Property.BorderInlineStartStyle | undefined;
+    "-moz-border-top-colors"?: Property.MozBorderTopColors | undefined;
+    "-moz-box-sizing"?: Property.BoxSizing | undefined;
+    "-moz-column-rule-color"?: Property.ColumnRuleColor | undefined;
+    "-moz-column-rule-style"?: Property.ColumnRuleStyle | undefined;
+    "-moz-column-rule-width"?: Property.ColumnRuleWidth | undefined;
+    "-moz-column-width"?: Property.ColumnWidth | undefined;
+    "-moz-context-properties"?: Property.MozContextProperties | undefined;
+    "-moz-font-feature-settings"?: Property.FontFeatureSettings | undefined;
+    "-moz-font-language-override"?: Property.FontLanguageOverride | undefined;
+    "-moz-hyphens"?: Property.Hyphens | undefined;
+    "-moz-margin-end"?: Property.MarginInlineEnd | undefined;
+    "-moz-margin-start"?: Property.MarginInlineStart | undefined;
+    "-moz-orient"?: Property.MozOrient | undefined;
+    "-moz-osx-font-smoothing"?: Property.FontSmooth | undefined;
+    "-moz-outline-radius-bottomleft"?: Property.MozOutlineRadiusBottomleft | undefined;
+    "-moz-outline-radius-bottomright"?: Property.MozOutlineRadiusBottomright | undefined;
+    "-moz-outline-radius-topleft"?: Property.MozOutlineRadiusTopleft | undefined;
+    "-moz-outline-radius-topright"?: Property.MozOutlineRadiusTopright | undefined;
+    "-moz-padding-end"?: Property.PaddingInlineEnd | undefined;
+    "-moz-padding-start"?: Property.PaddingInlineStart | undefined;
+    "-moz-perspective"?: Property.Perspective | undefined;
+    "-moz-perspective-origin"?: Property.PerspectiveOrigin | undefined;
+    "-moz-stack-sizing"?: Property.MozStackSizing | undefined;
+    "-moz-tab-size"?: Property.TabSize | undefined;
+    "-moz-text-blink"?: Property.MozTextBlink | undefined;
+    "-moz-text-size-adjust"?: Property.TextSizeAdjust | undefined;
+    "-moz-transform"?: Property.Transform | undefined;
+    "-moz-transform-origin"?: Property.TransformOrigin | undefined;
+    "-moz-transform-style"?: Property.TransformStyle | undefined;
+    "-moz-user-modify"?: Property.MozUserModify | undefined;
+    "-moz-user-select"?: Property.UserSelect | undefined;
+    "-moz-window-dragging"?: Property.MozWindowDragging | undefined;
+    "-moz-window-shadow"?: Property.MozWindowShadow | undefined;
+    "-ms-accelerator"?: Property.MsAccelerator | undefined;
+    "-ms-block-progression"?: Property.MsBlockProgression | undefined;
+    "-ms-content-zoom-chaining"?: Property.MsContentZoomChaining | undefined;
+    "-ms-content-zoom-limit-max"?: Property.MsContentZoomLimitMax | undefined;
+    "-ms-content-zoom-limit-min"?: Property.MsContentZoomLimitMin | undefined;
+    "-ms-content-zoom-snap-points"?: Property.MsContentZoomSnapPoints | undefined;
+    "-ms-content-zoom-snap-type"?: Property.MsContentZoomSnapType | undefined;
+    "-ms-content-zooming"?: Property.MsContentZooming | undefined;
+    "-ms-filter"?: Property.MsFilter | undefined;
+    "-ms-flex-direction"?: Property.FlexDirection | undefined;
+    "-ms-flex-positive"?: Property.FlexGrow | undefined;
+    "-ms-flow-from"?: Property.MsFlowFrom | undefined;
+    "-ms-flow-into"?: Property.MsFlowInto | undefined;
+    "-ms-grid-columns"?: Property.MsGridColumns | undefined;
+    "-ms-grid-rows"?: Property.MsGridRows | undefined;
+    "-ms-high-contrast-adjust"?: Property.MsHighContrastAdjust | undefined;
+    "-ms-hyphenate-limit-chars"?: Property.MsHyphenateLimitChars | undefined;
+    "-ms-hyphenate-limit-lines"?: Property.MsHyphenateLimitLines | undefined;
+    "-ms-hyphenate-limit-zone"?: Property.MsHyphenateLimitZone | undefined;
+    "-ms-hyphens"?: Property.Hyphens | undefined;
+    "-ms-ime-align"?: Property.MsImeAlign | undefined;
+    "-ms-line-break"?: Property.LineBreak | undefined;
+    "-ms-order"?: Property.Order | undefined;
+    "-ms-overflow-style"?: Property.MsOverflowStyle | undefined;
+    "-ms-overflow-x"?: Property.OverflowX | undefined;
+    "-ms-overflow-y"?: Property.OverflowY | undefined;
+    "-ms-scroll-chaining"?: Property.MsScrollChaining | undefined;
+    "-ms-scroll-limit-x-max"?: Property.MsScrollLimitXMax | undefined;
+    "-ms-scroll-limit-x-min"?: Property.MsScrollLimitXMin | undefined;
+    "-ms-scroll-limit-y-max"?: Property.MsScrollLimitYMax | undefined;
+    "-ms-scroll-limit-y-min"?: Property.MsScrollLimitYMin | undefined;
+    "-ms-scroll-rails"?: Property.MsScrollRails | undefined;
+    "-ms-scroll-snap-points-x"?: Property.MsScrollSnapPointsX | undefined;
+    "-ms-scroll-snap-points-y"?: Property.MsScrollSnapPointsY | undefined;
+    "-ms-scroll-snap-type"?: Property.MsScrollSnapType | undefined;
+    "-ms-scroll-translation"?: Property.MsScrollTranslation | undefined;
+    "-ms-scrollbar-3dlight-color"?: Property.MsScrollbar3dlightColor | undefined;
+    "-ms-scrollbar-arrow-color"?: Property.MsScrollbarArrowColor | undefined;
+    "-ms-scrollbar-base-color"?: Property.MsScrollbarBaseColor | undefined;
+    "-ms-scrollbar-darkshadow-color"?: Property.MsScrollbarDarkshadowColor | undefined;
+    "-ms-scrollbar-face-color"?: Property.MsScrollbarFaceColor | undefined;
+    "-ms-scrollbar-highlight-color"?: Property.MsScrollbarHighlightColor | undefined;
+    "-ms-scrollbar-shadow-color"?: Property.MsScrollbarShadowColor | undefined;
+    "-ms-scrollbar-track-color"?: Property.MsScrollbarTrackColor | undefined;
+    "-ms-text-autospace"?: Property.MsTextAutospace | undefined;
+    "-ms-text-combine-horizontal"?: Property.TextCombineUpright | undefined;
+    "-ms-text-overflow"?: Property.TextOverflow | undefined;
+    "-ms-touch-action"?: Property.TouchAction | undefined;
+    "-ms-touch-select"?: Property.MsTouchSelect | undefined;
+    "-ms-transform"?: Property.Transform | undefined;
+    "-ms-transform-origin"?: Property.TransformOrigin | undefined;
+    "-ms-transition-delay"?: Property.TransitionDelay | undefined;
+    "-ms-transition-duration"?: Property.TransitionDuration | undefined;
+    "-ms-transition-property"?: Property.TransitionProperty | undefined;
+    "-ms-transition-timing-function"?: Property.TransitionTimingFunction | undefined;
+    "-ms-user-select"?: Property.MsUserSelect | undefined;
+    "-ms-word-break"?: Property.WordBreak | undefined;
+    "-ms-wrap-flow"?: Property.MsWrapFlow | undefined;
+    "-ms-wrap-margin"?: Property.MsWrapMargin | undefined;
+    "-ms-wrap-through"?: Property.MsWrapThrough | undefined;
+    "-ms-writing-mode"?: Property.WritingMode | undefined;
+    "-webkit-align-content"?: Property.AlignContent | undefined;
+    "-webkit-align-items"?: Property.AlignItems | undefined;
+    "-webkit-align-self"?: Property.AlignSelf | undefined;
+    "-webkit-animation-delay"?: Property.AnimationDelay | undefined;
+    "-webkit-animation-direction"?: Property.AnimationDirection | undefined;
+    "-webkit-animation-duration"?: Property.AnimationDuration | undefined;
+    "-webkit-animation-fill-mode"?: Property.AnimationFillMode | undefined;
+    "-webkit-animation-iteration-count"?: Property.AnimationIterationCount | undefined;
+    "-webkit-animation-name"?: Property.AnimationName | undefined;
+    "-webkit-animation-play-state"?: Property.AnimationPlayState | undefined;
+    "-webkit-animation-timing-function"?: Property.AnimationTimingFunction | undefined;
+    "-webkit-appearance"?: Property.WebkitAppearance | undefined;
+    "-webkit-backdrop-filter"?: Property.BackdropFilter | undefined;
+    "-webkit-backface-visibility"?: Property.BackfaceVisibility | undefined;
+    "-webkit-background-clip"?: Property.BackgroundClip | undefined;
+    "-webkit-background-origin"?: Property.BackgroundOrigin | undefined;
+    "-webkit-background-size"?: Property.BackgroundSize | undefined;
+    "-webkit-border-before-color"?: Property.WebkitBorderBeforeColor | undefined;
+    "-webkit-border-before-style"?: Property.WebkitBorderBeforeStyle | undefined;
+    "-webkit-border-before-width"?: Property.WebkitBorderBeforeWidth | undefined;
+    "-webkit-border-bottom-left-radius"?: Property.BorderBottomLeftRadius | undefined;
+    "-webkit-border-bottom-right-radius"?: Property.BorderBottomRightRadius | undefined;
+    "-webkit-border-image-slice"?: Property.BorderImageSlice | undefined;
+    "-webkit-border-top-left-radius"?: Property.BorderTopLeftRadius | undefined;
+    "-webkit-border-top-right-radius"?: Property.BorderTopRightRadius | undefined;
+    "-webkit-box-decoration-break"?: Property.BoxDecorationBreak | undefined;
+    "-webkit-box-reflect"?: Property.WebkitBoxReflect | undefined;
+    "-webkit-box-shadow"?: Property.BoxShadow | undefined;
+    "-webkit-box-sizing"?: Property.BoxSizing | undefined;
+    "-webkit-clip-path"?: Property.ClipPath | undefined;
+    "-webkit-column-count"?: Property.ColumnCount | undefined;
+    "-webkit-column-fill"?: Property.ColumnFill | undefined;
+    "-webkit-column-rule-color"?: Property.ColumnRuleColor | undefined;
+    "-webkit-column-rule-style"?: Property.ColumnRuleStyle | undefined;
+    "-webkit-column-rule-width"?: Property.ColumnRuleWidth | undefined;
+    "-webkit-column-span"?: Property.ColumnSpan | undefined;
+    "-webkit-column-width"?: Property.ColumnWidth | undefined;
+    "-webkit-filter"?: Property.Filter | undefined;
+    "-webkit-flex-basis"?: Property.FlexBasis | undefined;
+    "-webkit-flex-direction"?: Property.FlexDirection | undefined;
+    "-webkit-flex-grow"?: Property.FlexGrow | undefined;
+    "-webkit-flex-shrink"?: Property.FlexShrink | undefined;
+    "-webkit-flex-wrap"?: Property.FlexWrap | undefined;
+    "-webkit-font-feature-settings"?: Property.FontFeatureSettings | undefined;
+    "-webkit-font-kerning"?: Property.FontKerning | undefined;
+    "-webkit-font-smoothing"?: Property.FontSmooth | undefined;
+    "-webkit-font-variant-ligatures"?: Property.FontVariantLigatures | undefined;
+    "-webkit-hyphenate-character"?: Property.HyphenateCharacter | undefined;
+    "-webkit-hyphens"?: Property.Hyphens | undefined;
+    "-webkit-initial-letter"?: Property.InitialLetter | undefined;
+    "-webkit-justify-content"?: Property.JustifyContent | undefined;
+    "-webkit-line-break"?: Property.LineBreak | undefined;
+    "-webkit-line-clamp"?: Property.WebkitLineClamp | undefined;
+    "-webkit-logical-height"?: Property.BlockSize | undefined;
+    "-webkit-logical-width"?: Property.InlineSize | undefined;
+    "-webkit-margin-end"?: Property.MarginInlineEnd | undefined;
+    "-webkit-margin-start"?: Property.MarginInlineStart | undefined;
+    "-webkit-mask-attachment"?: Property.WebkitMaskAttachment | undefined;
+    "-webkit-mask-box-image-outset"?: Property.MaskBorderOutset | undefined;
+    "-webkit-mask-box-image-repeat"?: Property.MaskBorderRepeat | undefined;
+    "-webkit-mask-box-image-slice"?: Property.MaskBorderSlice | undefined;
+    "-webkit-mask-box-image-source"?: Property.MaskBorderSource | undefined;
+    "-webkit-mask-box-image-width"?: Property.MaskBorderWidth | undefined;
+    "-webkit-mask-clip"?: Property.WebkitMaskClip | undefined;
+    "-webkit-mask-composite"?: Property.WebkitMaskComposite | undefined;
+    "-webkit-mask-image"?: Property.WebkitMaskImage | undefined;
+    "-webkit-mask-origin"?: Property.WebkitMaskOrigin | undefined;
+    "-webkit-mask-position"?: Property.WebkitMaskPosition | undefined;
+    "-webkit-mask-position-x"?: Property.WebkitMaskPositionX | undefined;
+    "-webkit-mask-position-y"?: Property.WebkitMaskPositionY | undefined;
+    "-webkit-mask-repeat"?: Property.WebkitMaskRepeat | undefined;
+    "-webkit-mask-repeat-x"?: Property.WebkitMaskRepeatX | undefined;
+    "-webkit-mask-repeat-y"?: Property.WebkitMaskRepeatY | undefined;
+    "-webkit-mask-size"?: Property.WebkitMaskSize | undefined;
+    "-webkit-max-inline-size"?: Property.MaxInlineSize | undefined;
+    "-webkit-order"?: Property.Order | undefined;
+    "-webkit-overflow-scrolling"?: Property.WebkitOverflowScrolling | undefined;
+    "-webkit-padding-end"?: Property.PaddingInlineEnd | undefined;
+    "-webkit-padding-start"?: Property.PaddingInlineStart | undefined;
+    "-webkit-perspective"?: Property.Perspective | undefined;
+    "-webkit-perspective-origin"?: Property.PerspectiveOrigin | undefined;
+    "-webkit-print-color-adjust"?: Property.PrintColorAdjust | undefined;
+    "-webkit-ruby-position"?: Property.RubyPosition | undefined;
+    "-webkit-scroll-snap-type"?: Property.ScrollSnapType | undefined;
+    "-webkit-shape-margin"?: Property.ShapeMargin | undefined;
+    "-webkit-tap-highlight-color"?: Property.WebkitTapHighlightColor | undefined;
+    "-webkit-text-combine"?: Property.TextCombineUpright | undefined;
+    "-webkit-text-decoration-color"?: Property.TextDecorationColor | undefined;
+    "-webkit-text-decoration-line"?: Property.TextDecorationLine | undefined;
+    "-webkit-text-decoration-skip"?: Property.TextDecorationSkip | undefined;
+    "-webkit-text-decoration-style"?: Property.TextDecorationStyle | undefined;
+    "-webkit-text-emphasis-color"?: Property.TextEmphasisColor | undefined;
+    "-webkit-text-emphasis-position"?: Property.TextEmphasisPosition | undefined;
+    "-webkit-text-emphasis-style"?: Property.TextEmphasisStyle | undefined;
+    "-webkit-text-fill-color"?: Property.WebkitTextFillColor | undefined;
+    "-webkit-text-orientation"?: Property.TextOrientation | undefined;
+    "-webkit-text-size-adjust"?: Property.TextSizeAdjust | undefined;
+    "-webkit-text-stroke-color"?: Property.WebkitTextStrokeColor | undefined;
+    "-webkit-text-stroke-width"?: Property.WebkitTextStrokeWidth | undefined;
+    "-webkit-text-underline-position"?: Property.TextUnderlinePosition | undefined;
+    "-webkit-touch-callout"?: Property.WebkitTouchCallout | undefined;
+    "-webkit-transform"?: Property.Transform | undefined;
+    "-webkit-transform-origin"?: Property.TransformOrigin | undefined;
+    "-webkit-transform-style"?: Property.TransformStyle | undefined;
+    "-webkit-transition-delay"?: Property.TransitionDelay | undefined;
+    "-webkit-transition-duration"?: Property.TransitionDuration | undefined;
+    "-webkit-transition-property"?: Property.TransitionProperty | undefined;
+    "-webkit-transition-timing-function"?: Property.TransitionTimingFunction | undefined;
+    "-webkit-user-modify"?: Property.WebkitUserModify | undefined;
+    "-webkit-user-select"?: Property.WebkitUserSelect | undefined;
+    "-webkit-writing-mode"?: Property.WritingMode | undefined;
+}
+export interface VendorShorthandPropertiesHyphen {
+    "-moz-animation"?: Property.Animation | undefined;
+    "-moz-border-image"?: Property.BorderImage | undefined;
+    "-moz-column-rule"?: Property.ColumnRule | undefined;
+    "-moz-columns"?: Property.Columns | undefined;
+    "-moz-outline-radius"?: Property.MozOutlineRadius | undefined;
+    "-moz-transition"?: Property.Transition | undefined;
+    "-ms-content-zoom-limit"?: Property.MsContentZoomLimit | undefined;
+    "-ms-content-zoom-snap"?: Property.MsContentZoomSnap | undefined;
+    "-ms-flex"?: Property.Flex | undefined;
+    "-ms-scroll-limit"?: Property.MsScrollLimit | undefined;
+    "-ms-scroll-snap-x"?: Property.MsScrollSnapX | undefined;
+    "-ms-scroll-snap-y"?: Property.MsScrollSnapY | undefined;
+    "-ms-transition"?: Property.Transition | undefined;
+    "-webkit-animation"?: Property.Animation | undefined;
+    "-webkit-border-before"?: Property.WebkitBorderBefore | undefined;
+    "-webkit-border-image"?: Property.BorderImage | undefined;
+    "-webkit-border-radius"?: Property.BorderRadius | undefined;
+    "-webkit-column-rule"?: Property.ColumnRule | undefined;
+    "-webkit-columns"?: Property.Columns | undefined;
+    "-webkit-flex"?: Property.Flex | undefined;
+    "-webkit-flex-flow"?: Property.FlexFlow | undefined;
+    "-webkit-mask"?: Property.WebkitMask | undefined;
+    "-webkit-mask-box-image"?: Property.MaskBorder | undefined;
+    "-webkit-text-emphasis"?: Property.TextEmphasis | undefined;
+    "-webkit-text-stroke"?: Property.WebkitTextStroke | undefined;
+    "-webkit-transition"?: Property.Transition | undefined;
+}
+export interface VendorPropertiesHyphen extends VendorLonghandPropertiesHyphen, VendorShorthandPropertiesHyphen {
+}
+export interface ObsoletePropertiesHyphen {
+    "box-align"?: Property.BoxAlign | undefined;
+    "box-direction"?: Property.BoxDirection | undefined;
+    "box-flex"?: Property.BoxFlex | undefined;
+    "box-flex-group"?: Property.BoxFlexGroup | undefined;
+    "box-lines"?: Property.BoxLines | undefined;
+    "box-ordinal-group"?: Property.BoxOrdinalGroup | undefined;
+    "box-orient"?: Property.BoxOrient | undefined;
+    "box-pack"?: Property.BoxPack | undefined;
+    clip?: Property.Clip | undefined;
+    "font-stretch"?: Property.FontStretch | undefined;
+    "grid-column-gap"?: Property.GridColumnGap | undefined;
+    "grid-gap"?: Property.GridGap | undefined;
+    "grid-row-gap"?: Property.GridRowGap | undefined;
+    "ime-mode"?: Property.ImeMode | undefined;
+    "inset-area"?: Property.PositionArea | undefined;
+    "offset-block"?: Property.InsetBlock | undefined;
+    "offset-block-end"?: Property.InsetBlockEnd | undefined;
+    "offset-block-start"?: Property.InsetBlockStart | undefined;
+    "offset-inline"?: Property.InsetInline | undefined;
+    "offset-inline-end"?: Property.InsetInlineEnd | undefined;
+    "offset-inline-start"?: Property.InsetInlineStart | undefined;
+    "page-break-after"?: Property.PageBreakAfter | undefined;
+    "page-break-before"?: Property.PageBreakBefore | undefined;
+    "page-break-inside"?: Property.PageBreakInside | undefined;
+    "position-try-options"?: Property.PositionTryFallbacks | undefined;
+    "scroll-snap-coordinate"?: Property.ScrollSnapCoordinate | undefined;
+    "scroll-snap-destination"?: Property.ScrollSnapDestination | undefined;
+    "scroll-snap-points-x"?: Property.ScrollSnapPointsX | undefined;
+    "scroll-snap-points-y"?: Property.ScrollSnapPointsY | undefined;
+    "scroll-snap-type-x"?: Property.ScrollSnapTypeX | undefined;
+    "scroll-snap-type-y"?: Property.ScrollSnapTypeY | undefined;
+    "-khtml-box-align"?: Property.BoxAlign | undefined;
+    "-khtml-box-direction"?: Property.BoxDirection | undefined;
+    "-khtml-box-flex"?: Property.BoxFlex | undefined;
+    "-khtml-box-flex-group"?: Property.BoxFlexGroup | undefined;
+    "-khtml-box-lines"?: Property.BoxLines | undefined;
+    "-khtml-box-ordinal-group"?: Property.BoxOrdinalGroup | undefined;
+    "-khtml-box-orient"?: Property.BoxOrient | undefined;
+    "-khtml-box-pack"?: Property.BoxPack | undefined;
+    "-khtml-line-break"?: Property.LineBreak | undefined;
+    "-khtml-opacity"?: Property.Opacity | undefined;
+    "-khtml-user-select"?: Property.UserSelect | undefined;
+    "-moz-background-clip"?: Property.BackgroundClip | undefined;
+    "-moz-background-origin"?: Property.BackgroundOrigin | undefined;
+    "-moz-background-size"?: Property.BackgroundSize | undefined;
+    "-moz-border-radius"?: Property.BorderRadius | undefined;
+    "-moz-border-radius-bottomleft"?: Property.BorderBottomLeftRadius | undefined;
+    "-moz-border-radius-bottomright"?: Property.BorderBottomRightRadius | undefined;
+    "-moz-border-radius-topleft"?: Property.BorderTopLeftRadius | undefined;
+    "-moz-border-radius-topright"?: Property.BorderTopRightRadius | undefined;
+    "-moz-box-align"?: Property.BoxAlign | undefined;
+    "-moz-box-direction"?: Property.BoxDirection | undefined;
+    "-moz-box-flex"?: Property.BoxFlex | undefined;
+    "-moz-box-ordinal-group"?: Property.BoxOrdinalGroup | undefined;
+    "-moz-box-orient"?: Property.BoxOrient | undefined;
+    "-moz-box-pack"?: Property.BoxPack | undefined;
+    "-moz-box-shadow"?: Property.BoxShadow | undefined;
+    "-moz-column-count"?: Property.ColumnCount | undefined;
+    "-moz-column-fill"?: Property.ColumnFill | undefined;
+    "-moz-float-edge"?: Property.MozFloatEdge | undefined;
+    "-moz-force-broken-image-icon"?: Property.MozForceBrokenImageIcon | undefined;
+    "-moz-opacity"?: Property.Opacity | undefined;
+    "-moz-outline"?: Property.Outline | undefined;
+    "-moz-outline-color"?: Property.OutlineColor | undefined;
+    "-moz-outline-style"?: Property.OutlineStyle | undefined;
+    "-moz-outline-width"?: Property.OutlineWidth | undefined;
+    "-moz-text-align-last"?: Property.TextAlignLast | undefined;
+    "-moz-text-decoration-color"?: Property.TextDecorationColor | undefined;
+    "-moz-text-decoration-line"?: Property.TextDecorationLine | undefined;
+    "-moz-text-decoration-style"?: Property.TextDecorationStyle | undefined;
+    "-moz-transition-delay"?: Property.TransitionDelay | undefined;
+    "-moz-transition-duration"?: Property.TransitionDuration | undefined;
+    "-moz-transition-property"?: Property.TransitionProperty | undefined;
+    "-moz-transition-timing-function"?: Property.TransitionTimingFunction | undefined;
+    "-moz-user-focus"?: Property.MozUserFocus | undefined;
+    "-moz-user-input"?: Property.MozUserInput | undefined;
+    "-ms-ime-mode"?: Property.ImeMode | undefined;
+    "-o-animation"?: Property.Animation | undefined;
+    "-o-animation-delay"?: Property.AnimationDelay | undefined;
+    "-o-animation-direction"?: Property.AnimationDirection | undefined;
+    "-o-animation-duration"?: Property.AnimationDuration | undefined;
+    "-o-animation-fill-mode"?: Property.AnimationFillMode | undefined;
+    "-o-animation-iteration-count"?: Property.AnimationIterationCount | undefined;
+    "-o-animation-name"?: Property.AnimationName | undefined;
+    "-o-animation-play-state"?: Property.AnimationPlayState | undefined;
+    "-o-animation-timing-function"?: Property.AnimationTimingFunction | undefined;
+    "-o-background-size"?: Property.BackgroundSize | undefined;
+    "-o-border-image"?: Property.BorderImage | undefined;
+    "-o-object-fit"?: Property.ObjectFit | undefined;
+    "-o-object-position"?: Property.ObjectPosition | undefined;
+    "-o-tab-size"?: Property.TabSize | undefined;
+    "-o-text-overflow"?: Property.TextOverflow | undefined;
+    "-o-transform"?: Property.Transform | undefined;
+    "-o-transform-origin"?: Property.TransformOrigin | undefined;
+    "-o-transition"?: Property.Transition | undefined;
+    "-o-transition-delay"?: Property.TransitionDelay | undefined;
+    "-o-transition-duration"?: Property.TransitionDuration | undefined;
+    "-o-transition-property"?: Property.TransitionProperty | undefined;
+    "-o-transition-timing-function"?: Property.TransitionTimingFunction | undefined;
+    "-webkit-box-align"?: Property.BoxAlign | undefined;
+    "-webkit-box-direction"?: Property.BoxDirection | undefined;
+    "-webkit-box-flex"?: Property.BoxFlex | undefined;
+    "-webkit-box-flex-group"?: Property.BoxFlexGroup | undefined;
+    "-webkit-box-lines"?: Property.BoxLines | undefined;
+    "-webkit-box-ordinal-group"?: Property.BoxOrdinalGroup | undefined;
+    "-webkit-box-orient"?: Property.BoxOrient | undefined;
+    "-webkit-box-pack"?: Property.BoxPack | undefined;
+}
+export interface SvgPropertiesHyphen {
+    "alignment-baseline"?: Property.AlignmentBaseline | undefined;
+    "baseline-shift"?: Property.BaselineShift | undefined;
+    clip?: Property.Clip | undefined;
+    "clip-path"?: Property.ClipPath | undefined;
+    "clip-rule"?: Property.ClipRule | undefined;
+    color?: Property.Color | undefined;
+    "color-interpolation"?: Property.ColorInterpolation | undefined;
+    "color-rendering"?: Property.ColorRendering | undefined;
+    cursor?: Property.Cursor | undefined;
+    direction?: Property.Direction | undefined;
+    display?: Property.Display | undefined;
+    "dominant-baseline"?: Property.DominantBaseline | undefined;
+    fill?: Property.Fill | undefined;
+    "fill-opacity"?: Property.FillOpacity | undefined;
+    "fill-rule"?: Property.FillRule | undefined;
+    filter?: Property.Filter | undefined;
+    "flood-color"?: Property.FloodColor | undefined;
+    "flood-opacity"?: Property.FloodOpacity | undefined;
+    font?: Property.Font | undefined;
+    "font-family"?: Property.FontFamily | undefined;
+    "font-size"?: Property.FontSize | undefined;
+    "font-size-adjust"?: Property.FontSizeAdjust | undefined;
+    "font-stretch"?: Property.FontStretch | undefined;
+    "font-style"?: Property.FontStyle | undefined;
+    "font-variant"?: Property.FontVariant | undefined;
+    "font-weight"?: Property.FontWeight | undefined;
+    "glyph-orientation-vertical"?: Property.GlyphOrientationVertical | undefined;
+    "image-rendering"?: Property.ImageRendering | undefined;
+    "letter-spacing"?: Property.LetterSpacing | undefined;
+    "lighting-color"?: Property.LightingColor | undefined;
+    "line-height"?: Property.LineHeight | undefined;
+    marker?: Property.Marker | undefined;
+    "marker-end"?: Property.MarkerEnd | undefined;
+    "marker-mid"?: Property.MarkerMid | undefined;
+    "marker-start"?: Property.MarkerStart | undefined;
+    mask?: Property.Mask | undefined;
+    opacity?: Property.Opacity | undefined;
+    overflow?: Property.Overflow | undefined;
+    "paint-order"?: Property.PaintOrder | undefined;
+    "pointer-events"?: Property.PointerEvents | undefined;
+    "shape-rendering"?: Property.ShapeRendering | undefined;
+    "stop-color"?: Property.StopColor | undefined;
+    "stop-opacity"?: Property.StopOpacity | undefined;
+    stroke?: Property.Stroke | undefined;
+    "stroke-dasharray"?: Property.StrokeDasharray | undefined;
+    "stroke-dashoffset"?: Property.StrokeDashoffset | undefined;
+    "stroke-linecap"?: Property.StrokeLinecap | undefined;
+    "stroke-linejoin"?: Property.StrokeLinejoin | undefined;
+    "stroke-miterlimit"?: Property.StrokeMiterlimit | undefined;
+    "stroke-opacity"?: Property.StrokeOpacity | undefined;
+    "stroke-width"?: Property.StrokeWidth | undefined;
+    "text-anchor"?: Property.TextAnchor | undefined;
+    "text-decoration"?: Property.TextDecoration | undefined;
+    "text-rendering"?: Property.TextRendering | undefined;
+    "unicode-bidi"?: Property.UnicodeBidi | undefined;
+    "vector-effect"?: Property.VectorEffect | undefined;
+    visibility?: Property.Visibility | undefined;
+    "white-space"?: Property.WhiteSpace | undefined;
+    "word-spacing"?: Property.WordSpacing | undefined;
+    "writing-mode"?: Property.WritingMode | undefined;
+}
+export interface PropertiesHyphen extends StandardPropertiesHyphen, VendorPropertiesHyphen, ObsoletePropertiesHyphen, SvgPropertiesHyphen {
+}
+export type StandardLonghandPropertiesFallback = Fallback>;
+export type StandardShorthandPropertiesFallback = Fallback>;
+export interface StandardPropertiesFallback extends StandardLonghandPropertiesFallback, StandardShorthandPropertiesFallback {
+}
+export type VendorLonghandPropertiesFallback = Fallback>;
+export type VendorShorthandPropertiesFallback = Fallback>;
+export interface VendorPropertiesFallback extends VendorLonghandPropertiesFallback, VendorShorthandPropertiesFallback {
+}
+export type ObsoletePropertiesFallback = Fallback>;
+export type SvgPropertiesFallback = Fallback>;
+export interface PropertiesFallback extends StandardPropertiesFallback, VendorPropertiesFallback, ObsoletePropertiesFallback, SvgPropertiesFallback {
+}
+export type StandardLonghandPropertiesHyphenFallback = Fallback>;
+export type StandardShorthandPropertiesHyphenFallback = Fallback>;
+export interface StandardPropertiesHyphenFallback extends StandardLonghandPropertiesHyphenFallback, StandardShorthandPropertiesHyphenFallback {
+}
+export type VendorLonghandPropertiesHyphenFallback = Fallback>;
+export type VendorShorthandPropertiesHyphenFallback = Fallback>;
+export interface VendorPropertiesHyphenFallback extends VendorLonghandPropertiesHyphenFallback, VendorShorthandPropertiesHyphenFallback {
+}
+export type ObsoletePropertiesHyphenFallback = Fallback>;
+export type SvgPropertiesHyphenFallback = Fallback>;
+export interface PropertiesHyphenFallback extends StandardPropertiesHyphenFallback, VendorPropertiesHyphenFallback, ObsoletePropertiesHyphenFallback, SvgPropertiesHyphenFallback {
+}
+export type AtRules = "@charset" | "@container" | "@counter-style" | "@document" | "@font-face" | "@font-feature-values" | "@font-palette-values" | "@import" | "@keyframes" | "@layer" | "@media" | "@namespace" | "@page" | "@position-try" | "@property" | "@scope" | "@starting-style" | "@supports" | "@view-transition";
+export type AdvancedPseudos = ":-moz-any()" | ":-moz-dir" | ":-webkit-any()" | "::cue" | "::cue-region" | "::highlight" | "::part" | "::picker" | "::slotted" | "::view-transition-group" | "::view-transition-image-pair" | "::view-transition-new" | "::view-transition-old" | ":active-view-transition-type" | ":dir" | ":has" | ":host" | ":host-context" | ":is" | ":lang" | ":matches()" | ":not" | ":nth-child" | ":nth-last-child" | ":nth-last-of-type" | ":nth-of-type" | ":state" | ":where";
+export type SimplePseudos = ":-khtml-any-link" | ":-moz-any-link" | ":-moz-focusring" | ":-moz-full-screen" | ":-moz-placeholder" | ":-moz-read-only" | ":-moz-read-write" | ":-moz-ui-invalid" | ":-moz-ui-valid" | ":-ms-fullscreen" | ":-ms-input-placeholder" | ":-webkit-any-link" | ":-webkit-autofill" | ":-webkit-full-screen" | "::-moz-placeholder" | "::-moz-progress-bar" | "::-moz-range-progress" | "::-moz-range-thumb" | "::-moz-range-track" | "::-moz-selection" | "::-ms-backdrop" | "::-ms-browse" | "::-ms-check" | "::-ms-clear" | "::-ms-expand" | "::-ms-fill" | "::-ms-fill-lower" | "::-ms-fill-upper" | "::-ms-input-placeholder" | "::-ms-reveal" | "::-ms-thumb" | "::-ms-ticks-after" | "::-ms-ticks-before" | "::-ms-tooltip" | "::-ms-track" | "::-ms-value" | "::-webkit-backdrop" | "::-webkit-file-upload-button" | "::-webkit-input-placeholder" | "::-webkit-progress-bar" | "::-webkit-progress-inner-value" | "::-webkit-progress-value" | "::-webkit-slider-runnable-track" | "::-webkit-slider-thumb" | "::after" | "::backdrop" | "::before" | "::checkmark" | "::cue" | "::cue-region" | "::details-content" | "::file-selector-button" | "::first-letter" | "::first-line" | "::grammar-error" | "::marker" | "::picker-icon" | "::placeholder" | "::scroll-marker" | "::scroll-marker-group" | "::selection" | "::spelling-error" | "::target-text" | "::view-transition" | ":active" | ":active-view-transition" | ":after" | ":any-link" | ":autofill" | ":before" | ":blank" | ":buffering" | ":checked" | ":current" | ":default" | ":defined" | ":disabled" | ":empty" | ":enabled" | ":first" | ":first-child" | ":first-letter" | ":first-line" | ":first-of-type" | ":focus" | ":focus-visible" | ":focus-within" | ":fullscreen" | ":future" | ":has-slotted" | ":host" | ":hover" | ":in-range" | ":indeterminate" | ":invalid" | ":last-child" | ":last-of-type" | ":left" | ":link" | ":local-link" | ":modal" | ":muted" | ":only-child" | ":only-of-type" | ":open" | ":optional" | ":out-of-range" | ":past" | ":paused" | ":picture-in-picture" | ":placeholder-shown" | ":playing" | ":popover-open" | ":read-only" | ":read-write" | ":required" | ":right" | ":root" | ":scope" | ":seeking" | ":stalled" | ":target" | ":target-current" | ":target-within" | ":user-invalid" | ":user-valid" | ":valid" | ":visited" | ":volume-locked" | ":xr-overlay";
+export type Pseudos = AdvancedPseudos | SimplePseudos;
+export type HtmlAttributes = "[abbr]" | "[accept-charset]" | "[accept]" | "[accesskey]" | "[action]" | "[align]" | "[alink]" | "[allow]" | "[allowfullscreen]" | "[allowpaymentrequest]" | "[alpha]" | "[alt]" | "[anchor]" | "[archive]" | "[as]" | "[async]" | "[attributionsourceid]" | "[attributionsrc]" | "[autobuffer]" | "[autocapitalize]" | "[autocomplete]" | "[autocorrect]" | "[autofocus]" | "[autoplay]" | "[axis]" | "[background]" | "[behavior]" | "[bgcolor]" | "[blocking]" | "[border]" | "[bottommargin]" | "[browsingtopics]" | "[capture]" | "[cellpadding]" | "[cellspacing]" | "[char]" | "[charoff]" | "[charset]" | "[checked]" | "[cite]" | "[class]" | "[classid]" | "[clear]" | "[closedby]" | "[codebase]" | "[codetype]" | "[color]" | "[colorspace]" | "[cols]" | "[colspan]" | "[command]" | "[commandfor]" | "[compact]" | "[content]" | "[contenteditable]" | "[controls]" | "[controlslist]" | "[coords]" | "[credentialless]" | "[cross-origin-top-navigation-by-user-activation]" | "[crossorigin]" | "[csp]" | "[data]" | "[datetime]" | "[declare]" | "[decoding]" | "[default]" | "[defer]" | "[dir]" | "[direction]" | "[dirname]" | "[disabled]" | "[disablepictureinpicture]" | "[disableremoteplayback]" | "[download]" | "[draggable]" | "[enctype]" | "[enterkeyhint]" | "[exportparts]" | "[face]" | "[fetchpriority]" | "[for]" | "[form]" | "[formaction]" | "[formenctype]" | "[formmethod]" | "[formnovalidate]" | "[formtarget]" | "[frame]" | "[frameborder]" | "[headers]" | "[height]" | "[hidden]" | "[high]" | "[href]" | "[hreflang]" | "[hreftranslate]" | "[hspace]" | "[http-equiv]" | "[id]" | "[imagesizes]" | "[imagesrcset]" | "[inert]" | "[inputmode]" | "[integrity]" | "[is]" | "[ismap]" | "[kind]" | "[label]" | "[lang]" | "[leftmargin]" | "[link]" | "[list]" | "[loading]" | "[longdesc]" | "[loop]" | "[low]" | "[marginheight]" | "[marginwidth]" | "[max]" | "[maxlength]" | "[media]" | "[method]" | "[min]" | "[minlength]" | "[moz-opaque]" | "[mozallowfullscreen]" | "[msallowfullscreen]" | "[multiple]" | "[muted]" | "[name]" | "[nohref]" | "[nomodule]" | "[nonce]" | "[noresize]" | "[noshade]" | "[novalidate]" | "[open]" | "[optimum]" | "[part]" | "[pattern]" | "[ping]" | "[placeholder]" | "[playsinline]" | "[popover]" | "[popovertarget]" | "[popovertargetaction]" | "[poster]" | "[preload]" | "[privateToken]" | "[readonly]" | "[referrerpolicy]" | "[rel]" | "[required]" | "[rev]" | "[reversed]" | "[rightmargin]" | "[rows]" | "[rowspan]" | "[rules]" | "[sandbox]" | "[scheme]" | "[scope]" | "[scrollamount]" | "[scrolldelay]" | "[scrolling]" | "[selected]" | "[shadowroot]" | "[shadowrootclonable]" | "[shadowrootdelegatesfocus]" | "[shadowrootmode]" | "[shadowrootserializable]" | "[shape]" | "[size]" | "[sizes]" | "[slot]" | "[span]" | "[spellcheck]" | "[src]" | "[srcdoc]" | "[srclang]" | "[srcset]" | "[standby]" | "[start]" | "[step]" | "[style]" | "[summary]" | "[tabindex]" | "[target]" | "[text]" | "[title]" | "[topmargin]" | "[translate]" | "[truespeed]" | "[type]" | "[usemap]" | "[valign]" | "[value]" | "[valuetype]" | "[version]" | "[virtualkeyboardpolicy]" | "[vlink]" | "[vspace]" | "[webkit-playsinline]" | "[webkitallowfullscreen]" | "[webkitdirectory]" | "[width]" | "[wrap]" | "[writingsuggestions]" | "[xmlns]";
+export type SvgAttributes = "[-khtml-opacity]" | "[-moz-opacity]" | "[-moz-transform]" | "[-ms-text-overflow]" | "[-ms-transform]" | "[-ms-writing-mode]" | "[-o-text-overflow]" | "[-o-transform]" | "[-webkit-mask]" | "[-webkit-transform]" | "[-webkit-writing-mode]" | "[alignment-baseline]" | "[async]" | "[attributeName]" | "[attributeType]" | "[autofocus]" | "[azimuth]" | "[baseFrequency]" | "[baseProfile]" | "[baseline-shift]" | "[bias]" | "[by]" | "[calcMode]" | "[class]" | "[clip-path]" | "[clip-rule]" | "[clipPathUnits]" | "[clip]" | "[color-interpolation-filters]" | "[color-interpolation]" | "[color]" | "[crossorigin]" | "[cursor]" | "[cx]" | "[cy]" | "[d]" | "[decoding]" | "[defer]" | "[diffuseConstant]" | "[direction]" | "[display]" | "[divisor]" | "[dominant-baseline]" | "[download]" | "[dur]" | "[dx]" | "[dy]" | "[edgeMode]" | "[elevation]" | "[fetchpriority]" | "[fill-opacity]" | "[fill-rule]" | "[fill]" | "[filterUnits]" | "[filter]" | "[flood-color]" | "[flood-opacity]" | "[font-family]" | "[font-size-adjust]" | "[font-size]" | "[font-stretch]" | "[font-style]" | "[font-variant]" | "[font-weight]" | "[font-width]" | "[fr]" | "[from]" | "[fx]" | "[fy]" | "[glyph-orientation-horizontal]" | "[glyph-orientation-vertical]" | "[gradientTransform]" | "[gradientUnits]" | "[height]" | "[href]" | "[hreflang]" | "[id]" | "[image-rendering]" | "[in2]" | "[in]" | "[k1]" | "[k2]" | "[k3]" | "[k4]" | "[kernelMatrix]" | "[kernelUnitLength]" | "[keyPoints]" | "[lang]" | "[lengthAdjust]" | "[letter-spacing]" | "[lighting-color]" | "[limitingConeAngle]" | "[marker-end]" | "[marker-mid]" | "[marker-start]" | "[markerHeight]" | "[markerUnits]" | "[markerWidth]" | "[maskContentUnits]" | "[maskUnits]" | "[mask]" | "[media]" | "[mode]" | "[numOctaves]" | "[offset]" | "[opacity]" | "[operator]" | "[order]" | "[orient]" | "[origin]" | "[overflow]" | "[paint-order]" | "[path]" | "[patternContentUnits]" | "[patternTransform]" | "[patternUnits]" | "[ping]" | "[pointer-events]" | "[pointsAtX]" | "[pointsAtY]" | "[pointsAtZ]" | "[points]" | "[preserveAlpha]" | "[preserveAspectRatio]" | "[primitiveUnits]" | "[r]" | "[radius]" | "[refX]" | "[refY]" | "[referrerpolicy]" | "[rel]" | "[repeatCount]" | "[requiredExtensions]" | "[rotate]" | "[rx]" | "[ry]" | "[scale]" | "[seed]" | "[shape-rendering]" | "[side]" | "[spacing]" | "[specularConstant]" | "[specularExponent]" | "[spreadMethod]" | "[startOffset]" | "[stdDeviation]" | "[stitchTiles]" | "[stop-color]" | "[stop-opacity]" | "[stroke-dasharray]" | "[stroke-dashoffset]" | "[stroke-linecap]" | "[stroke-linejoin]" | "[stroke-miterlimit]" | "[stroke-opacity]" | "[stroke-width]" | "[stroke]" | "[style]" | "[surfaceScale]" | "[systemLanguage]" | "[tabindex]" | "[targetX]" | "[targetY]" | "[target]" | "[text-anchor]" | "[text-decoration]" | "[text-overflow]" | "[text-rendering]" | "[textLength]" | "[title]" | "[to]" | "[transform-origin]" | "[transform]" | "[type]" | "[unicode-bidi]" | "[values]" | "[vector-effect]" | "[version]" | "[viewBox]" | "[visibility]" | "[white-space]" | "[width]" | "[word-spacing]" | "[writing-mode]" | "[x1]" | "[x2]" | "[xChannelSelector]" | "[x]" | "[y1]" | "[y2]" | "[yChannelSelector]" | "[y]" | "[z]" | "[zoomAndPan]";
+export type Globals = "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset";
+export namespace Property {
+    export type AccentColor = Globals | DataType.Color | "auto";
+    export type AlignContent = Globals | DataType.ContentDistribution | DataType.ContentPosition | "baseline" | "normal" | (string & {});
+    export type AlignItems = Globals | DataType.SelfPosition | "anchor-center" | "baseline" | "normal" | "stretch" | (string & {});
+    export type AlignSelf = Globals | DataType.SelfPosition | "anchor-center" | "auto" | "baseline" | "normal" | "stretch" | (string & {});
+    export type AlignTracks = Globals | DataType.ContentDistribution | DataType.ContentPosition | "baseline" | "normal" | (string & {});
+    export type AlignmentBaseline = Globals | "alphabetic" | "baseline" | "central" | "ideographic" | "mathematical" | "middle" | "text-after-edge" | "text-before-edge";
+    export type All = Globals;
+    export type AnchorName = Globals | "none" | (string & {});
+    export type AnchorScope = Globals | "all" | "none" | (string & {});
+    export type Animation = Globals | DataType.SingleAnimation | (string & {});
+    export type AnimationComposition = Globals | DataType.SingleAnimationComposition | (string & {});
+    export type AnimationDelay = Globals | TTime | (string & {});
+    export type AnimationDirection = Globals | DataType.SingleAnimationDirection | (string & {});
+    export type AnimationDuration = Globals | TTime | "auto" | (string & {});
+    export type AnimationFillMode = Globals | DataType.SingleAnimationFillMode | (string & {});
+    export type AnimationIterationCount = Globals | "infinite" | (string & {}) | (number & {});
+    export type AnimationName = Globals | "none" | (string & {});
+    export type AnimationPlayState = Globals | "paused" | "running" | (string & {});
+    export type AnimationRange = Globals | DataType.TimelineRangeName | TLength | "normal" | (string & {});
+    export type AnimationRangeEnd = Globals | DataType.TimelineRangeName | TLength | "normal" | (string & {});
+    export type AnimationRangeStart = Globals | DataType.TimelineRangeName | TLength | "normal" | (string & {});
+    export type AnimationTimeline = Globals | DataType.SingleAnimationTimeline | (string & {});
+    export type AnimationTimingFunction = Globals | DataType.EasingFunction | (string & {});
+    export type Appearance = Globals | DataType.CompatAuto | "auto" | "menulist-button" | "none" | "textfield";
+    export type AspectRatio = Globals | "auto" | (string & {}) | (number & {});
+    export type BackdropFilter = Globals | "none" | (string & {});
+    export type BackfaceVisibility = Globals | "hidden" | "visible";
+    export type Background = Globals | DataType.BgLayer | DataType.FinalBgLayer | (string & {});
+    export type BackgroundAttachment = Globals | DataType.Attachment | (string & {});
+    export type BackgroundBlendMode = Globals | DataType.BlendMode | (string & {});
+    export type BackgroundClip = Globals | DataType.BgClip | (string & {});
+    export type BackgroundColor = Globals | DataType.Color;
+    export type BackgroundImage = Globals | "none" | (string & {});
+    export type BackgroundOrigin = Globals | DataType.VisualBox | (string & {});
+    export type BackgroundPosition = Globals | DataType.BgPosition | (string & {});
+    export type BackgroundPositionX = Globals | TLength | "center" | "left" | "right" | "x-end" | "x-start" | (string & {});
+    export type BackgroundPositionY = Globals | TLength | "bottom" | "center" | "top" | "y-end" | "y-start" | (string & {});
+    export type BackgroundRepeat = Globals | DataType.RepeatStyle | (string & {});
+    export type BackgroundSize = Globals | DataType.BgSize | (string & {});
+    export type BaselineShift = Globals | TLength | "baseline" | "sub" | "super" | (string & {});
+    export type BlockSize = Globals | TLength | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "auto" | "fit-content" | "max-content" | "min-content" | (string & {});
+    export type Border = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {});
+    export type BorderBlock = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {});
+    export type BorderBlockColor = Globals | DataType.Color | (string & {});
+    export type BorderBlockEnd = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {});
+    export type BorderBlockEndColor = Globals | DataType.Color;
+    export type BorderBlockEndStyle = Globals | DataType.LineStyle;
+    export type BorderBlockEndWidth = Globals | DataType.LineWidth;
+    export type BorderBlockStart = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {});
+    export type BorderBlockStartColor = Globals | DataType.Color;
+    export type BorderBlockStartStyle = Globals | DataType.LineStyle;
+    export type BorderBlockStartWidth = Globals | DataType.LineWidth;
+    export type BorderBlockStyle = Globals | DataType.LineStyle | (string & {});
+    export type BorderBlockWidth = Globals | DataType.LineWidth | (string & {});
+    export type BorderBottom = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {});
+    export type BorderBottomColor = Globals | DataType.Color;
+    export type BorderBottomLeftRadius = Globals | TLength | (string & {});
+    export type BorderBottomRightRadius = Globals | TLength | (string & {});
+    export type BorderBottomStyle = Globals | DataType.LineStyle;
+    export type BorderBottomWidth = Globals | DataType.LineWidth;
+    export type BorderCollapse = Globals | "collapse" | "separate";
+    export type BorderColor = Globals | DataType.Color | (string & {});
+    export type BorderEndEndRadius = Globals | TLength | (string & {});
+    export type BorderEndStartRadius = Globals | TLength | (string & {});
+    export type BorderImage = Globals | "none" | "repeat" | "round" | "space" | "stretch" | (string & {}) | (number & {});
+    export type BorderImageOutset = Globals | TLength | (string & {}) | (number & {});
+    export type BorderImageRepeat = Globals | "repeat" | "round" | "space" | "stretch" | (string & {});
+    export type BorderImageSlice = Globals | (string & {}) | (number & {});
+    export type BorderImageSource = Globals | "none" | (string & {});
+    export type BorderImageWidth = Globals | TLength | "auto" | (string & {}) | (number & {});
+    export type BorderInline = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {});
+    export type BorderInlineColor = Globals | DataType.Color | (string & {});
+    export type BorderInlineEnd = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {});
+    export type BorderInlineEndColor = Globals | DataType.Color;
+    export type BorderInlineEndStyle = Globals | DataType.LineStyle;
+    export type BorderInlineEndWidth = Globals | DataType.LineWidth;
+    export type BorderInlineStart = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {});
+    export type BorderInlineStartColor = Globals | DataType.Color;
+    export type BorderInlineStartStyle = Globals | DataType.LineStyle;
+    export type BorderInlineStartWidth = Globals | DataType.LineWidth;
+    export type BorderInlineStyle = Globals | DataType.LineStyle | (string & {});
+    export type BorderInlineWidth = Globals | DataType.LineWidth | (string & {});
+    export type BorderLeft = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {});
+    export type BorderLeftColor = Globals | DataType.Color;
+    export type BorderLeftStyle = Globals | DataType.LineStyle;
+    export type BorderLeftWidth = Globals | DataType.LineWidth;
+    export type BorderRadius = Globals | TLength | (string & {});
+    export type BorderRight = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {});
+    export type BorderRightColor = Globals | DataType.Color;
+    export type BorderRightStyle = Globals | DataType.LineStyle;
+    export type BorderRightWidth = Globals | DataType.LineWidth;
+    export type BorderSpacing = Globals | TLength | (string & {});
+    export type BorderStartEndRadius = Globals | TLength | (string & {});
+    export type BorderStartStartRadius = Globals | TLength | (string & {});
+    export type BorderStyle = Globals | DataType.LineStyle | (string & {});
+    export type BorderTop = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {});
+    export type BorderTopColor = Globals | DataType.Color;
+    export type BorderTopLeftRadius = Globals | TLength | (string & {});
+    export type BorderTopRightRadius = Globals | TLength | (string & {});
+    export type BorderTopStyle = Globals | DataType.LineStyle;
+    export type BorderTopWidth = Globals | DataType.LineWidth;
+    export type BorderWidth = Globals | DataType.LineWidth | (string & {});
+    export type Bottom = Globals | TLength | "auto" | (string & {});
+    export type BoxAlign = Globals | "baseline" | "center" | "end" | "start" | "stretch";
+    export type BoxDecorationBreak = Globals | "clone" | "slice";
+    export type BoxDirection = Globals | "inherit" | "normal" | "reverse";
+    export type BoxFlex = Globals | (number & {}) | (string & {});
+    export type BoxFlexGroup = Globals | (number & {}) | (string & {});
+    export type BoxLines = Globals | "multiple" | "single";
+    export type BoxOrdinalGroup = Globals | (number & {}) | (string & {});
+    export type BoxOrient = Globals | "block-axis" | "horizontal" | "inherit" | "inline-axis" | "vertical";
+    export type BoxPack = Globals | "center" | "end" | "justify" | "start";
+    export type BoxShadow = Globals | "none" | (string & {});
+    export type BoxSizing = Globals | "border-box" | "content-box";
+    export type BreakAfter = Globals | "all" | "always" | "auto" | "avoid" | "avoid-column" | "avoid-page" | "avoid-region" | "column" | "left" | "page" | "recto" | "region" | "right" | "verso";
+    export type BreakBefore = Globals | "all" | "always" | "auto" | "avoid" | "avoid-column" | "avoid-page" | "avoid-region" | "column" | "left" | "page" | "recto" | "region" | "right" | "verso";
+    export type BreakInside = Globals | "auto" | "avoid" | "avoid-column" | "avoid-page" | "avoid-region";
+    export type CaptionSide = Globals | "bottom" | "top";
+    export type Caret = Globals | DataType.Color | "auto" | "bar" | "block" | "underscore" | (string & {});
+    export type CaretColor = Globals | DataType.Color | "auto";
+    export type CaretShape = Globals | "auto" | "bar" | "block" | "underscore";
+    export type Clear = Globals | "both" | "inline-end" | "inline-start" | "left" | "none" | "right";
+    export type Clip = Globals | "auto" | (string & {});
+    export type ClipPath = Globals | DataType.GeometryBox | "none" | (string & {});
+    export type ClipRule = Globals | "evenodd" | "nonzero";
+    export type Color = Globals | DataType.Color;
+    export type PrintColorAdjust = Globals | "economy" | "exact";
+    export type ColorInterpolationFilters = Globals | "auto" | "linearRGB" | "sRGB";
+    export type ColorScheme = Globals | "dark" | "light" | "normal" | (string & {});
+    export type ColumnCount = Globals | "auto" | (number & {}) | (string & {});
+    export type ColumnFill = Globals | "auto" | "balance";
+    export type ColumnGap = Globals | TLength | "normal" | (string & {});
+    export type ColumnRule = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {});
+    export type ColumnRuleColor = Globals | DataType.Color;
+    export type ColumnRuleStyle = Globals | DataType.LineStyle | (string & {});
+    export type ColumnRuleWidth = Globals | DataType.LineWidth | (string & {});
+    export type ColumnSpan = Globals | "all" | "none";
+    export type ColumnWidth = Globals | TLength | "auto";
+    export type Columns = Globals | TLength | "auto" | (string & {}) | (number & {});
+    export type Contain = Globals | "content" | "inline-size" | "layout" | "none" | "paint" | "size" | "strict" | "style" | (string & {});
+    export type ContainIntrinsicBlockSize = Globals | TLength | "none" | (string & {});
+    export type ContainIntrinsicHeight = Globals | TLength | "none" | (string & {});
+    export type ContainIntrinsicInlineSize = Globals | TLength | "none" | (string & {});
+    export type ContainIntrinsicSize = Globals | TLength | "none" | (string & {});
+    export type ContainIntrinsicWidth = Globals | TLength | "none" | (string & {});
+    export type Container = Globals | "none" | (string & {});
+    export type ContainerName = Globals | "none" | (string & {});
+    export type ContainerType = Globals | "inline-size" | "normal" | "scroll-state" | "size" | (string & {});
+    export type Content = Globals | DataType.Quote | "none" | "normal" | (string & {});
+    export type ContentVisibility = Globals | "auto" | "hidden" | "visible";
+    export type CounterIncrement = Globals | "none" | (string & {});
+    export type CounterReset = Globals | "none" | (string & {});
+    export type CounterSet = Globals | "none" | (string & {});
+    export type Cursor = Globals | DataType.CursorPredefined | (string & {});
+    export type Cx = Globals | TLength | (string & {});
+    export type Cy = Globals | TLength | (string & {});
+    export type D = Globals | "none" | (string & {});
+    export type Direction = Globals | "ltr" | "rtl";
+    export type Display = Globals | DataType.DisplayOutside | DataType.DisplayInside | DataType.DisplayInternal | DataType.DisplayLegacy | "contents" | "list-item" | "none" | (string & {});
+    export type DominantBaseline = Globals | "alphabetic" | "auto" | "central" | "hanging" | "ideographic" | "mathematical" | "middle" | "text-bottom" | "text-top";
+    export type EmptyCells = Globals | "hide" | "show";
+    export type FieldSizing = Globals | "content" | "fixed";
+    export type Fill = Globals | DataType.Paint;
+    export type FillOpacity = Globals | (string & {}) | (number & {});
+    export type FillRule = Globals | "evenodd" | "nonzero";
+    export type Filter = Globals | "none" | (string & {});
+    export type Flex = Globals | TLength | "auto" | "content" | "fit-content" | "max-content" | "min-content" | "none" | (string & {}) | (number & {});
+    export type FlexBasis = Globals | TLength | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-auto" | "auto" | "content" | "fit-content" | "max-content" | "min-content" | (string & {});
+    export type FlexDirection = Globals | "column" | "column-reverse" | "row" | "row-reverse";
+    export type FlexFlow = Globals | "column" | "column-reverse" | "nowrap" | "row" | "row-reverse" | "wrap" | "wrap-reverse" | (string & {});
+    export type FlexGrow = Globals | (number & {}) | (string & {});
+    export type FlexShrink = Globals | (number & {}) | (string & {});
+    export type FlexWrap = Globals | "nowrap" | "wrap" | "wrap-reverse";
+    export type Float = Globals | "inline-end" | "inline-start" | "left" | "none" | "right";
+    export type FloodColor = Globals | DataType.Color;
+    export type FloodOpacity = Globals | (string & {}) | (number & {});
+    export type Font = Globals | DataType.SystemFamilyName | (string & {});
+    export type FontFamily = Globals | DataType.GenericFamily | (string & {});
+    export type FontFeatureSettings = Globals | "normal" | (string & {});
+    export type FontKerning = Globals | "auto" | "none" | "normal";
+    export type FontLanguageOverride = Globals | "normal" | (string & {});
+    export type FontOpticalSizing = Globals | "auto" | "none";
+    export type FontPalette = Globals | "dark" | "light" | "normal" | (string & {});
+    export type FontSize = Globals | DataType.AbsoluteSize | TLength | "larger" | "math" | "smaller" | (string & {});
+    export type FontSizeAdjust = Globals | "from-font" | "none" | (string & {}) | (number & {});
+    export type FontSmooth = Globals | DataType.AbsoluteSize | TLength | "always" | "auto" | "never";
+    export type FontStretch = Globals | DataType.FontStretchAbsolute;
+    export type FontStyle = Globals | "italic" | "normal" | "oblique" | (string & {});
+    export type FontSynthesis = Globals | "none" | "position" | "small-caps" | "style" | "weight" | (string & {});
+    export type FontSynthesisPosition = Globals | "auto" | "none";
+    export type FontSynthesisSmallCaps = Globals | "auto" | "none";
+    export type FontSynthesisStyle = Globals | "auto" | "none";
+    export type FontSynthesisWeight = Globals | "auto" | "none";
+    export type FontVariant = Globals | DataType.EastAsianVariantValues | "all-petite-caps" | "all-small-caps" | "common-ligatures" | "contextual" | "diagonal-fractions" | "discretionary-ligatures" | "full-width" | "historical-forms" | "historical-ligatures" | "lining-nums" | "no-common-ligatures" | "no-contextual" | "no-discretionary-ligatures" | "no-historical-ligatures" | "none" | "normal" | "oldstyle-nums" | "ordinal" | "petite-caps" | "proportional-nums" | "proportional-width" | "ruby" | "slashed-zero" | "small-caps" | "stacked-fractions" | "tabular-nums" | "titling-caps" | "unicase" | (string & {});
+    export type FontVariantAlternates = Globals | "historical-forms" | "normal" | (string & {});
+    export type FontVariantCaps = Globals | "all-petite-caps" | "all-small-caps" | "normal" | "petite-caps" | "small-caps" | "titling-caps" | "unicase";
+    export type FontVariantEastAsian = Globals | DataType.EastAsianVariantValues | "full-width" | "normal" | "proportional-width" | "ruby" | (string & {});
+    export type FontVariantEmoji = Globals | "emoji" | "normal" | "text" | "unicode";
+    export type FontVariantLigatures = Globals | "common-ligatures" | "contextual" | "discretionary-ligatures" | "historical-ligatures" | "no-common-ligatures" | "no-contextual" | "no-discretionary-ligatures" | "no-historical-ligatures" | "none" | "normal" | (string & {});
+    export type FontVariantNumeric = Globals | "diagonal-fractions" | "lining-nums" | "normal" | "oldstyle-nums" | "ordinal" | "proportional-nums" | "slashed-zero" | "stacked-fractions" | "tabular-nums" | (string & {});
+    export type FontVariantPosition = Globals | "normal" | "sub" | "super";
+    export type FontVariationSettings = Globals | "normal" | (string & {});
+    export type FontWeight = Globals | DataType.FontWeightAbsolute | "bolder" | "lighter";
+    export type FontWidth = Globals | "condensed" | "expanded" | "extra-condensed" | "extra-expanded" | "normal" | "semi-condensed" | "semi-expanded" | "ultra-condensed" | "ultra-expanded" | (string & {});
+    export type ForcedColorAdjust = Globals | "auto" | "none" | "preserve-parent-color";
+    export type Gap = Globals | TLength | "normal" | (string & {});
+    export type Grid = Globals | "none" | (string & {});
+    export type GridArea = Globals | DataType.GridLine | (string & {});
+    export type GridAutoColumns = Globals | DataType.TrackBreadth | (string & {});
+    export type GridAutoFlow = Globals | "column" | "dense" | "row" | (string & {});
+    export type GridAutoRows = Globals | DataType.TrackBreadth | (string & {});
+    export type GridColumn = Globals | DataType.GridLine | (string & {});
+    export type GridColumnEnd = Globals | DataType.GridLine;
+    export type GridColumnGap = Globals | TLength | (string & {});
+    export type GridColumnStart = Globals | DataType.GridLine;
+    export type GridGap = Globals | TLength | (string & {});
+    export type GridRow = Globals | DataType.GridLine | (string & {});
+    export type GridRowEnd = Globals | DataType.GridLine;
+    export type GridRowGap = Globals | TLength | (string & {});
+    export type GridRowStart = Globals | DataType.GridLine;
+    export type GridTemplate = Globals | "none" | (string & {});
+    export type GridTemplateAreas = Globals | "none" | (string & {});
+    export type GridTemplateColumns = Globals | DataType.TrackBreadth | "none" | "subgrid" | (string & {});
+    export type GridTemplateRows = Globals | DataType.TrackBreadth | "none" | "subgrid" | (string & {});
+    export type HangingPunctuation = Globals | "allow-end" | "first" | "force-end" | "last" | "none" | (string & {});
+    export type Height = Globals | TLength | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "auto" | "fit-content" | "max-content" | "min-content" | (string & {});
+    export type HyphenateCharacter = Globals | "auto" | (string & {});
+    export type HyphenateLimitChars = Globals | "auto" | (string & {}) | (number & {});
+    export type Hyphens = Globals | "auto" | "manual" | "none";
+    export type ImageOrientation = Globals | "flip" | "from-image" | (string & {});
+    export type ImageRendering = Globals | "-moz-crisp-edges" | "-webkit-optimize-contrast" | "auto" | "crisp-edges" | "pixelated" | "smooth";
+    export type ImageResolution = Globals | "from-image" | (string & {});
+    export type ImeMode = Globals | "active" | "auto" | "disabled" | "inactive" | "normal";
+    export type InitialLetter = Globals | "normal" | (string & {}) | (number & {});
+    export type InitialLetterAlign = Globals | "alphabetic" | "auto" | "hanging" | "ideographic";
+    export type InlineSize = Globals | TLength | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fill-available" | "auto" | "fit-content" | "max-content" | "min-content" | (string & {});
+    export type Inset = Globals | TLength | "auto" | (string & {});
+    export type PositionArea = Globals | DataType.PositionArea | "none";
+    export type InsetBlock = Globals | TLength | "auto" | (string & {});
+    export type InsetBlockEnd = Globals | TLength | "auto" | (string & {});
+    export type InsetBlockStart = Globals | TLength | "auto" | (string & {});
+    export type InsetInline = Globals | TLength | "auto" | (string & {});
+    export type InsetInlineEnd = Globals | TLength | "auto" | (string & {});
+    export type InsetInlineStart = Globals | TLength | "auto" | (string & {});
+    export type InterpolateSize = Globals | "allow-keywords" | "numeric-only";
+    export type Isolation = Globals | "auto" | "isolate";
+    export type JustifyContent = Globals | DataType.ContentDistribution | DataType.ContentPosition | "left" | "normal" | "right" | (string & {});
+    export type JustifyItems = Globals | DataType.SelfPosition | "anchor-center" | "baseline" | "left" | "legacy" | "normal" | "right" | "stretch" | (string & {});
+    export type JustifySelf = Globals | DataType.SelfPosition | "anchor-center" | "auto" | "baseline" | "left" | "normal" | "right" | "stretch" | (string & {});
+    export type JustifyTracks = Globals | DataType.ContentDistribution | DataType.ContentPosition | "left" | "normal" | "right" | (string & {});
+    export type Left = Globals | TLength | "auto" | (string & {});
+    export type LetterSpacing = Globals | TLength | "normal";
+    export type LightingColor = Globals | DataType.Color;
+    export type LineBreak = Globals | "anywhere" | "auto" | "loose" | "normal" | "strict";
+    export type LineClamp = Globals | "none" | (number & {}) | (string & {});
+    export type LineHeight = Globals | TLength | "normal" | (string & {}) | (number & {});
+    export type LineHeightStep = Globals | TLength;
+    export type ListStyle = Globals | "inside" | "none" | "outside" | (string & {});
+    export type ListStyleImage = Globals | "none" | (string & {});
+    export type ListStylePosition = Globals | "inside" | "outside";
+    export type ListStyleType = Globals | "none" | (string & {});
+    export type Margin = Globals | TLength | "auto" | (string & {});
+    export type MarginBlock = Globals | TLength | "auto" | (string & {});
+    export type MarginBlockEnd = Globals | TLength | "auto" | (string & {});
+    export type MarginBlockStart = Globals | TLength | "auto" | (string & {});
+    export type MarginBottom = Globals | TLength | "auto" | (string & {});
+    export type MarginInline = Globals | TLength | "auto" | (string & {});
+    export type MarginInlineEnd = Globals | TLength | "auto" | (string & {});
+    export type MarginInlineStart = Globals | TLength | "auto" | (string & {});
+    export type MarginLeft = Globals | TLength | "auto" | (string & {});
+    export type MarginRight = Globals | TLength | "auto" | (string & {});
+    export type MarginTop = Globals | TLength | "auto" | (string & {});
+    export type MarginTrim = Globals | "all" | "in-flow" | "none";
+    export type Marker = Globals | "none" | (string & {});
+    export type MarkerEnd = Globals | "none" | (string & {});
+    export type MarkerMid = Globals | "none" | (string & {});
+    export type MarkerStart = Globals | "none" | (string & {});
+    export type Mask = Globals | DataType.MaskLayer | (string & {});
+    export type MaskBorder = Globals | "alpha" | "luminance" | "none" | "repeat" | "round" | "space" | "stretch" | (string & {}) | (number & {});
+    export type MaskBorderMode = Globals | "alpha" | "luminance";
+    export type MaskBorderOutset = Globals | TLength | (string & {}) | (number & {});
+    export type MaskBorderRepeat = Globals | "repeat" | "round" | "space" | "stretch" | (string & {});
+    export type MaskBorderSlice = Globals | (string & {}) | (number & {});
+    export type MaskBorderSource = Globals | "none" | (string & {});
+    export type MaskBorderWidth = Globals | TLength | "auto" | (string & {}) | (number & {});
+    export type MaskClip = Globals | DataType.PaintBox | "no-clip" | "view-box" | (string & {});
+    export type MaskComposite = Globals | DataType.CompositingOperator | (string & {});
+    export type MaskImage = Globals | "none" | (string & {});
+    export type MaskMode = Globals | DataType.MaskingMode | (string & {});
+    export type MaskOrigin = Globals | DataType.PaintBox | "view-box" | (string & {});
+    export type MaskPosition = Globals | DataType.Position | (string & {});
+    export type MaskRepeat = Globals | DataType.RepeatStyle | (string & {});
+    export type MaskSize = Globals | DataType.BgSize | (string & {});
+    export type MaskType = Globals | "alpha" | "luminance";
+    export type MasonryAutoFlow = Globals | "definite-first" | "next" | "ordered" | "pack" | (string & {});
+    export type MathDepth = Globals | "auto-add" | (string & {}) | (number & {});
+    export type MathShift = Globals | "compact" | "normal";
+    export type MathStyle = Globals | "compact" | "normal";
+    export type MaxBlockSize = Globals | TLength | "-moz-max-content" | "-moz-min-content" | "-webkit-fill-available" | "fit-content" | "max-content" | "min-content" | "none" | (string & {});
+    export type MaxHeight = Globals | TLength | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "-webkit-max-content" | "-webkit-min-content" | "fit-content" | "intrinsic" | "max-content" | "min-content" | "none" | (string & {});
+    export type MaxInlineSize = Globals | TLength | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fill-available" | "fit-content" | "max-content" | "min-content" | "none" | (string & {});
+    export type MaxLines = Globals | "none" | (number & {}) | (string & {});
+    export type MaxWidth = Globals | TLength | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "-webkit-max-content" | "-webkit-min-content" | "fit-content" | "intrinsic" | "max-content" | "min-content" | "none" | (string & {});
+    export type MinBlockSize = Globals | TLength | "-moz-max-content" | "-moz-min-content" | "-webkit-fill-available" | "auto" | "fit-content" | "max-content" | "min-content" | (string & {});
+    export type MinHeight = Globals | TLength | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "-webkit-max-content" | "-webkit-min-content" | "auto" | "fit-content" | "intrinsic" | "max-content" | "min-content" | (string & {});
+    export type MinInlineSize = Globals | TLength | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fill-available" | "auto" | "fit-content" | "max-content" | "min-content" | (string & {});
+    export type MinWidth = Globals | TLength | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "-webkit-max-content" | "-webkit-min-content" | "auto" | "fit-content" | "intrinsic" | "max-content" | "min-content" | "min-intrinsic" | (string & {});
+    export type MixBlendMode = Globals | DataType.BlendMode | "plus-darker" | "plus-lighter";
+    export type Offset = Globals | DataType.Position | DataType.PaintBox | "auto" | "none" | "normal" | "view-box" | (string & {});
+    export type OffsetDistance = Globals | TLength | (string & {});
+    export type OffsetPath = Globals | DataType.PaintBox | "none" | "view-box" | (string & {});
+    export type OffsetRotate = Globals | "auto" | "reverse" | (string & {});
+    export type ObjectFit = Globals | "contain" | "cover" | "fill" | "none" | "scale-down";
+    export type ObjectPosition = Globals | DataType.Position;
+    export type ObjectViewBox = Globals | "none" | (string & {});
+    export type OffsetAnchor = Globals | DataType.Position | "auto";
+    export type OffsetPosition = Globals | DataType.Position | "auto" | "normal";
+    export type Opacity = Globals | (string & {}) | (number & {});
+    export type Order = Globals | (number & {}) | (string & {});
+    export type Orphans = Globals | (number & {}) | (string & {});
+    export type Outline = Globals | DataType.LineWidth | DataType.OutlineLineStyle | DataType.Color | "auto" | (string & {});
+    export type OutlineColor = Globals | DataType.Color | "auto";
+    export type OutlineOffset = Globals | TLength;
+    export type OutlineStyle = Globals | DataType.OutlineLineStyle | "auto";
+    export type OutlineWidth = Globals | DataType.LineWidth;
+    export type Overflow = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "overlay" | "scroll" | "visible" | (string & {});
+    export type OverflowAnchor = Globals | "auto" | "none";
+    export type OverflowBlock = Globals | "auto" | "clip" | "hidden" | "scroll" | "visible";
+    export type OverflowClipBox = Globals | "content-box" | "padding-box";
+    export type OverflowClipMargin = Globals | DataType.VisualBox | TLength | (string & {});
+    export type OverflowInline = Globals | "auto" | "clip" | "hidden" | "scroll" | "visible";
+    export type OverflowWrap = Globals | "anywhere" | "break-word" | "normal";
+    export type OverflowX = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "overlay" | "scroll" | "visible";
+    export type OverflowY = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "overlay" | "scroll" | "visible";
+    export type Overlay = Globals | "auto" | "none";
+    export type OverscrollBehavior = Globals | "auto" | "contain" | "none" | (string & {});
+    export type OverscrollBehaviorBlock = Globals | "auto" | "contain" | "none";
+    export type OverscrollBehaviorInline = Globals | "auto" | "contain" | "none";
+    export type OverscrollBehaviorX = Globals | "auto" | "contain" | "none";
+    export type OverscrollBehaviorY = Globals | "auto" | "contain" | "none";
+    export type Padding = Globals | TLength | (string & {});
+    export type PaddingBlock = Globals | TLength | (string & {});
+    export type PaddingBlockEnd = Globals | TLength | (string & {});
+    export type PaddingBlockStart = Globals | TLength | (string & {});
+    export type PaddingBottom = Globals | TLength | (string & {});
+    export type PaddingInline = Globals | TLength | (string & {});
+    export type PaddingInlineEnd = Globals | TLength | (string & {});
+    export type PaddingInlineStart = Globals | TLength | (string & {});
+    export type PaddingLeft = Globals | TLength | (string & {});
+    export type PaddingRight = Globals | TLength | (string & {});
+    export type PaddingTop = Globals | TLength | (string & {});
+    export type Page = Globals | "auto" | (string & {});
+    export type PageBreakAfter = Globals | "always" | "auto" | "avoid" | "left" | "recto" | "right" | "verso";
+    export type PageBreakBefore = Globals | "always" | "auto" | "avoid" | "left" | "recto" | "right" | "verso";
+    export type PageBreakInside = Globals | "auto" | "avoid";
+    export type PaintOrder = Globals | "fill" | "markers" | "normal" | "stroke" | (string & {});
+    export type Perspective = Globals | TLength | "none";
+    export type PerspectiveOrigin = Globals | DataType.Position;
+    export type PlaceContent = Globals | DataType.ContentDistribution | DataType.ContentPosition | "baseline" | "normal" | (string & {});
+    export type PlaceItems = Globals | DataType.SelfPosition | "anchor-center" | "baseline" | "normal" | "stretch" | (string & {});
+    export type PlaceSelf = Globals | DataType.SelfPosition | "anchor-center" | "auto" | "baseline" | "normal" | "stretch" | (string & {});
+    export type PointerEvents = Globals | "all" | "auto" | "fill" | "inherit" | "none" | "painted" | "stroke" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke";
+    export type Position = Globals | "-webkit-sticky" | "absolute" | "fixed" | "relative" | "static" | "sticky";
+    export type PositionAnchor = Globals | "auto" | (string & {});
+    export type PositionTry = Globals | DataType.TryTactic | DataType.PositionArea | "none" | (string & {});
+    export type PositionTryFallbacks = Globals | DataType.TryTactic | DataType.PositionArea | "none" | (string & {});
+    export type PositionTryOrder = Globals | DataType.TrySize | "normal";
+    export type PositionVisibility = Globals | "always" | "anchors-valid" | "anchors-visible" | "no-overflow" | (string & {});
+    export type Quotes = Globals | "auto" | "none" | (string & {});
+    export type R = Globals | TLength | (string & {});
+    export type Resize = Globals | "block" | "both" | "horizontal" | "inline" | "none" | "vertical";
+    export type Right = Globals | TLength | "auto" | (string & {});
+    export type Rotate = Globals | "none" | (string & {});
+    export type RowGap = Globals | TLength | "normal" | (string & {});
+    export type RubyAlign = Globals | "center" | "space-around" | "space-between" | "start";
+    export type RubyMerge = Globals | "auto" | "collapse" | "separate";
+    export type RubyOverhang = Globals | "auto" | "none";
+    export type RubyPosition = Globals | "alternate" | "inter-character" | "over" | "under" | (string & {});
+    export type Rx = Globals | TLength | (string & {});
+    export type Ry = Globals | TLength | (string & {});
+    export type Scale = Globals | "none" | (string & {}) | (number & {});
+    export type ScrollBehavior = Globals | "auto" | "smooth";
+    export type ScrollInitialTarget = Globals | "nearest" | "none";
+    export type ScrollMargin = Globals | TLength | (string & {});
+    export type ScrollMarginBlock = Globals | TLength | (string & {});
+    export type ScrollMarginBlockEnd = Globals | TLength;
+    export type ScrollMarginBlockStart = Globals | TLength;
+    export type ScrollMarginBottom = Globals | TLength;
+    export type ScrollMarginInline = Globals | TLength | (string & {});
+    export type ScrollMarginInlineEnd = Globals | TLength;
+    export type ScrollMarginInlineStart = Globals | TLength;
+    export type ScrollMarginLeft = Globals | TLength;
+    export type ScrollMarginRight = Globals | TLength;
+    export type ScrollMarginTop = Globals | TLength;
+    export type ScrollPadding = Globals | TLength | "auto" | (string & {});
+    export type ScrollPaddingBlock = Globals | TLength | "auto" | (string & {});
+    export type ScrollPaddingBlockEnd = Globals | TLength | "auto" | (string & {});
+    export type ScrollPaddingBlockStart = Globals | TLength | "auto" | (string & {});
+    export type ScrollPaddingBottom = Globals | TLength | "auto" | (string & {});
+    export type ScrollPaddingInline = Globals | TLength | "auto" | (string & {});
+    export type ScrollPaddingInlineEnd = Globals | TLength | "auto" | (string & {});
+    export type ScrollPaddingInlineStart = Globals | TLength | "auto" | (string & {});
+    export type ScrollPaddingLeft = Globals | TLength | "auto" | (string & {});
+    export type ScrollPaddingRight = Globals | TLength | "auto" | (string & {});
+    export type ScrollPaddingTop = Globals | TLength | "auto" | (string & {});
+    export type ScrollSnapAlign = Globals | "center" | "end" | "none" | "start" | (string & {});
+    export type ScrollSnapCoordinate = Globals | DataType.Position | "none" | (string & {});
+    export type ScrollSnapDestination = Globals | DataType.Position;
+    export type ScrollSnapPointsX = Globals | "none" | (string & {});
+    export type ScrollSnapPointsY = Globals | "none" | (string & {});
+    export type ScrollSnapStop = Globals | "always" | "normal";
+    export type ScrollSnapType = Globals | "block" | "both" | "inline" | "none" | "x" | "y" | (string & {});
+    export type ScrollSnapTypeX = Globals | "mandatory" | "none" | "proximity";
+    export type ScrollSnapTypeY = Globals | "mandatory" | "none" | "proximity";
+    export type ScrollTimeline = Globals | "none" | (string & {});
+    export type ScrollTimelineAxis = Globals | "block" | "inline" | "x" | "y" | (string & {});
+    export type ScrollTimelineName = Globals | "none" | (string & {});
+    export type ScrollbarColor = Globals | "auto" | (string & {});
+    export type ScrollbarGutter = Globals | "auto" | "stable" | (string & {});
+    export type ScrollbarWidth = Globals | "auto" | "none" | "thin";
+    export type ShapeImageThreshold = Globals | (string & {}) | (number & {});
+    export type ShapeMargin = Globals | TLength | (string & {});
+    export type ShapeOutside = Globals | DataType.VisualBox | "margin-box" | "none" | (string & {});
+    export type ShapeRendering = Globals | "auto" | "crispEdges" | "geometricPrecision" | "optimizeSpeed";
+    export type SpeakAs = Globals | "digits" | "literal-punctuation" | "no-punctuation" | "normal" | "spell-out" | (string & {});
+    export type StopColor = Globals | DataType.Color;
+    export type StopOpacity = Globals | (string & {}) | (number & {});
+    export type Stroke = Globals | DataType.Paint;
+    export type StrokeColor = Globals | DataType.Color;
+    export type StrokeDasharray = Globals | DataType.Dasharray | "none";
+    export type StrokeDashoffset = Globals | TLength | (string & {}) | (number & {});
+    export type StrokeLinecap = Globals | "butt" | "round" | "square";
+    export type StrokeLinejoin = Globals | "arcs" | "bevel" | "miter" | "miter-clip" | "round";
+    export type StrokeMiterlimit = Globals | (number & {}) | (string & {});
+    export type StrokeOpacity = Globals | (string & {}) | (number & {});
+    export type StrokeWidth = Globals | TLength | (string & {}) | (number & {});
+    export type TabSize = Globals | TLength | (number & {}) | (string & {});
+    export type TableLayout = Globals | "auto" | "fixed";
+    export type TextAlign = Globals | "-khtml-center" | "-khtml-left" | "-khtml-right" | "-moz-center" | "-moz-left" | "-moz-right" | "-webkit-center" | "-webkit-left" | "-webkit-match-parent" | "-webkit-right" | "center" | "end" | "justify" | "left" | "match-parent" | "right" | "start";
+    export type TextAlignLast = Globals | "auto" | "center" | "end" | "justify" | "left" | "right" | "start";
+    export type TextAnchor = Globals | "end" | "middle" | "start";
+    export type TextAutospace = Globals | DataType.Autospace | "auto" | "normal";
+    export type TextBox = Globals | DataType.TextEdge | "auto" | "none" | "normal" | "trim-both" | "trim-end" | "trim-start" | (string & {});
+    export type TextBoxEdge = Globals | DataType.TextEdge | "auto";
+    export type TextBoxTrim = Globals | "none" | "trim-both" | "trim-end" | "trim-start";
+    export type TextCombineUpright = Globals | "all" | "digits" | "none" | (string & {});
+    export type TextDecoration = Globals | DataType.Color | TLength | "auto" | "blink" | "dashed" | "dotted" | "double" | "from-font" | "grammar-error" | "line-through" | "none" | "overline" | "solid" | "spelling-error" | "underline" | "wavy" | (string & {});
+    export type TextDecorationColor = Globals | DataType.Color;
+    export type TextDecorationLine = Globals | "blink" | "grammar-error" | "line-through" | "none" | "overline" | "spelling-error" | "underline" | (string & {});
+    export type TextDecorationSkip = Globals | "box-decoration" | "edges" | "leading-spaces" | "none" | "objects" | "spaces" | "trailing-spaces" | (string & {});
+    export type TextDecorationSkipInk = Globals | "all" | "auto" | "none";
+    export type TextDecorationStyle = Globals | "dashed" | "dotted" | "double" | "solid" | "wavy";
+    export type TextDecorationThickness = Globals | TLength | "auto" | "from-font" | (string & {});
+    export type TextEmphasis = Globals | DataType.Color | "circle" | "dot" | "double-circle" | "filled" | "none" | "open" | "sesame" | "triangle" | (string & {});
+    export type TextEmphasisColor = Globals | DataType.Color;
+    export type TextEmphasisPosition = Globals | "auto" | "over" | "under" | (string & {});
+    export type TextEmphasisStyle = Globals | "circle" | "dot" | "double-circle" | "filled" | "none" | "open" | "sesame" | "triangle" | (string & {});
+    export type TextIndent = Globals | TLength | (string & {});
+    export type TextJustify = Globals | "auto" | "distribute" | "inter-character" | "inter-word" | "none";
+    export type TextOrientation = Globals | "mixed" | "sideways" | "sideways-right" | "upright";
+    export type TextOverflow = Globals | "clip" | "ellipsis" | (string & {});
+    export type TextRendering = Globals | "auto" | "geometricPrecision" | "optimizeLegibility" | "optimizeSpeed";
+    export type TextShadow = Globals | "none" | (string & {});
+    export type TextSizeAdjust = Globals | "auto" | "none" | (string & {});
+    export type TextSpacingTrim = Globals | "normal" | "space-all" | "space-first" | "trim-start";
+    export type TextTransform = Globals | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "math-auto" | "none" | "uppercase" | (string & {});
+    export type TextUnderlineOffset = Globals | TLength | "auto" | (string & {});
+    export type TextUnderlinePosition = Globals | "auto" | "from-font" | "left" | "right" | "under" | (string & {});
+    export type TextWrap = Globals | "auto" | "balance" | "nowrap" | "pretty" | "stable" | "wrap" | (string & {});
+    export type TextWrapMode = Globals | "nowrap" | "wrap";
+    export type TextWrapStyle = Globals | "auto" | "balance" | "pretty" | "stable";
+    export type TimelineScope = Globals | "none" | (string & {});
+    export type Top = Globals | TLength | "auto" | (string & {});
+    export type TouchAction = Globals | "-ms-manipulation" | "-ms-none" | "-ms-pan-x" | "-ms-pan-y" | "-ms-pinch-zoom" | "auto" | "manipulation" | "none" | "pan-down" | "pan-left" | "pan-right" | "pan-up" | "pan-x" | "pan-y" | "pinch-zoom" | (string & {});
+    export type Transform = Globals | "none" | (string & {});
+    export type TransformBox = Globals | "border-box" | "content-box" | "fill-box" | "stroke-box" | "view-box";
+    export type TransformOrigin = Globals | TLength | "bottom" | "center" | "left" | "right" | "top" | (string & {});
+    export type TransformStyle = Globals | "flat" | "preserve-3d";
+    export type Transition = Globals | DataType.SingleTransition | (string & {});
+    export type TransitionBehavior = Globals | "allow-discrete" | "normal" | (string & {});
+    export type TransitionDelay = Globals | TTime | (string & {});
+    export type TransitionDuration = Globals | TTime | (string & {});
+    export type TransitionProperty = Globals | "all" | "none" | (string & {});
+    export type TransitionTimingFunction = Globals | DataType.EasingFunction | (string & {});
+    export type Translate = Globals | TLength | "none" | (string & {});
+    export type UnicodeBidi = Globals | "-moz-isolate" | "-moz-isolate-override" | "-moz-plaintext" | "-webkit-isolate" | "-webkit-isolate-override" | "-webkit-plaintext" | "bidi-override" | "embed" | "isolate" | "isolate-override" | "normal" | "plaintext";
+    export type UserSelect = Globals | "-moz-none" | "all" | "auto" | "none" | "text";
+    export type VectorEffect = Globals | "fixed-position" | "non-rotation" | "non-scaling-size" | "non-scaling-stroke" | "none";
+    export type VerticalAlign = Globals | TLength | "baseline" | "bottom" | "middle" | "sub" | "super" | "text-bottom" | "text-top" | "top" | (string & {});
+    export type ViewTimeline = Globals | "none" | (string & {});
+    export type ViewTimelineAxis = Globals | "block" | "inline" | "x" | "y" | (string & {});
+    export type ViewTimelineInset = Globals | TLength | "auto" | (string & {});
+    export type ViewTimelineName = Globals | "none" | (string & {});
+    export type ViewTransitionClass = Globals | "none" | (string & {});
+    export type ViewTransitionName = Globals | "match-element" | "none" | (string & {});
+    export type Visibility = Globals | "collapse" | "hidden" | "visible";
+    export type WhiteSpace = Globals | "-moz-pre-wrap" | "break-spaces" | "collapse" | "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap" | "preserve" | "preserve-breaks" | "preserve-spaces" | "wrap" | (string & {});
+    export type WhiteSpaceCollapse = Globals | "break-spaces" | "collapse" | "preserve" | "preserve-breaks" | "preserve-spaces";
+    export type Widows = Globals | (number & {}) | (string & {});
+    export type Width = Globals | TLength | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "-webkit-max-content" | "auto" | "fit-content" | "intrinsic" | "max-content" | "min-content" | "min-intrinsic" | (string & {});
+    export type WillChange = Globals | DataType.AnimateableFeature | "auto" | (string & {});
+    export type WordBreak = Globals | "auto-phrase" | "break-all" | "break-word" | "keep-all" | "normal";
+    export type WordSpacing = Globals | TLength | "normal";
+    export type WordWrap = Globals | "break-word" | "normal";
+    export type WritingMode = Globals | "horizontal-tb" | "sideways-lr" | "sideways-rl" | "vertical-lr" | "vertical-rl";
+    export type X = Globals | TLength | (string & {});
+    export type Y = Globals | TLength | (string & {});
+    export type ZIndex = Globals | "auto" | (number & {}) | (string & {});
+    export type Zoom = Globals | "normal" | "reset" | (string & {}) | (number & {});
+    export type MozAppearance = Globals | "-moz-mac-unified-toolbar" | "-moz-win-borderless-glass" | "-moz-win-browsertabbar-toolbox" | "-moz-win-communications-toolbox" | "-moz-win-communicationstext" | "-moz-win-exclude-glass" | "-moz-win-glass" | "-moz-win-media-toolbox" | "-moz-win-mediatext" | "-moz-window-button-box" | "-moz-window-button-box-maximized" | "-moz-window-button-close" | "-moz-window-button-maximize" | "-moz-window-button-minimize" | "-moz-window-button-restore" | "-moz-window-frame-bottom" | "-moz-window-frame-left" | "-moz-window-frame-right" | "-moz-window-titlebar" | "-moz-window-titlebar-maximized" | "button" | "button-arrow-down" | "button-arrow-next" | "button-arrow-previous" | "button-arrow-up" | "button-bevel" | "button-focus" | "caret" | "checkbox" | "checkbox-container" | "checkbox-label" | "checkmenuitem" | "dualbutton" | "groupbox" | "listbox" | "listitem" | "menuarrow" | "menubar" | "menucheckbox" | "menuimage" | "menuitem" | "menuitemtext" | "menulist" | "menulist-button" | "menulist-text" | "menulist-textfield" | "menupopup" | "menuradio" | "menuseparator" | "meterbar" | "meterchunk" | "none" | "progressbar" | "progressbar-vertical" | "progresschunk" | "progresschunk-vertical" | "radio" | "radio-container" | "radio-label" | "radiomenuitem" | "range" | "range-thumb" | "resizer" | "resizerpanel" | "scale-horizontal" | "scale-vertical" | "scalethumb-horizontal" | "scalethumb-vertical" | "scalethumbend" | "scalethumbstart" | "scalethumbtick" | "scrollbarbutton-down" | "scrollbarbutton-left" | "scrollbarbutton-right" | "scrollbarbutton-up" | "scrollbarthumb-horizontal" | "scrollbarthumb-vertical" | "scrollbartrack-horizontal" | "scrollbartrack-vertical" | "searchfield" | "separator" | "sheet" | "spinner" | "spinner-downbutton" | "spinner-textfield" | "spinner-upbutton" | "splitter" | "statusbar" | "statusbarpanel" | "tab" | "tab-scroll-arrow-back" | "tab-scroll-arrow-forward" | "tabpanel" | "tabpanels" | "textfield" | "textfield-multiline" | "toolbar" | "toolbarbutton" | "toolbarbutton-dropdown" | "toolbargripper" | "toolbox" | "tooltip" | "treeheader" | "treeheadercell" | "treeheadersortarrow" | "treeitem" | "treeline" | "treetwisty" | "treetwistyopen" | "treeview";
+    export type MozBinding = Globals | "none" | (string & {});
+    export type MozBorderBottomColors = Globals | DataType.Color | "none" | (string & {});
+    export type MozBorderLeftColors = Globals | DataType.Color | "none" | (string & {});
+    export type MozBorderRightColors = Globals | DataType.Color | "none" | (string & {});
+    export type MozBorderTopColors = Globals | DataType.Color | "none" | (string & {});
+    export type MozContextProperties = Globals | "fill" | "fill-opacity" | "none" | "stroke" | "stroke-opacity" | (string & {});
+    export type MozFloatEdge = Globals | "border-box" | "content-box" | "margin-box" | "padding-box";
+    export type MozForceBrokenImageIcon = Globals | 0 | (string & {}) | 1;
+    export type MozOrient = Globals | "block" | "horizontal" | "inline" | "vertical";
+    export type MozOutlineRadius = Globals | TLength | (string & {});
+    export type MozOutlineRadiusBottomleft = Globals | TLength | (string & {});
+    export type MozOutlineRadiusBottomright = Globals | TLength | (string & {});
+    export type MozOutlineRadiusTopleft = Globals | TLength | (string & {});
+    export type MozOutlineRadiusTopright = Globals | TLength | (string & {});
+    export type MozStackSizing = Globals | "ignore" | "stretch-to-fit";
+    export type MozTextBlink = Globals | "blink" | "none";
+    export type MozUserFocus = Globals | "ignore" | "none" | "normal" | "select-after" | "select-all" | "select-before" | "select-menu" | "select-same";
+    export type MozUserInput = Globals | "auto" | "disabled" | "enabled" | "none";
+    export type MozUserModify = Globals | "read-only" | "read-write" | "write-only";
+    export type MozWindowDragging = Globals | "drag" | "no-drag";
+    export type MozWindowShadow = Globals | "default" | "menu" | "none" | "sheet" | "tooltip";
+    export type MsAccelerator = Globals | "false" | "true";
+    export type MsBlockProgression = Globals | "bt" | "lr" | "rl" | "tb";
+    export type MsContentZoomChaining = Globals | "chained" | "none";
+    export type MsContentZoomLimit = Globals | (string & {});
+    export type MsContentZoomLimitMax = Globals | (string & {});
+    export type MsContentZoomLimitMin = Globals | (string & {});
+    export type MsContentZoomSnap = Globals | "mandatory" | "none" | "proximity" | (string & {});
+    export type MsContentZoomSnapPoints = Globals | (string & {});
+    export type MsContentZoomSnapType = Globals | "mandatory" | "none" | "proximity";
+    export type MsContentZooming = Globals | "none" | "zoom";
+    export type MsFilter = Globals | (string & {});
+    export type MsFlowFrom = Globals | "none" | (string & {});
+    export type MsFlowInto = Globals | "none" | (string & {});
+    export type MsGridColumns = Globals | DataType.TrackBreadth | "none" | (string & {});
+    export type MsGridRows = Globals | DataType.TrackBreadth | "none" | (string & {});
+    export type MsHighContrastAdjust = Globals | "auto" | "none";
+    export type MsHyphenateLimitChars = Globals | "auto" | (string & {}) | (number & {});
+    export type MsHyphenateLimitLines = Globals | "no-limit" | (number & {}) | (string & {});
+    export type MsHyphenateLimitZone = Globals | TLength | (string & {});
+    export type MsImeAlign = Globals | "after" | "auto";
+    export type MsOverflowStyle = Globals | "-ms-autohiding-scrollbar" | "auto" | "none" | "scrollbar";
+    export type MsScrollChaining = Globals | "chained" | "none";
+    export type MsScrollLimit = Globals | (string & {});
+    export type MsScrollLimitXMax = Globals | TLength | "auto";
+    export type MsScrollLimitXMin = Globals | TLength;
+    export type MsScrollLimitYMax = Globals | TLength | "auto";
+    export type MsScrollLimitYMin = Globals | TLength;
+    export type MsScrollRails = Globals | "none" | "railed";
+    export type MsScrollSnapPointsX = Globals | (string & {});
+    export type MsScrollSnapPointsY = Globals | (string & {});
+    export type MsScrollSnapType = Globals | "mandatory" | "none" | "proximity";
+    export type MsScrollSnapX = Globals | (string & {});
+    export type MsScrollSnapY = Globals | (string & {});
+    export type MsScrollTranslation = Globals | "none" | "vertical-to-horizontal";
+    export type MsScrollbar3dlightColor = Globals | DataType.Color;
+    export type MsScrollbarArrowColor = Globals | DataType.Color;
+    export type MsScrollbarBaseColor = Globals | DataType.Color;
+    export type MsScrollbarDarkshadowColor = Globals | DataType.Color;
+    export type MsScrollbarFaceColor = Globals | DataType.Color;
+    export type MsScrollbarHighlightColor = Globals | DataType.Color;
+    export type MsScrollbarShadowColor = Globals | DataType.Color;
+    export type MsScrollbarTrackColor = Globals | DataType.Color;
+    export type MsTextAutospace = Globals | "ideograph-alpha" | "ideograph-numeric" | "ideograph-parenthesis" | "ideograph-space" | "none";
+    export type MsTouchSelect = Globals | "grippers" | "none";
+    export type MsUserSelect = Globals | "element" | "none" | "text";
+    export type MsWrapFlow = Globals | "auto" | "both" | "clear" | "end" | "maximum" | "start";
+    export type MsWrapMargin = Globals | TLength;
+    export type MsWrapThrough = Globals | "none" | "wrap";
+    export type WebkitAppearance = Globals | "-apple-pay-button" | "button" | "button-bevel" | "caret" | "checkbox" | "default-button" | "inner-spin-button" | "listbox" | "listitem" | "media-controls-background" | "media-controls-fullscreen-background" | "media-current-time-display" | "media-enter-fullscreen-button" | "media-exit-fullscreen-button" | "media-fullscreen-button" | "media-mute-button" | "media-overlay-play-button" | "media-play-button" | "media-seek-back-button" | "media-seek-forward-button" | "media-slider" | "media-sliderthumb" | "media-time-remaining-display" | "media-toggle-closed-captions-button" | "media-volume-slider" | "media-volume-slider-container" | "media-volume-sliderthumb" | "menulist" | "menulist-button" | "menulist-text" | "menulist-textfield" | "meter" | "none" | "progress-bar" | "progress-bar-value" | "push-button" | "radio" | "searchfield" | "searchfield-cancel-button" | "searchfield-decoration" | "searchfield-results-button" | "searchfield-results-decoration" | "slider-horizontal" | "slider-vertical" | "sliderthumb-horizontal" | "sliderthumb-vertical" | "square-button" | "textarea" | "textfield";
+    export type WebkitBorderBefore = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {});
+    export type WebkitBorderBeforeColor = Globals | DataType.Color;
+    export type WebkitBorderBeforeStyle = Globals | DataType.LineStyle | (string & {});
+    export type WebkitBorderBeforeWidth = Globals | DataType.LineWidth | (string & {});
+    export type WebkitBoxReflect = Globals | TLength | "above" | "below" | "left" | "right" | (string & {});
+    export type WebkitLineClamp = Globals | "none" | (number & {}) | (string & {});
+    export type WebkitMask = Globals | DataType.Position | DataType.RepeatStyle | DataType.VisualBox | "border" | "content" | "none" | "padding" | "text" | (string & {});
+    export type WebkitMaskAttachment = Globals | DataType.Attachment | (string & {});
+    export type WebkitMaskClip = Globals | DataType.PaintBox | "border" | "content" | "no-clip" | "padding" | "text" | "view-box" | (string & {});
+    export type WebkitMaskComposite = Globals | DataType.CompositeStyle | (string & {});
+    export type WebkitMaskImage = Globals | "none" | (string & {});
+    export type WebkitMaskOrigin = Globals | DataType.PaintBox | "border" | "content" | "padding" | "view-box" | (string & {});
+    export type WebkitMaskPosition = Globals | DataType.Position | (string & {});
+    export type WebkitMaskPositionX = Globals | TLength | "center" | "left" | "right" | (string & {});
+    export type WebkitMaskPositionY = Globals | TLength | "bottom" | "center" | "top" | (string & {});
+    export type WebkitMaskRepeat = Globals | DataType.RepeatStyle | (string & {});
+    export type WebkitMaskRepeatX = Globals | "no-repeat" | "repeat" | "round" | "space";
+    export type WebkitMaskRepeatY = Globals | "no-repeat" | "repeat" | "round" | "space";
+    export type WebkitMaskSize = Globals | DataType.BgSize | (string & {});
+    export type WebkitOverflowScrolling = Globals | "auto" | "touch";
+    export type WebkitTapHighlightColor = Globals | DataType.Color;
+    export type WebkitTextFillColor = Globals | DataType.Color;
+    export type WebkitTextStroke = Globals | DataType.Color | TLength | (string & {});
+    export type WebkitTextStrokeColor = Globals | DataType.Color;
+    export type WebkitTextStrokeWidth = Globals | TLength;
+    export type WebkitTouchCallout = Globals | "default" | "none";
+    export type WebkitUserModify = Globals | "read-only" | "read-write" | "read-write-plaintext-only";
+    export type WebkitUserSelect = Globals | "all" | "auto" | "none" | "text";
+    export type ColorInterpolation = Globals | "auto" | "linearRGB" | "sRGB";
+    export type ColorRendering = Globals | "auto" | "optimizeQuality" | "optimizeSpeed";
+    export type GlyphOrientationVertical = Globals | "auto" | (string & {}) | (number & {});
+}
+export namespace AtRule {
+    export interface CounterStyle {
+        additiveSymbols?: string | undefined;
+        fallback?: string | undefined;
+        negative?: string | undefined;
+        pad?: string | undefined;
+        prefix?: string | undefined;
+        range?: Range | undefined;
+        speakAs?: SpeakAs | undefined;
+        suffix?: string | undefined;
+        symbols?: string | undefined;
+        system?: System | undefined;
+    }
+    export interface CounterStyleHyphen {
+        "additive-symbols"?: string | undefined;
+        fallback?: string | undefined;
+        negative?: string | undefined;
+        pad?: string | undefined;
+        prefix?: string | undefined;
+        range?: Range | undefined;
+        "speak-as"?: SpeakAs | undefined;
+        suffix?: string | undefined;
+        symbols?: string | undefined;
+        system?: System | undefined;
+    }
+    export type CounterStyleFallback = Fallback>;
+    export type CounterStyleHyphenFallback = Fallback>;
+    export interface FontFace {
+        MozFontFeatureSettings?: FontFeatureSettings | undefined;
+        ascentOverride?: AscentOverride | undefined;
+        descentOverride?: DescentOverride | undefined;
+        fontDisplay?: FontDisplay | undefined;
+        fontFamily?: string | undefined;
+        fontFeatureSettings?: FontFeatureSettings | undefined;
+        fontStretch?: FontStretch | undefined;
+        fontStyle?: FontStyle | undefined;
+        fontVariationSettings?: FontVariationSettings | undefined;
+        fontWeight?: FontWeight | undefined;
+        lineGapOverride?: LineGapOverride | undefined;
+        sizeAdjust?: string | undefined;
+        src?: string | undefined;
+        unicodeRange?: string | undefined;
+    }
+    export interface FontFaceHyphen {
+        "-moz-font-feature-settings"?: FontFeatureSettings | undefined;
+        "ascent-override"?: AscentOverride | undefined;
+        "descent-override"?: DescentOverride | undefined;
+        "font-display"?: FontDisplay | undefined;
+        "font-family"?: string | undefined;
+        "font-feature-settings"?: FontFeatureSettings | undefined;
+        "font-stretch"?: FontStretch | undefined;
+        "font-style"?: FontStyle | undefined;
+        "font-variation-settings"?: FontVariationSettings | undefined;
+        "font-weight"?: FontWeight | undefined;
+        "line-gap-override"?: LineGapOverride | undefined;
+        "size-adjust"?: string | undefined;
+        src?: string | undefined;
+        "unicode-range"?: string | undefined;
+    }
+    export type FontFaceFallback = Fallback>;
+    export type FontFaceHyphenFallback = Fallback>;
+    export interface FontPaletteValues {
+        basePalette?: BasePalette | undefined;
+        fontFamily?: string | undefined;
+        overrideColors?: string | undefined;
+    }
+    export interface FontPaletteValuesHyphen {
+        "base-palette"?: BasePalette | undefined;
+        "font-family"?: string | undefined;
+        "override-colors"?: string | undefined;
+    }
+    export type FontPaletteValuesFallback = Fallback>;
+    export type FontPaletteValuesHyphenFallback = Fallback>;
+    export interface Page {
+        bleed?: Bleed | undefined;
+        marks?: Marks | undefined;
+        pageOrientation?: PageOrientation | undefined;
+        size?: Size | undefined;
+    }
+    export interface PageHyphen {
+        bleed?: Bleed | undefined;
+        marks?: Marks | undefined;
+        "page-orientation"?: PageOrientation | undefined;
+        size?: Size | undefined;
+    }
+    export type PageFallback = Fallback>;
+    export type PageHyphenFallback = Fallback>;
+    export interface Property {
+        inherits?: Inherits | undefined;
+        initialValue?: string | undefined;
+        syntax?: string | undefined;
+    }
+    export interface PropertyHyphen {
+        inherits?: Inherits | undefined;
+        "initial-value"?: string | undefined;
+        syntax?: string | undefined;
+    }
+    export type PropertyFallback = Fallback>;
+    export type PropertyHyphenFallback = Fallback>;
+    export interface ViewTransition {
+        navigation?: Navigation | undefined;
+        types?: Types | undefined;
+    }
+    export interface ViewTransitionHyphen {
+        navigation?: Navigation | undefined;
+        types?: Types | undefined;
+    }
+    export type ViewTransitionFallback = Fallback>;
+    export type ViewTransitionHyphenFallback = Fallback>;
+    type Range = "auto" | (string & {});
+    type SpeakAs = "auto" | "bullets" | "numbers" | "spell-out" | "words" | (string & {});
+    type System = "additive" | "alphabetic" | "cyclic" | "fixed" | "numeric" | "symbolic" | (string & {});
+    type FontFeatureSettings = "normal" | (string & {});
+    type AscentOverride = "normal" | (string & {});
+    type DescentOverride = "normal" | (string & {});
+    type FontDisplay = "auto" | "block" | "fallback" | "optional" | "swap";
+    type FontStretch = DataType.FontStretchAbsolute | (string & {});
+    type FontStyle = "italic" | "normal" | "oblique" | (string & {});
+    type FontVariationSettings = "normal" | (string & {});
+    type FontWeight = DataType.FontWeightAbsolute | (string & {});
+    type LineGapOverride = "normal" | (string & {});
+    type BasePalette = "dark" | "light" | (number & {}) | (string & {});
+    type Bleed = TLength | "auto";
+    type Marks = "crop" | "cross" | "none" | (string & {});
+    type PageOrientation = "rotate-left" | "rotate-right" | "upright";
+    type Size = DataType.PageSize | TLength | "auto" | "landscape" | "portrait" | (string & {});
+    type Inherits = "false" | "true";
+    type Navigation = "auto" | "none";
+    type Types = "none" | (string & {});
+}
+export namespace DataType {
+    type AbsoluteSize = "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large";
+    type AnimateableFeature = "contents" | "scroll-position" | (string & {});
+    type Attachment = "fixed" | "local" | "scroll";
+    type Autospace = "ideograph-alpha" | "ideograph-numeric" | "insert" | "no-autospace" | "punctuation" | "replace" | (string & {});
+    type BgClip = VisualBox | "border-area" | "text";
+    type BgLayer = BgPosition | RepeatStyle | Attachment | VisualBox | "none" | (string & {});
+    type BgPosition = TLength | "bottom" | "center" | "left" | "right" | "top" | (string & {});
+    type BgSize = TLength | "auto" | "contain" | "cover" | (string & {});
+    type BlendMode = "color" | "color-burn" | "color-dodge" | "darken" | "difference" | "exclusion" | "hard-light" | "hue" | "lighten" | "luminosity" | "multiply" | "normal" | "overlay" | "saturation" | "screen" | "soft-light";
+    type Color = ColorBase | SystemColor | DeprecatedSystemColor | "currentColor" | (string & {});
+    type ColorBase = NamedColor | "transparent" | (string & {});
+    type CompatAuto = "button" | "checkbox" | "listbox" | "menulist" | "meter" | "progress-bar" | "radio" | "searchfield" | "textarea";
+    type CompositeStyle = "clear" | "copy" | "destination-atop" | "destination-in" | "destination-out" | "destination-over" | "source-atop" | "source-in" | "source-out" | "source-over" | "xor";
+    type CompositingOperator = "add" | "exclude" | "intersect" | "subtract";
+    type ContentDistribution = "space-around" | "space-between" | "space-evenly" | "stretch";
+    type ContentPosition = "center" | "end" | "flex-end" | "flex-start" | "start";
+    type CubicBezierEasingFunction = "ease" | "ease-in" | "ease-in-out" | "ease-out" | (string & {});
+    type CursorPredefined = "-moz-grab" | "-moz-zoom-in" | "-moz-zoom-out" | "-webkit-grab" | "-webkit-grabbing" | "-webkit-zoom-in" | "-webkit-zoom-out" | "alias" | "all-scroll" | "auto" | "cell" | "col-resize" | "context-menu" | "copy" | "crosshair" | "default" | "e-resize" | "ew-resize" | "grab" | "grabbing" | "help" | "move" | "n-resize" | "ne-resize" | "nesw-resize" | "no-drop" | "none" | "not-allowed" | "ns-resize" | "nw-resize" | "nwse-resize" | "pointer" | "progress" | "row-resize" | "s-resize" | "se-resize" | "sw-resize" | "text" | "vertical-text" | "w-resize" | "wait" | "zoom-in" | "zoom-out";
+    type Dasharray = TLength | (string & {}) | (number & {});
+    type DeprecatedSystemColor = "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonHighlight" | "ButtonShadow" | "CaptionText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText";
+    type DisplayInside = "-ms-flexbox" | "-ms-grid" | "-webkit-flex" | "flex" | "flow" | "flow-root" | "grid" | "ruby" | "table";
+    type DisplayInternal = "ruby-base" | "ruby-base-container" | "ruby-text" | "ruby-text-container" | "table-caption" | "table-cell" | "table-column" | "table-column-group" | "table-footer-group" | "table-header-group" | "table-row" | "table-row-group";
+    type DisplayLegacy = "-ms-inline-flexbox" | "-ms-inline-grid" | "-webkit-inline-flex" | "inline-block" | "inline-flex" | "inline-grid" | "inline-list-item" | "inline-table";
+    type DisplayOutside = "block" | "inline" | "run-in";
+    type EasingFunction = CubicBezierEasingFunction | StepEasingFunction | "linear" | (string & {});
+    type EastAsianVariantValues = "jis04" | "jis78" | "jis83" | "jis90" | "simplified" | "traditional";
+    type FinalBgLayer = BgPosition | RepeatStyle | Attachment | VisualBox | Color | "none" | (string & {});
+    type FontStretchAbsolute = "condensed" | "expanded" | "extra-condensed" | "extra-expanded" | "normal" | "semi-condensed" | "semi-expanded" | "ultra-condensed" | "ultra-expanded" | (string & {});
+    type FontWeightAbsolute = "bold" | "normal" | (number & {}) | (string & {});
+    type GenericComplete = "-apple-system" | "cursive" | "fantasy" | "math" | "monospace" | "sans-serif" | "serif" | "system-ui";
+    type GenericFamily = GenericComplete | GenericIncomplete | "emoji" | "fangsong";
+    type GenericIncomplete = "ui-monospace" | "ui-rounded" | "ui-sans-serif" | "ui-serif";
+    type GeometryBox = VisualBox | "fill-box" | "margin-box" | "stroke-box" | "view-box";
+    type GridLine = "auto" | (string & {}) | (number & {});
+    type LineStyle = "dashed" | "dotted" | "double" | "groove" | "hidden" | "inset" | "none" | "outset" | "ridge" | "solid";
+    type LineWidth = TLength | "medium" | "thick" | "thin";
+    type MaskLayer = Position | RepeatStyle | GeometryBox | CompositingOperator | MaskingMode | "no-clip" | "none" | (string & {});
+    type MaskingMode = "alpha" | "luminance" | "match-source";
+    type NamedColor = "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen";
+    type OutlineLineStyle = "dashed" | "dotted" | "double" | "groove" | "inset" | "none" | "outset" | "ridge" | "solid";
+    type PageSize = "A3" | "A4" | "A5" | "B4" | "B5" | "JIS-B4" | "JIS-B5" | "ledger" | "legal" | "letter";
+    type Paint = Color | "context-fill" | "context-stroke" | "none" | (string & {});
+    type PaintBox = VisualBox | "fill-box" | "stroke-box";
+    type Position = TLength | "bottom" | "center" | "left" | "right" | "top" | (string & {});
+    type PositionArea = "block-end" | "block-start" | "bottom" | "center" | "end" | "inline-end" | "inline-start" | "left" | "right" | "self-block-end" | "self-block-start" | "self-end" | "self-inline-end" | "self-inline-start" | "self-start" | "span-all" | "span-block-end" | "span-block-start" | "span-bottom" | "span-end" | "span-inline-end" | "span-inline-start" | "span-left" | "span-right" | "span-self-block-end" | "span-self-block-start" | "span-self-end" | "span-self-inline-end" | "span-self-inline-start" | "span-self-start" | "span-start" | "span-top" | "span-x-end" | "span-x-self-end" | "span-x-self-start" | "span-x-start" | "span-y-end" | "span-y-self-end" | "span-y-self-start" | "span-y-start" | "start" | "top" | "x-end" | "x-self-end" | "x-self-start" | "x-start" | "y-end" | "y-self-end" | "y-self-start" | "y-start" | (string & {});
+    type Quote = "close-quote" | "no-close-quote" | "no-open-quote" | "open-quote";
+    type RepeatStyle = "no-repeat" | "repeat" | "repeat-x" | "repeat-y" | "round" | "space" | (string & {});
+    type SelfPosition = "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start";
+    type SingleAnimation = EasingFunction | SingleAnimationDirection | SingleAnimationFillMode | SingleAnimationTimeline | TTime | "auto" | "infinite" | "none" | "paused" | "running" | (string & {}) | (number & {});
+    type SingleAnimationComposition = "accumulate" | "add" | "replace";
+    type SingleAnimationDirection = "alternate" | "alternate-reverse" | "normal" | "reverse";
+    type SingleAnimationFillMode = "backwards" | "both" | "forwards" | "none";
+    type SingleAnimationTimeline = "auto" | "none" | (string & {});
+    type SingleTransition = EasingFunction | TTime | "all" | "allow-discrete" | "none" | "normal" | (string & {});
+    type StepEasingFunction = "step-end" | "step-start" | (string & {});
+    type SystemColor = "AccentColor" | "AccentColorText" | "ActiveText" | "ButtonBorder" | "ButtonFace" | "ButtonText" | "Canvas" | "CanvasText" | "Field" | "FieldText" | "GrayText" | "Highlight" | "HighlightText" | "LinkText" | "Mark" | "MarkText" | "SelectedItem" | "SelectedItemText" | "VisitedText";
+    type SystemFamilyName = "caption" | "icon" | "menu" | "message-box" | "small-caption" | "status-bar";
+    type TextEdge = "cap" | "ex" | "ideographic" | "ideographic-ink" | "text" | (string & {});
+    type TimelineRangeName = "contain" | "cover" | "entry" | "entry-crossing" | "exit" | "exit-crossing";
+    type TrackBreadth = TLength | "auto" | "max-content" | "min-content" | (string & {});
+    type TrySize = "most-block-size" | "most-height" | "most-inline-size" | "most-width";
+    type TryTactic = "flip-block" | "flip-inline" | "flip-start" | (string & {});
+    type VisualBox = "border-box" | "content-box" | "padding-box";
+}
diff --git a/website/src/components/Playground/monaco/typeLibs.ts b/website/src/components/Playground/monaco/typeLibs.ts
index 21bd8af2c041..08bb7150604f 100644
--- a/website/src/components/Playground/monaco/typeLibs.ts
+++ b/website/src/components/Playground/monaco/typeLibs.ts
@@ -22,6 +22,14 @@ const MODULE_LIBS: readonly [
         /* webpackChunkName: 'reactDTS' */ '!!raw-loader?esModule=false!../editor-types/react.d.ts'
       ),
   ],
+  [
+    'csstype',
+    'csstype/index.d.ts',
+    () =>
+      import(
+        /* webpackChunkName: 'csstypeDTS' */ '!!raw-loader?esModule=false!../editor-types/csstype.d.ts'
+      ),
+  ],
   [
     'react/jsx-runtime',
     '@types/react/jsx-runtime.d.ts',

From e22bcff9a804e02ddbe89a9f61646c4039348379 Mon Sep 17 00:00:00 2001
From: Claude 
Date: Sun, 4 Oct 2026 09:14:05 +0000
Subject: [PATCH 13/15] internal(website): Simplify Playground metastring,
 model path and type-lib helpers

- One metaValue() parser for title= and path= (quotes optional for both)
- One anchored model-id regex; stripModelId is a replace
- Mark preview-scope global libs in MODULE_LIBS instead of modules[0]
- language is required on InteractiveEditor (codeModel always sets it)
- Drop unused return from Monaco setup

Co-Authored-By: Claude Opus 5.5 (1M context) 
Claude-Session: https://claude.ai/code/session_015H36Yk4WBpytw9L7RRVCTK
---
 website/src/components/Playground/README.md   |  2 +-
 .../Playground/editor/EditorSurface.tsx       |  5 +----
 .../Playground/editor/InteractiveEditor.tsx   |  4 ++--
 .../editor/__tests__/codeModel.test.tsx       | 11 +++++++---
 .../components/Playground/editor/codeModel.ts | 18 +++++++++--------
 .../monaco/__tests__/modelPath.test.ts        |  3 +++
 .../components/Playground/monaco/modelPath.ts |  5 ++---
 .../src/components/Playground/monaco/setup.ts |  1 -
 .../components/Playground/monaco/typeLibs.ts  | 20 ++++++++++++++-----
 9 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/website/src/components/Playground/README.md b/website/src/components/Playground/README.md
index babc9166761f..abc0ff64da35 100644
--- a/website/src/components/Playground/README.md
+++ b/website/src/components/Playground/README.md
@@ -92,7 +92,7 @@ DesignSystem/       components injected into preview scope
 
 ### Editor
 
-- Fence metastring: `title="…"`, `path="…"` (or bare `path=a.ts`), `collapsed`, `column`, `{1-3}`
+- Fence metastring: `title="…"`, `path="…"` (quotes optional), `collapsed`, `column`, `{1-3}`
   highlight ranges (pre-selected in Monaco); `language-*` class. Element props
   override metastring values (Demo passes them directly). `defaultTab`
   overrides `collapsed`.
diff --git a/website/src/components/Playground/editor/EditorSurface.tsx b/website/src/components/Playground/editor/EditorSurface.tsx
index 92a690d89c75..4f1a9a46a8cf 100644
--- a/website/src/components/Playground/editor/EditorSurface.tsx
+++ b/website/src/components/Playground/editor/EditorSurface.tsx
@@ -134,10 +134,7 @@ function TextEditTab({
   // Never branch on navigator / user agent outside BrowserOnly.
   const staticView =
     hidden ? null : (
-      
+      
     );
 
   return (
diff --git a/website/src/components/Playground/editor/InteractiveEditor.tsx b/website/src/components/Playground/editor/InteractiveEditor.tsx
index df7efb2a6192..0402ed7e5359 100644
--- a/website/src/components/Playground/editor/InteractiveEditor.tsx
+++ b/website/src/components/Playground/editor/InteractiveEditor.tsx
@@ -28,7 +28,7 @@ export interface InteractiveEditorProps {
   autoFocus?: boolean;
   /** Whether this tab is visible; re-measures height when it becomes so */
   isFocused?: boolean;
-  language?: string;
+  language: string;
   readOnly?: boolean;
 }
 
@@ -45,7 +45,7 @@ function InteractiveEditor({
   highlights,
   autoFocus = false,
   isFocused = false,
-  language = 'tsx',
+  language,
   readOnly = false,
 }: InteractiveEditorProps) {
   const editorOptions = useMemo(() => ({ ...options, readOnly }), [readOnly]);
diff --git a/website/src/components/Playground/editor/__tests__/codeModel.test.tsx b/website/src/components/Playground/editor/__tests__/codeModel.test.tsx
index 548d6fec34ce..ac28293a1e6c 100644
--- a/website/src/components/Playground/editor/__tests__/codeModel.test.tsx
+++ b/website/src/components/Playground/editor/__tests__/codeModel.test.tsx
@@ -68,13 +68,18 @@ describe('code document model', () => {
     ]);
   });
 
-  test('accepts an unquoted path', () => {
+  test('accepts unquoted title and path', () => {
     expect(
       parseCodeDocuments([
         code({ metastring: 'path=Todo.ts' }, 'a'),
         code({ metastring: "title='T' path='src/b.ts' {1}" }, 'b'),
-      ]).map(({ path }) => path),
-    ).toEqual(['Todo.ts', 'src/b.ts']);
+        code({ metastring: 'title=c.ts' }, 'c'),
+      ]).map(({ path, title }) => [path, title]),
+    ).toEqual([
+      ['Todo.ts', ''],
+      ['src/b.ts', 'T'],
+      ['c.ts', 'c.ts'],
+    ]);
   });
 
   test('updates only the addressed document', () => {
diff --git a/website/src/components/Playground/editor/codeModel.ts b/website/src/components/Playground/editor/codeModel.ts
index 4493981e275e..88bae079dc9e 100644
--- a/website/src/components/Playground/editor/codeModel.ts
+++ b/website/src/components/Playground/editor/codeModel.ts
@@ -16,6 +16,14 @@ export interface CodeModel {
   update: (index: number, value: string) => void;
 }
 
+/** `key="value"`, `key='value'` or bare `key=value` from a fence metastring */
+function metaValue(metastring: string, key: string): string | undefined {
+  return new RegExp(`\\b${key}=(?:(["'])(.*?)\\1|([^\\s"']+))`)
+    .exec(metastring)
+    ?.slice(2)
+    .find(value => value !== undefined);
+}
+
 export function parseCodeDocuments(
   children: string | React.ReactNode | React.ReactNode[],
   defaultTab?: string,
@@ -42,9 +50,7 @@ export function parseCodeDocuments(
       : child.props.children.props,
     )
     .map(({ children: code, metastring = '', ...rest }) => {
-      const title =
-        metastring.match(/title=(?["'])(?.*?)\1/)?.groups
-          ?.title ?? '';
+      const title = metaValue(metastring, 'title') ?? '';
       const language =
         /\blanguage-(?<language>[\w-]+)/.exec(rest.className ?? '')?.groups
           ?.language ?? 'tsx';
@@ -61,11 +67,7 @@ export function parseCodeDocuments(
           : /\bcollapsed\b/.test(metastring),
         col: /\bcolumn\b/.test(metastring),
         path:
-          // quoted (path="a.ts") or bare (path=a.ts)
-          /path=(?:(["'])(.*?)\1|([^\s"']+))/
-            .exec(metastring)
-            ?.slice(2)
-            .find(Boolean) ||
+          metaValue(metastring, 'path') ||
           (fileBase.includes('.') ? fileBase : `${fileBase}.${extension}`),
         highlights: /\{([\d\-,.]+)\}/.exec(metastring)?.[1],
         language,
diff --git a/website/src/components/Playground/monaco/__tests__/modelPath.test.ts b/website/src/components/Playground/monaco/__tests__/modelPath.test.ts
index 03d4c3d69774..372a63565b31 100644
--- a/website/src/components/Playground/monaco/__tests__/modelPath.test.ts
+++ b/website/src/components/Playground/monaco/__tests__/modelPath.test.ts
@@ -31,6 +31,9 @@ describe('model paths', () => {
         '/node_modules/react/index.d.ts',
       ]),
     ).toEqual(['/api.ts']);
+    expect(siblingFilePaths('/plain.ts', ['/plain.ts', '/other.ts'])).toEqual(
+      [],
+    );
   });
 
   test('useModelId is numeric and stable across renders', () => {
diff --git a/website/src/components/Playground/monaco/modelPath.ts b/website/src/components/Playground/monaco/modelPath.ts
index a636509c9fa2..44a8a80752ec 100644
--- a/website/src/components/Playground/monaco/modelPath.ts
+++ b/website/src/components/Playground/monaco/modelPath.ts
@@ -5,7 +5,6 @@ import { useMemo } from 'react';
  * files as `/<numeric id>/<file path>`. Go-to-definition and import
  * completions (./navigation.ts) rely on this shape.
  */
-const MODEL_ID_SEGMENT = /\/\d+\//;
 const MODEL_ID_ROOT = /^\/\d+\//;
 
 export function modelPath(editorId: string, filePath: string) {
@@ -14,8 +13,7 @@ export function modelPath(editorId: string, filePath: string) {
 
 /** `/123/src/api.ts` → `/src/api.ts` (unchanged when there is no id segment) */
 export function stripModelId(path: string) {
-  const candidateId = MODEL_ID_SEGMENT.exec(path)?.[0] ?? '';
-  return path.substring(candidateId.length - 1);
+  return path.replace(MODEL_ID_ROOT, '/');
 }
 
 /** `/123/src/api.ts` → `/123/` (undefined when there is no id segment) */
@@ -32,6 +30,7 @@ export function siblingFilePaths(
   modelPaths: readonly string[],
 ): string[] {
   const id = modelIdSegment(currentPath);
+  if (!id) return [];
   return modelPaths
     .filter(path => path !== currentPath && modelIdSegment(path) === id)
     .map(stripModelId);
diff --git a/website/src/components/Playground/monaco/setup.ts b/website/src/components/Playground/monaco/setup.ts
index 11ca8ba50f37..f63d68c3d422 100644
--- a/website/src/components/Playground/monaco/setup.ts
+++ b/website/src/components/Playground/monaco/setup.ts
@@ -51,6 +51,5 @@ if (typeof window !== 'undefined' && !isMobileOrBot()) {
 
     addTypeLibs(monaco, await typeLibsPromise);
     monaco.typescript.typescriptDefaults.setEagerModelSync(true);
-    return monaco;
   });
 }
diff --git a/website/src/components/Playground/monaco/typeLibs.ts b/website/src/components/Playground/monaco/typeLibs.ts
index eb9f9f0fa7be..e70ba8a9afff 100644
--- a/website/src/components/Playground/monaco/typeLibs.ts
+++ b/website/src/components/Playground/monaco/typeLibs.ts
@@ -8,11 +8,15 @@ import type * as Monaco from 'monaco-editor';
 
 type RawModule = Promise<{ default: string }>;
 
-/** `declare module "<name>"` libs, mounted at file:///node_modules/<dir>/index.d.ts */
+/**
+ * `declare module "<name>"` libs, mounted at file:///node_modules/<dir>/index.d.ts.
+ * `global` libs are also declared globally (they are in the preview scope).
+ */
 const MODULE_LIBS: readonly [
   name: string,
   dir: string,
   load: () => RawModule,
+  global?: true,
 ][] = [
   [
     'react',
@@ -21,6 +25,7 @@ const MODULE_LIBS: readonly [
       import(
         /* webpackChunkName: 'reactDTS' */ '!!raw-loader?esModule=false!../editor-types/react.d.ts'
       ),
+    true,
   ],
   [
     'bignumber.js',
@@ -152,7 +157,10 @@ export function fetchTypeLibs(): Promise<TypeLibs> {
 
   return Promise.all([
     settled(MODULE_LIBS.map(([, , load]) => load())),
-    settled([loadGlobals()]),
+    loadGlobals().then(
+      ({ default: lib }) => lib,
+      () => '',
+    ),
     settled(
       DATA_CLIENT_ENTRIES.map(
         entry =>
@@ -161,7 +169,7 @@ export function fetchTypeLibs(): Promise<TypeLibs> {
           ),
       ),
     ),
-  ]).then(([modules, [globals], dataClient]) => ({
+  ]).then(([modules, globals, dataClient]) => ({
     modules,
     dataClient,
     globals,
@@ -173,7 +181,6 @@ export function addTypeLibs(
   { modules, dataClient, globals }: TypeLibs,
 ) {
   const { typescriptDefaults } = monaco.typescript;
-  const react = modules[0];
 
   typescriptDefaults.addExtraLib(
     `declare module "react/jsx-runtime" {
@@ -203,7 +210,10 @@ export function addTypeLibs(
   });
 
   // React, NumberFlow and Temporal are also globals in the preview scope
-  typescriptDefaults.addExtraLib(`declare globals { ${react} }`);
+  MODULE_LIBS.forEach(([, , , global], i) => {
+    if (global)
+      typescriptDefaults.addExtraLib(`declare globals { ${modules[i]} }`);
+  });
   typescriptDefaults.addExtraLib(
     `declare globals { export { default as NumberFlow } from '@number-flow/react'; }`,
   );

From 93e15b759ae440a9a86bfc8f93cc081445823604 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 4 Oct 2026 09:15:13 +0000
Subject: [PATCH 14/15] internal(website): Simplify playground globals parsing

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TkVym3YjjuSjBKhLLwvZm6
---
 .../components/Playground/monaco/typeLibs.ts  | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/website/src/components/Playground/monaco/typeLibs.ts b/website/src/components/Playground/monaco/typeLibs.ts
index 08bb7150604f..d7314e835e38 100644
--- a/website/src/components/Playground/monaco/typeLibs.ts
+++ b/website/src/components/Playground/monaco/typeLibs.ts
@@ -107,6 +107,18 @@ const loadGlobals = (): RawModule =>
     /* webpackChunkName: 'globalsDTS' */ '!!raw-loader?esModule=false!../editor-types/globals.d.ts'
   );
 
+/** Module name for editor-types/globals.d.ts; only globalScopeLib() imports it. */
+const GLOBALS_MODULE = 'playground-globals';
+
+/**
+ * Exports not aliased as globals: `default`, and names that would redeclare a
+ * built-in global (those keep built-in types; use `schema.Array`, `schema.Object`).
+ */
+const SKIP_NAMES = new Set(['default', 'Array', 'Object']);
+
+/** Top-level `export { … };` lists (not `export { … } from '…'` re-exports) */
+const EXPORT_LIST = /^export\s*\{([^}]*)\}\s*;/gm;
+
 /** Ambient declarations for names the preview injects via react-live scope (see ../preview/scope.ts). */
 const PREVIEW_SCOPE_DECLARATIONS = `declare function render(component:JSX.Element):void;
         declare function uuid(): string;
@@ -237,18 +249,6 @@ export function addTypeLibs(
   );
 }
 
-/** Module name for editor-types/globals.d.ts; only globalScopeLib() imports it. */
-const GLOBALS_MODULE = 'playground-globals';
-
-/**
- * Names the preview scope provides that would redeclare a built-in global.
- * They keep their built-in types (use `schema.Array`, `schema.Object`).
- */
-const BUILTIN_NAMES = new Set(['Array', 'Object']);
-
-/** Top-level `export { … };` lists (not `export { … } from '…'` re-exports) */
-const EXPORT_LIST = /^export\s*\{([^}]*)\}\s*;/gm;
-
 /**
  * globals.d.ts is a rollup-generated module that exports its declarations
  * through a top-level `export { … };` list. Returns those names, and the source
@@ -265,8 +265,8 @@ function parseGlobalsLib(globals: string): {
       .split(',')
       .map(specifier => specifier.trim().replace(/^type\s+/, ''))
       .filter(Boolean);
-    specifiers.forEach(specifier =>
-      names.push(specifier.split(/\s+as\s+/).pop() as string),
+    names.push(
+      ...specifiers.map(specifier => specifier.split(/\s+as\s+/).pop()!),
     );
     return `export { ${specifiers.join(', ')} };`;
   });
@@ -274,7 +274,7 @@ function parseGlobalsLib(globals: string): {
     console.warn('Playground: no exports found in globals.d.ts');
   return {
     source,
-    names: names.filter(name => name !== 'default' && !BUILTIN_NAMES.has(name)),
+    names: names.filter(name => !SKIP_NAMES.has(name)),
   };
 }
 

From 8bdc3ab72e6e7407adbee202a8d2a24b193c720e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 5 Oct 2026 03:24:59 +0000
Subject: [PATCH 15/15] internal(website): Simplify playground editor-types
 build

Bundle globals.d.ts from the editor-types rollup config (one rollup run,
identical output), make mockFetch generic to match its editor declaration,
and trim the README note.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TkVym3YjjuSjBKhLLwvZm6
---
 scripts/copywebsitetypes.sh                        |  5 ++---
 .../rollup-plugins/editor-types.rollup.config.js   |  7 +++++++
 scripts/rollup-plugins/globals.rollup.config.js    | 14 --------------
 website/src/components/Playground/README.md        |  4 ++--
 website/src/components/Playground/preview/scope.ts |  6 +++---
 5 files changed, 14 insertions(+), 22 deletions(-)
 delete mode 100644 scripts/rollup-plugins/globals.rollup.config.js

diff --git a/scripts/copywebsitetypes.sh b/scripts/copywebsitetypes.sh
index fc644dded06f..2e8f4947a2fa 100755
--- a/scripts/copywebsitetypes.sh
+++ b/scripts/copywebsitetypes.sh
@@ -21,6 +21,5 @@ cp ./node_modules/temporal-spec/index.d.ts ./website/src/components/Playground/e
 cp ./node_modules/bignumber.js/dist/bignumber.d.mts ./website/src/components/Playground/editor-types/bignumber.d.ts
 cp ./node_modules/@types/qs/index.d.ts ./website/src/components/Playground/editor-types/qs.d.ts
 cp ./node_modules/path-to-regexp/dist/index.d.ts ./website/src/components/Playground/editor-types/path-to-regexp.d.ts
-yarn run rollup --config ./scripts/rollup-plugins/editor-types.rollup.config.js
-rm ./website/src/components/Playground/editor-types/globals.d.ts
-yarn run rollup --config ./scripts/rollup-plugins/globals.rollup.config.js
\ No newline at end of file
+rm -f ./website/src/components/Playground/editor-types/globals.d.ts
+yarn run rollup --config ./scripts/rollup-plugins/editor-types.rollup.config.js
\ No newline at end of file
diff --git a/scripts/rollup-plugins/editor-types.rollup.config.js b/scripts/rollup-plugins/editor-types.rollup.config.js
index f81eef58bd7c..cc1f967c2e95 100644
--- a/scripts/rollup-plugins/editor-types.rollup.config.js
+++ b/scripts/rollup-plugins/editor-types.rollup.config.js
@@ -2,6 +2,8 @@ import fs from 'fs';
 import path from 'path';
 import dts from 'rollup-plugin-dts';
 
+import { typeConfig } from './rollup-utils.js';
+
 // Bundles a package's .d.ts into one file for the playground editor
 // (website/src/components/Playground/monaco/typeLibs.ts)
 
@@ -39,4 +41,9 @@ export default [
     '@number-flow/react.d.ts',
     ['react'],
   ),
+  {
+    ...typeConfig,
+    input: './scripts/globals.ts',
+    output: { file: `${EDITOR_TYPES}/globals.d.ts`, format: 'es' },
+  },
 ];
diff --git a/scripts/rollup-plugins/globals.rollup.config.js b/scripts/rollup-plugins/globals.rollup.config.js
deleted file mode 100644
index c0c6d8da0384..000000000000
--- a/scripts/rollup-plugins/globals.rollup.config.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { typeConfig } from './rollup-utils.js';
-
-export default [
-  {
-    ...typeConfig,
-    input: './scripts/globals.ts',
-    output: [
-      {
-        file: './website/src/components/Playground/editor-types/globals.d.ts',
-        format: 'es',
-      },
-    ],
-  },
-];
diff --git a/website/src/components/Playground/README.md b/website/src/components/Playground/README.md
index 2840d5071857..3c59fb3751c0 100644
--- a/website/src/components/Playground/README.md
+++ b/website/src/components/Playground/README.md
@@ -118,8 +118,8 @@ DesignSystem/       components injected into preview scope
   stripped of imports/exports by `transformCode`, and run `noInline`
   (`render(<App />)`) with `preview/scope.ts` as globals. Keep
   `monaco/typeLibs.ts` declarations in sync with the scope: `globalScopeLib()`
-  aliases library exports into `declare global` (valid TS only; never
-  `declare globals`), and `Array`/`Object` keep their built-in types.
+  aliases library exports into `declare global`, and `Array`/`Object` keep
+  their built-in types (they're type-only exports).
 - Each playground gets its own `DataProvider` store (`MockResolver` serves
   `fixtures`); `memo(Preview)` keeps it from re-rendering on code edits.
 - Store inspector open state persists per `groupId` via tab storage and
diff --git a/website/src/components/Playground/preview/scope.ts b/website/src/components/Playground/preview/scope.ts
index 2bdc881be02f..3d07f895c2c1 100644
--- a/website/src/components/Playground/preview/scope.ts
+++ b/website/src/components/Playground/preview/scope.ts
@@ -14,13 +14,13 @@ function randomFloatInRange(min: number, max: number, decimals: number) {
   return parseFloat((Math.random() * (max - min) + min).toFixed(decimals));
 }
 
-function mockFetch(
-  getResponse: (...args: any[]) => unknown,
+function mockFetch<T>(
+  getResponse: (...args: any[]) => T,
   name?: string,
   delay = 150,
 ) {
   const fetch = (...args: any[]) =>
-    new Promise(resolve =>
+    new Promise<T>(resolve =>
       setTimeout(() => resolve(getResponse(...args)), delay),
     );
   if (name)