@toriistudio/v0-playground 0.5.3 → 0.5.5

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 +0 -19
  2. package/dist/index.d.mts +102 -30
  3. package/dist/index.d.ts +102 -30
  4. package/dist/index.js +941 -329
  5. package/dist/index.mjs +935 -325
  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
@@ -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,34 @@ 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
+ addAdvancedPaletteControl?: ResolvedAdvancedPaletteConfig;
122
+ };
123
+ type UseControlsConfig = Omit<ControlsConfig, "addAdvancedPaletteControl"> & {
124
+ addAdvancedPaletteControl?: AdvancedPaletteControlConfig;
125
+ };
126
+ type UseControlsOptions = {
127
+ componentName?: string;
128
+ config?: UseControlsConfig;
74
129
  };
75
130
  declare const ControlsProvider: ({ children }: {
76
131
  children: ReactNode;
77
132
  }) => 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 {
133
+ declare const useControls: <T extends ControlsSchema>(schema: T, options?: UseControlsOptions) => { [K in keyof T]: T[K] extends {
82
134
  value: infer V;
83
135
  } ? V : never; } & {
84
136
  controls: Record<string, any>;
@@ -86,10 +138,7 @@ declare const useControls: <T extends ControlsSchema>(schema: T, options?: {
86
138
  setValue: (key: string, value: any) => void;
87
139
  jsx: () => string;
88
140
  };
89
- declare const useUrlSyncedControls: <T extends ControlsSchema>(schema: T, options?: {
90
- componentName?: string;
91
- config?: ControlsConfig;
92
- }) => { [K in keyof T]: T[K] extends {
141
+ declare const useUrlSyncedControls: <T extends ControlsSchema>(schema: T, options?: UseControlsOptions) => { [K in keyof T]: T[K] extends {
93
142
  value: infer V;
94
143
  } ? V : never; } & {
95
144
  controls: Record<string, any>;
@@ -98,4 +147,27 @@ declare const useUrlSyncedControls: <T extends ControlsSchema>(schema: T, option
98
147
  jsx: () => string;
99
148
  };
100
149
 
101
- export { Button, CameraLogger, Canvas, type ControlType, ControlsProvider, type ControlsSchema, Playground, PlaygroundCanvas, useControls, useUrlSyncedControls };
150
+ type ControlOverrides = Omit<AdvancedPaletteControlConfig, "defaultPalette" | "onPaletteChange">;
151
+ type UseAdvancedPaletteControlsOptions = {
152
+ defaultPalette?: AdvancedPaletteSource;
153
+ fallbackPalette?: AdvancedPaletteSource;
154
+ sectionOrder?: string[];
155
+ defaultColor?: string;
156
+ gradientSteps?: number;
157
+ control?: ControlOverrides;
158
+ onChange?: (palette: AdvancedPalette) => void;
159
+ };
160
+ type UseAdvancedPaletteControlsResult = {
161
+ palette: Readonly<AdvancedPalette>;
162
+ hexColors: string[];
163
+ controlConfig: AdvancedPaletteControlConfig;
164
+ paletteGradient: string;
165
+ setPalette: (source: AdvancedPaletteSource) => void;
166
+ updatePalette: (updater: (current: AdvancedPalette) => AdvancedPaletteSource) => void;
167
+ resetPalette: () => void;
168
+ paletteSignature: string;
169
+ };
170
+ declare const useAdvancedPaletteControls: (options?: UseAdvancedPaletteControlsOptions) => UseAdvancedPaletteControlsResult;
171
+ declare const useDefaultAdvancedPaletteControls: () => UseAdvancedPaletteControlsResult;
172
+
173
+ 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,34 @@ 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
+ addAdvancedPaletteControl?: ResolvedAdvancedPaletteConfig;
122
+ };
123
+ type UseControlsConfig = Omit<ControlsConfig, "addAdvancedPaletteControl"> & {
124
+ addAdvancedPaletteControl?: AdvancedPaletteControlConfig;
125
+ };
126
+ type UseControlsOptions = {
127
+ componentName?: string;
128
+ config?: UseControlsConfig;
74
129
  };
75
130
  declare const ControlsProvider: ({ children }: {
76
131
  children: ReactNode;
77
132
  }) => 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 {
133
+ declare const useControls: <T extends ControlsSchema>(schema: T, options?: UseControlsOptions) => { [K in keyof T]: T[K] extends {
82
134
  value: infer V;
83
135
  } ? V : never; } & {
84
136
  controls: Record<string, any>;
@@ -86,10 +138,7 @@ declare const useControls: <T extends ControlsSchema>(schema: T, options?: {
86
138
  setValue: (key: string, value: any) => void;
87
139
  jsx: () => string;
88
140
  };
89
- declare const useUrlSyncedControls: <T extends ControlsSchema>(schema: T, options?: {
90
- componentName?: string;
91
- config?: ControlsConfig;
92
- }) => { [K in keyof T]: T[K] extends {
141
+ declare const useUrlSyncedControls: <T extends ControlsSchema>(schema: T, options?: UseControlsOptions) => { [K in keyof T]: T[K] extends {
93
142
  value: infer V;
94
143
  } ? V : never; } & {
95
144
  controls: Record<string, any>;
@@ -98,4 +147,27 @@ declare const useUrlSyncedControls: <T extends ControlsSchema>(schema: T, option
98
147
  jsx: () => string;
99
148
  };
100
149
 
101
- export { Button, CameraLogger, Canvas, type ControlType, ControlsProvider, type ControlsSchema, Playground, PlaygroundCanvas, useControls, useUrlSyncedControls };
150
+ type ControlOverrides = Omit<AdvancedPaletteControlConfig, "defaultPalette" | "onPaletteChange">;
151
+ type UseAdvancedPaletteControlsOptions = {
152
+ defaultPalette?: AdvancedPaletteSource;
153
+ fallbackPalette?: AdvancedPaletteSource;
154
+ sectionOrder?: string[];
155
+ defaultColor?: string;
156
+ gradientSteps?: number;
157
+ control?: ControlOverrides;
158
+ onChange?: (palette: AdvancedPalette) => void;
159
+ };
160
+ type UseAdvancedPaletteControlsResult = {
161
+ palette: Readonly<AdvancedPalette>;
162
+ hexColors: string[];
163
+ controlConfig: AdvancedPaletteControlConfig;
164
+ paletteGradient: string;
165
+ setPalette: (source: AdvancedPaletteSource) => void;
166
+ updatePalette: (updater: (current: AdvancedPalette) => AdvancedPaletteSource) => void;
167
+ resetPalette: () => void;
168
+ paletteSignature: string;
169
+ };
170
+ declare const useAdvancedPaletteControls: (options?: UseAdvancedPaletteControlsOptions) => UseAdvancedPaletteControlsResult;
171
+ declare const useDefaultAdvancedPaletteControls: () => UseAdvancedPaletteControlsResult;
172
+
173
+ 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 };