From 324d641410c1589cfce154511167b8de9dbdaa98 Mon Sep 17 00:00:00 2001
From: dswbx <dennis.senn@gmx.ch>
Date: Fri, 7 Feb 2025 16:11:21 +0100
Subject: [PATCH] form rerenders optimized

---
 .../ui/components/form/Formy/components.tsx   |   9 +-
 .../form/json-schema-form/AnyOfField.tsx      |  92 +++---
 .../form/json-schema-form/ArrayField.tsx      | 165 ++++++----
 .../form/json-schema-form/Field.tsx           |  58 ++--
 .../form/json-schema-form/FieldWrapper.tsx    |  22 +-
 .../components/form/json-schema-form/Form.tsx | 296 ++++++++++--------
 .../form/json-schema-form/ObjectField.tsx     |  19 +-
 .../components/form/json-schema-form/utils.ts |  42 +--
 app/src/ui/layouts/AppShell/AppShell.tsx      |  13 +-
 app/src/ui/layouts/AppShell/Header.tsx        |  19 +-
 app/src/ui/routes/media/media.settings.tsx    |  18 +-
 app/src/ui/routes/test/index.tsx              |   2 +-
 .../routes/test/tests/json-schema-form3.tsx   | 124 +++++++-
 app/src/ui/styles.css                         |   5 +-
 packages/plasmic/src/contexts/BkndContext.tsx |   1 +
 15 files changed, 546 insertions(+), 339 deletions(-)

