@docusaurus/theme-live-codeblock 3.9.2 → 3.10.1

package/README.md

@@ -1,4 +1,4 @@
-# Docusaurus Live Codeblock
+# `@docusaurus/theme-live-codeblock`
 
 You can create live code editors with a code block `live` meta string.
 

package/lib/client/context.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type ReactNode } from 'react';
+type PlaygroundContextValue = {
+    reset: () => void;
+};
+export declare function PlaygroundProvider({ value, children, }: {
+    value: PlaygroundContextValue;
+    children: ReactNode;
+}): ReactNode;
+export declare function usePlayground(): PlaygroundContextValue;
+export {};

package/lib/client/context.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { createContext, useContext } from 'react';
+const PlaygroundContext = createContext(null);
+export function PlaygroundProvider({ value, children, }) {
+    return (<PlaygroundContext.Provider value={value}>
+      {children}
+    </PlaygroundContext.Provider>);
+}
+export function usePlayground() {
+    const context = useContext(PlaygroundContext);
+    if (!context) {
+        throw new Error('usePlayground must be used within PlaygroundProvider');
+    }
+    return context;
+}

package/lib/client/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { usePlayground, PlaygroundProvider } from './context';

package/lib/client/index.js

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { usePlayground, PlaygroundProvider } from './context';

package/lib/theme/CodeBlock/index.js

@@ -8,7 +8,11 @@ import React from 'react';
 import OriginalCodeBlock from '@theme-init/CodeBlock';
 import LiveCodeBlock from '@theme/LiveCodeBlock';
 function isLiveCodeBlock(props) {
-  return !!props.live;
+  return (
+    !!props.live &&
+    (typeof props.children === 'undefined' ||
+      typeof props.children === 'string')
+  );
 }
 export default function CodeBlockEnhancer(props) {
   return isLiveCodeBlock(props) ? (

package/lib/theme/Playground/Buttons/ResetButton/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { ReactNode } from 'react';
+import type { Props } from '@theme/Playground/Buttons/ResetButton';
+export default function ResetButton({ className }: Props): ReactNode;

package/lib/theme/Playground/Buttons/ResetButton/index.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import {usePlayground} from '@docusaurus/theme-live-codeblock/client';
+import styles from './styles.module.css';
+function Icon() {
+  return (
+    <svg
+      className={styles.resetButtonIcon}
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      aria-hidden="true">
+      <path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
+      <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
+    </svg>
+  );
+}
+function Label() {
+  return (
+    <Translate
+      id="theme.Playground.buttons.reset"
+      description="The reset button label for live code blocks">
+      Reset
+    </Translate>
+  );
+}
+export default function ResetButton({className}) {
+  const {reset} = usePlayground();
+  return (
+    <button
+      type="button"
+      aria-label="Reset code to original"
+      title="Reset"
+      className={clsx('clean-btn', className, styles.resetButton)}
+      onClick={() => reset()}>
+      <Icon />
+      <Label />
+    </button>
+  );
+}

package/lib/theme/Playground/Buttons/ResetButton/styles.module.css

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.resetButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-global-radius);
+  background: var(--ifm-button-background-color);
+  color: var(--ifm-font-color-base);
+  cursor: pointer;
+  transition: all var(--ifm-transition-fast);
+}
+
+.resetButton:hover {
+  background: var(--ifm-color-emphasis-200);
+  border-color: var(--ifm-color-emphasis-400);
+}
+
+.resetButton:active {
+  background: var(--ifm-color-emphasis-300);
+}
+
+.resetButtonIcon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}

package/lib/theme/Playground/Editor/index.js

@@ -9,12 +9,13 @@ import {LiveEditor} from 'react-live';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import Translate from '@docusaurus/Translate';
 import PlaygroundHeader from '@theme/Playground/Header';
