feat(react): initial skin scaffolding

Author: sampotts

packages/react/package.json

@@ -16,12 +16,30 @@
       "types": "./dist/dev/index.d.ts",
       "development": "./dist/dev/index.js",
       "default": "./dist/default/index.js"
+    },
+    "./*.css": "./dist/default/presets/*.css",
+    "./audio": {
+      "types": "./dist/dev/presets/audio/index.d.ts",
+      "development": "./dist/dev/presets/audio/index.js",
+      "default": "./dist/default/presets/audio/index.js"
+    },
+    "./background": {
+      "types": "./dist/dev/presets/background/index.d.ts",
+      "development": "./dist/dev/presets/background/index.js",
+      "default": "./dist/default/presets/background/index.js"
+    },
+    "./video": {
+      "types": "./dist/dev/presets/video/index.d.ts",
+      "development": "./dist/dev/presets/video/index.js",
+      "default": "./dist/default/presets/video/index.js"
     }
   },
   "scripts": {
-    "build": "tsdown",
-    "build:watch": "tsdown --watch ./src --no-clean",
-    "dev": "pnpm run build:watch",
+    "build": "tsdown && pnpm css:copy",
+    "build:watch": "concurrently 'tsdown --watch ./src --no-clean' 'pnpm css:watch'",
+    "css:copy": "rsync -a --include='*/' --include='*.css' --exclude='*' src/presets/ dist/default/presets/",
+    "css:watch": "chokidar 'src/presets/**/*.css' --initial -c 'pnpm run css:copy'",
+    "dev": "pnpm build:watch",
     "test": "vitest run",
     "test:watch": "vitest",
     "clean": "rm -rf dist types"
@@ -37,6 +55,8 @@
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.2.7",
+    "chokidar-cli": "^3.0.0",
+    "concurrently": "^9.2.1",
     "jsdom": "^26.1.0",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",

packages/react/src/index.ts

@@ -9,8 +9,6 @@ export { createSelector, shallowEqual } from '@videojs/store';
 export { useSelector, useStore } from '@videojs/store/react';
 
 // Media primitives
-export { Audio, type AudioProps } from './media/audio';
-export { Video, type VideoProps } from './media/video';
 export {
   Container,
   type ContainerProps,

packages/react/src/presets/audio/index.ts

@@ -0,0 +1,3 @@
+export { Audio, type AudioProps } from '@/media/audio';
+export * from './minimal-skin';
+export * from './skin';

packages/react/src/presets/audio/minimal-skin.css

@@ -0,0 +1,3 @@
+.media-minimal-skin {
+  color: var(--media-color, red);
+}

packages/react/src/presets/audio/minimal-skin.tsx

@@ -0,0 +1,8 @@
+import type { BaseSkinProps } from '../types';
+
+export type MinimalAudioSkinProps = BaseSkinProps;
+
+export function MinimalAudioSkin(props: MinimalAudioSkinProps) {
+  const { children } = props;
+  return <div>{children}</div>;
+}

packages/react/src/presets/audio/skin.css

@@ -0,0 +1,3 @@
+.media-skin {
+  color: var(--media-color, red);
+}

packages/react/src/presets/audio/skin.tsx

@@ -0,0 +1,8 @@
+import type { BaseSkinProps } from '../types';
+
+export type AudioSkinProps = BaseSkinProps;
+
+export function AudioSkin(props: AudioSkinProps) {
+  const { children } = props;
+  return <div>{children}</div>;
+}

packages/react/src/presets/background/index.ts

@@ -0,0 +1 @@
+export * from './skin';

packages/react/src/presets/background/skin.css

@@ -0,0 +1,3 @@
+.media-skin {
+  color: var(--media-color, red);
+}

packages/react/src/presets/background/skin.tsx

@@ -0,0 +1,8 @@
+import type { BaseSkinProps } from '../types';
+
+export type BackgroundVideoSkinProps = BaseSkinProps;
+
+export function BackgroundVideoSkin(props: BackgroundVideoSkinProps) {
+  const { children } = props;
+  return <div>{children}</div>;
+}