@waypointjs/builder 0.1.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/LICENSE +21 -0
  2. package/dist/index.cjs +3080 -0
  3. package/dist/index.cjs.map +1 -0
  4. package/dist/index.d.cts +157 -0
  5. package/dist/index.d.ts +157 -0
  6. package/dist/index.js +3074 -0
  7. package/dist/index.js.map +1 -0
  8. package/package.json +52 -0
package/dist/index.d.cts ADDED
@@ -0,0 +1,157 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { WaypointSchema, StepDefinition, FieldDefinition, ConditionGroup, ExternalVariable, CustomTypeDefinition, PersistenceMode } from '@waypointjs/core';
3
+ import * as zustand from 'zustand';
4
+
5
+ /**
6
+ * @waypointjs/builder — Theming
7
+ *
8
+ * All design tokens used by the builder UI.
9
+ * Pass a partial `WaypointTheme` to `<WaypointBuilder theme={...} />` to override any token.
10
+ *
11
+ * Built-in themes: `DEFAULT_THEME` (light) and `DARK_THEME`.
12
+ */
13
+ interface WaypointTheme {
14
+ /** Main brand color — buttons, selected state accent. Default: #6366f1 */
15
+ primary?: string;
16
+ /** Darker shade of primary — hover states, dep badge text. Default: #4338ca */
17
+ primaryDark?: string;
18
+ /** Light primary background — dep badges, type badges. Default: #e0e7ff */
19
+ primaryBg?: string;
20
+ /** Very light primary — selected card background. Default: #ede9fe */
21
+ primaryMuted?: string;
22
+ /** Primary border — selected card outline. Default: #a78bfa */
23
+ primaryBorder?: string;
24
+ /** Toolbar background. Default: #111827 */
25
+ toolbarBg?: string;
26
+ /** Toolbar bottom border. Default: #1f2937 */
27
+ toolbarBorder?: string;
28
+ /** Toolbar logo / accent color. Default: #a78bfa */
29
+ toolbarLogo?: string;
30
+ /** Toolbar primary text color. Default: #f9fafb */
31
+ toolbarText?: string;
32
+ /** Toolbar muted text (buttons). Default: #d1d5db */
33
+ toolbarTextMuted?: string;
34
+ /** Toolbar subtle text (separator). Default: #4b5563 */
35
+ toolbarTextSubtle?: string;
36
+ /** Main background (panels, dropdowns). Default: #ffffff */
37
+ canvas?: string;
38
+ /** Subtle surface (card backgrounds, inputs). Default: #f9fafb */
39
+ surface?: string;
40
+ /** Slightly darker surface (hover, alternate rows). Default: #f3f4f6 */
41
+ surfaceMuted?: string;
42
+ /** Alternative surface (code blocks, preview bg). Default: #f1f5f9 */
43
+ surfaceAlt?: string;
44
+ /** Default border color. Default: #e5e7eb */
45
+ border?: string;
46
+ /** Muted border (inputs, selects). Default: #d1d5db */
47
+ borderMuted?: string;
48
+ /** Primary text. Default: #111827 */
49
+ text?: string;
50
+ /** Secondary text (labels, sub-headings). Default: #374151 */
51
+ textSecondary?: string;
52
+ /** Muted text (helper labels). Default: #6b7280 */
53
+ textMuted?: string;
54
+ /** Subtle text (metadata, hints). Default: #9ca3af */
55
+ textSubtle?: string;
56
+ /** Monospace / code text. Default: #475569 */
57
+ textMono?: string;
58
+ /** Danger foreground. Default: #ef4444 */
59
+ danger?: string;
60
+ /** Darker danger text. Default: #dc2626 */
61
+ dangerText?: string;
62
+ /** Danger background (very light). Default: #fef2f2 */
63
+ dangerBg?: string;
64
+ /** Danger background (strong). Default: #fee2e2 */
65
+ dangerBgStrong?: string;
66
+ /** Danger border. Default: #fecaca */
67
+ dangerBorder?: string;
68
+ /** Warning text / badge foreground. Default: #d97706 */
69
+ warning?: string;
70
+ /** Warning strong (dirty dot). Default: #f59e0b */
71
+ warningStrong?: string;
72
+ /** Warning background. Default: #fef3c7 */
73
+ warningBg?: string;
74
+ /** Success text. Default: #059669 */
75
+ success?: string;
76
+ /** Success background. Default: #d1fae5 */
77
+ successBg?: string;
78
+ /** Info icon / text. Default: #3b82f6 */
79
+ info?: string;
80
+ /** Info text (used-by ref chips). Default: #3b82f6 */
81
+ infoText?: string;
82
+ /** Info background (light). Default: #eff6ff */
83
+ infoBg?: string;
84
+ /** Info background (strong, ref chip bg). Default: #eff6ff */
85
+ infoBgStrong?: string;
86
+ /** Info border. Default: #bfdbfe */
87
+ infoBorder?: string;
88
+ /** Font stack. Default: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif */
89
+ font?: string;
90
+ /** Base border radius. Default: 6px */
91
+ radius?: string;
92
+ /** Large border radius (cards, modals). Default: 8px */
93
+ radiusLg?: string;
94
+ }
95
+ declare const DEFAULT_THEME: Required<WaypointTheme>;
96
+ declare const DARK_THEME: Required<WaypointTheme>;
97
+ /**
98
+ * Converts a WaypointTheme (merged with defaults) into a React inline style object
99
+ * containing all CSS custom properties (`--wp-*`).
100
+ *
101
+ * Apply this to the root element of `<WaypointBuilder />`.
102
+ */
103
+ declare function buildThemeVars(theme?: WaypointTheme): React.CSSProperties;
104
+
105
+ interface WaypointBuilderProps {
106
+ /** Initial schema to load into the builder */
107
+ defaultValue?: WaypointSchema;
108
+ /** Called whenever the schema changes */
109
+ onChange?: (schema: WaypointSchema) => void;
110
+ /** Called when the user clicks "Save" */
111
+ onSave?: (schema: WaypointSchema) => void | Promise<void>;
112
+ /** Theme override — partial or full WaypointTheme */
113
+ theme?: WaypointTheme;
114
+ /** CSS class applied to the root element */
115
+ className?: string;
116
+ /** Inline style applied to the root element */
117
+ style?: React.CSSProperties;
118
+ }
119
+ declare function WaypointBuilder({ defaultValue, onChange, onSave, theme, className, style, }: WaypointBuilderProps): react_jsx_runtime.JSX.Element;
120
+
121
+ interface BuilderState {
122
+ /** The schema being edited */
123
+ schema: WaypointSchema;
124
+ /** Currently selected step id */
125
+ selectedStepId: string | null;
126
+ /** Currently selected field id (within selectedStep) */
127
+ selectedFieldId: string | null;
128
+ /** Whether the schema has unsaved changes */
129
+ isDirty: boolean;
130
+ }
131
+ interface BuilderActions {
132
+ loadSchema: (schema: WaypointSchema) => void;
133
+ resetSchema: () => void;
134
+ addStep: (step?: Partial<Omit<StepDefinition, "id">>) => string;
135
+ updateStep: (stepId: string, updates: Partial<Omit<StepDefinition, "id">>) => void;
136
+ removeStep: (stepId: string) => void;
137
+ reorderSteps: (fromIndex: number, toIndex: number) => void;
138
+ selectStep: (stepId: string | null) => void;
139
+ addField: (stepId: string, field?: Partial<Omit<FieldDefinition, "id">>) => string;
140
+ updateField: (stepId: string, fieldId: string, updates: Partial<Omit<FieldDefinition, "id">>) => void;
141
+ removeField: (stepId: string, fieldId: string) => void;
142
+ reorderFields: (stepId: string, fromIndex: number, toIndex: number) => void;
143
+ selectField: (fieldId: string | null) => void;
144
+ setStepCondition: (stepId: string, condition: ConditionGroup | undefined) => void;
145
+ setFieldCondition: (stepId: string, fieldId: string, condition: ConditionGroup | undefined) => void;
146
+ addExternalVariable: (variable: Omit<ExternalVariable, "usedIn">) => void;
147
+ updateExternalVariable: (varId: string, updates: Partial<ExternalVariable>) => void;
148
+ removeExternalVariable: (varId: string) => void;
149
+ addCustomType: (type: CustomTypeDefinition) => void;
150
+ updateCustomType: (typeId: string, updates: Partial<CustomTypeDefinition>) => void;
151
+ removeCustomType: (typeId: string) => void;
152
+ setPersistenceMode: (mode: PersistenceMode) => void;
153
+ }
154
+ type BuilderStore = BuilderState & BuilderActions;
155
+ declare const useBuilderStore: zustand.UseBoundStore<zustand.StoreApi<BuilderStore>>;
156
+
157
+ export { DARK_THEME, DEFAULT_THEME, WaypointBuilder, type WaypointBuilderProps, type WaypointTheme, buildThemeVars, useBuilderStore };
package/dist/index.d.ts ADDED
@@ -0,0 +1,157 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { WaypointSchema, StepDefinition, FieldDefinition, ConditionGroup, ExternalVariable, CustomTypeDefinition, PersistenceMode } from '@waypointjs/core';
3
+ import * as zustand from 'zustand';
4
+
5
+ /**
6
+ * @waypointjs/builder — Theming
7
+ *
8
+ * All design tokens used by the builder UI.
9
+ * Pass a partial `WaypointTheme` to `<WaypointBuilder theme={...} />` to override any token.
10
+ *
11
+ * Built-in themes: `DEFAULT_THEME` (light) and `DARK_THEME`.
12
+ */
13
+ interface WaypointTheme {
14
+ /** Main brand color — buttons, selected state accent. Default: #6366f1 */
15
+ primary?: string;
16
+ /** Darker shade of primary — hover states, dep badge text. Default: #4338ca */
17
+ primaryDark?: string;
18
+ /** Light primary background — dep badges, type badges. Default: #e0e7ff */
19
+ primaryBg?: string;
20
+ /** Very light primary — selected card background. Default: #ede9fe */
21
+ primaryMuted?: string;
22
+ /** Primary border — selected card outline. Default: #a78bfa */
23
+ primaryBorder?: string;
24
+ /** Toolbar background. Default: #111827 */
25
+ toolbarBg?: string;
26
+ /** Toolbar bottom border. Default: #1f2937 */
27
+ toolbarBorder?: string;
28
+ /** Toolbar logo / accent color. Default: #a78bfa */
29
+ toolbarLogo?: string;
30
+ /** Toolbar primary text color. Default: #f9fafb */
31
+ toolbarText?: string;
32
+ /** Toolbar muted text (buttons). Default: #d1d5db */
33
+ toolbarTextMuted?: string;
34
+ /** Toolbar subtle text (separator). Default: #4b5563 */
35
+ toolbarTextSubtle?: string;
36
+ /** Main background (panels, dropdowns). Default: #ffffff */
37
+ canvas?: string;
38
+ /** Subtle surface (card backgrounds, inputs). Default: #f9fafb */
39
+ surface?: string;
40
+ /** Slightly darker surface (hover, alternate rows). Default: #f3f4f6 */
41
+ surfaceMuted?: string;
42
+ /** Alternative surface (code blocks, preview bg). Default: #f1f5f9 */
43
+ surfaceAlt?: string;
44
+ /** Default border color. Default: #e5e7eb */
45
+ border?: string;
46
+ /** Muted border (inputs, selects). Default: #d1d5db */
47
+ borderMuted?: string;
48
+ /** Primary text. Default: #111827 */
49
+ text?: string;
50
+ /** Secondary text (labels, sub-headings). Default: #374151 */
51
+ textSecondary?: string;
52
+ /** Muted text (helper labels). Default: #6b7280 */
53
+ textMuted?: string;
54
+ /** Subtle text (metadata, hints). Default: #9ca3af */
55
+ textSubtle?: string;
56
+ /** Monospace / code text. Default: #475569 */
57
+ textMono?: string;
58
+ /** Danger foreground. Default: #ef4444 */
59
+ danger?: string;
60
+ /** Darker danger text. Default: #dc2626 */
61
+ dangerText?: string;
62
+ /** Danger background (very light). Default: #fef2f2 */
63
+ dangerBg?: string;
64
+ /** Danger background (strong). Default: #fee2e2 */
65
+ dangerBgStrong?: string;
66
+ /** Danger border. Default: #fecaca */
67
+ dangerBorder?: string;
68
+ /** Warning text / badge foreground. Default: #d97706 */
69
+ warning?: string;
70
+ /** Warning strong (dirty dot). Default: #f59e0b */
71
+ warningStrong?: string;
72
+ /** Warning background. Default: #fef3c7 */
73
+ warningBg?: string;
74
+ /** Success text. Default: #059669 */
75
+ success?: string;
76
+ /** Success background. Default: #d1fae5 */
77
+ successBg?: string;
78
+ /** Info icon / text. Default: #3b82f6 */
79
+ info?: string;
80
+ /** Info text (used-by ref chips). Default: #3b82f6 */
81
+ infoText?: string;
82
+ /** Info background (light). Default: #eff6ff */
83
+ infoBg?: string;
84
+ /** Info background (strong, ref chip bg). Default: #eff6ff */
85
+ infoBgStrong?: string;
86
+ /** Info border. Default: #bfdbfe */
87
+ infoBorder?: string;
88
+ /** Font stack. Default: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif */
89
+ font?: string;
90
+ /** Base border radius. Default: 6px */
91
+ radius?: string;
92
+ /** Large border radius (cards, modals). Default: 8px */
93
+ radiusLg?: string;
94
+ }
95
+ declare const DEFAULT_THEME: Required<WaypointTheme>;
96
+ declare const DARK_THEME: Required<WaypointTheme>;
97
+ /**
98
+ * Converts a WaypointTheme (merged with defaults) into a React inline style object
99
+ * containing all CSS custom properties (`--wp-*`).
100
+ *
101
+ * Apply this to the root element of `<WaypointBuilder />`.
102
+ */
103
+ declare function buildThemeVars(theme?: WaypointTheme): React.CSSProperties;
104
+
105
+ interface WaypointBuilderProps {
106
+ /** Initial schema to load into the builder */
107
+ defaultValue?: WaypointSchema;
108
+ /** Called whenever the schema changes */
109
+ onChange?: (schema: WaypointSchema) => void;
110
+ /** Called when the user clicks "Save" */
111
+ onSave?: (schema: WaypointSchema) => void | Promise<void>;
112
+ /** Theme override — partial or full WaypointTheme */
113
+ theme?: WaypointTheme;
114
+ /** CSS class applied to the root element */
115
+ className?: string;
116
+ /** Inline style applied to the root element */
117
+ style?: React.CSSProperties;
118
+ }
119
+ declare function WaypointBuilder({ defaultValue, onChange, onSave, theme, className, style, }: WaypointBuilderProps): react_jsx_runtime.JSX.Element;
120
+
121
+ interface BuilderState {
122
+ /** The schema being edited */
123
+ schema: WaypointSchema;
124
+ /** Currently selected step id */
125
+ selectedStepId: string | null;
126
+ /** Currently selected field id (within selectedStep) */
127
+ selectedFieldId: string | null;
128
+ /** Whether the schema has unsaved changes */
129
+ isDirty: boolean;
130
+ }
131
+ interface BuilderActions {
132
+ loadSchema: (schema: WaypointSchema) => void;
133
+ resetSchema: () => void;
134
+ addStep: (step?: Partial<Omit<StepDefinition, "id">>) => string;
135
+ updateStep: (stepId: string, updates: Partial<Omit<StepDefinition, "id">>) => void;
136
+ removeStep: (stepId: string) => void;
137
+ reorderSteps: (fromIndex: number, toIndex: number) => void;
138
+ selectStep: (stepId: string | null) => void;
139
+ addField: (stepId: string, field?: Partial<Omit<FieldDefinition, "id">>) => string;
140
+ updateField: (stepId: string, fieldId: string, updates: Partial<Omit<FieldDefinition, "id">>) => void;
141
+ removeField: (stepId: string, fieldId: string) => void;
142
+ reorderFields: (stepId: string, fromIndex: number, toIndex: number) => void;
143
+ selectField: (fieldId: string | null) => void;
144
+ setStepCondition: (stepId: string, condition: ConditionGroup | undefined) => void;
145
+ setFieldCondition: (stepId: string, fieldId: string, condition: ConditionGroup | undefined) => void;
146
+ addExternalVariable: (variable: Omit<ExternalVariable, "usedIn">) => void;
147
+ updateExternalVariable: (varId: string, updates: Partial<ExternalVariable>) => void;
148
+ removeExternalVariable: (varId: string) => void;
149
+ addCustomType: (type: CustomTypeDefinition) => void;
150
+ updateCustomType: (typeId: string, updates: Partial<CustomTypeDefinition>) => void;
151
+ removeCustomType: (typeId: string) => void;
152
+ setPersistenceMode: (mode: PersistenceMode) => void;
153
+ }
154
+ type BuilderStore = BuilderState & BuilderActions;
155
+ declare const useBuilderStore: zustand.UseBoundStore<zustand.StoreApi<BuilderStore>>;
156
+
157
+ export { DARK_THEME, DEFAULT_THEME, WaypointBuilder, type WaypointBuilderProps, type WaypointTheme, buildThemeVars, useBuilderStore };