fix: update npm install paths (#379)

decepulis · web-flow · commit bfaf93fda950 · 2026-02-02T09:53:10.000-06:00
diff --git a/.gitignore b/.gitignore
@@ -23,7 +23,6 @@ out/
 packages/*/types/
 *.tsbuildinfo
 .turbo/
-generated-icons/
 coverage/
 *.lcov
 .nyc_output/
@@ -138,4 +137,4 @@ bun.lockb
 # -------------------------
 # AI Agent Config (Generated)
 # -------------------------
-.opencode
+.opencode
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/FullscreenEnter.tsx b/packages/__tech-preview__/react/src/icons/generated-icons/FullscreenEnter.tsx
@@ -0,0 +1,20 @@
+/**
+ * @fileoverview Auto-generated React component from SVG
+ *
+ * This file is automatically generated by SVGR from SVG files located in:
+ * packages/icons/assets/
+ *
+ * DO NOT EDIT THIS FILE DIRECTLY.
+ *
+ * To modify this icon:
+ * 1. Edit the corresponding SVG file in packages/icons/assets/
+ * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
+ *
+ * @generated
+ */
+import type { IconProps } from '../types';
+const SvgFullscreenEnter = ({
+  color = 'currentColor',
+  ...props
+}: IconProps): JSX.Element => <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 18 18" fill={color} aria-hidden="true" {...props}><path d="M9.57,3.617c-.156-.375-.519-.617-.924-.617H4c-.552,0-1,.449-1,1v4.646c0,.406,.242,.769,.618,.924,.124,.051,.255,.076,.383,.076,.261,0,.515-.102,.706-.293l4.647-4.647c.286-.287,.371-.715,.216-1.089Z" className="arrow-1" /><path d="M14.382,8.429c-.377-.156-.804-.068-1.089,.217l-4.647,4.647c-.286,.287-.371,.715-.216,1.089,.156,.375,.519,.617,.924,.617h4.646c.552,0,1-.449,1-1v-4.646c0-.406-.242-.769-.618-.924Z" className="arrow-2" /></svg>;
+export default SvgFullscreenEnter;
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/FullscreenEnterAlt.tsx b/packages/__tech-preview__/react/src/icons/generated-icons/FullscreenEnterAlt.tsx
@@ -0,0 +1,20 @@
+/**
+ * @fileoverview Auto-generated React component from SVG
+ *
+ * This file is automatically generated by SVGR from SVG files located in:
+ * packages/icons/assets/
+ *
+ * DO NOT EDIT THIS FILE DIRECTLY.
+ *
+ * To modify this icon:
+ * 1. Edit the corresponding SVG file in packages/icons/assets/
+ * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
+ *
+ * @generated
+ */
+import type { IconProps } from '../types';
+const SvgFullscreenEnterAlt = ({
+  color = 'currentColor',
+  ...props
+}: IconProps): JSX.Element => <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 18 18" fill={color} aria-hidden="true" {...props}><path d="M15.25 2h.017q.03 0 .06.004za.75.75 0 0 1 .599.298l-.069-.078a.75.75 0 0 1 .22.53v4.5a.75.75 0 1 1-1.5 0V4.56l-3.22 3.22a.75.75 0 0 1-1.06-1.06l3.218-3.22H10.75a.75.75 0 0 1-.743-.648L10 2.75a.75.75 0 0 1 .75-.75z" className="arrow-1" /><path d="M2.75 10a.75.75 0 0 1 .75.75v2.688l3.22-3.218a.75.75 0 0 1 1.06 1.06L4.56 14.5h2.69a.75.75 0 0 1 .743.648L8 15.25a.75.75 0 0 1-.75.75H2.722l-.046-.004.074.004a.75.75 0 0 1-.599-.298l.069.078a.75.75 0 0 1-.22-.53v-4.5a.75.75 0 0 1 .75-.75" className="arrow-2" /></svg>;
+export default SvgFullscreenEnterAlt;
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/FullscreenExit.tsx b/packages/__tech-preview__/react/src/icons/generated-icons/FullscreenExit.tsx
@@ -0,0 +1,20 @@
+/**
+ * @fileoverview Auto-generated React component from SVG
+ *
+ * This file is automatically generated by SVGR from SVG files located in:
+ * packages/icons/assets/
+ *
+ * DO NOT EDIT THIS FILE DIRECTLY.
+ *
+ * To modify this icon:
+ * 1. Edit the corresponding SVG file in packages/icons/assets/
+ * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
+ *
+ * @generated
+ */
+import type { IconProps } from '../types';
+const SvgFullscreenExit = ({
+  color = 'currentColor',
+  ...props
+}: IconProps): JSX.Element => <svg xmlns="http://www.w3.org/2000/svg" height={18} width={18} viewBox="0 0 18 18" fill={color} aria-hidden="true" {...props}><path d="M7.883,1.93c-.375-.157-.803-.07-1.09,.217L2.146,6.793c-.287,.287-.372,.715-.217,1.09s.518,.617,.924,.617H7.5c.551,0,1-.449,1-1V2.854c0-.406-.242-.769-.617-.924Z" className="arrow-1" /><path d="M15.146,9.5h-4.646c-.551,0-1,.449-1,1v4.646c0,.406,.242,.769,.617,.924,.125,.052,.255,.077,.384,.077,.26,0,.514-.102,.706-.293l4.646-4.646c.287-.287,.372-.715,.217-1.09s-.518-.617-.924-.617Z" className="arrow-2" /></svg>;
+export default SvgFullscreenExit;
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/FullscreenExitAlt.tsx b/packages/__tech-preview__/react/src/icons/generated-icons/FullscreenExitAlt.tsx
@@ -0,0 +1,20 @@
+/**
+ * @fileoverview Auto-generated React component from SVG
+ *
+ * This file is automatically generated by SVGR from SVG files located in:
+ * packages/icons/assets/
+ *
+ * DO NOT EDIT THIS FILE DIRECTLY.
+ *
+ * To modify this icon:
+ * 1. Edit the corresponding SVG file in packages/icons/assets/
+ * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
+ *
+ * @generated
+ */
+import type { IconProps } from '../types';
+const SvgFullscreenExitAlt = ({
+  color = 'currentColor',
+  ...props
+}: IconProps): JSX.Element => <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 18 18" fill={color} aria-hidden="true" {...props}><path d="M10.75 2a.75.75 0 0 1 .75.75v2.688l3.22-3.218a.75.75 0 0 1 1.06 1.06L12.56 6.5h2.69a.75.75 0 0 1 .743.648L16 7.25a.75.75 0 0 1-.75.75h-4.528l-.046-.004.074.004a.75.75 0 0 1-.599-.298l.069.078a.75.75 0 0 1-.22-.53v-4.5a.75.75 0 0 1 .75-.75" className="arrow-1" /><path d="M7.25 10h.017q.03 0 .06.004za.75.75 0 0 1 .599.298l-.069-.078a.75.75 0 0 1 .22.53v4.5a.75.75 0 1 1-1.5 0v-2.69l-3.22 3.22a.75.75 0 0 1-1.06-1.06l3.218-3.22H2.75a.75.75 0 0 1-.743-.648L2 10.75a.75.75 0 0 1 .75-.75z" className="arrow-2" /></svg>;
+export default SvgFullscreenExitAlt;
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/Pause.tsx b/packages/__tech-preview__/react/src/icons/generated-icons/Pause.tsx
@@ -0,0 +1,20 @@
+/**
+ * @fileoverview Auto-generated React component from SVG
+ *
+ * This file is automatically generated by SVGR from SVG files located in:
+ * packages/icons/assets/
+ *
+ * DO NOT EDIT THIS FILE DIRECTLY.
+ *
+ * To modify this icon:
+ * 1. Edit the corresponding SVG file in packages/icons/assets/
+ * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
+ *
+ * @generated
+ */
+import type { IconProps } from '../types';
+const SvgPause = ({
+  color = 'currentColor',
+  ...props
+}: IconProps): JSX.Element => <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 18 18" fill={color} aria-hidden="true" {...props}><rect x={2} y={2} width={5} height={14} rx={1.75} ry={1.75} /><rect x={11} y={2} width={5} height={14} rx={1.75} ry={1.75} /></svg>;
+export default SvgPause;
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/Play.tsx b/packages/__tech-preview__/react/src/icons/generated-icons/Play.tsx
@@ -0,0 +1,20 @@
+/**
+ * @fileoverview Auto-generated React component from SVG
+ *
+ * This file is automatically generated by SVGR from SVG files located in:
+ * packages/icons/assets/
+ *
+ * DO NOT EDIT THIS FILE DIRECTLY.
+ *
+ * To modify this icon:
+ * 1. Edit the corresponding SVG file in packages/icons/assets/
+ * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
+ *
+ * @generated
+ */
+import type { IconProps } from '../types';
+const SvgPlay = ({
+  color = 'currentColor',
+  ...props
+}: IconProps): JSX.Element => <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 18 18" fill={color} aria-hidden="true" {...props}><path d="M15.1,7.478L5.608,2.222c-.553-.306-1.206-.297-1.749,.023-.538,.317-.859,.877-.859,1.499V14.256c0,.622,.321,1.182,.859,1.499,.279,.164,.586,.247,.895,.247,.293,0,.586-.075,.854-.223l9.491-5.256c.556-.307,.901-.891,.901-1.522s-.345-1.215-.9-1.522Z" /></svg>;
+export default SvgPlay;
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/Spinner.tsx b/packages/__tech-preview__/react/src/icons/generated-icons/Spinner.tsx
@@ -0,0 +1,20 @@
+/**
+ * @fileoverview Auto-generated React component from SVG
+ *
+ * This file is automatically generated by SVGR from SVG files located in:
+ * packages/icons/assets/
+ *
+ * DO NOT EDIT THIS FILE DIRECTLY.
+ *
+ * To modify this icon:
+ * 1. Edit the corresponding SVG file in packages/icons/assets/
+ * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
+ *
+ * @generated
+ */
+import type { IconProps } from '../types';
+const SvgSpinner = ({
+  color = 'currentColor',
+  ...props
+}: IconProps): JSX.Element => <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 18 18" fill={color} aria-hidden="true" {...props}><rect width={2} height={5} x={8} y={0.5} rx={1} opacity={0.5}><animate attributeName="opacity" values="1;0" dur="1s" begin="0s" repeatCount="indefinite" calcMode="linear" /></rect><rect width={2} height={5} x={12.243} y={2.257} rx={1} transform="rotate(45 13.243 4.757)" opacity={0.45}><animate attributeName="opacity" values="1;0" dur="1s" begin="0.125s" repeatCount="indefinite" calcMode="linear" /></rect><rect width={5} height={2} x={12.5} y={8} rx={1} opacity={0.4}><animate attributeName="opacity" values="1;0" dur="1s" begin="0.25s" repeatCount="indefinite" calcMode="linear" /></rect><rect width={5} height={2} x={10.743} y={12.243} rx={1} transform="rotate(45 13.243 13.243)" opacity={0.35}><animate attributeName="opacity" values="1;0" dur="1s" begin="0.375s" repeatCount="indefinite" calcMode="linear" /></rect><rect width={2} height={5} x={8} y={12.5} rx={1} opacity={0.3}><animate attributeName="opacity" values="1;0" dur="1s" begin="0.5s" repeatCount="indefinite" calcMode="linear" /></rect><rect width={2} height={5} x={3.757} y={10.743} rx={1} transform="rotate(45 4.757 13.243)" opacity={0.25}><animate attributeName="opacity" values="1;0" dur="1s" begin="0.625s" repeatCount="indefinite" calcMode="linear" /></rect><rect width={5} height={2} x={0.5} y={8} rx={1} opacity={0.15}><animate attributeName="opacity" values="1;0" dur="1s" begin="0.75s" repeatCount="indefinite" calcMode="linear" /></rect><rect width={5} height={2} x={2.257} y={3.757} fillRule="nonzero" rx={1} transform="rotate(45 4.757 4.757)" opacity={0.1}><animate attributeName="opacity" values="1;0" dur="1s" begin="0.875s" repeatCount="indefinite" calcMode="linear" /></rect></svg>;
+export default SvgSpinner;
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/VolumeHigh.tsx b/packages/__tech-preview__/react/src/icons/generated-icons/VolumeHigh.tsx
@@ -0,0 +1,20 @@
+/**
+ * @fileoverview Auto-generated React component from SVG
+ *
+ * This file is automatically generated by SVGR from SVG files located in:
+ * packages/icons/assets/
+ *
+ * DO NOT EDIT THIS FILE DIRECTLY.
+ *
+ * To modify this icon:
+ * 1. Edit the corresponding SVG file in packages/icons/assets/
+ * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
+ *
+ * @generated
+ */
+import type { IconProps } from '../types';
+const SvgVolumeHigh = ({
+  color = 'currentColor',
+  ...props
+}: IconProps): JSX.Element => <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 18 18" fill={color} aria-hidden="true" {...props}><path d="M15.5999996,3.3 C15.1999996,2.9 14.5999996,2.9 14.1999996,3.3 C13.7999996,3.7 13.7999996,4.3 14.1999996,4.7 C15.3999996,5.9 15.9999996,7.4 15.9999996,9 C15.9999996,10.6 15.3999996,12.1 14.1999996,13.3 C13.7999996,13.7 13.7999996,14.3 14.1999996,14.7 C14.3999996,14.9 14.6999996,15 14.8999996,15 C15.1999996,15 15.3999996,14.9 15.5999996,14.7 C17.0999996,13.2 17.9999996,11.2 17.9999996,9 C17.9999996,6.8 17.0999996,4.8 15.5999996,3.3 L15.5999996,3.3 Z" /><path d="M11.2819745,5.28197449 C10.9060085,5.65794047 10.9060085,6.22188944 11.2819745,6.59785542 C12.0171538,7.33303477 12.2772954,8.05605449 12.2772954,9 C12.2772954,9.93588462 11.851678,10.9172014 11.2819745,11.4869049 C10.9060085,11.8628709 10.9060085,12.4268199 11.2819745,12.8027859 C11.4271642,12.9479755 11.9176724,13.0649528 12.2998149,12.9592565 C12.4124479,12.9281035 12.5156669,12.8776063 12.5978555,12.8027859 C13.773371,11.732654 14.1311161,10.1597914 14.1312524,9 C14.1312524,8.8299555 14.1286311,8.66015647 14.119665,8.4897429 C14.0674781,7.49784946 13.8010171,6.48513613 12.5978554,5.28197449 C12.2218894,4.9060085 11.6579405,4.9060085 11.2819745,5.28197449 Z M3.78571429,6.00820648 L0.714285714,6.00820648 C0.285714286,6.00820648 0,6.30901277 0,6.76022222 L0,11.2723167 C0,11.7235261 0.285714286,12.0243324 0.714285714,12.0243324 L3.78571429,12.0243324 L7.85714286,15.8819922 C8.35714286,16.1827985 9,15.8819922 9,15.2803796 L9,2.75215925 C9,2.15054666 8.35714286,1.77453879 7.85714286,2.15054666 L3.78571429,6.00820648 Z" /></svg>;
+export default SvgVolumeHigh;
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/VolumeLow.tsx b/packages/__tech-preview__/react/src/icons/generated-icons/VolumeLow.tsx
@@ -0,0 +1,20 @@
+/**
+ * @fileoverview Auto-generated React component from SVG
+ *
+ * This file is automatically generated by SVGR from SVG files located in:
+ * packages/icons/assets/
+ *
+ * DO NOT EDIT THIS FILE DIRECTLY.
+ *
+ * To modify this icon:
+ * 1. Edit the corresponding SVG file in packages/icons/assets/
+ * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
+ *
+ * @generated
+ */
+import type { IconProps } from '../types';
+const SvgVolumeLow = ({
+  color = 'currentColor',
+  ...props
+}: IconProps): JSX.Element => <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 18 18" fill={color} aria-hidden="true" {...props}><path d="M11.2819745 5.28197449C10.9060085 5.65794047 10.9060085 6.22188944 11.2819745 6.59785542 12.0171538 7.33303477 12.2772954 8.05605449 12.2772954 9 12.2772954 9.93588462 11.851678 10.9172014 11.2819745 11.4869049 10.9060085 11.8628709 10.9060085 12.4268199 11.2819745 12.8027859 11.4271642 12.9479755 11.9176724 13.0649528 12.2998149 12.9592565 12.4124479 12.9281035 12.5156669 12.8776063 12.5978555 12.8027859 13.773371 11.732654 14.1311161 10.1597914 14.1312524 9 14.1312524 8.8299555 14.1286311 8.66015647 14.119665 8.4897429 14.0674781 7.49784946 13.8010171 6.48513613 12.5978554 5.28197449 12.2218894 4.9060085 11.6579405 4.9060085 11.2819745 5.28197449ZM3.78571429 6.00820648.714285714 6.00820648C.285714286 6.00820648 0 6.30901277 0 6.76022222L0 11.2723167C0 11.7235261.285714286 12.0243324.714285714 12.0243324L3.78571429 12.0243324 7.85714286 15.8819922C8.35714286 16.1827985 9 15.8819922 9 15.2803796L9 2.75215925C9 2.15054666 8.35714286 1.77453879 7.85714286 2.15054666L3.78571429 6.00820648Z" /></svg>;
+export default SvgVolumeLow;
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/VolumeOff.tsx b/packages/__tech-preview__/react/src/icons/generated-icons/VolumeOff.tsx
@@ -0,0 +1,20 @@
+/**
+ * @fileoverview Auto-generated React component from SVG
+ *
+ * This file is automatically generated by SVGR from SVG files located in:
+ * packages/icons/assets/
+ *
+ * DO NOT EDIT THIS FILE DIRECTLY.
+ *
+ * To modify this icon:
+ * 1. Edit the corresponding SVG file in packages/icons/assets/
+ * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
+ *
+ * @generated
+ */
+import type { IconProps } from '../types';
+const SvgVolumeOff = ({
+  color = 'currentColor',
+  ...props
+}: IconProps): JSX.Element => <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 18 18" fill={color} aria-hidden="true" {...props}><path d="M12.732233,5.81801948 L14.5,7.586 L16.267767,5.81801948 C16.6582912,5.42749519 17.2914562,5.42749519 17.6819805,5.81801948 C18.0725048,6.20854378 18.0725048,6.84170876 17.6819805,7.23223305 L15.914,9 L17.6819805,10.767767 C18.0725048,11.1582912 18.0725048,11.7914562 17.6819805,12.1819805 C17.2914562,12.5725048 16.6582912,12.5725048 16.267767,12.1819805 L14.5,10.414 L12.732233,12.1819805 C12.3417088,12.5725048 11.7085438,12.5725048 11.3180195,12.1819805 C10.9274952,11.7914562 10.9274952,11.1582912 11.3180195,10.767767 L13.085,9 L11.3180195,7.23223305 C10.9274952,6.84170876 10.9274952,6.20854378 11.3180195,5.81801948 C11.7085438,5.42749519 12.3417088,5.42749519 12.732233,5.81801948 Z M3.78571429,6.00820648 L0.714285714,6.00820648 C0.285714286,6.00820648 0,6.30901277 0,6.76022222 L0,11.2723167 C0,11.7235261 0.285714286,12.0243324 0.714285714,12.0243324 L3.78571429,12.0243324 L7.85714286,15.8819922 C8.35714286,16.1827985 9,15.8819922 9,15.2803796 L9,2.75215925 C9,2.15054666 8.35714286,1.77453879 7.85714286,2.15054666 L3.78571429,6.00820648 Z" /></svg>;
+export default SvgVolumeOff;
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/index.ts b/packages/__tech-preview__/react/src/icons/generated-icons/index.ts
@@ -0,0 +1,24 @@
+/**
+ * @fileoverview Auto-generated index file for React icon components
+ *
+ * This file is automatically generated by SVGR from SVG files located in:
+ * packages/icons/assets/
+ *
+ * DO NOT EDIT THIS FILE DIRECTLY.
+ *
+ * To modify icons or add new ones:
+ * 1. Add/edit SVG files in packages/core/icons/assets/
+ * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
+ *
+ * @generated
+ */
+export { default as FullscreenEnterAltIcon } from "./FullscreenEnterAlt";
+export { default as FullscreenEnterIcon } from "./FullscreenEnter";
+export { default as FullscreenExitAltIcon } from "./FullscreenExitAlt";
+export { default as FullscreenExitIcon } from "./FullscreenExit";
+export { default as PauseIcon } from "./Pause";
+export { default as PlayIcon } from "./Play";
+export { default as SpinnerIcon } from "./Spinner";
+export { default as VolumeHighIcon } from "./VolumeHigh";
+export { default as VolumeLowIcon } from "./VolumeLow";
+export { default as VolumeOffIcon } from "./VolumeOff";
diff --git a/packages/__tech-preview__/react/tsdown.config.ts b/packages/__tech-preview__/react/tsdown.config.ts
@@ -1,7 +1,15 @@
-import { execSync } from 'node:child_process';
+import { existsSync, readdirSync } from 'node:fs';
 import { defineConfig } from 'tsdown';
 import buildStyles from './build/build-styles.ts';
 
+const GENERATED_ICONS_DIR = new URL('./src/icons/generated-icons', import.meta.url).pathname;
+
+function hasGeneratedIcons(): boolean {
+  if (!existsSync(GENERATED_ICONS_DIR)) return false;
+  const files = readdirSync(GENERATED_ICONS_DIR);
+  return files.some((f) => f.endsWith('.tsx'));
+}
+
 export default defineConfig({
   entry: {
     index: './src/index.ts',
@@ -22,7 +30,14 @@ export default defineConfig({
   },
   hooks: {
     'build:prepare': async () => {
-      execSync('pnpm generate:icons', { stdio: 'inherit' });
+      // Generated icons are committed to git due to @svgr/cli having a bug where it
+      // unconditionally requires 'prettier' at module load time (before parsing CLI args),
+      // which fails in pnpm's strict dependency isolation. Skip generation if icons exist.
+      // To regenerate: pnpm -F @videojs/react-preview generate:icons
+      if (hasGeneratedIcons()) return;
+      throw new Error(
+        'Generated icons not found. Run: pnpm -F @videojs/react-preview generate:icons',
+      );
     },
     'build:done': async () => {
       await buildStyles();
@@ -31,4 +46,4 @@ export default defineConfig({
   loader: {
     '.svg': 'text',
   },
-});
+});
diff --git a/site/src/components/HomePageDemo/Base.tsx b/site/src/components/HomePageDemo/Base.tsx
@@ -18,7 +18,7 @@ function generateReactCode(skin: Skin): string {
   const skinComponent = skin === 'frosted' ? 'FrostedSkin' : 'MinimalSkin';
   const skinImport = skin === 'frosted' ? 'frosted' : 'minimal';
 
-  return `// npm install @videojs/react@next
+  return `// npm install @videojs/react-preview
 import { VideoProvider, ${skinComponent}, Video } from '@videojs/react-preview';
 import '@videojs/react-preview/skins/${skinImport}.css';
 
@@ -34,7 +34,7 @@ export const VideoPlayer = () => {
 }
 
 function generateJS(skin: Skin): string {
-  return `// npm install @videojs/html@next
+  return `// npm install @videojs/html-preview
 import '@videojs/html-preview/skins/${skin}';`;
 }
 
diff --git a/site/src/content/docs/concepts/architecture.mdx b/site/src/content/docs/concepts/architecture.mdx
@@ -74,8 +74,8 @@ Here's a complete example showing all three tiers:
 
 <FrameworkCase frameworks={["react"]}>
 ```tsx
-import { VideoProvider, FrostedSkin, Video } from '@videojs/react';
-import '@videojs/react/skins/frosted.css';
+import { VideoProvider, FrostedSkin, Video } from '@videojs/react-preview';
+import '@videojs/react-preview/skins/frosted.css';
 
 function Player() {
   return (
@@ -115,9 +115,9 @@ function Player() {
   <TabsPanel client:visible value="javascript">
 
 ```ts
-import '@videojs/html/skins/frosted';
+import '@videojs/html-preview/skins/frosted';
 ```
 
   </TabsPanel>
 </TabsRoot>
-</FrameworkCase>
+</FrameworkCase>
diff --git a/site/src/content/docs/concepts/skins.mdx b/site/src/content/docs/concepts/skins.mdx
diff --git a/site/src/content/docs/how-to/installation.mdx b/site/src/content/docs/how-to/installation.mdx
diff --git a/site/src/examples/html/fullscreen-button/fullscreen-button.js b/site/src/examples/html/fullscreen-button/fullscreen-button.js
diff --git a/site/src/examples/html/mute-button/mute-button.js b/site/src/examples/html/mute-button/mute-button.js
diff --git a/site/src/examples/html/play-button/play-button.js b/site/src/examples/html/play-button/play-button.js
diff --git a/site/src/utils/ejectCodeGenerator.ts b/site/src/utils/ejectCodeGenerator.ts
