@toriistudio/v0-playground 0.5.3 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +1 -20
  2. package/dist/index.d.mts +103 -30
  3. package/dist/index.d.ts +103 -30
  4. package/dist/index.js +1132 -342
  5. package/dist/index.mjs +1132 -338
  6. package/dist/preset.d.mts +5 -0
  7. package/dist/preset.d.ts +5 -0
  8. package/package.json +4 -33
package/README.md CHANGED
@@ -22,7 +22,7 @@ Perfect for prototyping components, sharing usage examples, or building your own
22
22
  To use `@toriistudio/v0-playground`, you’ll need to install the following peer dependencies:
23
23
 
24
24
  ```bash
25
- yarn add @radix-ui/react-label @radix-ui/react-select @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch class-variance-authority clsx lucide-react tailwind-merge tailwindcss-animate @react-three/drei @react-three/fiber three lodash
25
+ yarn add @radix-ui/react-label @radix-ui/react-select @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch class-variance-authority clsx lucide-react tailwind-merge tailwindcss-animate lodash
26
26
  ```
27
27
 
28
28
  Or automate it with:
@@ -83,25 +83,6 @@ export default function App() {
83
83
  }
84
84
  ```
85
85
 
86
- ### R3F Canvas
87
-
88
- `PlaygroundCanvas` wraps the playground with a react-three-fiber canvas. Pass any
89
- `Canvas` props through `mediaProps`:
90
-
91
- ```ts
92
- import { PlaygroundCanvas } from "@toriistudio/v0-playground";
93
-
94
- export default function Scene() {
95
- return (
96
- <PlaygroundCanvas mediaProps={{ size: { width: 300, height: 300 } }}>
97
- <MyR3FComponent />
98
- </PlaygroundCanvas>
99
- );
100
- }
101
- ```
102
-
103
- See [`examples/r3f-canvas`](./examples/r3f-canvas) for a full working example.
104
-
105
86
  ## 💡 Example Use Cases
106
87
 
107
88
  - Build custom component sandboxes
package/dist/index.d.mts CHANGED
@@ -8,27 +8,6 @@ declare function Playground({ children }: {
8
8
  children: ReactNode;
9
9
  }): react_jsx_runtime.JSX.Element | null;
10
10
 
11
- type CanvasMediaProps = {
12
- debugOrbit?: boolean;
13
- size: {
14
- width: number;
15
- height: number;
16
- } | null;
17
- };
18
- type CanvasProps = {
19
- mediaProps?: CanvasMediaProps;
20
- children: React__default.ReactNode;
21
- };
22
- declare const Canvas: React__default.FC<CanvasProps>;
23
-
24
- type PlaygroundCanvasProps = {
25
- children: React__default.ReactNode;
26
- mediaProps?: CanvasMediaProps;
27
- };
28
- declare const PlaygroundCanvas: React__default.FC<PlaygroundCanvasProps>;
29
-
30
- declare function CameraLogger(): react_jsx_runtime.JSX.Element;
31
-
32
11
  declare const buttonVariants: (props?: ({
33
12
  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
34
13
  size?: "default" | "sm" | "lg" | "icon" | null | undefined;
@@ -38,8 +17,65 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Var
38
17
  }
39
18
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
40
19
 
20
+ type PaletteChannelKey = "r" | "g" | "b";
21
+ type AdvancedPaletteSection = {
22
+ key: string;
23
+ label: string;
24
+ helper?: string;
25
+ };
26
+ type AdvancedPaletteValue = Record<PaletteChannelKey, number>;
27
+ type AdvancedPalette = Record<string, AdvancedPaletteValue>;
28
+ type AdvancedPaletteValueSource = AdvancedPaletteValue | Partial<Record<PaletteChannelKey, number>> | string;
29
+ type AdvancedPaletteRecordSource = Record<string, AdvancedPaletteValueSource>;
30
+ type AdvancedPaletteSource = AdvancedPalette | string[] | AdvancedPaletteRecordSource | undefined;
31
+ type AdvancedPaletteRange = {
32
+ min: number;
33
+ max: number;
34
+ step: number;
35
+ };
36
+ type AdvancedPaletteRanges = Record<string, AdvancedPaletteRange>;
37
+ declare const DEFAULT_HEX_PALETTE: AdvancedPaletteRecordSource;
38
+ declare const computePaletteGradient: (palette: AdvancedPalette, steps?: number) => string;
39
+ declare const createPaletteSignature: (palette: AdvancedPalette) => string;
40
+ declare const clonePalette: (palette: AdvancedPalette) => AdvancedPalette;
41
+ declare const hexToPaletteValue: (hex: string) => AdvancedPaletteValue;
42
+ declare const paletteValueToHex: (value: AdvancedPaletteValue) => string;
43
+ declare const createAdvancedPalette: (source?: AdvancedPaletteSource, options?: {
44
+ sectionOrder?: string[];
45
+ }) => AdvancedPalette;
46
+ declare const DEFAULT_ADVANCED_PALETTE: AdvancedPalette;
47
+ declare const advancedPaletteToHexColors: (palette: AdvancedPalette, options?: {
48
+ sectionOrder?: string[];
49
+ fallbackPalette?: AdvancedPalette;
50
+ defaultColor?: string;
51
+ }) => string[];
52
+ type AdvancedPaletteControlConfig = {
53
+ defaultPalette?: AdvancedPaletteSource;
54
+ sections?: AdvancedPaletteSection[];
55
+ ranges?: AdvancedPaletteRanges;
56
+ channelLabels?: Partial<Record<PaletteChannelKey, string>>;
57
+ hiddenKeyPrefix?: string;
58
+ controlKey?: string;
59
+ gradientSteps?: number;
60
+ onPaletteChange?: (palette: AdvancedPalette) => void;
61
+ onInteraction?: () => void;
62
+ folder?: string;
63
+ folderPlacement?: "top" | "bottom";
64
+ };
65
+ type ResolvedAdvancedPaletteConfig = AdvancedPaletteControlConfig & {
66
+ defaultPalette: AdvancedPalette;
67
+ sections: AdvancedPaletteSection[];
68
+ ranges: AdvancedPaletteRanges;
69
+ channelLabels: Record<PaletteChannelKey, string>;
70
+ hiddenKeyPrefix: string;
71
+ controlKey: string;
72
+ gradientSteps: number;
73
+ };
74
+
41
75
  type BaseControl = {
42
76
  hidden?: boolean;
77
+ folder?: string;
78
+ folderPlacement?: "top" | "bottom";
43
79
  };
44
80
  type ControlType = ({
45
81
  type: "boolean";
@@ -67,18 +103,35 @@ type ControlType = ({
67
103
  render?: () => React__default.ReactNode;
68
104
  } & BaseControl);
69
105
  type ControlsSchema = Record<string, ControlType>;
106
+ type CopyButtonFnArgs = {
107
+ componentName?: string;
108
+ values: Record<string, any>;
109
+ schema: ControlsSchema;
110
+ jsx: string;
111
+ jsonToComponentString: (options: {
112
+ componentName?: string;
113
+ props: Record<string, unknown>;
114
+ }) => string;
115
+ };
70
116
  type ControlsConfig = {
71
117
  showCopyButton?: boolean;
118
+ showCopyButtonFn?: (args: CopyButtonFnArgs) => string | null | undefined;
72
119
  mainLabel?: string;
73
120
  showGrid?: boolean;
121
+ showPresentationButton?: boolean;
122
+ addAdvancedPaletteControl?: ResolvedAdvancedPaletteConfig;
123
+ };
124
+ type UseControlsConfig = Omit<ControlsConfig, "addAdvancedPaletteControl"> & {
125
+ addAdvancedPaletteControl?: AdvancedPaletteControlConfig;
126
+ };
127
+ type UseControlsOptions = {
128
+ componentName?: string;
129
+ config?: UseControlsConfig;
74
130
  };
75
131
  declare const ControlsProvider: ({ children }: {
76
132
  children: ReactNode;
77
133
  }) => react_jsx_runtime.JSX.Element;
78
- declare const useControls: <T extends ControlsSchema>(schema: T, options?: {
79
- componentName?: string;
80
- config?: ControlsConfig;
81
- }) => { [K in keyof T]: T[K] extends {
134
+ declare const useControls: <T extends ControlsSchema>(schema: T, options?: UseControlsOptions) => { [K in keyof T]: T[K] extends {
82
135
  value: infer V;
83
136
  } ? V : never; } & {
84
137
  controls: Record<string, any>;
@@ -86,10 +139,7 @@ declare const useControls: <T extends ControlsSchema>(schema: T, options?: {
86
139
  setValue: (key: string, value: any) => void;
87
140
  jsx: () => string;
88
141
  };
89
- declare const useUrlSyncedControls: <T extends ControlsSchema>(schema: T, options?: {
90
- componentName?: string;
91
- config?: ControlsConfig;
92
- }) => { [K in keyof T]: T[K] extends {
142
+ declare const useUrlSyncedControls: <T extends ControlsSchema>(schema: T, options?: UseControlsOptions) => { [K in keyof T]: T[K] extends {
93
143
  value: infer V;
94
144
  } ? V : never; } & {
95
145
  controls: Record<string, any>;
@@ -98,4 +148,27 @@ declare const useUrlSyncedControls: <T extends ControlsSchema>(schema: T, option
98
148
  jsx: () => string;
99
149
  };
100
150
 
101
- export { Button, CameraLogger, Canvas, type ControlType, ControlsProvider, type ControlsSchema, Playground, PlaygroundCanvas, useControls, useUrlSyncedControls };
151
+ type ControlOverrides = Omit<AdvancedPaletteControlConfig, "defaultPalette" | "onPaletteChange">;
152
+ type UseAdvancedPaletteControlsOptions = {
153
+ defaultPalette?: AdvancedPaletteSource;
154
+ fallbackPalette?: AdvancedPaletteSource;
155
+ sectionOrder?: string[];
156
+ defaultColor?: string;
157
+ gradientSteps?: number;
158
+ control?: ControlOverrides;
159
+ onChange?: (palette: AdvancedPalette) => void;
160
+ };
161
+ type UseAdvancedPaletteControlsResult = {
162
+ palette: Readonly<AdvancedPalette>;
163
+ hexColors: string[];
164
+ controlConfig: AdvancedPaletteControlConfig;
165
+ paletteGradient: string;
166
+ setPalette: (source: AdvancedPaletteSource) => void;
167
+ updatePalette: (updater: (current: AdvancedPalette) => AdvancedPaletteSource) => void;
168
+ resetPalette: () => void;
169
+ paletteSignature: string;
170
+ };
171
+ declare const useAdvancedPaletteControls: (options?: UseAdvancedPaletteControlsOptions) => UseAdvancedPaletteControlsResult;
172
+ declare const useDefaultAdvancedPaletteControls: () => UseAdvancedPaletteControlsResult;
173
+
174
+ export { type AdvancedPalette, type AdvancedPaletteControlConfig, type AdvancedPaletteRecordSource, type AdvancedPaletteSource, type AdvancedPaletteValueSource, Button, type ControlType, ControlsProvider, type ControlsSchema, DEFAULT_ADVANCED_PALETTE, DEFAULT_HEX_PALETTE, type PaletteChannelKey, Playground, type UseAdvancedPaletteControlsOptions, type UseAdvancedPaletteControlsResult, advancedPaletteToHexColors, clonePalette, computePaletteGradient, createAdvancedPalette, createPaletteSignature, hexToPaletteValue, paletteValueToHex, useAdvancedPaletteControls, useControls, useDefaultAdvancedPaletteControls, useUrlSyncedControls };
package/dist/index.d.ts CHANGED
@@ -8,27 +8,6 @@ declare function Playground({ children }: {
8
8
  children: ReactNode;
9
9
  }): react_jsx_runtime.JSX.Element | null;
10
10
 
11
- type CanvasMediaProps = {
12
- debugOrbit?: boolean;
13
- size: {
14
- width: number;
15
- height: number;
16
- } | null;
17
- };
18
- type CanvasProps = {
19
- mediaProps?: CanvasMediaProps;
20
- children: React__default.ReactNode;
21
- };
22
- declare const Canvas: React__default.FC<CanvasProps>;
23
-
24
- type PlaygroundCanvasProps = {
25
- children: React__default.ReactNode;
26
- mediaProps?: CanvasMediaProps;
27
- };
28
- declare const PlaygroundCanvas: React__default.FC<PlaygroundCanvasProps>;
29
-
30
- declare function CameraLogger(): react_jsx_runtime.JSX.Element;
31
-
32
11
  declare const buttonVariants: (props?: ({
33
12
  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
34
13
  size?: "default" | "sm" | "lg" | "icon" | null | undefined;
@@ -38,8 +17,65 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Var
38
17
  }
39
18
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
40
19
 
20
+ type PaletteChannelKey = "r" | "g" | "b";
21
+ type AdvancedPaletteSection = {
22
+ key: string;
23
+ label: string;
24
+ helper?: string;
25
+ };
26
+ type AdvancedPaletteValue = Record<PaletteChannelKey, number>;
27
+ type AdvancedPalette = Record<string, AdvancedPaletteValue>;
28
+ type AdvancedPaletteValueSource = AdvancedPaletteValue | Partial<Record<PaletteChannelKey, number>> | string;
29
+ type AdvancedPaletteRecordSource = Record<string, AdvancedPaletteValueSource>;
30
+ type AdvancedPaletteSource = AdvancedPalette | string[] | AdvancedPaletteRecordSource | undefined;
31
+ type AdvancedPaletteRange = {
32
+ min: number;
33
+ max: number;
34
+ step: number;
35
+ };
36
+ type AdvancedPaletteRanges = Record<string, AdvancedPaletteRange>;
37
+ declare const DEFAULT_HEX_PALETTE: AdvancedPaletteRecordSource;
38
+ declare const computePaletteGradient: (palette: AdvancedPalette, steps?: number) => string;
39
+ declare const createPaletteSignature: (palette: AdvancedPalette) => string;
40
+ declare const clonePalette: (palette: AdvancedPalette) => AdvancedPalette;
41
+ declare const hexToPaletteValue: (hex: string) => AdvancedPaletteValue;
42
+ declare const paletteValueToHex: (value: AdvancedPaletteValue) => string;
43
+ declare const createAdvancedPalette: (source?: AdvancedPaletteSource, options?: {
44
+ sectionOrder?: string[];
45
+ }) => AdvancedPalette;
46
+ declare const DEFAULT_ADVANCED_PALETTE: AdvancedPalette;
47
+ declare const advancedPaletteToHexColors: (palette: AdvancedPalette, options?: {
48
+ sectionOrder?: string[];
49
+ fallbackPalette?: AdvancedPalette;
50
+ defaultColor?: string;
51
+ }) => string[];
52
+ type AdvancedPaletteControlConfig = {
53
+ defaultPalette?: AdvancedPaletteSource;
54
+ sections?: AdvancedPaletteSection[];
55
+ ranges?: AdvancedPaletteRanges;
56
+ channelLabels?: Partial<Record<PaletteChannelKey, string>>;
57
+ hiddenKeyPrefix?: string;
58
+ controlKey?: string;
59
+ gradientSteps?: number;
60
+ onPaletteChange?: (palette: AdvancedPalette) => void;
61
+ onInteraction?: () => void;
62
+ folder?: string;
63
+ folderPlacement?: "top" | "bottom";
64
+ };
65
+ type ResolvedAdvancedPaletteConfig = AdvancedPaletteControlConfig & {
66
+ defaultPalette: AdvancedPalette;
67
+ sections: AdvancedPaletteSection[];
68
+ ranges: AdvancedPaletteRanges;
69
+ channelLabels: Record<PaletteChannelKey, string>;
70
+ hiddenKeyPrefix: string;
71
+ controlKey: string;
72
+ gradientSteps: number;
73
+ };
74
+
41
75
  type BaseControl = {
42
76
  hidden?: boolean;
77
+ folder?: string;
78
+ folderPlacement?: "top" | "bottom";
43
79
  };
44
80
  type ControlType = ({
45
81
  type: "boolean";
@@ -67,18 +103,35 @@ type ControlType = ({
67
103
  render?: () => React__default.ReactNode;
68
104
  } & BaseControl);
69
105
  type ControlsSchema = Record<string, ControlType>;
106
+ type CopyButtonFnArgs = {
107
+ componentName?: string;
108
+ values: Record<string, any>;
109
+ schema: ControlsSchema;
110
+ jsx: string;
111
+ jsonToComponentString: (options: {
112
+ componentName?: string;
113
+ props: Record<string, unknown>;
114
+ }) => string;
115
+ };
70
116
  type ControlsConfig = {
71
117
  showCopyButton?: boolean;
118
+ showCopyButtonFn?: (args: CopyButtonFnArgs) => string | null | undefined;
72
119
  mainLabel?: string;
73
120
  showGrid?: boolean;
121
+ showPresentationButton?: boolean;
122
+ addAdvancedPaletteControl?: ResolvedAdvancedPaletteConfig;
123
+ };
124
+ type UseControlsConfig = Omit<ControlsConfig, "addAdvancedPaletteControl"> & {
125
+ addAdvancedPaletteControl?: AdvancedPaletteControlConfig;
126
+ };
127
+ type UseControlsOptions = {
128
+ componentName?: string;
129
+ config?: UseControlsConfig;
74
130
  };
75
131
  declare const ControlsProvider: ({ children }: {
76
132
  children: ReactNode;
77
133
  }) => react_jsx_runtime.JSX.Element;
78
- declare const useControls: <T extends ControlsSchema>(schema: T, options?: {
79
- componentName?: string;
80
- config?: ControlsConfig;
81
- }) => { [K in keyof T]: T[K] extends {
134
+ declare const useControls: <T extends ControlsSchema>(schema: T, options?: UseControlsOptions) => { [K in keyof T]: T[K] extends {
82
135
  value: infer V;
83
136
  } ? V : never; } & {
84
137
  controls: Record<string, any>;
@@ -86,10 +139,7 @@ declare const useControls: <T extends ControlsSchema>(schema: T, options?: {
86
139
  setValue: (key: string, value: any) => void;
87
140
  jsx: () => string;
88
141
  };
89
- declare const useUrlSyncedControls: <T extends ControlsSchema>(schema: T, options?: {
90
- componentName?: string;
91
- config?: ControlsConfig;
92
- }) => { [K in keyof T]: T[K] extends {
142
+ declare const useUrlSyncedControls: <T extends ControlsSchema>(schema: T, options?: UseControlsOptions) => { [K in keyof T]: T[K] extends {
93
143
  value: infer V;
94
144
  } ? V : never; } & {
95
145
  controls: Record<string, any>;
@@ -98,4 +148,27 @@ declare const useUrlSyncedControls: <T extends ControlsSchema>(schema: T, option
98
148
  jsx: () => string;
99
149
  };
100
150
 
101
- export { Button, CameraLogger, Canvas, type ControlType, ControlsProvider, type ControlsSchema, Playground, PlaygroundCanvas, useControls, useUrlSyncedControls };
151
+ type ControlOverrides = Omit<AdvancedPaletteControlConfig, "defaultPalette" | "onPaletteChange">;
152
+ type UseAdvancedPaletteControlsOptions = {
153
+ defaultPalette?: AdvancedPaletteSource;
154
+ fallbackPalette?: AdvancedPaletteSource;
155
+ sectionOrder?: string[];
156
+ defaultColor?: string;
157
+ gradientSteps?: number;
158
+ control?: ControlOverrides;
159
+ onChange?: (palette: AdvancedPalette) => void;
160
+ };
161
+ type UseAdvancedPaletteControlsResult = {
162
+ palette: Readonly<AdvancedPalette>;
163
+ hexColors: string[];
164
+ controlConfig: AdvancedPaletteControlConfig;
165
+ paletteGradient: string;
166
+ setPalette: (source: AdvancedPaletteSource) => void;
167
+ updatePalette: (updater: (current: AdvancedPalette) => AdvancedPaletteSource) => void;
168
+ resetPalette: () => void;
169
+ paletteSignature: string;
170
+ };
171
+ declare const useAdvancedPaletteControls: (options?: UseAdvancedPaletteControlsOptions) => UseAdvancedPaletteControlsResult;
172
+ declare const useDefaultAdvancedPaletteControls: () => UseAdvancedPaletteControlsResult;
173
+
174
+ export { type AdvancedPalette, type AdvancedPaletteControlConfig, type AdvancedPaletteRecordSource, type AdvancedPaletteSource, type AdvancedPaletteValueSource, Button, type ControlType, ControlsProvider, type ControlsSchema, DEFAULT_ADVANCED_PALETTE, DEFAULT_HEX_PALETTE, type PaletteChannelKey, Playground, type UseAdvancedPaletteControlsOptions, type UseAdvancedPaletteControlsResult, advancedPaletteToHexColors, clonePalette, computePaletteGradient, createAdvancedPalette, createPaletteSignature, hexToPaletteValue, paletteValueToHex, useAdvancedPaletteControls, useControls, useDefaultAdvancedPaletteControls, useUrlSyncedControls };