+import ResetButton from '@theme/Playground/Buttons/ResetButton';
 import styles from './styles.module.css';
 export default function PlaygroundEditor() {
   const isBrowser = useIsBrowser();
   return (
     <>
-      <PlaygroundHeader>
+      <PlaygroundHeader buttons={<ResetButton />}>
         <Translate
           id="theme.Playground.liveEditor"
           description="The live editor label of the live codeblocks">

package/lib/theme/Playground/Header/index.d.ts

@@ -5,6 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { type ReactNode } from 'react';
-export default function PlaygroundHeader({ children, }: {
-    children: ReactNode;
-}): ReactNode;
+import type { Props } from '@theme/Playground/Header';
+export default function PlaygroundHeader({ children, buttons, }: Props): ReactNode;

package/lib/theme/Playground/Header/index.js

@@ -7,6 +7,13 @@
 import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
-export default function PlaygroundHeader({children}) {
-  return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
+export default function PlaygroundHeader({children, buttons}) {
+  return (
+    <div className={clsx(styles.playgroundHeader)}>
+      <div className={styles.playgroundHeaderContent}>{children}</div>
+      {buttons && (
+        <div className={styles.playgroundHeaderButtons}>{buttons}</div>
+      )}
+    </div>
+  );
 }

package/lib/theme/Playground/Header/styles.module.css

@@ -6,6 +6,9 @@
  */
 
 .playgroundHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   letter-spacing: 0.08rem;
   padding: 0.75rem;
   text-transform: uppercase;
@@ -15,7 +18,12 @@
   font-size: var(--ifm-code-font-size);
 }
 
-.playgroundHeader:first-of-type {
-  background: var(--ifm-color-emphasis-700);
-  color: var(--ifm-color-content-inverse);
+.playgroundHeaderContent {
+  font-weight: var(--ifm-font-weight-bold);
+  font-size: 0.875rem;
+}
+
+.playgroundHeaderButtons {
+  display: flex;
+  gap: 0.5rem;
 }

package/lib/theme/Playground/Layout/index.d.ts

@@ -5,4 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { type ReactNode } from 'react';
-export default function PlaygroundLayout(): ReactNode;
+import type { Props } from '@theme/Playground/Layout';
+export default function PlaygroundLayout(props: Props): ReactNode;

package/lib/theme/Playground/Layout/index.js

@@ -12,11 +12,12 @@ function useLiveCodeBlockThemeConfig() {
   const themeConfig = useThemeConfig();
   return themeConfig.liveCodeBlock;
 }
-export default function PlaygroundLayout() {
-  const {playgroundPosition} = useLiveCodeBlockThemeConfig();
+export default function PlaygroundLayout(props) {
+  const themeConfig = useLiveCodeBlockThemeConfig();
+  const position = props.position ?? themeConfig.playgroundPosition;
   return (
     <>
-      {playgroundPosition === 'top' ? (
+      {position === 'top' ? (
         <>
           <PlaygroundPreview />
           <PlaygroundEditor />

package/lib/theme/Playground/Provider/index.d.ts

@@ -6,4 +6,4 @@
  */
 import { type ReactNode } from 'react';
 import type { Props } from '@theme/Playground/Provider';
-export default function PlaygroundProvider({ code, children, ...props }: Props): ReactNode;
+export default function PlaygroundProvider(props: Props): ReactNode;

package/lib/theme/Playground/Provider/index.js

@@ -4,13 +4,14 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import {LiveProvider} from 'react-live';
+import {PlaygroundProvider as PlaygroundProviderComponent} from '@docusaurus/theme-live-codeblock/client';
 import {usePrismTheme} from '@docusaurus/theme-common';
 // this should rather be a stable function
 // see https://github.com/facebook/docusaurus/issues/9630#issuecomment-1855682643
 const DEFAULT_TRANSFORM_CODE = (code) => `${code};`;
-export default function PlaygroundProvider({code, children, ...props}) {
+function LiveProviderComponent({code, children, ...props}) {
   const prismTheme = usePrismTheme();
   const noInline = props.metastring?.includes('noInline') ?? false;
   return (
@@ -24,3 +25,13 @@ export default function PlaygroundProvider({code, children, ...props}) {
     </LiveProvider>
   );
 }
+export default function PlaygroundProvider(props) {
+  const [resetKey, setResetKey] = useState(0);
+  const reset = useCallback(() => setResetKey((prev) => prev + 1), []);
+  const value = useMemo(() => ({reset}), [reset]);
+  return (
+    <PlaygroundProviderComponent key={resetKey} value={value}>
+      <LiveProviderComponent {...props} />
+    </PlaygroundProviderComponent>
+  );
+}

package/lib/theme/Playground/index.d.ts

@@ -6,4 +6,4 @@
  */
 import { type ReactNode } from 'react';
 import type { Props } from '@theme/Playground';
-export default function Playground({ children, transformCode, ...props }: Props): ReactNode;
+export default function Playground({ children, transformCode, position, ...props }: Props): ReactNode;

package/lib/theme/Playground/index.js

@@ -8,11 +8,16 @@ import React from 'react';
 import PlaygroundProvider from '@theme/Playground/Provider';
 import PlaygroundContainer from '@theme/Playground/Container';
 import PlaygroundLayout from '@theme/Playground/Layout';
-export default function Playground({children, transformCode, ...props}) {
+export default function Playground({
+  children,
+  transformCode,
+  position,
+  ...props
+}) {
   return (
     <PlaygroundContainer>
       <PlaygroundProvider code={children} {...props}>
-        <PlaygroundLayout />
+        <PlaygroundLayout position={position} />
       </PlaygroundProvider>
     </PlaygroundContainer>
   );

package/package.json

@@ -1,12 +1,24 @@
 {
   "name": "@docusaurus/theme-live-codeblock",
-  "version": "3.9.2",
+  "version": "3.10.1",
   "description": "Docusaurus live code block component.",
   "main": "lib/index.js",
   "types": "src/theme-live-codeblock.d.ts",
   "sideEffects": [
     "lib/theme/Playground/*"
   ],
+  "exports": {
+    "./lib/*": "./lib/*",
+    "./src/*": "./src/*",
+    "./client": {
+      "type": "./lib/client/index.d.ts",
+      "default": "./lib/client/index.js"
+    },
+    ".": {
+      "types": "./src/theme-live-codeblock.d.ts",
+      "default": "./lib/index.js"
+    }
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -23,10 +35,10 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "3.9.2",
-    "@docusaurus/theme-common": "3.9.2",
-    "@docusaurus/theme-translations": "3.9.2",
-    "@docusaurus/utils-validation": "3.9.2",
+    "@docusaurus/core": "3.10.1",
+    "@docusaurus/theme-common": "3.10.1",
+    "@docusaurus/theme-translations": "3.10.1",
+    "@docusaurus/utils-validation": "3.10.1",
     "@philpl/buble": "^0.19.7",
     "clsx": "^2.0.0",
     "fs-extra": "^11.1.1",
@@ -34,7 +46,7 @@
     "tslib": "^2.6.0"
   },
   "devDependencies": {
-    "@docusaurus/types": "3.9.2",
+    "@docusaurus/types": "3.10.1",
     "@types/buble": "^0.20.1"
   },
   "peerDependencies": {
@@ -44,5 +56,5 @@
   "engines": {
     "node": ">=20.0"
   },
-  "gitHead": "abfbe5621b08407bc3dcbe6111ff118d4c22f7a1"
+  "gitHead": "41c1a458ecb07d61b6df2761ea4bc1b13db49d12"
 }

package/src/client/context.tsx

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {createContext, useContext, type ReactNode} from 'react';
+
+type PlaygroundContextValue = {
+  reset: () => void;
+};
+
+const PlaygroundContext = createContext<PlaygroundContextValue | null>(null);
+
+export function PlaygroundProvider({
+  value,
+  children,
+}: {
+  value: PlaygroundContextValue;
+  children: ReactNode;
+}): ReactNode {
+  return (
+    <PlaygroundContext.Provider value={value}>
+      {children}
+    </PlaygroundContext.Provider>
+  );
+}
+
+export function usePlayground(): PlaygroundContextValue {
+  const context = useContext(PlaygroundContext);
+  if (!context) {
+    throw new Error('usePlayground must be used within PlaygroundProvider');
+  }
+  return context;
+}

package/src/client/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export {usePlayground, PlaygroundProvider} from './context';

package/src/theme/CodeBlock/index.tsx

@@ -19,8 +19,14 @@ declare module '@theme/CodeBlock' {
   }
 }
 
-function isLiveCodeBlock(props: CodeBlockProps): boolean {
-  return !!props.live;
+function isLiveCodeBlock(
+  props: CodeBlockProps,
+): props is {live: true; children: string | undefined} {
+  return (
+    !!props.live &&
+    (typeof props.children === 'undefined' ||
+      typeof props.children === 'string')
+  );
 }
 
 export default function CodeBlockEnhancer(props: CodeBlockProps): ReactNode {

package/src/theme/Playground/Buttons/ResetButton/index.tsx

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {ReactNode} from 'react';
+import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import {usePlayground} from '@docusaurus/theme-live-codeblock/client';
+import type {Props} from '@theme/Playground/Buttons/ResetButton';
+import styles from './styles.module.css';
+
+function Icon() {
+  return (
+    <svg
+      className={styles.resetButtonIcon}
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      aria-hidden="true">
+      <path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
+      <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
+    </svg>
+  );
+}
+
+function Label() {
+  return (
+    <Translate
+      id="theme.Playground.buttons.reset"
+      description="The reset button label for live code blocks">
+      Reset
+    </Translate>
+  );
+}
+
+export default function ResetButton({className}: Props): ReactNode {
+  const {reset} = usePlayground();
+  return (
+    <button
+      type="button"
+      aria-label="Reset code to original"
+      title="Reset"
+      className={clsx('clean-btn', className, styles.resetButton)}
+      onClick={() => reset()}>
+      <Icon />
+      <Label />
+    </button>
+  );
+}

package/src/theme/Playground/Buttons/ResetButton/styles.module.css

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.resetButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-global-radius);
+  background: var(--ifm-button-background-color);
+  color: var(--ifm-font-color-base);
+  cursor: pointer;
+  transition: all var(--ifm-transition-fast);
+}
+
+.resetButton:hover {
+  background: var(--ifm-color-emphasis-200);
+  border-color: var(--ifm-color-emphasis-400);
+}
+
+.resetButton:active {
+  background: var(--ifm-color-emphasis-300);
+}
+
+.resetButtonIcon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}

package/src/theme/Playground/Editor/index.tsx

@@ -10,14 +10,14 @@ import {LiveEditor} from 'react-live';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import Translate from '@docusaurus/Translate';
 import PlaygroundHeader from '@theme/Playground/Header';
-
+import ResetButton from '@theme/Playground/Buttons/ResetButton';
 import styles from './styles.module.css';
 
 export default function PlaygroundEditor(): ReactNode {
   const isBrowser = useIsBrowser();
   return (
     <>
-      <PlaygroundHeader>
+      <PlaygroundHeader buttons={<ResetButton />}>
         <Translate
           id="theme.Playground.liveEditor"
           description="The live editor label of the live codeblocks">

package/src/theme/Playground/Header/index.tsx

@@ -7,13 +7,20 @@
 
 import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
+import type {Props} from '@theme/Playground/Header';
 
 import styles from './styles.module.css';
 
 export default function PlaygroundHeader({
   children,
-}: {
-  children: ReactNode;
-}): ReactNode {
-  return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
+  buttons,
+}: Props): ReactNode {
+  return (
+    <div className={clsx(styles.playgroundHeader)}>
+      <div className={styles.playgroundHeaderContent}>{children}</div>
+      {buttons && (
+        <div className={styles.playgroundHeaderButtons}>{buttons}</div>
+      )}
+    </div>
+  );
 }

package/src/theme/Playground/Header/styles.module.css

@@ -6,6 +6,9 @@
  */
 
 .playgroundHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   letter-spacing: 0.08rem;
   padding: 0.75rem;
   text-transform: uppercase;
@@ -15,7 +18,12 @@
   font-size: var(--ifm-code-font-size);
 }
 
-.playgroundHeader:first-of-type {
-  background: var(--ifm-color-emphasis-700);
-  color: var(--ifm-color-content-inverse);
+.playgroundHeaderContent {
+  font-weight: var(--ifm-font-weight-bold);
+  font-size: 0.875rem;
+}
+
+.playgroundHeaderButtons {
+  display: flex;
+  gap: 0.5rem;
 }

package/src/theme/Playground/Layout/index.tsx

@@ -9,6 +9,7 @@ import React, {type ReactNode} from 'react';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import PlaygroundPreview from '@theme/Playground/Preview';
 import PlaygroundEditor from '@theme/Playground/Editor';
+import type {Props} from '@theme/Playground/Layout';
 
 import type {ThemeConfig} from '@docusaurus/theme-live-codeblock';
 
@@ -17,11 +18,12 @@ function useLiveCodeBlockThemeConfig() {
   return themeConfig.liveCodeBlock;
 }
 
-export default function PlaygroundLayout(): ReactNode {
-  const {playgroundPosition} = useLiveCodeBlockThemeConfig();
+export default function PlaygroundLayout(props: Props): ReactNode {
+  const themeConfig = useLiveCodeBlockThemeConfig();
+  const position = props.position ?? themeConfig.playgroundPosition;
   return (
     <>
-      {playgroundPosition === 'top' ? (
+      {position === 'top' ? (
         <>
           <PlaygroundPreview />
           <PlaygroundEditor />

package/src/theme/Playground/Provider/index.tsx

@@ -5,21 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ReactNode} from 'react';
+import React, {type ReactNode, useCallback, useMemo, useState} from 'react';
 import {LiveProvider} from 'react-live';
+import {PlaygroundProvider as PlaygroundProviderComponent} from '@docusaurus/theme-live-codeblock/client';
 import {usePrismTheme} from '@docusaurus/theme-common';
-
 import type {Props} from '@theme/Playground/Provider';
 
 // this should rather be a stable function
 // see https://github.com/facebook/docusaurus/issues/9630#issuecomment-1855682643
 const DEFAULT_TRANSFORM_CODE = (code: string) => `${code};`;
 
-export default function PlaygroundProvider({
-  code,
-  children,
-  ...props
-}: Props): ReactNode {
+function LiveProviderComponent({code, children, ...props}: Props): ReactNode {
   const prismTheme = usePrismTheme();
   const noInline = props.metastring?.includes('noInline') ?? false;
   return (
@@ -33,3 +29,15 @@ export default function PlaygroundProvider({
     </LiveProvider>
   );
 }
+
+export default function PlaygroundProvider(props: Props): ReactNode {
+  const [resetKey, setResetKey] = useState(0);
+  const reset = useCallback(() => setResetKey((prev) => prev + 1), []);
+  const value = useMemo(() => ({reset}), [reset]);
+
+  return (
+    <PlaygroundProviderComponent key={resetKey} value={value}>
+      <LiveProviderComponent {...props} />
+    </PlaygroundProviderComponent>
+  );
+}

package/src/theme/Playground/index.tsx

@@ -15,12 +15,13 @@ import type {Props} from '@theme/Playground';
 export default function Playground({
   children,
   transformCode,
+  position,
   ...props
 }: Props): ReactNode {
   return (
     <PlaygroundContainer>
       <PlaygroundProvider code={children} {...props}>
-        <PlaygroundLayout />
+        <PlaygroundLayout position={position} />
       </PlaygroundProvider>
     </PlaygroundContainer>
   );

package/src/theme-live-codeblock.d.ts

@@ -9,17 +9,24 @@
 /// <reference types="@docusaurus/module-type-aliases" />
 
 declare module '@docusaurus/theme-live-codeblock' {
+  import type {PlaygroundPosition} from '@theme/Playground';
+
   export type ThemeConfig = {
     liveCodeBlock: {
-      playgroundPosition: 'top' | 'bottom';
+      playgroundPosition: PlaygroundPosition;
     };
   };
 }
 
 declare module '@theme/LiveCodeBlock' {
+  import type {ReactNode} from 'react';
   import type {Props as BaseProps} from '@theme/CodeBlock';
 
-  export interface Props extends BaseProps {}
+  type CodeBlockProps = Omit<BaseProps, 'children'>;
+
+  export interface Props extends CodeBlockProps {
+    children?: string;
+  }
 
   export default function LiveCodeBlock(props: Props): ReactNode;
 }
@@ -29,14 +36,21 @@ declare module '@theme/Playground' {
   import type {Props as BaseProps} from '@theme/CodeBlock';
   import type {LiveProvider} from 'react-live';
 
-  type CodeBlockProps = Omit<BaseProps, 'className' | 'language' | 'title'>;
+  type CodeBlockProps = Omit<
+    BaseProps,
+    'children' | 'className' | 'language' | 'title'
+  >;
   type LiveProviderProps = React.ComponentProps<typeof LiveProvider>;
 
+  export type PlaygroundPosition = 'top' | 'bottom';
+
   export interface Props extends CodeBlockProps, LiveProviderProps {
     // Allow empty live playgrounds
     children?: string;
+    position?: PlaygroundPosition;
   }
-  export default function Playground(props: LiveProviderProps): ReactNode;
+
+  export default function Playground(props: Props): ReactNode;
 }
 
 declare module '@theme/Playground/Provider' {
@@ -48,6 +62,13 @@ declare module '@theme/Playground/Provider' {
     children: ReactNode;
   }
 
+  export interface ResetContextValue {
+    resetKey: number;
+    reset: () => void;
+  }
+
+  export const PlaygroundResetContext: React.Context<ResetContextValue | null>;
+  export function usePlaygroundReset(): ResetContextValue;
   export default function PlaygroundProvider(props: Props): ReactNode;
 }
 
@@ -63,9 +84,11 @@ declare module '@theme/Playground/Container' {
 
 declare module '@theme/Playground/Layout' {
   import type {ReactNode} from 'react';
+  import type {PlaygroundPosition} from '@theme/Playground';
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface Props {}
+  export interface Props {
+    position?: PlaygroundPosition;
+  }
 
   export default function PlaygroundLayout(props: Props): ReactNode;
 }
@@ -91,12 +114,24 @@ declare module '@theme/Playground/Editor' {
 declare module '@theme/Playground/Header' {
   import type {ReactNode} from 'react';
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface Props {}
+  export interface Props {
+    children: ReactNode;
+    buttons?: ReactNode;
+  }
 
   export default function PlaygroundHeader(props: Props): ReactNode;
 }
 
+declare module '@theme/Playground/Buttons/ResetButton' {
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    className?: string;
+  }
+
+  export default function ResetButton(props: Props): ReactNode;
+}
+
 declare module '@theme/ReactLiveScope' {
   type Scope = {
     [key: string]: unknown;