@json-render/react-native 0.9.0 → 0.9.1

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 (7) hide show
  1. package/dist/index.d.mts +66 -3
  2. package/dist/index.d.ts +66 -3
  3. package/dist/index.js +304 -185
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +267 -142
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -35,12 +35,12 @@ __export(index_exports, {
35
35
  JSONUIProvider: () => JSONUIProvider,
36
36
  Renderer: () => Renderer,
37
37
  RepeatScopeProvider: () => RepeatScopeProvider,
38
- StateProvider: () => import_react_state.StateProvider,
38
+ StateProvider: () => StateProvider,
39
39
  ValidationProvider: () => ValidationProvider,
40
40
  VisibilityProvider: () => VisibilityProvider,
41
41
  createRenderer: () => createRenderer,
42
42
  createStandardActionHandlers: () => createStandardActionHandlers,
43
- createStateStore: () => import_core7.createStateStore,
43
+ createStateStore: () => import_core8.createStateStore,
44
44
  defineRegistry: () => defineRegistry,
45
45
  elementTreeSchema: () => elementTreeSchema,
46
46
  flatToTree: () => flatToTree,
@@ -54,43 +54,162 @@ __export(index_exports, {
54
54
  useFieldValidation: () => useFieldValidation,
55
55
  useIsVisible: () => useIsVisible,
56
56
  useRepeatScope: () => useRepeatScope,
57
- useStateBinding: () => import_react_state.useStateBinding,
58
- useStateStore: () => import_react_state.useStateStore,
59
- useStateValue: () => import_react_state.useStateValue,
57
+ useStateBinding: () => useStateBinding,
58
+ useStateStore: () => useStateStore,
59
+ useStateValue: () => useStateValue,
60
60
  useUIStream: () => useUIStream,
61
61
  useValidation: () => useValidation,
62
62
  useVisibility: () => useVisibility
63
63
  });
64
64
  module.exports = __toCommonJS(index_exports);
65
65
 
66
- // src/contexts/state.tsx
67
- var import_react_state = require("@internal/react-state");
68
-
69
- // src/contexts/visibility.tsx
66
+ // ../react-state/dist/index.mjs
70
67
  var import_react = require("react");
71
68
  var import_core = require("@json-render/core");
69
+ var import_store_utils = require("@json-render/core/store-utils");
72
70
  var import_jsx_runtime = require("react/jsx-runtime");
73
- var VisibilityContext = (0, import_react.createContext)(null);
71
+ var StateContext = (0, import_react.createContext)(null);
72
+ function computeInitialFlat(isControlled, initialState) {
73
+ if (isControlled) return null;
74
+ if (Object.keys(initialState).length === 0) return {};
75
+ return (0, import_store_utils.flattenToPointers)(initialState);
76
+ }
77
+ function StateProvider({
78
+ store: externalStore,
79
+ initialState = {},
80
+ onStateChange,
81
+ children
82
+ }) {
83
+ const internalStoreRef = (0, import_react.useRef)(void 0);
84
+ if (!externalStore && !internalStoreRef.current) {
85
+ internalStoreRef.current = (0, import_core.createStateStore)(initialState);
86
+ }
87
+ const store = externalStore ?? internalStoreRef.current;
88
+ const storeRef = (0, import_react.useRef)(store);
89
+ storeRef.current = store;
90
+ const isControlledRef = (0, import_react.useRef)(!!externalStore);
91
+ isControlledRef.current = !!externalStore;
92
+ const initialModeRef = (0, import_react.useRef)(externalStore ? "controlled" : "uncontrolled");
93
+ const modeWarnedRef = (0, import_react.useRef)(false);
94
+ if (process.env.NODE_ENV !== "production") {
95
+ const currentMode = externalStore ? "controlled" : "uncontrolled";
96
+ if (currentMode !== initialModeRef.current && !modeWarnedRef.current) {
97
+ modeWarnedRef.current = true;
98
+ console.warn(
99
+ `StateProvider: switching from ${initialModeRef.current} to ${currentMode} mode is not supported.`
100
+ );
101
+ }
102
+ }
103
+ const prevInitialStateRef = (0, import_react.useRef)(initialState);
104
+ const prevFlatRef = (0, import_react.useRef)(
105
+ computeInitialFlat(!!externalStore, initialState)
106
+ );
107
+ (0, import_react.useEffect)(() => {
108
+ if (externalStore) return;
109
+ if (initialState === prevInitialStateRef.current) return;
110
+ prevInitialStateRef.current = initialState;
111
+ const nextFlat = initialState && Object.keys(initialState).length > 0 ? (0, import_store_utils.flattenToPointers)(initialState) : {};
112
+ const prevFlat = prevFlatRef.current ?? {};
113
+ const allKeys = /* @__PURE__ */ new Set([
114
+ ...Object.keys(prevFlat),
115
+ ...Object.keys(nextFlat)
116
+ ]);
117
+ const updates = {};
118
+ for (const key of allKeys) {
119
+ if (prevFlat[key] !== nextFlat[key]) {
120
+ updates[key] = key in nextFlat ? nextFlat[key] : void 0;
121
+ }
122
+ }
123
+ prevFlatRef.current = nextFlat;
124
+ if (Object.keys(updates).length > 0) {
125
+ store.update(updates);
126
+ }
127
+ }, [externalStore, initialState, store]);
128
+ const state = (0, import_react.useSyncExternalStore)(
129
+ store.subscribe,
130
+ store.getSnapshot,
131
+ store.getServerSnapshot ?? store.getSnapshot
132
+ );
133
+ const onStateChangeRef = (0, import_react.useRef)(onStateChange);
134
+ onStateChangeRef.current = onStateChange;
135
+ const set = (0, import_react.useCallback)((path, value2) => {
136
+ const s = storeRef.current;
137
+ const prev = s.getSnapshot();
138
+ s.set(path, value2);
139
+ if (!isControlledRef.current && s.getSnapshot() !== prev) {
140
+ onStateChangeRef.current?.([{ path, value: value2 }]);
141
+ }
142
+ }, []);
143
+ const update = (0, import_react.useCallback)((updates) => {
144
+ const s = storeRef.current;
145
+ const prev = s.getSnapshot();
146
+ s.update(updates);
147
+ if (!isControlledRef.current && s.getSnapshot() !== prev) {
148
+ const changes = [];
149
+ for (const [path, value2] of Object.entries(updates)) {
150
+ if ((0, import_core.getByPath)(prev, path) !== value2) {
151
+ changes.push({ path, value: value2 });
152
+ }
153
+ }
154
+ if (changes.length > 0) {
155
+ onStateChangeRef.current?.(changes);
156
+ }
157
+ }
158
+ }, []);
159
+ const get = (0, import_react.useCallback)((path) => storeRef.current.get(path), []);
160
+ const getSnapshot = (0, import_react.useCallback)(() => storeRef.current.getSnapshot(), []);
161
+ const value = (0, import_react.useMemo)(
162
+ () => ({ state, get, set, update, getSnapshot }),
163
+ [state, get, set, update, getSnapshot]
164
+ );
165
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StateContext.Provider, { value, children });
166
+ }
167
+ function useStateStore() {
168
+ const ctx = (0, import_react.useContext)(StateContext);
169
+ if (!ctx) {
170
+ throw new Error("useStateStore must be used within a StateProvider");
171
+ }
172
+ return ctx;
173
+ }
174
+ function useStateValue(path) {
175
+ const { state } = useStateStore();
176
+ return (0, import_core.getByPath)(state, path);
177
+ }
178
+ function useStateBinding(path) {
179
+ const { state, set } = useStateStore();
180
+ const value = (0, import_core.getByPath)(state, path);
181
+ const setValue = (0, import_react.useCallback)(
182
+ (newValue) => set(path, newValue),
183
+ [path, set]
184
+ );
185
+ return [value, setValue];
186
+ }
187
+
188
+ // src/contexts/visibility.tsx
189
+ var import_react2 = require("react");
190
+ var import_core2 = require("@json-render/core");
191
+ var import_jsx_runtime2 = require("react/jsx-runtime");
192
+ var VisibilityContext = (0, import_react2.createContext)(null);
74
193
  function VisibilityProvider({ children }) {
75
- const { state } = (0, import_react_state.useStateStore)();
76
- const ctx = (0, import_react.useMemo)(
194
+ const { state } = useStateStore();
195
+ const ctx = (0, import_react2.useMemo)(
77
196
  () => ({
78
197
  stateModel: state
79
198
  }),
80
199
  [state]
81
200
  );
82
- const isVisible = (0, import_react.useMemo)(
83
- () => (condition) => (0, import_core.evaluateVisibility)(condition, ctx),
201
+ const isVisible = (0, import_react2.useMemo)(
202
+ () => (condition) => (0, import_core2.evaluateVisibility)(condition, ctx),
84
203
  [ctx]
85
204
  );
86
- const value = (0, import_react.useMemo)(
205
+ const value = (0, import_react2.useMemo)(
87
206
  () => ({ isVisible, ctx }),
88
207
  [isVisible, ctx]
89
208
  );
90
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VisibilityContext.Provider, { value, children });
209
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VisibilityContext.Provider, { value, children });
91
210
  }
92
211
  function useVisibility() {
93
- const ctx = (0, import_react.useContext)(VisibilityContext);
212
+ const ctx = (0, import_react2.useContext)(VisibilityContext);
94
213
  if (!ctx) {
95
214
  throw new Error("useVisibility must be used within a VisibilityProvider");
96
215
  }
@@ -102,10 +221,10 @@ function useIsVisible(condition) {
102
221
  }
103
222
 
104
223
  // src/contexts/actions.tsx
105
- var import_react2 = require("react");
224
+ var import_react3 = require("react");
106
225
  var import_react_native = require("react-native");
107
- var import_core2 = require("@json-render/core");
108
- var import_jsx_runtime2 = require("react/jsx-runtime");
226
+ var import_core3 = require("@json-render/core");
227
+ var import_jsx_runtime3 = require("react/jsx-runtime");
109
228
  var idCounter = 0;
110
229
  function generateUniqueId() {
111
230
  idCounter += 1;
@@ -138,25 +257,25 @@ function deepResolveValue(value, get) {
138
257
  }
139
258
  return value;
140
259
  }
141
- var ActionContext = (0, import_react2.createContext)(null);
260
+ var ActionContext = (0, import_react3.createContext)(null);
142
261
  function ActionProvider({
143
262
  handlers: initialHandlers = {},
144
263
  navigate,
145
264
  children
146
265
  }) {
147
- const { get, set, getSnapshot } = (0, import_react_state.useStateStore)();
148
- const [handlers, setHandlers] = (0, import_react2.useState)(initialHandlers);
149
- const [loadingActions, setLoadingActions] = (0, import_react2.useState)(/* @__PURE__ */ new Set());
150
- const [pendingConfirmation, setPendingConfirmation] = (0, import_react2.useState)(null);
151
- const registerHandler = (0, import_react2.useCallback)(
266
+ const { get, set, getSnapshot } = useStateStore();
267
+ const [handlers, setHandlers] = (0, import_react3.useState)(initialHandlers);
268
+ const [loadingActions, setLoadingActions] = (0, import_react3.useState)(/* @__PURE__ */ new Set());
269
+ const [pendingConfirmation, setPendingConfirmation] = (0, import_react3.useState)(null);
270
+ const registerHandler = (0, import_react3.useCallback)(
152
271
  (name, handler) => {
153
272
  setHandlers((prev) => ({ ...prev, [name]: handler }));
154
273
  },
155
274
  []
156
275
  );
157
- const execute = (0, import_react2.useCallback)(
276
+ const execute = (0, import_react3.useCallback)(
158
277
  async (binding) => {
159
- const resolved = (0, import_core2.resolveAction)(binding, getSnapshot());
278
+ const resolved = (0, import_core3.resolveAction)(binding, getSnapshot());
160
279
  if (resolved.action === "setState" && resolved.params) {
161
280
  const statePath = resolved.params.statePath;
162
281
  const value2 = resolved.params.value;
@@ -240,7 +359,7 @@ function ActionProvider({
240
359
  }).then(async () => {
241
360
  setLoadingActions((prev) => new Set(prev).add(resolved.action));
242
361
  try {
243
- await (0, import_core2.executeAction)({
362
+ await (0, import_core3.executeAction)({
244
363
  action: resolved,
245
364
  handler,
246
365
  setState: set,
@@ -261,7 +380,7 @@ function ActionProvider({
261
380
  }
262
381
  setLoadingActions((prev) => new Set(prev).add(resolved.action));
263
382
  try {
264
- await (0, import_core2.executeAction)({
383
+ await (0, import_core3.executeAction)({
265
384
  action: resolved,
266
385
  handler,
267
386
  setState: set,
@@ -281,13 +400,13 @@ function ActionProvider({
281
400
  },
282
401
  [handlers, get, set, getSnapshot, navigate]
283
402
  );
284
- const confirm = (0, import_react2.useCallback)(() => {
403
+ const confirm = (0, import_react3.useCallback)(() => {
285
404
  pendingConfirmation?.resolve();
286
405
  }, [pendingConfirmation]);
287
- const cancel = (0, import_react2.useCallback)(() => {
406
+ const cancel = (0, import_react3.useCallback)(() => {
288
407
  pendingConfirmation?.reject();
289
408
  }, [pendingConfirmation]);
290
- const value = (0, import_react2.useMemo)(
409
+ const value = (0, import_react3.useMemo)(
291
410
  () => ({
292
411
  handlers,
293
412
  loadingActions,
@@ -307,10 +426,10 @@ function ActionProvider({
307
426
  registerHandler
308
427
  ]
309
428
  );
310
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ActionContext.Provider, { value, children });
429
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ActionContext.Provider, { value, children });
311
430
  }
312
431
  function useActions() {
313
- const ctx = (0, import_react2.useContext)(ActionContext);
432
+ const ctx = (0, import_react3.useContext)(ActionContext);
314
433
  if (!ctx) {
315
434
  throw new Error("useActions must be used within an ActionProvider");
316
435
  }
@@ -319,7 +438,7 @@ function useActions() {
319
438
  function useAction(binding) {
320
439
  const { execute, loadingActions } = useActions();
321
440
  const isLoading = loadingActions.has(binding.action);
322
- const executeAction2 = (0, import_react2.useCallback)(() => execute(binding), [execute, binding]);
441
+ const executeAction2 = (0, import_react3.useCallback)(() => execute(binding), [execute, binding]);
323
442
  return { execute: executeAction2, isLoading };
324
443
  }
325
444
  function ConfirmDialog({
@@ -328,13 +447,13 @@ function ConfirmDialog({
328
447
  onCancel
329
448
  }) {
330
449
  const isDanger = confirm.variant === "danger";
331
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Modal, { transparent: true, animationType: "fade", visible: true, onRequestClose: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Pressable, { style: styles.overlay, onPress: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native.Pressable, { style: styles.dialog, onPress: () => {
450
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Modal, { transparent: true, animationType: "fade", visible: true, onRequestClose: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Pressable, { style: styles.overlay, onPress: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native.Pressable, { style: styles.dialog, onPress: () => {
332
451
  }, children: [
333
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { style: styles.title, children: confirm.title }),
334
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { style: styles.message, children: confirm.message }),
335
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native.View, { style: styles.buttons, children: [
336
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Pressable, { style: styles.cancelButton, onPress: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { style: styles.cancelButtonText, children: confirm.cancelLabel ?? "Cancel" }) }),
337
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
452
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Text, { style: styles.title, children: confirm.title }),
453
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Text, { style: styles.message, children: confirm.message }),
454
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native.View, { style: styles.buttons, children: [
455
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Pressable, { style: styles.cancelButton, onPress: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Text, { style: styles.cancelButtonText, children: confirm.cancelLabel ?? "Cancel" }) }),
456
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
338
457
  import_react_native.Pressable,
339
458
  {
340
459
  style: [
@@ -342,7 +461,7 @@ function ConfirmDialog({
342
461
  isDanger && styles.confirmButtonDanger
343
462
  ],
344
463
  onPress: onConfirm,
345
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { style: styles.confirmButtonText, children: confirm.confirmLabel ?? "Confirm" })
464
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native.Text, { style: styles.confirmButtonText, children: confirm.confirmLabel ?? "Confirm" })
346
465
  }
347
466
  )
348
467
  ] })
@@ -410,10 +529,10 @@ var styles = import_react_native.StyleSheet.create({
410
529
  });
411
530
 
412
531
  // src/contexts/validation.tsx
413
- var import_react3 = __toESM(require("react"));
414
- var import_core3 = require("@json-render/core");
415
- var import_jsx_runtime3 = require("react/jsx-runtime");
416
- var ValidationContext = (0, import_react3.createContext)(null);
532
+ var import_react4 = __toESM(require("react"));
533
+ var import_core4 = require("@json-render/core");
534
+ var import_jsx_runtime4 = require("react/jsx-runtime");
535
+ var ValidationContext = (0, import_react4.createContext)(null);
417
536
  function dynamicArgsEqual(a, b) {
418
537
  if (a === b) return true;
419
538
  if (!a || !b) return false;
@@ -452,10 +571,10 @@ function ValidationProvider({
452
571
  customFunctions = {},
453
572
  children
454
573
  }) {
455
- const { state } = (0, import_react_state.useStateStore)();
456
- const [fieldStates, setFieldStates] = (0, import_react3.useState)({});
457
- const [fieldConfigs, setFieldConfigs] = (0, import_react3.useState)({});
458
- const registerField = (0, import_react3.useCallback)(
574
+ const { state } = useStateStore();
575
+ const [fieldStates, setFieldStates] = (0, import_react4.useState)({});
576
+ const [fieldConfigs, setFieldConfigs] = (0, import_react4.useState)({});
577
+ const registerField = (0, import_react4.useCallback)(
459
578
  (path, config) => {
460
579
  setFieldConfigs((prev) => {
461
580
  const existing = prev[path];
@@ -467,7 +586,7 @@ function ValidationProvider({
467
586
  },
468
587
  []
469
588
  );
470
- const validate = (0, import_react3.useCallback)(
589
+ const validate = (0, import_react4.useCallback)(
471
590
  (path, config) => {
472
591
  const segments = path.split("/").filter(Boolean);
473
592
  let value2 = state;
@@ -479,7 +598,7 @@ function ValidationProvider({
479
598
  break;
480
599
  }
481
600
  }
482
- const result = (0, import_core3.runValidation)(config, {
601
+ const result = (0, import_core4.runValidation)(config, {
483
602
  value: value2,
484
603
  stateModel: state,
485
604
  customFunctions
@@ -496,7 +615,7 @@ function ValidationProvider({
496
615
  },
497
616
  [state, customFunctions]
498
617
  );
499
- const touch = (0, import_react3.useCallback)((path) => {
618
+ const touch = (0, import_react4.useCallback)((path) => {
500
619
  setFieldStates((prev) => ({
501
620
  ...prev,
502
621
  [path]: {
@@ -507,13 +626,13 @@ function ValidationProvider({
507
626
  }
508
627
  }));
509
628
  }, []);
510
- const clear = (0, import_react3.useCallback)((path) => {
629
+ const clear = (0, import_react4.useCallback)((path) => {
511
630
  setFieldStates((prev) => {
512
631
  const { [path]: _, ...rest } = prev;
513
632
  return rest;
514
633
  });
515
634
  }, []);
516
- const validateAll = (0, import_react3.useCallback)(() => {
635
+ const validateAll = (0, import_react4.useCallback)(() => {
517
636
  let allValid = true;
518
637
  for (const [path, config] of Object.entries(fieldConfigs)) {
519
638
  const result = validate(path, config);
@@ -523,7 +642,7 @@ function ValidationProvider({
523
642
  }
524
643
  return allValid;
525
644
  }, [fieldConfigs, validate]);
526
- const value = (0, import_react3.useMemo)(
645
+ const value = (0, import_react4.useMemo)(
527
646
  () => ({
528
647
  customFunctions,
529
648
  fieldStates,
@@ -543,10 +662,10 @@ function ValidationProvider({
543
662
  registerField
544
663
  ]
545
664
  );
546
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ValidationContext.Provider, { value, children });
665
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ValidationContext.Provider, { value, children });
547
666
  }
548
667
  function useValidation() {
549
- const ctx = (0, import_react3.useContext)(ValidationContext);
668
+ const ctx = (0, import_react4.useContext)(ValidationContext);
550
669
  if (!ctx) {
551
670
  throw new Error("useValidation must be used within a ValidationProvider");
552
671
  }
@@ -560,7 +679,7 @@ function useFieldValidation(path, config) {
560
679
  clear: clearField,
561
680
  registerField
562
681
  } = useValidation();
563
- import_react3.default.useEffect(() => {
682
+ import_react4.default.useEffect(() => {
564
683
  if (config) {
565
684
  registerField(path, config);
566
685
  }
@@ -570,12 +689,12 @@ function useFieldValidation(path, config) {
570
689
  validated: false,
571
690
  result: null
572
691
  };
573
- const validate = (0, import_react3.useCallback)(
692
+ const validate = (0, import_react4.useCallback)(
574
693
  () => validateField(path, config ?? { checks: [] }),
575
694
  [path, config, validateField]
576
695
  );
577
- const touch = (0, import_react3.useCallback)(() => touchField(path), [path, touchField]);
578
- const clear = (0, import_react3.useCallback)(() => clearField(path), [path, clearField]);
696
+ const touch = (0, import_react4.useCallback)(() => touchField(path), [path, touchField]);
697
+ const clear = (0, import_react4.useCallback)(() => clearField(path), [path, clearField]);
579
698
  return {
580
699
  state,
581
700
  validate,
@@ -587,24 +706,24 @@ function useFieldValidation(path, config) {
587
706
  }
588
707
 
589
708
  // src/contexts/repeat-scope.tsx
590
- var import_react4 = require("react");
591
- var import_jsx_runtime4 = require("react/jsx-runtime");
592
- var RepeatScopeContext = (0, import_react4.createContext)(null);
709
+ var import_react5 = require("react");
710
+ var import_jsx_runtime5 = require("react/jsx-runtime");
711
+ var RepeatScopeContext = (0, import_react5.createContext)(null);
593
712
  function RepeatScopeProvider({
594
713
  item,
595
714
  index,
596
715
  basePath,
597
716
  children
598
717
  }) {
599
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RepeatScopeContext.Provider, { value: { item, index, basePath }, children });
718
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RepeatScopeContext.Provider, { value: { item, index, basePath }, children });
600
719
  }
601
720
  function useRepeatScope() {
602
- return (0, import_react4.useContext)(RepeatScopeContext);
721
+ return (0, import_react5.useContext)(RepeatScopeContext);
603
722
  }
604
723
 
605
724
  // src/schema.ts
606
- var import_core4 = require("@json-render/core");
607
- var schema = (0, import_core4.defineSchema)(
725
+ var import_core5 = require("@json-render/core");
726
+ var schema = (0, import_core5.defineSchema)(
608
727
  (s) => ({
609
728
  // What the AI-generated SPEC looks like
610
729
  spec: s.object({
@@ -681,21 +800,21 @@ var schema = (0, import_core4.defineSchema)(
681
800
  var elementTreeSchema = schema;
682
801
 
683
802
  // src/index.ts
684
- var import_core7 = require("@json-render/core");
803
+ var import_core8 = require("@json-render/core");
685
804
 
686
805
  // src/renderer.tsx
687
- var import_react6 = __toESM(require("react"));
688
- var import_core6 = require("@json-render/core");
806
+ var import_react7 = __toESM(require("react"));
807
+ var import_core7 = require("@json-render/core");
689
808
 
690
809
  // src/components/standard.tsx
691
810
  var import_react_native2 = require("react-native");
692
811
 
693
812
  // src/hooks.ts
694
- var import_react5 = require("react");
695
- var import_core5 = require("@json-render/core");
813
+ var import_react6 = require("react");
814
+ var import_core6 = require("@json-render/core");
696
815
  function useBoundProp(propValue, bindingPath) {
697
- const { set } = (0, import_react_state.useStateStore)();
698
- const setValue = (0, import_react5.useCallback)(
816
+ const { set } = useStateStore();
817
+ const setValue = (0, import_react6.useCallback)(
699
818
  (value) => {
700
819
  if (bindingPath) set(bindingPath, value);
701
820
  },
@@ -749,7 +868,7 @@ function setSpecValue(newSpec, path, value) {
749
868
  if (path.startsWith("/state/")) {
750
869
  if (!newSpec.state) newSpec.state = {};
751
870
  const statePath = path.slice("/state".length);
752
- (0, import_core5.setByPath)(newSpec.state, statePath, value);
871
+ (0, import_core6.setByPath)(newSpec.state, statePath, value);
753
872
  return;
754
873
  }
755
874
  if (path.startsWith("/elements/")) {
@@ -763,7 +882,7 @@ function setSpecValue(newSpec, path, value) {
763
882
  if (element) {
764
883
  const propPath = "/" + pathParts.slice(1).join("/");
765
884
  const newElement = { ...element };
766
- (0, import_core5.setByPath)(
885
+ (0, import_core6.setByPath)(
767
886
  newElement,
768
887
  propPath,
769
888
  value
@@ -780,7 +899,7 @@ function removeSpecValue(newSpec, path) {
780
899
  }
781
900
  if (path.startsWith("/state/") && newSpec.state) {
782
901
  const statePath = path.slice("/state".length);
783
- (0, import_core5.removeByPath)(newSpec.state, statePath);
902
+ (0, import_core6.removeByPath)(newSpec.state, statePath);
784
903
  return;
785
904
  }
786
905
  if (path.startsWith("/elements/")) {
@@ -795,7 +914,7 @@ function removeSpecValue(newSpec, path) {
795
914
  if (element) {
796
915
  const propPath = "/" + pathParts.slice(1).join("/");
797
916
  const newElement = { ...element };
798
- (0, import_core5.removeByPath)(
917
+ (0, import_core6.removeByPath)(
799
918
  newElement,
800
919
  propPath
801
920
  );
@@ -806,7 +925,7 @@ function removeSpecValue(newSpec, path) {
806
925
  }
807
926
  function getSpecValue(spec, path) {
808
927
  if (path === "/root") return spec.root;
809
- return (0, import_core5.getByPath)(spec, path);
928
+ return (0, import_core6.getByPath)(spec, path);
810
929
  }
811
930
  function applyPatch(spec, patch) {
812
931
  const newSpec = { ...spec, elements: { ...spec.elements } };
@@ -847,22 +966,22 @@ function useUIStream({
847
966
  validate: enableValidation = false,
848
967
  maxRetries = 5
849
968
  }) {
850
- const [spec, setSpec] = (0, import_react5.useState)(null);
851
- const [isStreaming, setIsStreaming] = (0, import_react5.useState)(false);
852
- const [error, setError] = (0, import_react5.useState)(null);
853
- const [rawLines, setRawLines] = (0, import_react5.useState)([]);
854
- const abortControllerRef = (0, import_react5.useRef)(null);
855
- const stop = (0, import_react5.useCallback)(() => {
969
+ const [spec, setSpec] = (0, import_react6.useState)(null);
970
+ const [isStreaming, setIsStreaming] = (0, import_react6.useState)(false);
971
+ const [error, setError] = (0, import_react6.useState)(null);
972
+ const [rawLines, setRawLines] = (0, import_react6.useState)([]);
973
+ const abortControllerRef = (0, import_react6.useRef)(null);
974
+ const stop = (0, import_react6.useCallback)(() => {
856
975
  abortControllerRef.current?.abort();
857
976
  abortControllerRef.current = null;
858
977
  setIsStreaming(false);
859
978
  }, []);
860
- const clear = (0, import_react5.useCallback)(() => {
979
+ const clear = (0, import_react6.useCallback)(() => {
861
980
  setSpec(null);
862
981
  setError(null);
863
982
  setRawLines([]);
864
983
  }, []);
865
- const streamRequest = (0, import_react5.useCallback)(
984
+ const streamRequest = (0, import_react6.useCallback)(
866
985
  async (prompt, context, initialSpec, abortOnMalformed) => {
867
986
  let currentSpec = initialSpec;
868
987
  setSpec(currentSpec);
@@ -943,7 +1062,7 @@ function useUIStream({
943
1062
  },
944
1063
  [api, fetchFn]
945
1064
  );
946
- const send = (0, import_react5.useCallback)(
1065
+ const send = (0, import_react6.useCallback)(
947
1066
  async (prompt, context) => {
948
1067
  abortControllerRef.current?.abort();
949
1068
  abortControllerRef.current = new AbortController();
@@ -980,12 +1099,12 @@ The current spec state is provided. Continue generating from where you left off.
980
1099
  if (!enableValidation || !currentSpec.root) {
981
1100
  break;
982
1101
  }
983
- const { spec: fixedSpec, fixes } = (0, import_core5.autoFixSpec)(currentSpec);
1102
+ const { spec: fixedSpec, fixes } = (0, import_core6.autoFixSpec)(currentSpec);
984
1103
  if (fixes.length > 0) {
985
1104
  currentSpec = fixedSpec;
986
1105
  setSpec({ ...currentSpec });
987
1106
  }
988
- const validation = (0, import_core5.validateSpec)(currentSpec);
1107
+ const validation = (0, import_core6.validateSpec)(currentSpec);
989
1108
  if (validation.valid) {
990
1109
  break;
991
1110
  }
@@ -996,7 +1115,7 @@ The current spec state is provided. Continue generating from where you left off.
996
1115
  break;
997
1116
  }
998
1117
  retriesUsed++;
999
- const issueText = (0, import_core5.formatSpecIssues)(validation.issues);
1118
+ const issueText = (0, import_core6.formatSpecIssues)(validation.issues);
1000
1119
  currentContext = { ...context, previousSpec: currentSpec };
1001
1120
  currentPrompt = `FIX THE FOLLOWING ERRORS in the current UI spec. Output ONLY the patches needed to fix these issues, do not recreate the entire UI.
1002
1121
 
@@ -1024,7 +1143,7 @@ The current spec state is provided. Continue generating from where you left off.
1024
1143
  streamRequest
1025
1144
  ]
1026
1145
  );
1027
- (0, import_react5.useEffect)(() => {
1146
+ (0, import_react6.useEffect)(() => {
1028
1147
  return () => {
1029
1148
  abortControllerRef.current?.abort();
1030
1149
  };
@@ -1067,10 +1186,10 @@ function flatToTree(elements) {
1067
1186
  }
1068
1187
 
1069
1188
  // src/components/standard.tsx
1070
- var import_jsx_runtime5 = require("react/jsx-runtime");
1189
+ var import_jsx_runtime6 = require("react/jsx-runtime");
1071
1190
  function ContainerComponent({ element, children }) {
1072
1191
  const p = element.props;
1073
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1192
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1074
1193
  import_react_native2.View,
1075
1194
  {
1076
1195
  style: {
@@ -1088,7 +1207,7 @@ function ContainerComponent({ element, children }) {
1088
1207
  }
1089
1208
  function RowComponent({ element, children }) {
1090
1209
  const p = element.props;
1091
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1210
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1092
1211
  import_react_native2.View,
1093
1212
  {
1094
1213
  style: {
@@ -1106,7 +1225,7 @@ function RowComponent({ element, children }) {
1106
1225
  }
1107
1226
  function ColumnComponent({ element, children }) {
1108
1227
  const p = element.props;
1109
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1228
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1110
1229
  import_react_native2.View,
1111
1230
  {
1112
1231
  style: {
@@ -1123,7 +1242,7 @@ function ColumnComponent({ element, children }) {
1123
1242
  }
1124
1243
  function ScrollContainerComponent({ element, children }) {
1125
1244
  const p = element.props;
1126
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1245
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1127
1246
  import_react_native2.ScrollView,
1128
1247
  {
1129
1248
  horizontal: p.horizontal ?? false,
@@ -1142,7 +1261,7 @@ function ScrollContainerComponent({ element, children }) {
1142
1261
  }
1143
1262
  function SafeAreaComponent({ element, children }) {
1144
1263
  const p = element.props;
1145
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1264
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1146
1265
  import_react_native2.SafeAreaView,
1147
1266
  {
1148
1267
  style: {
@@ -1155,7 +1274,7 @@ function SafeAreaComponent({ element, children }) {
1155
1274
  }
1156
1275
  function SpacerComponent({ element }) {
1157
1276
  const p = element.props;
1158
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1277
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1159
1278
  import_react_native2.View,
1160
1279
  {
1161
1280
  style: {
@@ -1167,7 +1286,7 @@ function SpacerComponent({ element }) {
1167
1286
  );
1168
1287
  }
1169
1288
  function PressableComponent({ children, emit }) {
1170
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1289
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1171
1290
  import_react_native2.Pressable,
1172
1291
  {
1173
1292
  onPress: () => emit("press"),
@@ -1184,7 +1303,7 @@ function DividerComponent({ element }) {
1184
1303
  const isVertical = p.direction === "vertical";
1185
1304
  const thickness = p.thickness ?? 1;
1186
1305
  const color = p.color ?? "#e5e7eb";
1187
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1306
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1188
1307
  import_react_native2.View,
1189
1308
  {
1190
1309
  style: {
@@ -1206,7 +1325,7 @@ var headingSizes = {
1206
1325
  function HeadingComponent({ element }) {
1207
1326
  const p = element.props;
1208
1327
  const level = p.level ?? "h2";
1209
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1328
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1210
1329
  import_react_native2.Text,
1211
1330
  {
1212
1331
  style: {
@@ -1221,7 +1340,7 @@ function HeadingComponent({ element }) {
1221
1340
  }
1222
1341
  function ParagraphComponent({ element }) {
1223
1342
  const p = element.props;
1224
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1343
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1225
1344
  import_react_native2.Text,
1226
1345
  {
1227
1346
  numberOfLines: p.numberOfLines ?? void 0,
@@ -1242,7 +1361,7 @@ var labelSizes = {
1242
1361
  };
1243
1362
  function LabelComponent({ element }) {
1244
1363
  const p = element.props;
1245
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1364
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1246
1365
  import_react_native2.Text,
1247
1366
  {
1248
1367
  style: {
@@ -1256,7 +1375,7 @@ function LabelComponent({ element }) {
1256
1375
  }
1257
1376
  function ImageComponent({ element }) {
1258
1377
  const p = element.props;
1259
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1378
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1260
1379
  import_react_native2.Image,
1261
1380
  {
1262
1381
  source: { uri: p.src },
@@ -1281,7 +1400,7 @@ function AvatarComponent({ element }) {
1281
1400
  const size = avatarSizeMap[p.size ?? "md"];
1282
1401
  const bgColor = p.backgroundColor ?? "#6366f1";
1283
1402
  if (p.src) {
1284
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1403
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1285
1404
  import_react_native2.Image,
1286
1405
  {
1287
1406
  source: { uri: p.src },
@@ -1294,7 +1413,7 @@ function AvatarComponent({ element }) {
1294
1413
  }
1295
1414
  );
1296
1415
  }
1297
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1416
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1298
1417
  import_react_native2.View,
1299
1418
  {
1300
1419
  style: {
@@ -1305,7 +1424,7 @@ function AvatarComponent({ element }) {
1305
1424
  alignItems: "center",
1306
1425
  justifyContent: "center"
1307
1426
  },
1308
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1427
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1309
1428
  import_react_native2.Text,
1310
1429
  {
1311
1430
  style: {
@@ -1332,7 +1451,7 @@ function BadgeComponent({ element }) {
1332
1451
  bg: "#e5e7eb",
1333
1452
  text: "#374151"
1334
1453
  };
1335
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1454
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1336
1455
  import_react_native2.View,
1337
1456
  {
1338
1457
  style: {
@@ -1342,7 +1461,7 @@ function BadgeComponent({ element }) {
1342
1461
  borderRadius: 9999,
1343
1462
  alignSelf: "flex-start"
1344
1463
  },
1345
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1464
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1346
1465
  import_react_native2.Text,
1347
1466
  {
1348
1467
  style: {
@@ -1361,7 +1480,7 @@ function ChipComponent({ element, emit }) {
1361
1480
  const bgColor = p.selected ? "#6366f1" : p.backgroundColor ?? "#f3f4f6";
1362
1481
  const textColor = p.selected ? "#ffffff" : "#374151";
1363
1482
  const hasRemove = !!element.on?.remove;
1364
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
1483
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1365
1484
  import_react_native2.Pressable,
1366
1485
  {
1367
1486
  onPress: () => emit("press"),
@@ -1375,8 +1494,8 @@ function ChipComponent({ element, emit }) {
1375
1494
  alignSelf: "flex-start"
1376
1495
  },
1377
1496
  children: [
1378
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: textColor }, children: p.label }),
1379
- hasRemove && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Pressable, { onPress: () => emit("remove"), style: { marginLeft: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: textColor, fontWeight: "700" }, children: "x" }) })
1497
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: textColor }, children: p.label }),
1498
+ hasRemove && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Pressable, { onPress: () => emit("remove"), style: { marginLeft: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: textColor, fontWeight: "700" }, children: "x" }) })
1380
1499
  ]
1381
1500
  }
1382
1501
  );
@@ -1405,7 +1524,7 @@ function ButtonComponent({ element, emit }) {
1405
1524
  fontSize: 15
1406
1525
  };
1407
1526
  const disabled = p.disabled || p.loading;
1408
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
1527
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1409
1528
  import_react_native2.Pressable,
1410
1529
  {
1411
1530
  disabled,
@@ -1424,7 +1543,7 @@ function ButtonComponent({ element, emit }) {
1424
1543
  alignSelf: "flex-start"
1425
1544
  }),
1426
1545
  children: [
1427
- p.loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1546
+ p.loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1428
1547
  import_react_native2.ActivityIndicator,
1429
1548
  {
1430
1549
  size: "small",
@@ -1432,7 +1551,7 @@ function ButtonComponent({ element, emit }) {
1432
1551
  style: { marginRight: 8 }
1433
1552
  }
1434
1553
  ),
1435
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1554
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1436
1555
  import_react_native2.Text,
1437
1556
  {
1438
1557
  style: {
@@ -1454,9 +1573,9 @@ function TextInputComponent({ element, bindings }) {
1454
1573
  bindings?.value
1455
1574
  );
1456
1575
  const displayValue = boundValue ?? "";
1457
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native2.View, { style: p.flex != null ? { flex: p.flex } : void 0, children: [
1458
- p.label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: inputStyles.label, children: p.label }),
1459
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1576
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native2.View, { style: p.flex != null ? { flex: p.flex } : void 0, children: [
1577
+ p.label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: inputStyles.label, children: p.label }),
1578
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1460
1579
  import_react_native2.TextInput,
1461
1580
  {
1462
1581
  placeholder: p.placeholder ?? void 0,
@@ -1484,8 +1603,8 @@ function SwitchComponent({ element, bindings }) {
1484
1603
  bindings?.checked
1485
1604
  );
1486
1605
  const displayValue = checked ?? false;
1487
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native2.View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
1488
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1606
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native2.View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
1607
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1489
1608
  import_react_native2.Switch,
1490
1609
  {
1491
1610
  value: displayValue,
@@ -1493,7 +1612,7 @@ function SwitchComponent({ element, bindings }) {
1493
1612
  disabled: p.disabled ?? false
1494
1613
  }
1495
1614
  ),
1496
- p.label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#374151" }, children: p.label })
1615
+ p.label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#374151" }, children: p.label })
1497
1616
  ] });
1498
1617
  }
1499
1618
  function CheckboxComponent({ element, bindings }) {
@@ -1503,7 +1622,7 @@ function CheckboxComponent({ element, bindings }) {
1503
1622
  bindings?.checked
1504
1623
  );
1505
1624
  const isChecked = checked ?? false;
1506
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
1625
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1507
1626
  import_react_native2.Pressable,
1508
1627
  {
1509
1628
  disabled: p.disabled ?? false,
@@ -1519,7 +1638,7 @@ function CheckboxComponent({ element, bindings }) {
1519
1638
  opacity: p.disabled ? 0.5 : 1
1520
1639
  },
1521
1640
  children: [
1522
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1641
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1523
1642
  import_react_native2.View,
1524
1643
  {
1525
1644
  style: {
@@ -1532,10 +1651,10 @@ function CheckboxComponent({ element, bindings }) {
1532
1651
  alignItems: "center",
1533
1652
  justifyContent: "center"
1534
1653
  },
1535
- children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { color: "#ffffff", fontSize: 12, fontWeight: "700" }, children: "\u2713" })
1654
+ children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { color: "#ffffff", fontSize: 12, fontWeight: "700" }, children: "\u2713" })
1536
1655
  }
1537
1656
  ),
1538
- p.label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#374151" }, children: p.label })
1657
+ p.label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#374151" }, children: p.label })
1539
1658
  ]
1540
1659
  }
1541
1660
  );
@@ -1547,8 +1666,8 @@ function SliderComponent({ element }) {
1547
1666
  const value = p.value ?? min;
1548
1667
  const progress = max > min ? (value - min) / (max - min) : 0;
1549
1668
  const trackColor = p.color ?? "#3b82f6";
1550
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native2.View, { children: [
1551
- p.label && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
1669
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native2.View, { children: [
1670
+ p.label && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1552
1671
  import_react_native2.View,
1553
1672
  {
1554
1673
  style: {
@@ -1557,12 +1676,12 @@ function SliderComponent({ element }) {
1557
1676
  marginBottom: 4
1558
1677
  },
1559
1678
  children: [
1560
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: "#374151" }, children: p.label }),
1561
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: "#6b7280" }, children: value })
1679
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: "#374151" }, children: p.label }),
1680
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: "#6b7280" }, children: value })
1562
1681
  ]
1563
1682
  }
1564
1683
  ),
1565
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1684
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1566
1685
  import_react_native2.View,
1567
1686
  {
1568
1687
  style: {
@@ -1571,7 +1690,7 @@ function SliderComponent({ element }) {
1571
1690
  borderRadius: 3,
1572
1691
  overflow: "hidden"
1573
1692
  },
1574
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1693
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1575
1694
  import_react_native2.View,
1576
1695
  {
1577
1696
  style: {
@@ -1588,7 +1707,7 @@ function SliderComponent({ element }) {
1588
1707
  }
1589
1708
  function SearchBarComponent({ element, emit }) {
1590
1709
  const p = element.props;
1591
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
1710
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1592
1711
  import_react_native2.View,
1593
1712
  {
1594
1713
  style: {
@@ -1599,8 +1718,8 @@ function SearchBarComponent({ element, emit }) {
1599
1718
  paddingHorizontal: 12
1600
1719
  },
1601
1720
  children: [
1602
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#9ca3af", marginRight: 8 }, children: "Search" }),
1603
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1721
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#9ca3af", marginRight: 8 }, children: "Search" }),
1722
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1604
1723
  import_react_native2.TextInput,
1605
1724
  {
1606
1725
  placeholder: p.placeholder ?? "Search...",
@@ -1621,13 +1740,13 @@ function SearchBarComponent({ element, emit }) {
1621
1740
  }
1622
1741
  function SpinnerComponent({ element }) {
1623
1742
  const p = element.props;
1624
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.ActivityIndicator, { size: p.size ?? "small", color: p.color ?? "#3b82f6" });
1743
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.ActivityIndicator, { size: p.size ?? "small", color: p.color ?? "#3b82f6" });
1625
1744
  }
1626
1745
  function ProgressBarComponent({ element }) {
1627
1746
  const p = element.props;
1628
1747
  const height = p.height ?? 6;
1629
1748
  const progress = Math.min(Math.max(p.progress, 0), 1);
1630
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1749
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1631
1750
  import_react_native2.View,
1632
1751
  {
1633
1752
  style: {
@@ -1636,7 +1755,7 @@ function ProgressBarComponent({ element }) {
1636
1755
  borderRadius: height / 2,
1637
1756
  overflow: "hidden"
1638
1757
  },
1639
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1758
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1640
1759
  import_react_native2.View,
1641
1760
  {
1642
1761
  style: {
@@ -1654,7 +1773,7 @@ function CardComponent({ element, children }) {
1654
1773
  const p = element.props;
1655
1774
  const elevated = p.elevated !== false;
1656
1775
  const padding = p.padding ?? 16;
1657
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
1776
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1658
1777
  import_react_native2.View,
1659
1778
  {
1660
1779
  style: [
@@ -1672,7 +1791,7 @@ function CardComponent({ element, children }) {
1672
1791
  }
1673
1792
  ],
1674
1793
  children: [
1675
- p.title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1794
+ p.title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1676
1795
  import_react_native2.Text,
1677
1796
  {
1678
1797
  style: {
@@ -1684,7 +1803,7 @@ function CardComponent({ element, children }) {
1684
1803
  children: p.title
1685
1804
  }
1686
1805
  ),
1687
- p.subtitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1806
+ p.subtitle && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1688
1807
  import_react_native2.Text,
1689
1808
  {
1690
1809
  style: {
@@ -1703,7 +1822,7 @@ function CardComponent({ element, children }) {
1703
1822
  function ListItemComponent({ element, emit }) {
1704
1823
  const p = element.props;
1705
1824
  const hasPress = !!element.on?.press;
1706
- const content = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
1825
+ const content = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1707
1826
  import_react_native2.View,
1708
1827
  {
1709
1828
  style: {
@@ -1713,7 +1832,7 @@ function ListItemComponent({ element, emit }) {
1713
1832
  paddingHorizontal: 16
1714
1833
  },
1715
1834
  children: [
1716
- p.leading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1835
+ p.leading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1717
1836
  import_react_native2.Text,
1718
1837
  {
1719
1838
  style: {
@@ -1726,17 +1845,17 @@ function ListItemComponent({ element, emit }) {
1726
1845
  children: p.leading
1727
1846
  }
1728
1847
  ),
1729
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native2.View, { style: { flex: 1 }, children: [
1730
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#111827" }, children: p.title }),
1731
- p.subtitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: "#6b7280", marginTop: 2 }, children: p.subtitle })
1848
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native2.View, { style: { flex: 1 }, children: [
1849
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#111827" }, children: p.title }),
1850
+ p.subtitle && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: "#6b7280", marginTop: 2 }, children: p.subtitle })
1732
1851
  ] }),
1733
- p.trailing && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: "#6b7280", marginLeft: 8 }, children: p.trailing }),
1734
- p.showChevron && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#9ca3af", marginLeft: 8 }, children: ">" })
1852
+ p.trailing && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 14, color: "#6b7280", marginLeft: 8 }, children: p.trailing }),
1853
+ p.showChevron && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: { fontSize: 16, color: "#9ca3af", marginLeft: 8 }, children: ">" })
1735
1854
  ]
1736
1855
  }
1737
1856
  );
1738
1857
  if (hasPress) {
1739
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1858
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1740
1859
  import_react_native2.Pressable,
1741
1860
  {
1742
1861
  onPress: () => emit("press"),
@@ -1752,14 +1871,14 @@ function ListItemComponent({ element, emit }) {
1752
1871
  }
1753
1872
  function ModalComponent({ element, children }) {
1754
1873
  const p = element.props;
1755
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1874
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1756
1875
  import_react_native2.Modal,
1757
1876
  {
1758
1877
  visible: p.visible,
1759
1878
  animationType: p.animationType ?? "slide",
1760
1879
  transparent: true,
1761
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.View, { style: modalStyles.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native2.View, { style: modalStyles.content, children: [
1762
- p.title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native2.Text, { style: modalStyles.title, children: p.title }),
1880
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.View, { style: modalStyles.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native2.View, { style: modalStyles.content, children: [
1881
+ p.title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.Text, { style: modalStyles.title, children: p.title }),
1763
1882
  children
1764
1883
  ] }) })
1765
1884
  }
@@ -1882,8 +2001,8 @@ var modalStyles = import_react_native2.StyleSheet.create({
1882
2001
  });
1883
2002
 
1884
2003
  // src/renderer.tsx
1885
- var import_jsx_runtime6 = require("react/jsx-runtime");
1886
- var ElementErrorBoundary = class extends import_react6.default.Component {
2004
+ var import_jsx_runtime7 = require("react/jsx-runtime");
2005
+ var ElementErrorBoundary = class extends import_react7.default.Component {
1887
2006
  constructor(props) {
1888
2007
  super(props);
1889
2008
  this.state = { hasError: false };
@@ -1905,7 +2024,7 @@ var ElementErrorBoundary = class extends import_react6.default.Component {
1905
2024
  return this.props.children;
1906
2025
  }
1907
2026
  };
1908
- var ElementRenderer = import_react6.default.memo(function ElementRenderer2({
2027
+ var ElementRenderer = import_react7.default.memo(function ElementRenderer2({
1909
2028
  element,
1910
2029
  spec,
1911
2030
  registry,
@@ -1915,8 +2034,8 @@ var ElementRenderer = import_react6.default.memo(function ElementRenderer2({
1915
2034
  const repeatScope = useRepeatScope();
1916
2035
  const { ctx } = useVisibility();
1917
2036
  const { execute } = useActions();
1918
- const { getSnapshot } = (0, import_react_state.useStateStore)();
1919
- const fullCtx = (0, import_react6.useMemo)(
2037
+ const { getSnapshot } = useStateStore();
2038
+ const fullCtx = (0, import_react7.useMemo)(
1920
2039
  () => repeatScope ? {
1921
2040
  ...ctx,
1922
2041
  repeatItem: repeatScope.item,
@@ -1925,9 +2044,9 @@ var ElementRenderer = import_react6.default.memo(function ElementRenderer2({
1925
2044
  } : ctx,
1926
2045
  [ctx, repeatScope]
1927
2046
  );
1928
- const isVisible = element.visible === void 0 ? true : (0, import_core6.evaluateVisibility)(element.visible, fullCtx);
2047
+ const isVisible = element.visible === void 0 ? true : (0, import_core7.evaluateVisibility)(element.visible, fullCtx);
1929
2048
  const onBindings = element.on;
1930
- const emit = (0, import_react6.useCallback)(
2049
+ const emit = (0, import_react7.useCallback)(
1931
2050
  async (eventName) => {
1932
2051
  const binding = onBindings?.[eventName];
1933
2052
  if (!binding) return;
@@ -1943,7 +2062,7 @@ var ElementRenderer = import_react6.default.memo(function ElementRenderer2({
1943
2062
  };
1944
2063
  const resolved = {};
1945
2064
  for (const [key, val] of Object.entries(b.params)) {
1946
- resolved[key] = (0, import_core6.resolveActionParam)(val, liveCtx);
2065
+ resolved[key] = (0, import_core7.resolveActionParam)(val, liveCtx);
1947
2066
  }
1948
2067
  await execute({ ...b, params: resolved });
1949
2068
  }
@@ -1954,15 +2073,15 @@ var ElementRenderer = import_react6.default.memo(function ElementRenderer2({
1954
2073
  return null;
1955
2074
  }
1956
2075
  const rawProps = element.props;
1957
- const elementBindings = (0, import_core6.resolveBindings)(rawProps, fullCtx);
1958
- const resolvedProps = (0, import_core6.resolveElementProps)(rawProps, fullCtx);
2076
+ const elementBindings = (0, import_core7.resolveBindings)(rawProps, fullCtx);
2077
+ const resolvedProps = (0, import_core7.resolveElementProps)(rawProps, fullCtx);
1959
2078
  const resolvedElement = resolvedProps !== element.props ? { ...element, props: resolvedProps } : element;
1960
2079
  const Component = registry[resolvedElement.type] ?? fallback;
1961
2080
  if (!Component) {
1962
2081
  console.warn(`No renderer for component type: ${resolvedElement.type}`);
1963
2082
  return null;
1964
2083
  }
1965
- const children = resolvedElement.repeat ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2084
+ const children = resolvedElement.repeat ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1966
2085
  RepeatChildren,
1967
2086
  {
1968
2087
  element: resolvedElement,
@@ -1981,7 +2100,7 @@ var ElementRenderer = import_react6.default.memo(function ElementRenderer2({
1981
2100
  }
1982
2101
  return null;
1983
2102
  }
1984
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2103
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1985
2104
  ElementRenderer2,
1986
2105
  {
1987
2106
  element: childElement,
@@ -1993,7 +2112,7 @@ var ElementRenderer = import_react6.default.memo(function ElementRenderer2({
1993
2112
  childKey
1994
2113
  );
1995
2114
  });
1996
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ElementErrorBoundary, { elementType: resolvedElement.type, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2115
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ElementErrorBoundary, { elementType: resolvedElement.type, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1997
2116
  Component,
1998
2117
  {
1999
2118
  element: resolvedElement,
@@ -2011,15 +2130,15 @@ function RepeatChildren({
2011
2130
  loading,
2012
2131
  fallback
2013
2132
  }) {
2014
- const { state } = (0, import_react_state.useStateStore)();
2133
+ const { state } = useStateStore();
2015
2134
  const repeat = element.repeat;
2016
2135
  const statePath = repeat.statePath;
2017
- const items = (0, import_core6.getByPath)(state, statePath) ?? [];
2018
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: items.map((itemValue, index) => {
2136
+ const items = (0, import_core7.getByPath)(state, statePath) ?? [];
2137
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: items.map((itemValue, index) => {
2019
2138
  const key = repeat.key && typeof itemValue === "object" && itemValue !== null ? String(
2020
2139
  itemValue[repeat.key] ?? index
2021
2140
  ) : String(index);
2022
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2141
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
2023
2142
  RepeatScopeProvider,
2024
2143
  {
2025
2144
  item: itemValue,
@@ -2035,7 +2154,7 @@ function RepeatChildren({
2035
2154
  }
2036
2155
  return null;
2037
2156
  }
2038
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2157
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
2039
2158
  ElementRenderer,
2040
2159
  {
2041
2160
  element: childElement,
@@ -2059,7 +2178,7 @@ function Renderer({
2059
2178
  loading,
2060
2179
  fallback
2061
2180
  }) {
2062
- const registry = (0, import_react6.useMemo)(
2181
+ const registry = (0, import_react7.useMemo)(
2063
2182
  () => ({
2064
2183
  ...includeStandard ? standardComponents : {},
2065
2184
  ...customRegistry
@@ -2073,7 +2192,7 @@ function Renderer({
2073
2192
  if (!rootElement) {
2074
2193
  return null;
2075
2194
  }
2076
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2195
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
2077
2196
  ElementRenderer,
2078
2197
  {
2079
2198
  element: rootElement,
@@ -2094,15 +2213,15 @@ function JSONUIProvider({
2094
2213
  onStateChange,
2095
2214
  children
2096
2215
  }) {
2097
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2098
- import_react_state.StateProvider,
2216
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
2217
+ StateProvider,
2099
2218
  {
2100
2219
  store,
2101
2220
  initialState,
2102
2221
  onStateChange,
2103
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VisibilityProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ActionProvider, { handlers, navigate, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(ValidationProvider, { customFunctions: validationFunctions, children: [
2222
+ children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VisibilityProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActionProvider, { handlers, navigate, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ValidationProvider, { customFunctions: validationFunctions, children: [
2104
2223
  children,
2105
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ConfirmationDialogManager, {})
2224
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConfirmationDialogManager, {})
2106
2225
  ] }) }) })
2107
2226
  }
2108
2227
  );
@@ -2112,7 +2231,7 @@ function ConfirmationDialogManager() {
2112
2231
  if (!pendingConfirmation?.action.confirm) {
2113
2232
  return null;
2114
2233
  }
2115
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2234
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
2116
2235
  ConfirmDialog,
2117
2236
  {
2118
2237
  confirm: pendingConfirmation.action.confirm,
@@ -2186,14 +2305,14 @@ function createRenderer(catalog, components) {
2186
2305
  has: () => true
2187
2306
  }
2188
2307
  ) : void 0;
2189
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2190
- import_react_state.StateProvider,
2308
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
2309
+ StateProvider,
2191
2310
  {
2192
2311
  store,
2193
2312
  initialState: state,
2194
2313
  onStateChange,
2195
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VisibilityProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ActionProvider, { handlers: actionHandlers, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(ValidationProvider, { children: [
2196
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2314
+ children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VisibilityProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActionProvider, { handlers: actionHandlers, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ValidationProvider, { children: [
2315
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
2197
2316
  Renderer,
2198
2317
  {
2199
2318
  spec,
@@ -2202,7 +2321,7 @@ function createRenderer(catalog, components) {
2202
2321
  fallback
2203
2322
  }
2204
2323
  ),
2205
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ConfirmationDialogManager, {})
2324
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConfirmationDialogManager, {})
2206
2325
  ] }) }) })
2207
2326
  }
2208
2327
  );