From 3e61ef65a96d7ec2ce7a597c5db288954375c2d2 Mon Sep 17 00:00:00 2001
From: Rahim <rahim.alwer@gmail.com>
Date: Wed, 24 Jun 2026 14:38:13 -0700
Subject: [PATCH] refactor(core): simplify component manifests

---
 packages/core/scripts/generate-components.ts  |  6 +-
 .../scripts/tests/generate-components.test.ts | 24 ++---
 .../airplay-button-component.ts               |  2 +-
 .../ui/alert-dialog/alert-dialog-component.ts | 14 +--
 .../buffering-indicator-component.ts          |  2 +-
 .../captions-button-component.ts              |  2 +-
 .../captions-radio-group-component.ts         |  2 +-
 .../ui/cast-button/cast-button-component.ts   |  2 +-
 .../core/ui/container/container-component.ts  |  2 +-
 .../core/ui/controls/controls-component.ts    |  8 +-
 .../ui/error-dialog/error-dialog-component.ts | 14 +--
 .../fullscreen-button-component.ts            |  2 +-
 .../src/core/ui/gesture/gesture-component.ts  |  2 +-
 .../src/core/ui/hotkey/hotkey-component.ts    |  2 +-
 .../ui/live-button/live-button-component.ts   |  2 +-
 packages/core/src/core/ui/manifest.ts         | 93 +++++++++----------
 .../core/src/core/ui/menu/menu-component.ts   | 32 +++----
 .../ui/mute-button/mute-button-component.ts   |  2 +-
 .../src/core/ui/overlay/overlay-component.ts  |  2 +-
 .../ui/pip-button/pip-button-component.ts     |  2 +-
 .../ui/play-button/play-button-component.ts   |  2 +-
 .../playback-rate-button-component.ts         |  2 +-
 .../playback-rate-radio-group-component.ts    |  2 +-
 .../src/core/ui/popover/popover-component.ts  | 12 +--
 .../src/core/ui/poster/poster-component.ts    |  2 +-
 .../quality-radio-group-component.ts          |  2 +-
 .../ui/seek-button/seek-button-component.ts   |  2 +-
 .../seek-indicator-component.ts               |  8 +-
 .../src/core/ui/slider/slider-component.ts    | 26 +++---
 .../status-announcer-component.ts             |  2 +-
 .../status-indicator-component.ts             |  8 +-
 .../src/core/ui/tests/jsx-runtime.test-d.tsx  | 38 ++++----
 .../src/core/ui/tests/jsx-runtime.test.ts     | 14 +--
 .../core/src/core/ui/text/text-component.ts   |  2 +-
 .../core/ui/thumbnail/thumbnail-component.ts  |  2 +-
 .../ui/time-slider/time-slider-component.ts   | 18 ++--
 .../core/src/core/ui/time/time-component.ts   | 10 +-
 .../src/core/ui/tooltip/tooltip-component.ts  | 18 ++--
 .../volume-indicator-component.ts             | 10 +-
 .../volume-slider/volume-slider-component.ts  | 16 ++--
 packages/core/src/jsx-runtime.ts              | 57 +++++++-----
 packages/react/skins.compiler.config.ts       |  1 -
 .../tests/skins-compiler-config.test.ts       |  2 +-
 .../default-video.generated.tailwind.tsx      |  7 +-
 packages/skins/src/default/video.skin.tsx     |  3 +-
 45 files changed, 239 insertions(+), 244 deletions(-)