diff --git a/app/src/ui/components/form/Formy/components.tsx b/app/src/ui/components/form/Formy/components.tsx
index 74d4717..34d9c82 100644
--- a/app/src/ui/components/form/Formy/components.tsx
+++ b/app/src/ui/components/form/Formy/components.tsx
@@ -189,7 +189,7 @@ export const Switch = forwardRef<
 >(({ type, ...props }, ref) => {
    return (
       <RadixSwitch.Root
-         className="relative h-7 w-12 p-[2px] cursor-pointer rounded-full bg-muted/50 border border-muted outline-none data-[state=checked]:bg-primary appearance-none transition-colors hover:bg-muted/80"
+         className="relative h-7 w-12 p-[2px] cursor-pointer rounded-full bg-muted border border-primary/10 outline-none data-[state=checked]:bg-primary/75 appearance-none transition-colors hover:bg-muted/80"
          onCheckedChange={(bool) => {
             props.onChange?.({ target: { value: bool } });
          }}
@@ -229,7 +229,7 @@ export const Select = forwardRef<
             <>
                {!props.required && <option value="" />}
                {options
-                  .map((o, i) => {
+                  .map((o) => {
                      if (typeof o !== "object") {
                         return { value: o, label: String(o) };
                      }
@@ -246,7 +246,10 @@ export const Select = forwardRef<
          )}
       </select>
       {!props.multiple && (
-         <TbChevronDown className="absolute right-3 top-0 bottom-0 h-full opacity-70" size={18} />
+         <TbChevronDown
+            className="absolute right-3 top-0 bottom-0 h-full opacity-70 pointer-events-none"
+            size={18}
+         />
       )}
    </div>
 ));
diff --git a/app/src/ui/components/form/json-schema-form/AnyOfField.tsx b/app/src/ui/components/form/json-schema-form/AnyOfField.tsx
index 601cc7e..6671898 100644
--- a/app/src/ui/components/form/json-schema-form/AnyOfField.tsx
+++ b/app/src/ui/components/form/json-schema-form/AnyOfField.tsx
@@ -1,28 +1,29 @@
-import type { JsonError } from "json-schema-library";
-import type { JSONSchema } from "json-schema-to-ts";
-import { type ChangeEvent, type ReactNode, createContext, useContext, useState } from "react";
+import { atom, useAtom } from "jotai";
+import type { JsonError, JsonSchema } from "json-schema-library";
+import { type ChangeEvent, type ReactNode, createContext, useContext, useMemo } from "react";
 import { twMerge } from "tailwind-merge";
 import * as Formy from "ui/components/form/Formy";
+import { useEvent } from "ui/hooks/use-event";
 import { FieldComponent, Field as FormField, type FieldProps as FormFieldProps } from "./Field";
-import { FormContextOverride, useFieldContext } from "./Form";
+import { FormContextOverride, useDerivedFieldContext } from "./Form";
 import { getLabel, getMultiSchemaMatched } from "./utils";
 
 export type AnyOfFieldRootProps = {
    path?: string;
-   schema?: Exclude<JSONSchema, boolean>;
+   schema?: JsonSchema;
    children: ReactNode;
 };
 
 export type AnyOfFieldContext = {
    path: string;
-   schema: Exclude<JSONSchema, boolean>;
-   schemas?: JSONSchema[];
-   selectedSchema?: Exclude<JSONSchema, boolean>;
+   schema: JsonSchema;
+   schemas?: JsonSchema[];
+   selectedSchema?: JsonSchema;
    selected: number | null;
    select: (index: number | null) => void;
    options: string[];
    errors: JsonError[];
-   selectSchema: JSONSchema;
+   selectSchema: JsonSchema;
 };
 
 const AnyOfContext = createContext<AnyOfFieldContext>(undefined!);
@@ -31,61 +32,80 @@ export const useAnyOfContext = () => {
    return useContext(AnyOfContext);
 };
 
+const selectedAtom = atom<number | null>(null);
+
 const Root = ({ path = "", schema: _schema, children }: AnyOfFieldRootProps) => {
-   const { setValue, pointer, lib, value, errors, ...ctx } = useFieldContext(path);
-   const schema = _schema ?? ctx.schema;
+   const {
+      setValue,
+      lib,
+      pointer,
+      errors,
+      value: { matchedIndex, schemas },
+      schema
+   } = useDerivedFieldContext(path, _schema, (ctx) => {
+      const [matchedIndex, schemas = []] = getMultiSchemaMatched(ctx.schema, ctx.value);
+      return { matchedIndex, schemas };
+   });
    if (!schema) return `AnyOfField(${path}): no schema ${pointer}`;
-   const [matchedIndex, schemas = []] = getMultiSchemaMatched(schema, value);
-   const [selected, setSelected] = useState<number | null>(matchedIndex > -1 ? matchedIndex : null);
-   const options = schemas.map((s, i) => s.title ?? `Option ${i + 1}`);
-   const selectSchema = {
-      type: "string",
-      enum: options
-   } satisfies JSONSchema;
-   //console.log("AnyOf:root", { value, matchedIndex, selected, schema });
+   const [_selected, setSelected] = useAtom(selectedAtom);
+   const selected = _selected !== null ? _selected : matchedIndex > -1 ? matchedIndex : null;
 
-   const selectedSchema =
-      selected !== null ? (schemas[selected] as Exclude<JSONSchema, boolean>) : undefined;
-
-   function select(index: number | null) {
+   const select = useEvent((index: number | null) => {
       setValue(pointer, index !== null ? lib.getTemplate(undefined, schemas[index]) : undefined);
       setSelected(index);
-   }
+   });
+
+   const context = useMemo(() => {
+      const options = schemas.map((s, i) => s.title ?? `Option ${i + 1}`);
+      const selectSchema = {
+         type: "string",
+         enum: options
+      } satisfies JsonSchema;
+
+      const selectedSchema = selected !== null ? (schemas[selected] as JsonSchema) : undefined;
+
+      return {
+         options,
+         selectSchema,
+         selectedSchema,
+         schema,
+         schemas,
+         selected
+      };
+   }, [selected]);
 
    return (
       <AnyOfContext.Provider
+         key={selected}
          value={{
-            selected,
+            ...context,
             select,
-            options,
-            selectSchema,
             path,
-            schema,
-            schemas,
-            selectedSchema,
             errors
          }}
       >
-         {/*<pre>{JSON.stringify({ value, selected, errors: errors.length }, null, 2)}</pre>*/}
          {children}
       </AnyOfContext.Provider>
    );
 };
 
 const Select = () => {
-   const { selected, select, path, schema, selectSchema } = useAnyOfContext();
+   const { selected, select, path, schema, options, selectSchema } = useAnyOfContext();
 
    function handleSelect(e: ChangeEvent<HTMLInputElement>) {
-      //console.log("selected", e.target.value);
       const i = e.target.value ? Number(e.target.value) : null;
       select(i);
    }
 
    return (
       <>
-         <Formy.Label>{getLabel(path, schema)}</Formy.Label>
+         <Formy.Label>
+            {getLabel(path, schema)} {selected}
+         </Formy.Label>
          <FieldComponent
             schema={selectSchema as any}
+            /* @ts-ignore */
+            options={options.map((label, value) => ({ label, value }))}
             onChange={handleSelect}
             value={selected ?? undefined}
             className="h-8 py-1"
@@ -94,11 +114,11 @@ const Select = () => {
    );
 };
 
-const Field = ({ name, label, ...props }: Partial<FormFieldProps>) => {
+const Field = ({ name, label, schema, ...props }: Partial<FormFieldProps>) => {
    const { selected, selectedSchema, path, errors } = useAnyOfContext();
    if (selected === null) return null;
    return (
-      <FormContextOverride path={path} schema={selectedSchema} overrideData>
+      <FormContextOverride prefix={path} schema={selectedSchema}>
          <div className={twMerge(errors.length > 0 && "bg-red-500/10")}>
             <FormField key={`${path}_${selected}`} name={""} label={false} {...props} />
          </div>
diff --git a/app/src/ui/components/form/json-schema-form/ArrayField.tsx b/app/src/ui/components/form/json-schema-form/ArrayField.tsx
index a24c62a..47f3166 100644
--- a/app/src/ui/components/form/json-schema-form/ArrayField.tsx
+++ b/app/src/ui/components/form/json-schema-form/ArrayField.tsx
@@ -1,49 +1,33 @@
 import { IconLibraryPlus, IconTrash } from "@tabler/icons-react";
-import type { JSONSchema } from "json-schema-to-ts";
+import type { JsonSchema } from "json-schema-library";
+import { isEqual } from "lodash-es";
+import { memo, useMemo } from "react";
 import { Button } from "ui/components/buttons/Button";
 import { IconButton } from "ui/components/buttons/IconButton";
-import * as Formy from "ui/components/form/Formy";
 import { Dropdown } from "ui/components/overlay/Dropdown";
+import { useEvent } from "ui/hooks/use-event";
 import { FieldComponent } from "./Field";
 import { FieldWrapper } from "./FieldWrapper";
-import { useFieldContext } from "./Form";
+import { useDerivedFieldContext, useFormContext, useFormValue } from "./Form";
 import { coerce, getMultiSchema, getMultiSchemaMatched } from "./utils";
 
 export const ArrayField = ({
    path = "",
    schema: _schema
-}: { path?: string; schema?: Exclude<JSONSchema, boolean> }) => {
-   const { setValue, value, pointer, required, ...ctx } = useFieldContext(path);
+}: { path?: string; schema?: JsonSchema }) => {
+   const { setValue, pointer, required, ...ctx } = useDerivedFieldContext(path, _schema);
    const schema = _schema ?? ctx.schema;
    if (!schema || typeof schema === "undefined") return `ArrayField(${path}): no schema ${pointer}`;
 
-   const itemsMultiSchema = getMultiSchema(schema.items);
-
-   function handleAdd(template?: any) {
-      const currentIndex = value?.length ?? 0;
-      const newPointer = `${path}/${currentIndex}`.replace(/\/+/g, "/");
-      setValue(newPointer, template ?? ctx.lib.getTemplate(undefined, schema!.items));
-   }
-
-   function handleUpdate(pointer: string, value: any) {
-      setValue(pointer, value);
-   }
-
-   function handleDelete(pointer: string) {
-      return () => {
-         ctx.deleteValue(pointer);
-      };
-   }
-
    // if unique items with enum
    if (schema.uniqueItems && typeof schema.items === "object" && "enum" in schema.items) {
       return (
-         <FieldWrapper pointer={path} schema={schema} wrapper="fieldset">
+         <FieldWrapper name={path} schema={schema} wrapper="fieldset">
             <FieldComponent
                required
+               name={path}
                schema={schema.items}
                multiple
-               value={value}
                className="h-auto"
                onChange={(e: any) => {
                   // @ts-ignore
@@ -56,48 +40,101 @@ export const ArrayField = ({
    }
 
    return (
-      <FieldWrapper pointer={path} schema={schema} wrapper="fieldset">
-         {value?.map((v, index: number) => {
-            const pointer = `${path}/${index}`.replace(/\/+/g, "/");
-            let subschema = schema.items;
-            if (itemsMultiSchema) {
-               const [, , _subschema] = getMultiSchemaMatched(schema.items, v);
-               subschema = _subschema;
+      <FieldWrapper name={path} schema={schema} wrapper="fieldset">
+         <ArrayIterator name={path}>
+            {({ value }) =>
+               value?.map((v, index: number) => (
+                  <ArrayItem key={index} path={path} index={index} schema={schema} />
+               ))
             }
-
-            return (
-               <div key={pointer} className="flex flex-row gap-2">
-                  <FieldComponent
-                     name={pointer}
-                     schema={subschema!}
-                     value={v}
-                     onChange={(e) => {
-                        handleUpdate(pointer, coerce(e.target.value, subschema!));
-                     }}
-                     className="w-full"
-                  />
-                  <IconButton Icon={IconTrash} onClick={handleDelete(pointer)} size="sm" />
-               </div>
-            );
-         })}
+         </ArrayIterator>
          <div className="flex flex-row">
-            {itemsMultiSchema ? (
-               <Dropdown
-                  dropdownWrapperProps={{
-                     className: "min-w-0"
-                  }}
-                  items={itemsMultiSchema.map((s, i) => ({
-                     label: s!.title ?? `Option ${i + 1}`,
-                     onClick: () => handleAdd(ctx.lib.getTemplate(undefined, s!))
-                  }))}
-                  onClickItem={console.log}
-               >
-                  <Button IconLeft={IconLibraryPlus}>Add</Button>
-               </Dropdown>
-            ) : (
-               <Button onClick={() => handleAdd()}>Add</Button>
-            )}
+            <ArrayAdd path={path} schema={schema} />
          </div>
       </FieldWrapper>
    );
 };
+
+const ArrayItem = memo(({ path, index, schema }: any) => {
+   const { value, ...ctx } = useDerivedFieldContext(path, schema, (ctx) => {
+      return ctx.value?.[index];
+   });
+   const pointer = [path, index].join(".");
+   let subschema = schema.items;
+   const itemsMultiSchema = getMultiSchema(schema.items);
+   if (itemsMultiSchema) {
+      const [, , _subschema] = getMultiSchemaMatched(schema.items, value);
+      subschema = _subschema;
+   }
+
+   const handleUpdate = useEvent((pointer: string, value: any) => {
+      ctx.setValue(pointer, value);
+   });
+
+   const handleDelete = useEvent((pointer: string) => {
+      ctx.deleteValue(pointer);
+   });
+
+   const DeleteButton = useMemo(
+      () => <IconButton Icon={IconTrash} onClick={() => handleDelete(pointer)} size="sm" />,
+      [pointer]
+   );
+
+   return (
+      <div key={pointer} className="flex flex-row gap-2">
+         <FieldComponent
+            name={pointer}
+            schema={subschema!}
+            value={value}
+            onChange={(e) => {
+               handleUpdate(pointer, coerce(e.target.value, subschema!));
+            }}
+            className="w-full"
+         />
+         {DeleteButton}
+      </div>
+   );
+}, isEqual);
+
+const ArrayIterator = memo(
+   ({ name, children }: any) => {
+      return children(useFormValue(name));
+   },
+   (prev, next) => prev.value.length === next.value.length
+);
+
+const ArrayAdd = ({ schema, path }: { schema: JsonSchema; path: string }) => {
+   const {
+      setValue,
+      value: { currentIndex },
+      ...ctx
+   } = useDerivedFieldContext(path, schema, (ctx) => {
+      return { currentIndex: ctx.value?.length ?? 0 };
+   });
+   const itemsMultiSchema = getMultiSchema(schema.items);
+
+   function handleAdd(template?: any) {
+      //const currentIndex = value?.length ?? 0;
+      const newPointer = `${path}/${currentIndex}`.replace(/\/+/g, "/");
+      setValue(newPointer, template ?? ctx.lib.getTemplate(undefined, schema!.items));
+   }
+
+   if (itemsMultiSchema) {
+      return (
+         <Dropdown
+            dropdownWrapperProps={{
+               className: "min-w-0"
+            }}
+            items={itemsMultiSchema.map((s, i) => ({
+               label: s!.title ?? `Option ${i + 1}`,
+               onClick: () => handleAdd(ctx.lib.getTemplate(undefined, s!))
+            }))}
+            onClickItem={console.log}
+         >
+            <Button IconLeft={IconLibraryPlus}>Add</Button>
+         </Dropdown>
+      );
+   }
+
+   return <Button onClick={() => handleAdd()}>Add</Button>;
+};
diff --git a/app/src/ui/components/form/json-schema-form/Field.tsx b/app/src/ui/components/form/json-schema-form/Field.tsx
index 5f87547..f8c9ef7 100644
--- a/app/src/ui/components/form/json-schema-form/Field.tsx
+++ b/app/src/ui/components/form/json-schema-form/Field.tsx
@@ -1,26 +1,30 @@
-import type { JSONSchema } from "json-schema-to-ts";
+import type { JsonSchema } from "json-schema-library";
 import type { ChangeEvent, ComponentPropsWithoutRef } from "react";
 import * as Formy from "ui/components/form/Formy";
 import { useEvent } from "ui/hooks/use-event";
 import { ArrayField } from "./ArrayField";
 import { FieldWrapper } from "./FieldWrapper";
-import { useFieldContext } from "./Form";
+import { useDerivedFieldContext, useFormValue } from "./Form";
 import { ObjectField } from "./ObjectField";
-import { coerce, enumToOptions, isType, isTypeSchema } from "./utils";
+import { coerce, isType, isTypeSchema } from "./utils";
 
 export type FieldProps = {
    name: string;
-   schema?: Exclude<JSONSchema, boolean>;
+   schema?: JsonSchema;
    onChange?: (e: ChangeEvent<any>) => void;
    label?: string | false;
    hidden?: boolean;
 };
 
 export const Field = ({ name, schema: _schema, onChange, label: _label, hidden }: FieldProps) => {
-   const { pointer, value, errors, setValue, required, ...ctx } = useFieldContext(name);
+   const { pointer, setValue, required, ...ctx } = useDerivedFieldContext(name, _schema);
    const schema = _schema ?? ctx.schema;
-   if (!isTypeSchema(schema)) return <Pre>{pointer} has no schema</Pre>;
-   //console.log("field", name, schema);
+   if (!isTypeSchema(schema))
+      return (
+         <Pre>
+            [Field] {pointer} has no schema ({JSON.stringify(schema)})
+         </Pre>
+      );
 
    if (isType(schema.type, "object")) {
       return <ObjectField path={name} schema={schema} />;
@@ -31,39 +35,23 @@ export const Field = ({ name, schema: _schema, onChange, label: _label, hidden }
    }
 
    const disabled = schema.readOnly ?? "const" in schema ?? false;
-   //console.log("field", name, disabled, schema, ctx.schema, _schema);
 
    const handleChange = useEvent((e: ChangeEvent<HTMLInputElement>) => {
-      // don't remove for now, causes issues in anyOf
-      /*const value = coerce(e.target.value, schema as any);
-      setValue(pointer, value as any);*/
-
       const value = coerce(e.target.value, schema as any, { required });
-      //console.log("handleChange", pointer, e.target.value, { value }, ctx.options);
       if (typeof value === "undefined" && !required && ctx.options?.keepEmpty !== true) {
          ctx.deleteValue(pointer);
       } else {
-         //console.log("setValue", pointer, value);
          setValue(pointer, value);
       }
    });
 
    return (
-      <FieldWrapper
-         pointer={pointer}
-         label={_label}
-         required={required}
-         errors={errors}
-         schema={schema}
-         debug={{ value }}
-         hidden={hidden}
-      >
+      <FieldWrapper name={name} label={_label} required={required} schema={schema} hidden={hidden}>
          <FieldComponent
             schema={schema}
-            name={pointer}
+            name={name}
             required={required}
             disabled={disabled}
-            value={value}
             onChange={onChange ?? handleChange}
          />
       </FieldWrapper>
@@ -71,19 +59,25 @@ export const Field = ({ name, schema: _schema, onChange, label: _label, hidden }
 };
 
 export const Pre = ({ children }) => (
-   <pre className="dark:bg-red-950 bg-red-100 rounded-md px-3 py-1.5">{children}</pre>
+   <pre className="dark:bg-red-950 bg-red-100 rounded-md px-3 py-1.5 text-wrap whitespace-break-spaces  break-all">
+      {children}
+   </pre>
 );
 
 export const FieldComponent = ({
    schema,
-   ...props
-}: { schema: JSONSchema } & ComponentPropsWithoutRef<"input">) => {
+   ..._props
+}: { schema: JsonSchema } & ComponentPropsWithoutRef<"input">) => {
+   const { value } = useFormValue(_props.name!);
    if (!isTypeSchema(schema)) return null;
+   const props = {
+      ..._props,
+      // allow override
+      value: typeof _props.value !== "undefined" ? _props.value : value
+   };
 
    if (schema.enum) {
-      return (
-         <Formy.Select id={props.name} {...(props as any)} options={enumToOptions(schema.enum)} />
-      );
+      return <Formy.Select id={props.name} options={schema.enum} {...(props as any)} />;
    }
 
    if (isType(schema.type, ["number", "integer"])) {
@@ -91,7 +85,7 @@ export const FieldComponent = ({
    }
 
    if (isType(schema.type, "boolean")) {
-      return <Formy.Switch id={props.name} {...(props as any)} checked={props.value as any} />;
+      return <Formy.Switch id={props.name} {...(props as any)} checked={value as any} />;
    }
 
    return <Formy.Input id={props.name} {...props} value={props.value ?? ""} />;
diff --git a/app/src/ui/components/form/json-schema-form/FieldWrapper.tsx b/app/src/ui/components/form/json-schema-form/FieldWrapper.tsx
index 6f89bb9..d1ae568 100644
--- a/app/src/ui/components/form/json-schema-form/FieldWrapper.tsx
+++ b/app/src/ui/components/form/json-schema-form/FieldWrapper.tsx
@@ -1,19 +1,18 @@
 import { Popover } from "@mantine/core";
 import { IconBug } from "@tabler/icons-react";
-import type { JsonError } from "json-schema-library";
-import type { JSONSchema } from "json-schema-to-ts";
+import type { JsonSchema } from "json-schema-library";
 import { Children, type ReactElement, type ReactNode, cloneElement, isValidElement } from "react";
 import { IconButton } from "ui/components/buttons/IconButton";
 import { JsonViewer } from "ui/components/code/JsonViewer";
 import * as Formy from "ui/components/form/Formy";
+import { useFormError } from "ui/components/form/json-schema-form/Form";
 import { getLabel } from "./utils";
 
 export type FieldwrapperProps = {
-   pointer: string;
+   name: string;
    label?: string | false;
    required?: boolean;
-   errors?: JsonError[];
-   schema?: Exclude<JSONSchema, boolean>;
+   schema?: JsonSchema;
    debug?: object | boolean;
    wrapper?: "group" | "fieldset";
    hidden?: boolean;
@@ -21,21 +20,20 @@ export type FieldwrapperProps = {
 };
 
 export function FieldWrapper({
-   pointer,
+   name,
    label: _label,
    required,
-   errors = [],
    schema,
    debug,
    wrapper,
    hidden,
    children
 }: FieldwrapperProps) {
+   const errors = useFormError(name, { strict: true });
    const examples = schema?.examples || [];
-   const examplesId = `${pointer}-examples`;
+   const examplesId = `${name}-examples`;
    const description = schema?.description;
-   const label =
-      typeof _label !== "undefined" ? _label : schema ? getLabel(pointer, schema) : pointer;
+   const label = typeof _label !== "undefined" ? _label : schema ? getLabel(name, schema) : name;
 
    return (
       <Formy.Group
@@ -54,7 +52,7 @@ export function FieldWrapper({
                      <JsonViewer
                         json={{
                            ...(typeof debug === "object" ? debug : {}),
-                           pointer,
+                           name,
                            required,
                            schema,
                            errors
@@ -70,7 +68,7 @@ export function FieldWrapper({
          {label && (
             <Formy.Label
                as={wrapper === "fieldset" ? "legend" : "label"}
-               htmlFor={pointer}
+               htmlFor={name}
                className="self-start"
             >
                {label} {required && <span className="font-medium opacity-30">*</span>}
diff --git a/app/src/ui/components/form/json-schema-form/Form.tsx b/app/src/ui/components/form/json-schema-form/Form.tsx
index 228e5df..a2cd7bb 100644
--- a/app/src/ui/components/form/json-schema-form/Form.tsx
+++ b/app/src/ui/components/form/json-schema-form/Form.tsx
@@ -1,8 +1,14 @@
-import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
+import {
+   type PrimitiveAtom,
+   atom,
+   getDefaultStore,
+   useAtom,
+   useAtomValue,
+   useSetAtom
+} from "jotai";
 import { selectAtom } from "jotai/utils";
-import { Draft2019, type JsonError } from "json-schema-library";
+import { Draft2019, type JsonError, type JsonSchema as LibJsonSchema } from "json-schema-library";
 import type { TemplateOptions as LibTemplateOptions } from "json-schema-library/dist/lib/getTemplate";
-import type { JsonSchema as LibJsonSchema } from "json-schema-library/dist/lib/types";
 import type { JSONSchema as $JSONSchema, FromSchema } from "json-schema-to-ts";
 import { get, isEqual } from "lodash-es";
 import * as immutable from "object-path-immutable";
@@ -15,13 +21,19 @@ import {
    useContext,
    useEffect,
    useMemo,
-   useRef,
-   useState
+   useRef
 } from "react";
 import { JsonViewer } from "ui/components/code/JsonViewer";
 import { useEvent } from "ui/hooks/use-event";
 import { Field } from "./Field";
-import { isRequired, normalizePath, omitSchema, prefixPointer } from "./utils";
+import {
+   isRequired,
+   normalizePath,
+   omitSchema,
+   pathToPointer,
+   prefixPath,
+   prefixPointer
+} from "./utils";
 
 type JSONSchema = Exclude<$JSONSchema, boolean>;
 type FormState<Data = any> = {
@@ -31,13 +43,6 @@ type FormState<Data = any> = {
    data: Data;
 };
 
-const formStateAtom = atom<FormState>({
-   dirty: false,
-   submitting: false,
-   errors: [] as JsonError[],
-   data: {} as any
-});
-
 export type FormProps<
    Schema extends JSONSchema = JSONSchema,
    Data = Schema extends JSONSchema ? FromSchema<JSONSchema> : any
@@ -68,9 +73,12 @@ export type FormContext<Data> = {
    schema: JSONSchema;
    lib: Draft2019;
    options: FormProps["options"];
+   root: string;
+   _formStateAtom: PrimitiveAtom<FormState<Data>>;
 };
 
 const FormContext = createContext<FormContext<any>>(undefined!);
+FormContext.displayName = "FormContext";
 
 export function Form<
    Schema extends JSONSchema = JSONSchema,
@@ -92,20 +100,28 @@ export function Form<
    const [schema, initial] = omitSchema(_schema, ignoreKeys, _initialValues);
    const lib = useMemo(() => new Draft2019(schema), [JSON.stringify(schema)]);
    const initialValues = initial ?? lib.getTemplate(undefined, schema, initialOpts);
-   const [formState, setFormState] = useAtom<FormState<Data>>(formStateAtom);
+   const _formStateAtom = useMemo(() => {
+      return atom<FormState<Data>>({
+         dirty: false,
+         submitting: false,
+         errors: [] as JsonError[],
+         data: initialValues
+      });
+   }, [initialValues]);
+   const setFormState = useSetAtom(_formStateAtom);
    const formRef = useRef<HTMLFormElement | null>(null);
 
    useEffect(() => {
-      console.log("setting data");
-      setFormState((prev) => ({ ...prev, data: initialValues }));
-   }, []);
+      if (initialValues) {
+         validate();
+      }
+   }, [initialValues]);
 
    // @ts-ignore
    async function handleSubmit(e: FormEvent<HTMLFormElement>) {
       if (onSubmit) {
          e.preventDefault();
          setFormState((prev) => ({ ...prev, submitting: true }));
-         //setSubmitting(true);
 
          try {
             const { data, errors } = validate();
@@ -119,29 +135,20 @@ export function Form<
             console.warn(e);
          }
          setFormState((prev) => ({ ...prev, submitting: false }));
-
-         //setSubmitting(false);
          return false;
       }
    }
 
    const setValue = useEvent((pointer: string, value: any) => {
       const normalized = normalizePath(pointer);
-      //console.log("setValue", { pointer, normalized, value });
       const key = normalized.substring(2).replace(/\//g, ".");
       setFormState((state) => {
          const prev = state.data;
          const changed = immutable.set(prev, key, value);
          onChange?.(changed, key, value);
-         //console.log("changed", prev, changed, { key, value });
          return { ...state, data: changed };
       });
-      /*setData((prev) => {
-         const changed = immutable.set(prev, key, value);
-         onChange?.(changed, key, value);
-         //console.log("changed", prev, changed, { key, value });
-         return changed;
-      });*/
+      check();
    });
 
    const deleteValue = useEvent((pointer: string) => {
@@ -151,56 +158,49 @@ export function Form<
          const prev = state.data;
          const changed = immutable.del(prev, key);
          onChange?.(changed, key, undefined);
-         //console.log("changed", prev, changed, { key, value });
          return { ...state, data: changed };
       });
-      /*setData((prev) => {
-         const changed = immutable.del(prev, key);
-         onChange?.(changed, key, undefined);
-         //console.log("changed", prev, changed, { key });
-         return changed;
-      });*/
+      check();
    });
 
-   useEffect(() => {
-      //setDirty(!isEqual(initialValues, data));
-      //setFormState((prev => ({ ...prev, dirty: !isEqual(initialValues, data) })));
+   const getCurrentState = useEvent(() => getDefaultStore().get(_formStateAtom));
+
+   const check = useEvent(() => {
+      const state = getCurrentState();
+      setFormState((prev) => ({ ...prev, dirty: !isEqual(initialValues, state.data) }));
 
       if (validateOn === "change") {
          validate();
-      } else if (formState?.errors?.length > 0) {
+      } else if (state?.errors?.length > 0) {
          validate();
       }
-   }, [formState?.data]);
+   });
 
-   function validate(_data?: Partial<Data>) {
-      const actual = _data ?? formState?.data;
+   const validate = useEvent((_data?: Partial<Data>) => {
+      const actual = _data ?? getCurrentState()?.data;
       const errors = lib.validate(actual, schema);
-      //console.log("errors", errors);
       setFormState((prev) => ({ ...prev, errors }));
-      //setErrors(errors);
       return { data: actual, errors };
-   }
+   });
 
    const context = useMemo(
       () => ({
+         _formStateAtom,
          setValue,
          deleteValue,
          schema,
          lib,
-         options
+         options,
+         root: ""
       }),
-      []
+      [schema, initialValues]
    ) as any;
-   //console.log("context", context);
-
-   const Component = useMemo(() => {
-      return children ? children : <Field name="" />;
-   }, []);
 
    return (
       <form {...props} ref={formRef} onSubmit={handleSubmit}>
-         <FormContext.Provider value={context}>{Component}</FormContext.Provider>
+         <FormContext.Provider value={context}>
+            {children ? children : <Field name="" />}
+         </FormContext.Provider>
          {hiddenSubmit && (
             <button style={{ visibility: "hidden" }} type="submit">
                Submit
@@ -217,25 +217,21 @@ export function useFormContext() {
 export function FormContextOverride({
    children,
    overrideData,
-   path,
+   prefix,
    ...overrides
-}: Partial<FormContext<any>> & { children: ReactNode; path?: string; overrideData?: boolean }) {
+}: Partial<FormContext<any>> & { children: ReactNode; prefix?: string; overrideData?: boolean }) {
    const ctx = useFormContext();
    const additional: Partial<FormContext<any>> = {};
 
    // this makes a local schema down the three
    // especially useful for AnyOf, since it doesn't need to fully validate (e.g. pattern)
-   if (overrideData && path) {
-      const pointer = normalizePath(path);
-      const value =
-         pointer === "#/" ? ctx.data : get(ctx.data, pointer.substring(2).replace(/\//g, "."));
-
-      additional.data = value;
+   if (prefix) {
+      additional.root = prefix;
       additional.setValue = (pointer: string, value: any) => {
-         ctx.setValue(prefixPointer(pointer, path), value);
+         ctx.setValue(prefixPointer(pointer, prefix), value);
       };
       additional.deleteValue = (pointer: string) => {
-         ctx.deleteValue(prefixPointer(pointer, path));
+         ctx.deleteValue(prefixPointer(pointer, prefix));
       };
    }
 
@@ -249,88 +245,128 @@ export function FormContextOverride({
 }
 
 export function useFormValue(name: string) {
-   const pointer = normalizePath(name);
-   const isRootPointer = pointer === "#/";
+   const { _formStateAtom, root } = useFormContext();
    const selected = selectAtom(
-      formStateAtom,
+      _formStateAtom,
       useCallback(
          (state) => {
-            const data = state.data;
-            console.log("data", data);
-            return isRootPointer ? data : get(data, pointer.substring(2).replace(/\//g, "."));
+            const prefixedName = prefixPath(name, root);
+            const pointer = pathToPointer(prefixedName);
+            return {
+               value: get(state.data, prefixedName),
+               errors: state.errors.filter((error) => error.data.pointer.startsWith(pointer))
+            };
          },
-         [pointer]
+         [name]
       ),
       isEqual
    );
    return useAtom(selected)[0];
 }
 
-export function useFieldContext(name: string) {
-   const { lib, schema, errors: formErrors = [], ...rest } = useFormContext();
-   const pointer = normalizePath(name);
-   const isRootPointer = pointer === "#/";
-   //console.log("pointer", pointer);
-   const data = {};
-
-   const value = useFormValue(name);
-   console.log("value", pointer, value);
-   //const value = isRootPointer ? data : get(data, pointer.substring(2).replace(/\//g, "."));
-   const errors = useMemo(
-      () => formErrors.filter((error) => error.data.pointer.startsWith(pointer)),
-      [name]
+export function useFormError(name: string, opt?: { strict?: boolean }) {
+   const { _formStateAtom, root } = useFormContext();
+   const selected = selectAtom(
+      _formStateAtom,
+      useCallback(
+         (state) => {
+            const prefixedName = prefixPath(name, root);
+            const pointer = pathToPointer(prefixedName);
+            return state.errors.filter((error) => {
+               return opt?.strict
+                  ? error.data.pointer === pointer
+                  : error.data.pointer.startsWith(pointer);
+            });
+         },
+         [name]
+      ),
+      isEqual
    );
-   const fieldSchema = useMemo(
-      () => (isRootPointer ? (schema as LibJsonSchema) : lib.getSchema({ pointer, data, schema })),
-      [name]
+   return useAtom(selected)[0];
+}
+
+export function useFormStateSelector<Data = any, Reduced = Data>(
+   selector: (state: FormState<Data>) => Reduced
+): Reduced {
+   const { _formStateAtom } = useFormContext();
+   const selected = selectAtom(_formStateAtom, useCallback(selector, []), isEqual);
+   return useAtom(selected)[0];
+}
+
+type SelectorFn<Ctx = any, Refined = any> = (state: Ctx) => Refined;
+
+export function useDerivedFieldContext<Data = any, Reduced = undefined>(
+   path,
+   _schema?: LibJsonSchema,
+   deriveFn?: SelectorFn<
+      FormContext<Data> & {
+         pointer: string;
+         required: boolean;
+         errors: JsonError[];
+         value: any;
+      },
+      Reduced
+   >
+): FormContext<Data> & { value: Reduced; pointer: string; required: boolean; errors: JsonError[] } {
+   const { _formStateAtom, root, lib, ...ctx } = useFormContext();
+   const schema = _schema ?? ctx.schema;
+   const selected = selectAtom(
+      _formStateAtom,
+      useCallback(
+         (state) => {
+            const pointer = pathToPointer(path);
+            const prefixedName = prefixPath(path, root);
+            const prefixedPointer = pathToPointer(prefixedName);
+            const value = get(state.data, prefixedName);
+            const errors = state.errors.filter((error) =>
+               error.data.pointer.startsWith(prefixedPointer)
+            );
+            const fieldSchema =
+               pointer === "#/"
+                  ? (schema as LibJsonSchema)
+                  : lib.getSchema({ pointer, data: value, schema });
+            const required = isRequired(prefixedPointer, schema, state.data);
+
+            const context = {
+               ...ctx,
+               root,
+               schema: fieldSchema as LibJsonSchema,
+               pointer,
+               required,
+               errors
+            };
+            const derived = deriveFn?.({ ...context, _formStateAtom, lib, value });
+
+            return {
+               ...context,
+               value: derived
+            };
+         },
+         [path, schema ?? {}, root]
+      ),
+      isEqual
    );
-   const required = false; // isRequired(pointer, schema, data);
-   const options = useMemo(() => ({}), []);
-
-   return useMemo(
-      () => ({
-         ...rest,
-         dirty: false,
-         submitting: false,
-         options,
-         lib,
-         value,
-         errors,
-         schema: fieldSchema,
-         pointer,
-         required
-      }),
-      [JSON.stringify([value])]
-   );
-}
-useFieldContext.displayName = "useFieldContext";
-
-export function Subscribe({ children }: { children: (ctx: FormContext<any>) => ReactNode }) {
-   const ctx = useFormContext();
-   return children(ctx);
+   return {
+      ...useAtomValue(selected),
+      _formStateAtom,
+      lib
+   } as any;
 }
 
-export function FormDebug() {
-   const { options, data, dirty, errors, submitting } = useFormContext();
-   if (options?.debug !== true) return null;
-
-   return <JsonViewer json={{ dirty, submitting, data, errors }} expand={99} />;
+export function Subscribe<Data = any, Refined = Data>({
+   children,
+   selector
+}: {
+   children: (state: Refined) => ReactNode;
+   selector?: SelectorFn<FormState<Data>, Refined>;
+}) {
+   return children(useFormStateSelector(selector ?? ((state) => state as unknown as Refined)));
 }
 
-function useFieldContext2(name: string) {
-   const ctx = useRef(useFormContext());
-   const pointer = normalizePath(name);
-   const isRootPointer = pointer === "#/";
-   //console.log("pointer", pointer);
-   const data = {};
-   const options = useMemo(() => ({}), []);
-   const required = false;
+export function FormDebug({ force = false }: { force?: boolean }) {
+   const { options } = useFormContext();
+   if (options?.debug !== true && force !== true) return null;
+   const ctx = useFormStateSelector((s) => s);
 
-   const value = useFormValue(name);
-   return { value, options, dirty: false, submitting: false, required, pointer };
-}
-
-export function FormDebug2({ name }: any) {
-   const { ...ctx } = useFieldContext2(name);
-   return <pre>{JSON.stringify({ ctx })}</pre>;
+   return <JsonViewer json={ctx} expand={99} />;
 }
diff --git a/app/src/ui/components/form/json-schema-form/ObjectField.tsx b/app/src/ui/components/form/json-schema-form/ObjectField.tsx
index 7cffcdf..ae6b84b 100644
--- a/app/src/ui/components/form/json-schema-form/ObjectField.tsx
+++ b/app/src/ui/components/form/json-schema-form/ObjectField.tsx
@@ -1,9 +1,9 @@
-import type { JsonError } from "json-schema-library";
 import type { JSONSchema } from "json-schema-to-ts";
+import { isTypeSchema } from "ui/components/form/json-schema-form/utils";
 import { AnyOfField } from "./AnyOfField";
 import { Field } from "./Field";
 import { FieldWrapper, type FieldwrapperProps } from "./FieldWrapper";
-import { useFieldContext } from "./Form";
+import { useDerivedFieldContext } from "./Form";
 
 export type ObjectFieldProps = {
    path?: string;
@@ -18,29 +18,28 @@ export const ObjectField = ({
    label: _label,
    wrapperProps = {}
 }: ObjectFieldProps) => {
-   const ctx = useFieldContext(path);
+   const ctx = useDerivedFieldContext(path, _schema);
    const schema = _schema ?? ctx.schema;
-   if (!schema) return "ObjectField: no schema";
+   if (!isTypeSchema(schema)) return `ObjectField "${path}": no schema`;
    const properties = schema.properties ?? {};
 
    return (
       <FieldWrapper
-         pointer={path}
-         errors={ctx.errors}
+         name={path}
          schema={{ ...schema, description: undefined }}
          wrapper="fieldset"
          {...wrapperProps}
       >
          {Object.keys(properties).map((prop) => {
             const schema = properties[prop];
-            const pointer = `${path}/${prop}`.replace(/\/+/g, "/");
-            if (!schema) return;
+            const name = [path, prop].filter(Boolean).join(".");
+            if (typeof schema === "undefined" || typeof schema === "boolean") return;
 
             if (schema.anyOf || schema.oneOf) {
-               return <AnyOfField key={pointer} path={pointer} />;
+               return <AnyOfField key={name} path={name} />;
             }
 
-            return <Field key={pointer} name={pointer} />;
+            return <Field key={name} name={name} />;
          })}
       </FieldWrapper>
    );
diff --git a/app/src/ui/components/form/json-schema-form/utils.ts b/app/src/ui/components/form/json-schema-form/utils.ts
index 2ce374d..2361bd0 100644
--- a/app/src/ui/components/form/json-schema-form/utils.ts
+++ b/app/src/ui/components/form/json-schema-form/utils.ts
@@ -50,7 +50,7 @@ export function flatten(obj: any, parentKey = "", result: any = {}): any {
 // @todo: make sure it's in the right order
 export function unflatten(
    obj: Record<string, string>,
-   schema: JSONSchema,
+   schema: JsonSchema,
    selections?: Record<string, number | undefined>
 ) {
    const result = {};
@@ -78,11 +78,7 @@ export function unflatten(
    return result;
 }
 
-export function coerce(
-   value: any,
-   schema: Exclude<JSONSchema, boolean>,
-   opts?: { required?: boolean }
-) {
+export function coerce(value: any, schema: JsonSchema, opts?: { required?: boolean }) {
    if (!value && typeof opts?.required === "boolean" && !opts.required) {
       return undefined;
    }
@@ -121,16 +117,25 @@ export function normalizePath(path: string) {
       : `#/${path.replace(/#?\/?/, "").replace(/\./g, "/").replace(/\[/g, "/").replace(/\]/g, "")}`;
 }
 
+export function pathToPointer(path: string) {
+   return "#/" + (path.includes(".") ? path.split(".").join("/") : path);
+}
+
 export function prefixPointer(pointer: string, prefix: string) {
-   return pointer.replace("#/", `#/${prefix}/`).replace(/\/\//g, "/");
+   return pointer.replace("#/", `#/${prefix.length > 0 ? prefix + "/" : ""}`).replace(/\/\//g, "/");
+}
+
+export function prefixPath(path: string = "", prefix: string = "") {
+   const p = path.includes(".") ? path.split(".") : [path];
+   return [prefix, ...p].filter(Boolean).join(".");
 }
 
 export function getParentPointer(pointer: string) {
    return pointer.substring(0, pointer.lastIndexOf("/"));
 }
 
-export function isRequired(pointer: string, schema: JSONSchema, data?: any) {
-   if (pointer === "#/") {
+export function isRequired(pointer: string, schema: JsonSchema, data?: any) {
+   if (pointer === "#/" || !schema) {
       return false;
    }
    const lib = new Draft2019(schema as any);
@@ -144,13 +149,6 @@ export function isRequired(pointer: string, schema: JSONSchema, data?: any) {
    const parentSchema = lib.getSchema({ pointer: parentPointer, data });
    const required = parentSchema?.required?.includes(pointer.split("/").pop()!);
 
-   /*console.log("isRequired", {
-      pointer,
-      parentPointer,
-      parent: parentSchema ? JSON.parse(JSON.stringify(parentSchema)) : null,
-      required
-   });*/
-
    return !!required;
 }
 
@@ -162,13 +160,14 @@ export function isType(_type: TType, _compare: TType) {
    return compare.some((t) => type.includes(t));
 }
 
-export function getLabel(name: string, schema: JSONSchema) {
+export function getLabel(name: string, schema: JsonSchema) {
    if (typeof schema === "object" && "title" in schema) return schema.title;
-   const label = name.includes("/") ? (name.split("/").pop() ?? "") : name;
+   if (!name) return "";
+   const label = name.includes(".") ? (name.split(".").pop() ?? "") : name;
    return autoFormatString(label);
 }
 
-export function getMultiSchema(schema: JSONSchema): Exclude<JSONSchema, boolean>[] | undefined {
+export function getMultiSchema(schema: JsonSchema): JsonSchema[] | undefined {
    if (!schema || typeof schema !== "object") return;
    return (schema.anyOf ?? schema.oneOf) as any;
 }
@@ -176,8 +175,9 @@ export function getMultiSchema(schema: JSONSchema): Exclude<JSONSchema, boolean>
 export function getMultiSchemaMatched(
    schema: JsonSchema,
    data: any
-): [number, Exclude<JSONSchema, boolean>[], Exclude<JSONSchema, boolean> | undefined] {
+): [number, JsonSchema[], JsonSchema | undefined] {
    const multiSchema = getMultiSchema(schema);
+   //console.log("getMultiSchemaMatched", schema, data, multiSchema);
    if (!multiSchema) return [-1, [], undefined];
    const index = multiSchema.findIndex((subschema) => {
       const lib = new Draft2019(subschema as any);
@@ -220,7 +220,7 @@ export function omitSchema<Given extends JSONSchema>(_schema: Given, keys: strin
    return [updated, reducedConfig];
 }
 
-export function isTypeSchema(schema?: JSONSchema): schema is Exclude<JSONSchema, boolean> {
+export function isTypeSchema(schema?: JsonSchema): schema is JsonSchema {
    return typeof schema === "object" && "type" in schema && !isType(schema.type, "error");
 }
 
diff --git a/app/src/ui/layouts/AppShell/AppShell.tsx b/app/src/ui/layouts/AppShell/AppShell.tsx
index 634da06..5be31d6 100644
--- a/app/src/ui/layouts/AppShell/AppShell.tsx
+++ b/app/src/ui/layouts/AppShell/AppShell.tsx
@@ -12,8 +12,8 @@ import {
 import type { IconType } from "react-icons";
 import { twMerge } from "tailwind-merge";
 import { IconButton } from "ui/components/buttons/IconButton";
+import { useEvent } from "ui/hooks/use-event";
 import { AppShellProvider, useAppShell } from "ui/layouts/AppShell/use-appshell";
-import { useEvent } from "../../hooks/use-event";
 
 export function Root({ children }) {
    return (
@@ -74,8 +74,15 @@ export function Content({ children, center }: { children: React.ReactNode; cente
 }
 
 export function Main({ children }) {
+   const { sidebar } = useAppShell();
    return (
-      <div data-shell="main" className="flex flex-col flex-grow w-1 flex-shrink-0">
+      <div
+         data-shell="main"
+         className={twMerge(
+            "flex flex-col flex-grow w-1 flex-shrink-1",
+            sidebar.open && "max-w-[calc(100%-350px)]"
+         )}
+      >
          {children}
       </div>
    );
@@ -298,7 +305,7 @@ export function Scrollable({
 
    return (
       <ScrollArea.Root style={{ height: `calc(100dvh - ${offset}px` }} ref={scrollRef}>
-         <ScrollArea.Viewport className="w-full h-full ">{children}</ScrollArea.Viewport>
+         <ScrollArea.Viewport className="w-full h-full">{children}</ScrollArea.Viewport>
          <ScrollArea.Scrollbar
             forceMount
             className="flex select-none touch-none bg-transparent w-0.5"
diff --git a/app/src/ui/layouts/AppShell/Header.tsx b/app/src/ui/layouts/AppShell/Header.tsx
index 4ac2dd2..84b9911 100644
--- a/app/src/ui/layouts/AppShell/Header.tsx
+++ b/app/src/ui/layouts/AppShell/Header.tsx
@@ -73,18 +73,15 @@ export function HeaderNavigation() {
       <>
          <nav className="hidden md:flex flex-row gap-2.5 pl-0 p-2.5 items-center">
             {items.map((item) => (
-               <Tooltip
-                  key={item.label}
-                  label={item.tooltip}
-                  disabled={typeof item.tooltip === "undefined"}
-                  position="bottom"
+               <NavLink
+                  key={item.href}
+                  as={Link}
+                  href={item.href}
+                  Icon={item.Icon}
+                  disabled={item.disabled}
                >
-                  <div>
-                     <NavLink as={Link} href={item.href} Icon={item.Icon} disabled={item.disabled}>
-                        {item.label}
-                     </NavLink>
-                  </div>
-               </Tooltip>
+                  {item.label}
+               </NavLink>
             ))}
          </nav>
          <nav className="flex md:hidden flex-row items-center">
diff --git a/app/src/ui/routes/media/media.settings.tsx b/app/src/ui/routes/media/media.settings.tsx
index b226384..85589ed 100644
--- a/app/src/ui/routes/media/media.settings.tsx
+++ b/app/src/ui/routes/media/media.settings.tsx
@@ -48,14 +48,20 @@ function MediaSettingsInternal() {
    return (
       <>
          <Form schema={schema} initialValues={config as any} onSubmit={onSubmit} {...formConfig}>
-            <Subscribe>
+            <Subscribe
+               selector={(state) => ({
+                  dirty: state.dirty,
+                  errors: state.errors.length > 0,
+                  submitting: state.submitting
+               })}
+            >
                {({ dirty, errors, submitting }) => (
                   <AppShell.SectionHeader
                      right={
                         <Button
                            variant="primary"
                            type="submit"
-                           disabled={!dirty || errors.length > 0 || submitting}
+                           disabled={!dirty || errors || submitting}
                         >
                            Update
                         </Button>
@@ -132,7 +138,7 @@ function Adapters() {
                <Formy.Label as="legend" className="font-mono px-2">
                   {autoFormatString(ctx.selectedSchema!.title!)}
                </Formy.Label>
-               <FormContextOverride schema={ctx.selectedSchema} path={ctx.path} overrideData>
+               <FormContextOverride schema={ctx.selectedSchema} prefix={ctx.path}>
                   <Field name="type" hidden />
                   <ObjectField path="config" wrapperProps={{ label: false, wrapper: "group" }} />
                </FormContextOverride>
@@ -143,9 +149,9 @@ function Adapters() {
 }
 
 const Overlay = () => (
-   <Subscribe>
-      {({ data }) =>
-         !data.enabled && (
+   <Subscribe selector={(state) => ({ enabled: state.data.enabled })}>
+      {({ enabled }) =>
+         !enabled && (
             <div className="absolute w-full h-full z-50 bg-background opacity-70 pointer-events-none" />
          )
       }
diff --git a/app/src/ui/routes/test/index.tsx b/app/src/ui/routes/test/index.tsx
index 44342a2..7699b07 100644
--- a/app/src/ui/routes/test/index.tsx
+++ b/app/src/ui/routes/test/index.tsx
@@ -88,7 +88,7 @@ function TestRoot({ children }) {
                </div>
             </AppShell.Scrollable>
          </AppShell.Sidebar>
-         <main className="flex flex-col flex-grow">{children}</main>
+         <AppShell.Main>{children}</AppShell.Main>
       </>
    );
 }
diff --git a/app/src/ui/routes/test/tests/json-schema-form3.tsx b/app/src/ui/routes/test/tests/json-schema-form3.tsx
index d3ad96b..632fa16 100644
--- a/app/src/ui/routes/test/tests/json-schema-form3.tsx
+++ b/app/src/ui/routes/test/tests/json-schema-form3.tsx
@@ -2,11 +2,11 @@ import { useBknd } from "ui/client/bknd";
 import { Button } from "ui/components/buttons/Button";
 import {
    AnyOf,
+   AnyOfField,
    Field,
    Form,
    FormContextOverride,
    FormDebug,
-   FormDebug2,
    ObjectField
 } from "ui/components/form/json-schema-form";
 import { Scrollable } from "ui/layouts/AppShell/AppShell";
@@ -33,16 +33,108 @@ const schema2 = {
 export default function JsonSchemaForm3() {
    const { schema, config } = useBknd();
 
+   config.media.storage.body_max_size = 1;
+   schema.media.properties.storage.properties.body_max_size.minimum = 0;
+
    return (
       <Scrollable>
          <div className="flex flex-col p-3">
-            <Form schema={schema2} className="flex flex-col gap-3">
+            {/*<Form
+               schema={{
+                  type: "object",
+                  properties: {
+                     name: { type: "string", default: "Peter", maxLength: 3 },
+                     age: { type: "number" },
+                     deep: {
+                        type: "object",
+                        properties: {
+                           nested: { type: "string" }
+                        }
+                     }
+                  },
+                  required: ["age"]
+               }}
+               initialValues={{ name: "Peter", age: 20, deep: { nested: "hello" } }}
+               className="flex flex-col gap-3"
+               validateOn="change"
+            />*/}
+
+            {/*<Form
+               schema={{
+                  type: "object",
+                  properties: {
+                     name: { type: "string", default: "Peter", minLength: 3 },
+                     age: { type: "number" },
+                     deep: {
+                        anyOf: [
+                           {
+                              type: "object",
+                              properties: {
+                                 nested: { type: "string" }
+                              }
+                           },
+                           {
+                              type: "object",
+                              properties: {
+                                 nested2: { type: "string" }
+                              }
+                           }
+                        ]
+                     }
+                  },
+                  required: ["age"]
+               }}
+               className="flex flex-col gap-3"
+               validateOn="change"
+            >
+               <Field name="" />
+               <Subscribe2>
+                  {(state) => (
+                     <pre className="text-wrap whitespace-break-spaces  break-all">
+                        {JSON.stringify(state, null, 2)}
+                     </pre>
+                  )}
+               </Subscribe2>
+            </Form>*/}
+
+            {/*<Form
+               schema={{
+                  type: "object",
+                  properties: {
+                     name: { type: "string", default: "Peter", maxLength: 3 },
+                     age: { type: "number" },
+                     gender: {
+                        type: "string",
+                        enum: ["male", "female", "uni"]
+                     },
+                     deep: {
+                        type: "object",
+                        properties: {
+                           nested: { type: "string" }
+                        }
+                     }
+                  },
+                  required: ["age"]
+               }}
+               className="flex flex-col gap-3"
+               validateOn="change"
+            >
                <div>random thing</div>
                <Field name="name" />
                <Field name="age" />
                <FormDebug />
                <FormDebug2 name="name" />
-            </Form>
+               <hr />
+               <Subscribe2
+               selector={(state) => ({ dirty: state.dirty, submitting: state.submitting })}
+               >
+                  {(state) => (
+                     <pre className="text-wrap whitespace-break-spaces  break-all">
+                        {JSON.stringify(state)}
+                     </pre>
+                  )}
+               </Subscribe2>
+            </Form>*/}
 
             {/*<Form
             schema={{
@@ -114,7 +206,7 @@ export default function JsonSchemaForm3() {
                      }
                   }
                }}
-               initialValues={{ tags: [0, 1] }}
+               initialValues={{ tags: [0, 1], method: ["GET"] }}
                options={{ debug: true }}
             >
                <Field name="" />
@@ -140,10 +232,15 @@ export default function JsonSchemaForm3() {
                   }
                }}
                initialValues={{ tags: [0, 1] }}
-            />*/}
+            >
+               <Field name="" />
+               <FormDebug force />
+            </Form>*/}
 
-            {/*<CustomMediaForm />*/}
-            {/*<Form schema={schema.media} initialValues={config.media} />*/}
+            <CustomMediaForm />
+            {/*<Form schema={schema.media} initialValues={config.media} validateOn="change">
+               <Field name="" />
+            </Form>*/}
 
             {/*<Form
                schema={removeKeyRecursively(schema.media, "pattern") as any}
@@ -166,8 +263,16 @@ export default function JsonSchemaForm3() {
 function CustomMediaForm() {
    const { schema, config } = useBknd();
 
+   config.media.storage.body_max_size = 1;
+   schema.media.properties.storage.properties.body_max_size.minimum = 0;
+
    return (
-      <Form schema={schema.media} initialValues={config.media} className="flex flex-col gap-3">
+      <Form
+         schema={schema.media}
+         initialValues={config.media}
+         className="flex flex-col gap-3"
+         validateOn="change"
+      >
          <Field name="enabled" />
          <Field name="basepath" />
          <Field name="entity_name" />
@@ -175,6 +280,7 @@ function CustomMediaForm() {
          <AnyOf.Root path="adapter">
             <CustomMediaFormAdapter />
          </AnyOf.Root>
+         <FormDebug force />
       </Form>
    );
 }
@@ -197,7 +303,7 @@ function CustomMediaFormAdapter() {
          </div>
 
          {ctx.selected !== null && (
-            <FormContextOverride schema={ctx.selectedSchema} path={ctx.path} overrideData>
+            <FormContextOverride schema={ctx.selectedSchema} prefix={ctx.path}>
                <Field name="type" hidden />
                <ObjectField path="config" wrapperProps={{ label: false, wrapper: "group" }} />
             </FormContextOverride>
diff --git a/app/src/ui/styles.css b/app/src/ui/styles.css
index 17e34db..7dee5fb 100644
--- a/app/src/ui/styles.css
+++ b/app/src/ui/styles.css
@@ -34,7 +34,10 @@ body {
    scrollbar-width: none; /* Firefox */
 }
 
-/*div[data-radix-scroll-area-viewport] > div:first-child {}*/
+div[data-radix-scroll-area-viewport] > div:first-child {
+   min-width: auto !important;
+   display: block !important;
+}
 
 /* hide calendar icon on inputs */
 input[type="datetime-local"]::-webkit-calendar-picker-indicator,
diff --git a/packages/plasmic/src/contexts/BkndContext.tsx b/packages/plasmic/src/contexts/BkndContext.tsx
index c87332b..0e3a3b5 100644
--- a/packages/plasmic/src/contexts/BkndContext.tsx
+++ b/packages/plasmic/src/contexts/BkndContext.tsx
@@ -26,6 +26,7 @@ type BkndContextProps = {
 };
 
 const BkndContextContext = createContext<BkndGlobalContextProps>({} as any);
+BkndContextContext.displayName = "BkndContext";
 
 export const BkndContext = ({
    children,