diff --git a/packages/core/scripts/generate-components.ts b/packages/core/scripts/generate-components.ts
index 76e1564c..0b7ef4b4 100644
--- a/packages/core/scripts/generate-components.ts
+++ b/packages/core/scripts/generate-components.ts
@@ -49,11 +49,7 @@ export function defineComponentsConfig<const Config extends ComponentsConfig | r
 function isDefineComponentCall(node: ts.Node): node is ts.CallExpression {
   if (!ts.isCallExpression(node)) return false;
   const callee = node.expression;
-  if (ts.isIdentifier(callee) && callee.text === 'defineComponent') return true;
-  // Curried form: defineComponent<Props>()({ ... }).
-  return (
-    ts.isCallExpression(callee) && ts.isIdentifier(callee.expression) && callee.expression.text === 'defineComponent'
-  );
+  return ts.isIdentifier(callee) && callee.text === 'defineComponent';
 }
 
 function findDefaultExportCall(sourceFile: ts.SourceFile): ts.CallExpression | null {
diff --git a/packages/core/scripts/tests/generate-components.test.ts b/packages/core/scripts/tests/generate-components.test.ts
index e4c24671..0b85a856 100644
--- a/packages/core/scripts/tests/generate-components.test.ts
+++ b/packages/core/scripts/tests/generate-components.test.ts
@@ -5,7 +5,7 @@ import { describe, expect, it } from 'vitest';
 
 import { generateComponents } from '../generate-components';
 
-const STUB = 'const defineComponent: any = () => (m: any) => m; const defineComponentPart: any = () => ({});';
+const STUB = 'const defineComponent: any = (m?: any) => m ?? {};';
 
 function setup(): { dir: string; output: string; pattern: string } {
   const dir = mkdtempSync(join(tmpdir(), 'videojs-components-'));
@@ -21,10 +21,10 @@ function setup(): { dir: string; output: string; pattern: string } {
     join(dir, 'play-button', 'play-button-component.ts'),
     `import { PlayButtonDataAttrs } from './play-button-data-attrs';
      ${STUB}
-     export default defineComponent<{ disabled?: boolean }>()({
+     export default defineComponent<{ disabled?: boolean }>({
        name: 'PlayButton',
        dataAttrs: PlayButtonDataAttrs,
-     });`
+      });`
   );
 
   writeFileSync(join(dir, 'slider', 'slider-data-attrs.ts'), `export const SliderDataAttrs = {} as const;`);
@@ -32,20 +32,20 @@ function setup(): { dir: string; output: string; pattern: string } {
     join(dir, 'slider', 'slider-component.ts'),
     `import { SliderDataAttrs } from './slider-data-attrs';
      ${STUB}
-     export default defineComponent()({
-       name: 'Slider',
-       parts: {
-         Root: defineComponentPart<{ orientation?: 'horizontal' | 'vertical' }>(),
-         Track: defineComponentPart(),
-       },
-       dataAttrs: SliderDataAttrs,
-     });`
+      export default defineComponent({
+        name: 'Slider',
+        parts: {
+          Root: defineComponent<{ orientation?: 'horizontal' | 'vertical' }>(),
+          Track: defineComponent(),
+        },
+        dataAttrs: SliderDataAttrs,
+      });`
   );
 
   writeFileSync(
     join(dir, 'hotkey', 'hotkey-component.ts'),
     `${STUB}
-     export default defineComponent()({ name: 'Hotkey' });`
+     export default defineComponent({ name: 'Hotkey' });`
   );
 
   return { dir, output: join(dir, 'out.ts'), pattern: join(dir, '*/*-component.ts') };
diff --git a/packages/core/src/core/ui/airplay-button/airplay-button-component.ts b/packages/core/src/core/ui/airplay-button/airplay-button-component.ts
index e70ed0bc..ad0fe7f6 100644
--- a/packages/core/src/core/ui/airplay-button/airplay-button-component.ts
+++ b/packages/core/src/core/ui/airplay-button/airplay-button-component.ts
@@ -2,7 +2,7 @@ import { defineComponent } from '../manifest';
 import { AirPlayButtonDataAttrs } from './airplay-button-data-attrs';
 import type { AirPlayButtonProps } from './props';
 
-export default defineComponent<AirPlayButtonProps>()({
+export default defineComponent<AirPlayButtonProps>({
   name: 'AirPlayButton',
   dataAttrs: AirPlayButtonDataAttrs,
 });
diff --git a/packages/core/src/core/ui/alert-dialog/alert-dialog-component.ts b/packages/core/src/core/ui/alert-dialog/alert-dialog-component.ts
index b27e3c65..075a0af5 100644
--- a/packages/core/src/core/ui/alert-dialog/alert-dialog-component.ts
+++ b/packages/core/src/core/ui/alert-dialog/alert-dialog-component.ts
@@ -1,15 +1,15 @@
-import { defineComponent, defineComponentPart } from '../manifest';
+import { defineComponent } from '../manifest';
 import { AlertDialogDataAttrs } from './alert-dialog-data-attrs';
 import type { AlertDialogProps } from './props';
 
-export default defineComponent()({
+export default defineComponent({
   name: 'AlertDialog',
   parts: {
-    Root: defineComponentPart<AlertDialogProps>(),
-    Popup: defineComponentPart(),
-    Title: defineComponentPart(),
-    Description: defineComponentPart(),
-    Close: defineComponentPart(),
+    Root: defineComponent<AlertDialogProps>(),
+    Popup: defineComponent(),
+    Title: defineComponent(),
+    Description: defineComponent(),
+    Close: defineComponent(),
   },
   dataAttrs: AlertDialogDataAttrs,
 });
diff --git a/packages/core/src/core/ui/buffering-indicator/buffering-indicator-component.ts b/packages/core/src/core/ui/buffering-indicator/buffering-indicator-component.ts
index db4dfdd0..5b8b9b9f 100644
--- a/packages/core/src/core/ui/buffering-indicator/buffering-indicator-component.ts
+++ b/packages/core/src/core/ui/buffering-indicator/buffering-indicator-component.ts
@@ -2,7 +2,7 @@ import { defineComponent } from '../manifest';
 import { BufferingIndicatorDataAttrs } from './buffering-indicator-data-attrs';
 import type { BufferingIndicatorProps } from './props';
 
-export default defineComponent<BufferingIndicatorProps>()({
+export default defineComponent<BufferingIndicatorProps>({
   name: 'BufferingIndicator',
   dataAttrs: BufferingIndicatorDataAttrs,
 });
diff --git a/packages/core/src/core/ui/captions-button/captions-button-component.ts b/packages/core/src/core/ui/captions-button/captions-button-component.ts
index 144071c9..b42a6e2f 100644
--- a/packages/core/src/core/ui/captions-button/captions-button-component.ts
+++ b/packages/core/src/core/ui/captions-button/captions-button-component.ts
@@ -2,7 +2,7 @@ import { defineComponent } from '../manifest';
 import { CaptionsButtonDataAttrs } from './captions-button-data-attrs';
 import type { CaptionsButtonProps } from './props';
 
-export default defineComponent<CaptionsButtonProps>()({
+export default defineComponent<CaptionsButtonProps>({
   name: 'CaptionsButton',
   dataAttrs: CaptionsButtonDataAttrs,
 });
diff --git a/packages/core/src/core/ui/captions-radio-group/captions-radio-group-component.ts b/packages/core/src/core/ui/captions-radio-group/captions-radio-group-component.ts
index 787f70db..1cb7c520 100644
--- a/packages/core/src/core/ui/captions-radio-group/captions-radio-group-component.ts
+++ b/packages/core/src/core/ui/captions-radio-group/captions-radio-group-component.ts
@@ -2,7 +2,7 @@ import { defineComponent } from '../manifest';
 import { CaptionsRadioGroupDataAttrs } from './captions-radio-group-data-attrs';
 import type { CaptionsRadioGroupProps } from './props';
 
-export default defineComponent<CaptionsRadioGroupProps>()({
+export default defineComponent<CaptionsRadioGroupProps>({
   name: 'CaptionsRadioGroup',
   dataAttrs: CaptionsRadioGroupDataAttrs,
 });
diff --git a/packages/core/src/core/ui/cast-button/cast-button-component.ts b/packages/core/src/core/ui/cast-button/cast-button-component.ts
index 71b65d84..7ac7acb7 100644
--- a/packages/core/src/core/ui/cast-button/cast-button-component.ts
+++ b/packages/core/src/core/ui/cast-button/cast-button-component.ts
@@ -2,7 +2,7 @@ import { defineComponent } from '../manifest';
 import { CastButtonDataAttrs } from './cast-button-data-attrs';
 import type { CastButtonProps } from './props';
 
-export default defineComponent<CastButtonProps>()({
+export default defineComponent<CastButtonProps>({
   name: 'CastButton',
   dataAttrs: CastButtonDataAttrs,
 });
diff --git a/packages/core/src/core/ui/container/container-component.ts b/packages/core/src/core/ui/container/container-component.ts
index 7f11c11d..6cec4f5b 100644
--- a/packages/core/src/core/ui/container/container-component.ts
+++ b/packages/core/src/core/ui/container/container-component.ts
@@ -1,6 +1,6 @@
 import { defineComponent } from '../manifest';
 import type { ContainerProps } from './props';
 
-export default defineComponent<ContainerProps>()({
+export default defineComponent<ContainerProps>({
   name: 'Container',
 });
diff --git a/packages/core/src/core/ui/controls/controls-component.ts b/packages/core/src/core/ui/controls/controls-component.ts
index 1254fb0f..4678a356 100644
--- a/packages/core/src/core/ui/controls/controls-component.ts
+++ b/packages/core/src/core/ui/controls/controls-component.ts
@@ -1,11 +1,11 @@
-import { defineComponent, defineComponentPart } from '../manifest';
+import { defineComponent } from '../manifest';
 import { ControlsDataAttrs } from './controls-data-attrs';
 
-export default defineComponent()({
+export default defineComponent({
   name: 'Controls',
   parts: {
-    Root: defineComponentPart(),
-    Group: defineComponentPart(),
+    Root: defineComponent(),
+    Group: defineComponent(),
   },
   dataAttrs: ControlsDataAttrs,
 });
diff --git a/packages/core/src/core/ui/error-dialog/error-dialog-component.ts b/packages/core/src/core/ui/error-dialog/error-dialog-component.ts
index eaee1fe8..b16550fe 100644
--- a/packages/core/src/core/ui/error-dialog/error-dialog-component.ts
+++ b/packages/core/src/core/ui/error-dialog/error-dialog-component.ts
@@ -1,15 +1,15 @@
-import { defineComponent, defineComponentPart } from '../manifest';
+import { defineComponent } from '../manifest';
 import { ErrorDialogDataAttrs } from './error-dialog-data-attrs';
 import type { ErrorDialogProps } from './props';
 
-export default defineComponent()({
+export default defineComponent({
   name: 'ErrorDialog',
   parts: {
-    Root: defineComponentPart<ErrorDialogProps>(),
-    Popup: defineComponentPart(),
-    Title: defineComponentPart(),
-    Description: defineComponentPart(),
-    Close: defineComponentPart(),
+    Root: defineComponent<ErrorDialogProps>(),
+    Popup: defineComponent(),
+    Title: defineComponent(),
+    Description: defineComponent(),
+    Close: defineComponent(),
   },
   dataAttrs: ErrorDialogDataAttrs,
 });
diff --git a/packages/core/src/core/ui/fullscreen-button/fullscreen-button-component.ts b/packages/core/src/core/ui/fullscreen-button/fullscreen-button-component.ts
index ab976440..64abe3d0 100644
--- a/packages/core/src/core/ui/fullscreen-button/fullscreen-button-component.ts
+++ b/packages/core/src/core/ui/fullscreen-button/fullscreen-button-component.ts
@@ -2,7 +2,7 @@ import { defineComponent } from '../manifest';
 import { FullscreenButtonDataAttrs } from './fullscreen-button-data-attrs';
 import type { FullscreenButtonProps } from './props';
 
-export default defineComponent<FullscreenButtonProps>()({
+export default defineComponent<FullscreenButtonProps>({
   name: 'FullscreenButton',
   dataAttrs: FullscreenButtonDataAttrs,
 });
diff --git a/packages/core/src/core/ui/gesture/gesture-component.ts b/packages/core/src/core/ui/gesture/gesture-component.ts
index e07c08da..1a7f18b3 100644
--- a/packages/core/src/core/ui/gesture/gesture-component.ts
+++ b/packages/core/src/core/ui/gesture/gesture-component.ts
@@ -1,6 +1,6 @@
 import { defineComponent } from '../manifest';
 import type { GestureProps } from './props';
 
-export default defineComponent<GestureProps>()({
+export default defineComponent<GestureProps>({
   name: 'Gesture',
 });
diff --git a/packages/core/src/core/ui/hotkey/hotkey-component.ts b/packages/core/src/core/ui/hotkey/hotkey-component.ts
index e02dff07..7e3cd571 100644
--- a/packages/core/src/core/ui/hotkey/hotkey-component.ts
+++ b/packages/core/src/core/ui/hotkey/hotkey-component.ts
@@ -1,6 +1,6 @@
 import { defineComponent } from '../manifest';
 import type { HotkeyProps } from './props';
 
-export default defineComponent<HotkeyProps>()({
+export default defineComponent<HotkeyProps>({
   name: 'Hotkey',
 });
diff --git a/packages/core/src/core/ui/live-button/live-button-component.ts b/packages/core/src/core/ui/live-button/live-button-component.ts
index 5f90bdaa..faeb98b4 100644
--- a/packages/core/src/core/ui/live-button/live-button-component.ts
+++ b/packages/core/src/core/ui/live-button/live-button-component.ts
@@ -2,7 +2,7 @@ import { defineComponent } from '../manifest';
 import { LiveButtonDataAttrs } from './live-button-data-attrs';
 import type { LiveButtonProps } from './props';
 
-export default defineComponent<LiveButtonProps>()({
+export default defineComponent<LiveButtonProps>({
   name: 'LiveButton',
   dataAttrs: LiveButtonDataAttrs,
 });
diff --git a/packages/core/src/core/ui/manifest.ts b/packages/core/src/core/ui/manifest.ts
index 287f6148..42f7aa15 100644
--- a/packages/core/src/core/ui/manifest.ts
+++ b/packages/core/src/core/ui/manifest.ts
@@ -5,63 +5,56 @@ export type EmptyProps = {
   readonly [__EMPTY_PROPS__]?: never;
 };
 
-export interface ComponentPart<Props extends object = EmptyProps> {
+export interface ComponentDefinition<
+  Props extends object = EmptyProps,
+  Parts extends ComponentRecord | undefined = undefined,
+> {
+  name?: string | undefined;
+  parts?: Parts | undefined;
+  dataAttrs?: Record<string, string> | undefined;
   readonly [__PROPS_BRAND__]?: Props;
 }
 
-export interface ComponentPartGroup<Parts extends ComponentPartRecord = ComponentPartRecord> {
-  parts: Parts;
+export type ComponentRecord = Record<string, ComponentDefinition<any, ComponentRecord | undefined>>;
+export type ComponentManifest<
+  Props extends object = any,
+  Parts extends ComponentRecord | undefined = ComponentRecord | undefined,
+> = ComponentDefinition<Props, Parts> & { name: string };
+
+type ComponentOptions<Props extends object, Parts extends ComponentRecord | undefined> = Omit<
+  ComponentDefinition<Props, Parts>,
+  typeof __PROPS_BRAND__
+>;
+
+export function hasParts<Props extends object, Parts extends ComponentRecord>(
+  component: ComponentDefinition<Props, Parts | undefined>
+): component is ComponentDefinition<Props, Parts> & { parts: Parts } {
+  return Boolean(component.parts);
 }
 
-export type ComponentPartRecord = Record<string, ComponentPart<any> | ComponentPartGroup>;
+export type InferProps<T> = T extends ComponentDefinition<infer Props, any> ? Props : never;
 
-export interface ComponentManifest<Props extends object = EmptyProps> {
-  name: string;
-  dataAttrs?: Record<string, string>;
-  readonly [__PROPS_BRAND__]?: Props;
-}
-
-export interface ComponentGroupManifest<Parts extends ComponentPartRecord = ComponentPartRecord> {
-  name: string;
-  parts: Parts;
-  dataAttrs?: Record<string, string>;
-}
-
-export type AnyComponentManifest = ComponentManifest<object> | ComponentGroupManifest<ComponentPartRecord>;
-
-type ComponentDefinition<Props extends object> = Omit<ComponentManifest<Props>, typeof __PROPS_BRAND__>;
-type ComponentGroupDefinition<Parts extends ComponentPartRecord> = ComponentGroupManifest<Parts>;
-
-interface DefineComponentFactory<Props extends object> {
-  <const Parts extends ComponentPartRecord>(manifest: ComponentGroupDefinition<Parts>): ComponentGroupManifest<Parts>;
-  (manifest: ComponentDefinition<Props>): ComponentManifest<Props>;
-}
-
-export type InferProps<T> =
-  T extends ComponentManifest<infer Props> ? Props : T extends ComponentPart<infer Props> ? Props : never;
-
-export type InferParts<T> =
-  T extends ComponentGroupManifest<infer Parts>
-    ? keyof Parts
-    : T extends ComponentPartGroup<infer Parts>
-      ? keyof Parts
-      : never;
+export type InferParts<T> = T extends ComponentDefinition<any, infer Parts> ? keyof NonNullable<Parts> : never;
 
 export type InferPartProps<T, K extends string> =
-  T extends ComponentGroupManifest<infer Parts> ? (K extends keyof Parts ? InferProps<Parts[K]> : never) : never;
+  T extends ComponentDefinition<any, infer Parts>
+    ? K extends keyof NonNullable<Parts>
+      ? InferProps<NonNullable<Parts>[K]>
+      : never
+    : never;
 
-export function defineComponentPart<Props extends object = EmptyProps>(): ComponentPart<Props> {
-  return {} as ComponentPart<Props>;
-}
-
-export function defineComponentPartGroup<const Parts extends ComponentPartRecord>(
-  parts: Parts
-): ComponentPartGroup<Parts> {
-  return { parts };
-}
-
-/** Define a component manifest. */
-export function defineComponent<Props extends object = EmptyProps>(): DefineComponentFactory<Props> {
-  return ((manifest: ComponentDefinition<Props> | ComponentGroupDefinition<ComponentPartRecord>) =>
-    manifest) as DefineComponentFactory<Props>;
+export function defineComponent<Props extends object = EmptyProps>(): ComponentDefinition<Props>;
+export function defineComponent<
+  Props extends object = EmptyProps,
+  const Parts extends ComponentRecord | undefined = undefined,
+>(options: ComponentOptions<Props, Parts> & { name: string }): ComponentManifest<Props, Parts>;
+export function defineComponent<
+  Props extends object = EmptyProps,
+  const Parts extends ComponentRecord | undefined = undefined,
+>(options: ComponentOptions<Props, Parts>): ComponentDefinition<Props, Parts>;
+export function defineComponent<
+  Props extends object = EmptyProps,
+  const Parts extends ComponentRecord | undefined = undefined,
+>(options?: ComponentOptions<Props, Parts>): ComponentDefinition<Props, Parts> {
+  return (options ?? {}) as ComponentDefinition<Props, Parts>;
 }
diff --git a/packages/core/src/core/ui/menu/menu-component.ts b/packages/core/src/core/ui/menu/menu-component.ts
index 3567714f..97b217d6 100644
--- a/packages/core/src/core/ui/menu/menu-component.ts
+++ b/packages/core/src/core/ui/menu/menu-component.ts
@@ -1,4 +1,4 @@
-import { defineComponent, defineComponentPart } from '../manifest';
+import { defineComponent } from '../manifest';
 import { MenuDataAttrs } from './menu-data-attrs';
 import type {
   MenuBackProps,
@@ -11,23 +11,23 @@ import type {
   MenuTriggerProps,
 } from './props';
 
-export default defineComponent()({
+export default defineComponent({
   name: 'Menu',
   parts: {
-    Root: defineComponentPart<MenuProps>(),
-    Trigger: defineComponentPart<MenuTriggerProps>(),
-    Content: defineComponentPart(),
-    View: defineComponentPart(),
-    Back: defineComponentPart<MenuBackProps>(),
-    Group: defineComponentPart(),
-    GroupLabel: defineComponentPart(),
-    Item: defineComponentPart<MenuItemProps>(),
-    ItemIndicator: defineComponentPart<MenuItemIndicatorProps>(),
-    ItemValue: defineComponentPart(),
-    CheckboxItem: defineComponentPart<MenuCheckboxItemProps>(),
-    RadioGroup: defineComponentPart<MenuRadioGroupProps>(),
-    RadioItem: defineComponentPart<MenuRadioItemProps>(),
-    Separator: defineComponentPart(),
+    Root: defineComponent<MenuProps>(),
+    Trigger: defineComponent<MenuTriggerProps>(),
+    Content: defineComponent(),
+    View: defineComponent(),
+    Back: defineComponent<MenuBackProps>(),
+    Group: defineComponent(),
+    GroupLabel: defineComponent(),
+    Item: defineComponent<MenuItemProps>(),
+    ItemIndicator: defineComponent<MenuItemIndicatorProps>(),
+    ItemValue: defineComponent(),
+    CheckboxItem: defineComponent<MenuCheckboxItemProps>(),
+    RadioGroup: defineComponent<MenuRadioGroupProps>(),
+    RadioItem: defineComponent<MenuRadioItemProps>(),
+    Separator: defineComponent(),
   },
   dataAttrs: MenuDataAttrs,
 });
diff --git a/packages/core/src/core/ui/mute-button/mute-button-component.ts b/packages/core/src/core/ui/mute-button/mute-button-component.ts
index e765b9e4..a791968c 100644
--- a/packages/core/src/core/ui/mute-button/mute-button-component.ts
+++ b/packages/core/src/core/ui/mute-button/mute-button-component.ts
@@ -2,7 +2,7 @@ import { defineComponent } from '../manifest';
 import { MuteButtonDataAttrs } from './mute-button-data-attrs';
 import type { MuteButtonProps } from './props';
 
-export default defineComponent<MuteButtonProps>()({
+export default defineComponent<MuteButtonProps>({
   name: 'MuteButton',
   dataAttrs: MuteButtonDataAttrs,
 });
diff --git a/packages/core/src/core/ui/overlay/overlay-component.ts b/packages/core/src/core/ui/overlay/overlay-component.ts
index 360acdfb..b6381a02 100644
--- a/packages/core/src/core/ui/overlay/overlay-component.ts
+++ b/packages/core/src/core/ui/overlay/overlay-component.ts
@@ -1,7 +1,7 @@
 import { defineComponent } from '../manifest';
 import { OverlayDataAttrs } from './overlay-data-attrs';
 
-export default defineComponent()({
+export default defineComponent({
   name: 'Overlay',
   dataAttrs: OverlayDataAttrs,
 });
diff --git a/packages/core/src/core/ui/pip-button/pip-button-component.ts b/packages/core/src/core/ui/pip-button/pip-button-component.ts
index 8cf51b0a..08bc2794 100644
--- a/packages/core/src/core/ui/pip-button/pip-button-component.ts
+++ b/packages/core/src/core/ui/pip-button/pip-button-component.ts
@@ -2,7 +2,7 @@ import { defineComponent } from '../manifest';
 import { PiPButtonDataAttrs } from './pip-button-data-attrs';
 import type { PiPButtonProps } from './props';
 
-export default defineComponent<PiPButtonProps>()({
+export default defineComponent<PiPButtonProps>({
   name: 'PiPButton',
   dataAttrs: PiPButtonDataAttrs,
 });
diff --git a/packages/core/src/core/ui/play-button/play-button-component.ts b/packages/core/src/core/ui/play-button/play-button-component.ts
index cae06609..c209dec8 100644
--- a/packages/core/src/core/ui/play-button/play-button-component.ts
+++ b/packages/core/src/core/ui/play-button/play-button-component.ts
@@ -2,7 +2,7 @@ import { defineComponent } from '../manifest';
 import { PlayButtonDataAttrs } from './play-button-data-attrs';
 import type { PlayButtonProps } from './props';
 
-export default defineComponent<PlayButtonProps>()({
+export default defineComponent<PlayButtonProps>({
   name: 'PlayButton',
   dataAttrs: PlayButtonDataAttrs,
 });
diff --git a/packages/core/src/core/ui/playback-rate-button/playback-rate-button-component.ts b/packages/core/src/core/ui/playback-rate-button/playback-rate-button-component.ts
index 8a5a0198..6ff66436 100644
--- a/packages/core/src/core/ui/playback-rate-button/playback-rate-button-component.ts
+++ b/packages/core/src/core/ui/playback-rate-button/playback-rate-button-component.ts
@@ -2,7 +2,7 @@ import { defineComponent } from '../manifest';
 import { PlaybackRateButtonDataAttrs } from './playback-rate-button-data-attrs';
 import type { PlaybackRateButtonProps } from './props';
 
-export default defineComponent<PlaybackRateButtonProps>()({
+export default defineComponent<PlaybackRateButtonProps>({
   name: 'PlaybackRateButton',
   dataAttrs: PlaybackRateButtonDataAttrs,
 });
diff --git a/packages/core/src/core/ui/playback-rate-radio-group/playback-rate-radio-group-component.ts b/packages/core/src/core/ui/playback-rate-radio-group/playback-rate-radio-group-component.ts
index 697cb297..e4a2e569 100644
--- a/packages/core/src/core/ui/playback-rate-radio-group/playback-rate-radio-group-component.ts
+++ b/packages/core/src/core/ui/playback-rate-radio-group/playback-rate-radio-group-component.ts
@@ -2,7 +2,7 @@ import { defineComponent } from '../manifest';
 import { PlaybackRateRadioGroupDataAttrs } from './playback-rate-radio-group-data-attrs';
 import type { PlaybackRateRadioGroupProps } from './props';
 
-export default defineComponent<PlaybackRateRadioGroupProps>()({
+export default defineComponent<PlaybackRateRadioGroupProps>({
   name: 'PlaybackRateRadioGroup',
   dataAttrs: PlaybackRateRadioGroupDataAttrs,
 });
diff --git a/packages/core/src/core/ui/popover/popover-component.ts b/packages/core/src/core/ui/popover/popover-component.ts
index 0ffd2133..c4a770a7 100644
--- a/packages/core/src/core/ui/popover/popover-component.ts
+++ b/packages/core/src/core/ui/popover/popover-component.ts
@@ -1,14 +1,14 @@
-import { defineComponent, defineComponentPart } from '../manifest';
+import { defineComponent } from '../manifest';
 import { PopoverDataAttrs } from './popover-data-attrs';
 import type { PopoverProps } from './props';
 
-export default defineComponent()({
+export default defineComponent({
   name: 'Popover',
   parts: {
-    Root: defineComponentPart<PopoverProps>(),
-    Trigger: defineComponentPart(),
-    Popup: defineComponentPart(),
-    Arrow: defineComponentPart(),
+    Root: defineComponent<PopoverProps>(),
+    Trigger: defineComponent(),
+    Popup: defineComponent(),
+    Arrow: defineComponent(),
   },
   dataAttrs: PopoverDataAttrs,
 });
diff --git a/packages/core/src/core/ui/poster/poster-component.ts b/packages/core/src/core/ui/poster/poster-component.ts
index 7d478f93..df7e0a2e 100644
--- a/packages/core/src/core/ui/poster/poster-component.ts
+++ b/packages/core/src/core/ui/poster/poster-component.ts
@@ -1,7 +1,7 @@
 import { defineComponent } from '../manifest';
 import { PosterDataAttrs } from './poster-data-attrs';
 
-export default defineComponent()({
+export default defineComponent({
   name: 'Poster',
   dataAttrs: PosterDataAttrs,
 });
diff --git a/packages/core/src/core/ui/quality-radio-group/quality-radio-group-component.ts b/packages/core/src/core/ui/quality-radio-group/quality-radio-group-component.ts
index bdba33f3..6b088f81 100644
--- a/packages/core/src/core/ui/quality-radio-group/quality-radio-group-component.ts
+++ b/packages/core/src/core/ui/quality-radio-group/quality-radio-group-component.ts
@@ -2,7 +2,7 @@ import { defineComponent } from '../manifest';
 import type { QualityRadioGroupProps } from './props';
 import { QualityRadioGroupDataAttrs } from './quality-radio-group-data-attrs';
 
-export default defineComponent<QualityRadioGroupProps>()({
+export default defineComponent<QualityRadioGroupProps>({
   name: 'QualityRadioGroup',
   dataAttrs: QualityRadioGroupDataAttrs,
 });
diff --git a/packages/core/src/core/ui/seek-button/seek-button-component.ts b/packages/core/src/core/ui/seek-button/seek-button-component.ts
index 58c4d1ee..b49eda60 100644
--- a/packages/core/src/core/ui/seek-button/seek-button-component.ts
+++ b/packages/core/src/core/ui/seek-button/seek-button-component.ts
@@ -2,7 +2,7 @@ import { defineComponent } from '../manifest';
 import type { SeekButtonProps } from './props';
 import { SeekButtonDataAttrs } from './seek-button-data-attrs';
 
-export default defineComponent<SeekButtonProps>()({
+export default defineComponent<SeekButtonProps>({
   name: 'SeekButton',
   dataAttrs: SeekButtonDataAttrs,
 });
diff --git a/packages/core/src/core/ui/seek-indicator/seek-indicator-component.ts b/packages/core/src/core/ui/seek-indicator/seek-indicator-component.ts
index 1c13434a..8c0259b5 100644
--- a/packages/core/src/core/ui/seek-indicator/seek-indicator-component.ts
+++ b/packages/core/src/core/ui/seek-indicator/seek-indicator-component.ts
@@ -1,12 +1,12 @@
 import { SeekIndicatorDataAttrs } from '../input-feedback/seek-indicator-data-attrs';
-import { defineComponent, defineComponentPart } from '../manifest';
+import { defineComponent } from '../manifest';
 import type { SeekIndicatorProps } from './props';
 
-export default defineComponent()({
+export default defineComponent({
   name: 'SeekIndicator',
   parts: {
-    Root: defineComponentPart<SeekIndicatorProps>(),
-    Value: defineComponentPart(),
+    Root: defineComponent<SeekIndicatorProps>(),
+    Value: defineComponent(),
   },
   dataAttrs: SeekIndicatorDataAttrs,
 });
diff --git a/packages/core/src/core/ui/slider/slider-component.ts b/packages/core/src/core/ui/slider/slider-component.ts
index b9c7ad37..5d6ae040 100644
--- a/packages/core/src/core/ui/slider/slider-component.ts
+++ b/packages/core/src/core/ui/slider/slider-component.ts
@@ -1,21 +1,23 @@
-import { defineComponent, defineComponentPart, defineComponentPartGroup } from '../manifest';
+import { defineComponent } from '../manifest';
 import type { SliderProps, SliderValueProps } from './props';
 import { SliderDataAttrs } from './slider-data-attrs';
 
-export default defineComponent()({
+export default defineComponent({
   name: 'Slider',
   parts: {
-    Root: defineComponentPart<SliderProps>(),
-    Track: defineComponentPart(),
-    Fill: defineComponentPart(),
-    Buffer: defineComponentPart(),
-    Thumb: defineComponentPart(),
-    Thumbnail: defineComponentPartGroup({
-      Root: defineComponentPart(),
-      Image: defineComponentPart(),
+    Root: defineComponent<SliderProps>(),
+    Track: defineComponent(),
+    Fill: defineComponent(),
+    Buffer: defineComponent(),
+    Thumb: defineComponent(),
+    Thumbnail: defineComponent({
+      parts: {
+        Root: defineComponent(),
+        Image: defineComponent(),
+      },
     }),
-    Preview: defineComponentPart(),
-    Value: defineComponentPart<SliderValueProps>(),
+    Preview: defineComponent(),
+    Value: defineComponent<SliderValueProps>(),
   },
   dataAttrs: SliderDataAttrs,
 });
diff --git a/packages/core/src/core/ui/status-announcer/status-announcer-component.ts b/packages/core/src/core/ui/status-announcer/status-announcer-component.ts
index 9a301572..082913c2 100644
--- a/packages/core/src/core/ui/status-announcer/status-announcer-component.ts
+++ b/packages/core/src/core/ui/status-announcer/status-announcer-component.ts
@@ -1,6 +1,6 @@
 import { defineComponent } from '../manifest';
 import type { StatusAnnouncerProps } from './props';
 
-export default defineComponent<StatusAnnouncerProps>()({
+export default defineComponent<StatusAnnouncerProps>({
   name: 'StatusAnnouncer',
 });
diff --git a/packages/core/src/core/ui/status-indicator/status-indicator-component.ts b/packages/core/src/core/ui/status-indicator/status-indicator-component.ts
index 97e91bee..15dd0d9d 100644
--- a/packages/core/src/core/ui/status-indicator/status-indicator-component.ts
+++ b/packages/core/src/core/ui/status-indicator/status-indicator-component.ts
@@ -1,12 +1,12 @@
 import { StatusIndicatorDataAttrs } from '../input-feedback/status-indicator-data-attrs';
-import { defineComponent, defineComponentPart } from '../manifest';
+import { defineComponent } from '../manifest';
 import type { StatusIndicatorProps } from './props';
 
-export default defineComponent()({
+export default defineComponent({
   name: 'StatusIndicator',
   parts: {
-    Root: defineComponentPart<StatusIndicatorProps>(),
-    Value: defineComponentPart(),
+    Root: defineComponent<StatusIndicatorProps>(),
+    Value: defineComponent(),
   },
   dataAttrs: StatusIndicatorDataAttrs,
 });
diff --git a/packages/core/src/core/ui/tests/jsx-runtime.test-d.tsx b/packages/core/src/core/ui/tests/jsx-runtime.test-d.tsx
index 4b0b0b2b..7429abec 100644
--- a/packages/core/src/core/ui/tests/jsx-runtime.test-d.tsx
+++ b/packages/core/src/core/ui/tests/jsx-runtime.test-d.tsx
@@ -5,63 +5,63 @@ import { createComponent, Slot } from '../../../jsx-runtime';
 import type { ContainerProps } from '../container/props';
 import type { GestureProps } from '../gesture/props';
 import type { HotkeyProps } from '../hotkey/props';
-import { defineComponent, defineComponentPart } from '../manifest';
+import { defineComponent } from '../manifest';
 
 const PlayButton = createComponent(
-  defineComponent()({
+  defineComponent({
     name: 'PlayButton',
   })
 );
 
 const Slider = createComponent(
-  defineComponent<{ orientation?: 'horizontal' | 'vertical'; thumbAlignment?: 'center' | 'edge' }>()({
+  defineComponent({
     name: 'Slider',
     parts: {
-      Root: defineComponentPart<{ orientation?: 'horizontal' | 'vertical'; thumbAlignment?: 'center' | 'edge' }>(),
-      Track: defineComponentPart(),
-      Fill: defineComponentPart(),
-      Thumb: defineComponentPart(),
-      Value: defineComponentPart<{ type?: 'current' | 'pointer' }>(),
+      Root: defineComponent<{ orientation?: 'horizontal' | 'vertical'; thumbAlignment?: 'center' | 'edge' }>(),
+      Track: defineComponent(),
+      Fill: defineComponent(),
+      Thumb: defineComponent(),
+      Value: defineComponent<{ type?: 'current' | 'pointer' }>(),
     },
   })
 );
 
 const Time = createComponent(
-  defineComponent()({
+  defineComponent({
     name: 'Time',
     parts: {
-      Value: defineComponentPart<{ type: 'current' | 'duration' }>(),
+      Value: defineComponent<{ type: 'current' | 'duration' }>(),
     },
   })
 );
 
 const Menu = createComponent(
-  defineComponent()({
+  defineComponent({
     name: 'Menu',
     parts: {
-      Root: defineComponentPart(),
-      Trigger: defineComponentPart<{ type?: 'quality' | 'playback-rate' | 'captions'; disabled?: boolean }>(),
-      RadioGroup: defineComponentPart<{ value: string; onValueChange: (value: string) => void }>(),
-      RadioItem: defineComponentPart<{ value: string; disabled?: boolean }>(),
-      ItemIndicator: defineComponentPart<{ checked?: boolean; forceMount?: boolean }>(),
+      Root: defineComponent(),
+      Trigger: defineComponent<{ type?: 'quality' | 'playback-rate' | 'captions'; disabled?: boolean }>(),
+      RadioGroup: defineComponent<{ value: string; onValueChange: (value: string) => void }>(),
+      RadioItem: defineComponent<{ value: string; disabled?: boolean }>(),
+      ItemIndicator: defineComponent<{ checked?: boolean; forceMount?: boolean }>(),
     },
   })
 );
 
 const Container = createComponent(
-  defineComponent<ContainerProps>()({
+  defineComponent<ContainerProps>({
     name: 'Container',
   })
 );
 
 const Hotkey = createComponent(
-  defineComponent<HotkeyProps>()({
+  defineComponent<HotkeyProps>({
     name: 'Hotkey',
   })
 );
 
 const Gesture = createComponent(
-  defineComponent<GestureProps>()({
+  defineComponent<GestureProps>({
     name: 'Gesture',
   })
 );
diff --git a/packages/core/src/core/ui/tests/jsx-runtime.test.ts b/packages/core/src/core/ui/tests/jsx-runtime.test.ts
index fe35b940..8fbbe818 100644
--- a/packages/core/src/core/ui/tests/jsx-runtime.test.ts
+++ b/packages/core/src/core/ui/tests/jsx-runtime.test.ts
@@ -1,18 +1,20 @@
 import { describe, expect, it } from 'vitest';
 
 import { createComponent } from '../../../jsx-runtime';
-import { defineComponent, defineComponentPart, defineComponentPartGroup } from '../manifest';
+import { defineComponent } from '../manifest';
 
 describe('createComponent', () => {
   it('creates nested component parts with dotted part paths', () => {
     const Slider = createComponent(
-      defineComponent()({
+      defineComponent({
         name: 'Slider',
         parts: {
-          Root: defineComponentPart(),
-          Thumbnail: defineComponentPartGroup({
-            Root: defineComponentPart(),
-            Image: defineComponentPart(),
+          Root: defineComponent(),
+          Thumbnail: defineComponent({
+            parts: {
+              Root: defineComponent(),
+              Image: defineComponent(),
+            },
           }),
         },
       })
diff --git a/packages/core/src/core/ui/text/text-component.ts b/packages/core/src/core/ui/text/text-component.ts
index bfdad25d..6afa4e54 100644
--- a/packages/core/src/core/ui/text/text-component.ts
+++ b/packages/core/src/core/ui/text/text-component.ts
@@ -1,5 +1,5 @@
 import { defineComponent } from '../manifest';
 
-export default defineComponent()({
+export default defineComponent({
   name: 'Text',
 });
diff --git a/packages/core/src/core/ui/thumbnail/thumbnail-component.ts b/packages/core/src/core/ui/thumbnail/thumbnail-component.ts
index 74fe8660..b927ad52 100644
--- a/packages/core/src/core/ui/thumbnail/thumbnail-component.ts
+++ b/packages/core/src/core/ui/thumbnail/thumbnail-component.ts
@@ -2,7 +2,7 @@ import { defineComponent } from '../manifest';
 import type { ThumbnailProps } from './props';
 import { ThumbnailDataAttrs } from './thumbnail-data-attrs';
 
-export default defineComponent<ThumbnailProps>()({
+export default defineComponent<ThumbnailProps>({
   name: 'Thumbnail',
   dataAttrs: ThumbnailDataAttrs,
 });
diff --git a/packages/core/src/core/ui/time-slider/time-slider-component.ts b/packages/core/src/core/ui/time-slider/time-slider-component.ts
index a0b9b62d..4dc6690e 100644
--- a/packages/core/src/core/ui/time-slider/time-slider-component.ts
+++ b/packages/core/src/core/ui/time-slider/time-slider-component.ts
@@ -1,18 +1,18 @@
-import { defineComponent, defineComponentPart } from '../manifest';
+import { defineComponent } from '../manifest';
 import type { SliderValueProps } from '../slider/props';
 import type { TimeSliderProps } from './props';
 import { TimeSliderDataAttrs } from './time-slider-data-attrs';
 
-export default defineComponent()({
+export default defineComponent({
   name: 'TimeSlider',
   parts: {
-    Root: defineComponentPart<TimeSliderProps>(),
-    Track: defineComponentPart(),
-    Fill: defineComponentPart(),
-    Buffer: defineComponentPart(),
-    Thumb: defineComponentPart(),
-    Preview: defineComponentPart(),
-    Value: defineComponentPart<SliderValueProps>(),
+    Root: defineComponent<TimeSliderProps>(),
+    Track: defineComponent(),
+    Fill: defineComponent(),
+    Buffer: defineComponent(),
+    Thumb: defineComponent(),
+    Preview: defineComponent(),
+    Value: defineComponent<SliderValueProps>(),
   },
   dataAttrs: TimeSliderDataAttrs,
 });
diff --git a/packages/core/src/core/ui/time/time-component.ts b/packages/core/src/core/ui/time/time-component.ts
index 1913313b..934fc35f 100644
--- a/packages/core/src/core/ui/time/time-component.ts
+++ b/packages/core/src/core/ui/time/time-component.ts
@@ -1,13 +1,13 @@
-import { defineComponent, defineComponentPart } from '../manifest';
+import { defineComponent } from '../manifest';
 import type { TimeProps } from './props';
 import { TimeDataAttrs } from './time-data-attrs';
 
-export default defineComponent()({
+export default defineComponent({
   name: 'Time',
   parts: {
-    Group: defineComponentPart(),
-    Separator: defineComponentPart(),
-    Value: defineComponentPart<TimeProps>(),
+    Group: defineComponent(),
+    Separator: defineComponent(),
+    Value: defineComponent<TimeProps>(),
   },
   dataAttrs: TimeDataAttrs,
 });
diff --git a/packages/core/src/core/ui/tooltip/tooltip-component.ts b/packages/core/src/core/ui/tooltip/tooltip-component.ts
index f0adbb6c..fafb3b19 100644
--- a/packages/core/src/core/ui/tooltip/tooltip-component.ts
+++ b/packages/core/src/core/ui/tooltip/tooltip-component.ts
@@ -1,17 +1,17 @@
-import { defineComponent, defineComponentPart } from '../manifest';
+import { defineComponent } from '../manifest';
 import type { TooltipProps } from './props';
 import { TooltipDataAttrs } from './tooltip-data-attrs';
 
-export default defineComponent()({
+export default defineComponent({
   name: 'Tooltip',
   parts: {
-    Provider: defineComponentPart(),
-    Root: defineComponentPart<TooltipProps>(),
-    Trigger: defineComponentPart(),
-    Popup: defineComponentPart(),
-    Arrow: defineComponentPart(),
-    Label: defineComponentPart(),
-    Shortcut: defineComponentPart(),
+    Provider: defineComponent(),
+    Root: defineComponent<TooltipProps>(),
+    Trigger: defineComponent(),
+    Popup: defineComponent(),
+    Arrow: defineComponent(),
+    Label: defineComponent(),
+    Shortcut: defineComponent(),
   },
   dataAttrs: TooltipDataAttrs,
 });
diff --git a/packages/core/src/core/ui/volume-indicator/volume-indicator-component.ts b/packages/core/src/core/ui/volume-indicator/volume-indicator-component.ts
index acbd58d8..4f19a934 100644
--- a/packages/core/src/core/ui/volume-indicator/volume-indicator-component.ts
+++ b/packages/core/src/core/ui/volume-indicator/volume-indicator-component.ts
@@ -1,13 +1,13 @@
 import { VolumeIndicatorDataAttrs } from '../input-feedback/volume-indicator-data-attrs';
-import { defineComponent, defineComponentPart } from '../manifest';
+import { defineComponent } from '../manifest';
 import type { VolumeIndicatorProps } from './props';
 
-export default defineComponent()({
+export default defineComponent({
   name: 'VolumeIndicator',
   parts: {
-    Root: defineComponentPart<VolumeIndicatorProps>(),
-    Fill: defineComponentPart(),
-    Value: defineComponentPart(),
+    Root: defineComponent<VolumeIndicatorProps>(),
+    Fill: defineComponent(),
+    Value: defineComponent(),
   },
   dataAttrs: VolumeIndicatorDataAttrs,
 });
diff --git a/packages/core/src/core/ui/volume-slider/volume-slider-component.ts b/packages/core/src/core/ui/volume-slider/volume-slider-component.ts
index 5f17b0ef..0e2b73a2 100644
--- a/packages/core/src/core/ui/volume-slider/volume-slider-component.ts
+++ b/packages/core/src/core/ui/volume-slider/volume-slider-component.ts
@@ -1,17 +1,17 @@
-import { defineComponent, defineComponentPart } from '../manifest';
+import { defineComponent } from '../manifest';
 import type { SliderValueProps } from '../slider/props';
 import type { VolumeSliderProps } from './props';
 import { VolumeSliderDataAttrs } from './volume-slider-data-attrs';
 
-export default defineComponent()({
+export default defineComponent({
   name: 'VolumeSlider',
   parts: {
-    Root: defineComponentPart<VolumeSliderProps>(),
-    Track: defineComponentPart(),
-    Fill: defineComponentPart(),
-    Thumb: defineComponentPart(),
-    Preview: defineComponentPart(),
-    Value: defineComponentPart<SliderValueProps>(),
+    Root: defineComponent<VolumeSliderProps>(),
+    Track: defineComponent(),
+    Fill: defineComponent(),
+    Thumb: defineComponent(),
+    Preview: defineComponent(),
+    Value: defineComponent<SliderValueProps>(),
   },
   dataAttrs: VolumeSliderDataAttrs,
 });
diff --git a/packages/core/src/jsx-runtime.ts b/packages/core/src/jsx-runtime.ts
index 1d8f4a1a..26c1dab3 100644
--- a/packages/core/src/jsx-runtime.ts
+++ b/packages/core/src/jsx-runtime.ts
@@ -1,10 +1,9 @@
-import type {
-  AnyComponentManifest,
-  ComponentGroupManifest,
-  ComponentPart,
-  ComponentPartGroup,
-  ComponentPartRecord,
-  InferProps,
+import {
+  type ComponentDefinition,
+  type ComponentManifest,
+  type ComponentRecord,
+  hasParts,
+  type InferProps,
 } from './core/ui/manifest';
 
 export const VIDEOJS_NODE = Symbol.for('@videojs/node');
@@ -41,21 +40,26 @@ export interface Component<Props extends object> {
   readonly $$component: { name: string; part: string | null };
 }
 
-type InferPartNodeProps<Node> = Node extends ComponentPart<infer Props> ? Props : never;
+type InferComponentNodeProps<Node> = Node extends ComponentDefinition<infer Props, any> ? Props : never;
 
-type PartComponentProps<Node> = [NonNullable<InferPartNodeProps<Node>>] extends [never]
+type ComponentNodeProps<Node> = [NonNullable<InferComponentNodeProps<Node>>] extends [never]
   ? EmptyProps
-  : NonNullable<InferPartNodeProps<Node>>;
+  : NonNullable<InferComponentNodeProps<Node>>;
 
-type CompoundComponent<Parts extends ComponentPartRecord> = {
-  [K in keyof Parts & string]: Parts[K] extends ComponentPartGroup<infer ChildParts>
-    ? CompoundComponent<ChildParts>
-    : Component<PartComponentProps<Parts[K]>>;
+type CompoundComponent<Parts extends ComponentRecord> = {
+  [K in keyof Parts & string]: Parts[K] extends ComponentDefinition<any, infer ChildParts>
+    ? ChildParts extends ComponentRecord
+      ? CompoundComponent<ChildParts>
+      : Component<ComponentNodeProps<Parts[K]>>
+    : Component<ComponentNodeProps<Parts[K]>>;
 };
 
-export type CreateComponentResult<M> = M extends ComponentGroupManifest
-  ? CompoundComponent<M['parts']>
-  : Component<InferProps<M>>;
+export type CreateComponentResult<M> =
+  M extends ComponentDefinition<any, infer Parts>
+    ? Parts extends ComponentRecord
+      ? CompoundComponent<Parts>
+      : Component<InferProps<M>>
+    : Component<InferProps<M>>;
 
 function createRuntimeComponentPart<Props extends object>(name: string, part: string | null): Component<Props> {
   const fn = (_props: BaseProps & Props): ComponentNode => {
@@ -69,23 +73,28 @@ function createRuntimeComponentPart<Props extends object>(name: string, part: st
 
 export const Slot = createRuntimeComponentPart<SlotProps>('Slot', null);
 
-export function createComponent<M extends AnyComponentManifest>(manifest: M): CreateComponentResult<M> {
-  if (!('parts' in manifest)) {
-    return createRuntimeComponentPart(manifest.name, null) as CreateComponentResult<M>;
+export function createComponent<Props extends object>(manifest: ComponentManifest<Props, undefined>): Component<Props>;
+export function createComponent<const Parts extends ComponentRecord>(
+  manifest: ComponentManifest<object, Parts>
+): CompoundComponent<Parts>;
+export function createComponent(manifest: ComponentManifest): Component<object> | Record<string, unknown> {
+  if (!hasParts(manifest)) {
+    return createRuntimeComponentPart(manifest.name, null);
   }
 
-  return createComponentParts(manifest.name, manifest.parts) as CreateComponentResult<M>;
+  return createComponentParts(manifest.name, manifest.parts);
 }
 
-function createComponentParts(name: string, parts: ComponentPartRecord, prefix = ''): Record<string, unknown> {
+function createComponentParts(name: string, parts: ComponentRecord, prefix = ''): Record<string, unknown> {
   const compound: Record<string, unknown> = {};
 
   for (const part of Object.keys(parts)) {
     const path = prefix ? `${prefix}.${part}` : part;
     const value = parts[part]!;
 
-    compound[part] =
-      'parts' in value ? createComponentParts(name, value.parts, path) : createRuntimeComponentPart(name, path);
+    compound[part] = hasParts(value)
+      ? createComponentParts(name, value.parts, path)
+      : createRuntimeComponentPart(name, path);
   }
 
   return compound;
diff --git a/packages/react/skins.compiler.config.ts b/packages/react/skins.compiler.config.ts
index 13c8c04b..adb9c7c4 100644
--- a/packages/react/skins.compiler.config.ts
+++ b/packages/react/skins.compiler.config.ts
@@ -62,7 +62,6 @@ export default defineConfig({
               code.create.jsx.element(Poster, {
                 src: code.create.value.onlyIf({ value: 'poster', condition: isString }),
                 render: code.create.value.onlyIf({ value: 'poster', condition: isRenderProp }),
-                className: code.create.value.identifier('posterClass'),
               })
             );
           },
diff --git a/packages/react/src/presets/tests/skins-compiler-config.test.ts b/packages/react/src/presets/tests/skins-compiler-config.test.ts
index 7c4469c4..185a1c07 100644
--- a/packages/react/src/presets/tests/skins-compiler-config.test.ts
+++ b/packages/react/src/presets/tests/skins-compiler-config.test.ts
@@ -54,7 +54,7 @@ describe('skins compiler config', () => {
     expect(compactCode).toContain(compact('<Container className={cn(container, className)} {...rest}>'));
     expect(compactCode).toContain(
       compact(
-        '{poster && <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} className={posterClass} />}'
+        '{poster && <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} />}'
       )
     );
     expect(compactCode).toContain(compact('<BufferingIndicator className={bufferingIndicator.root}>'));
diff --git a/packages/react/src/presets/video/default-video.generated.tailwind.tsx b/packages/react/src/presets/video/default-video.generated.tailwind.tsx
index 07b21a88..a0ecb6aa 100644
--- a/packages/react/src/presets/video/default-video.generated.tailwind.tsx
+++ b/packages/react/src/presets/video/default-video.generated.tailwind.tsx
@@ -18,7 +18,6 @@ import {
   pipIcon,
   playIcon,
   popup,
-  poster as posterClass,
   seek,
   slider,
   thumbnail,
@@ -92,11 +91,7 @@ export function DefaultVideoSkin({ className, children, poster, ...rest }: Defau
       {children}
 
       {poster && (
-        <Poster
-          src={isString(poster) ? poster : undefined}
-          render={isRenderProp(poster) ? poster : undefined}
-          className={posterClass}
-        />
+        <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} />
       )}
 
       <BufferingIndicator className={bufferingIndicator.root}>
diff --git a/packages/skins/src/default/video.skin.tsx b/packages/skins/src/default/video.skin.tsx
index 2b199444..91b2c247 100644
--- a/packages/skins/src/default/video.skin.tsx
+++ b/packages/skins/src/default/video.skin.tsx
@@ -62,7 +62,6 @@ import {
   pipIcon,
   playIcon,
   popup,
-  poster as posterClass,
   seek,
   slider,
   thumbnail,
@@ -84,7 +83,7 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
     <Container className={[container, className]}>
       {children}
 
-      <Poster className={posterClass} />
+      <Poster />
 
       <BufferingIndicator className={bufferingIndicator.root}>
         <SpinnerIcon className={icon} />