finalize new media settings

app/src/ui/components/buttons/Button.tsx

@@ -20,7 +20,7 @@ const styles = {
    default: "bg-primary/5 hover:bg-primary/10 link text-primary/70",
    primary: "bg-primary hover:bg-primary/80 link text-background",
    ghost: "bg-transparent hover:bg-primary/5 link text-primary/70",
-   outline: "border border-primary/50 bg-transparent hover:bg-primary/5 link text-primary/80",
+   outline: "border border-primary/20 bg-transparent hover:bg-primary/5 link text-primary/80",
    red: "dark:bg-red-950 dark:hover:bg-red-900 bg-red-100 hover:bg-red-200 link text-primary/70",
    subtlered:
       "dark:text-red-950 text-red-700 dark:hover:bg-red-900 bg-transparent hover:bg-red-50 link"
@@ -51,7 +51,7 @@ const Base = ({
 }: BaseProps) => ({
    ...props,
    className: twMerge(
-      "flex flex-row flex-nowrap items-center font-semibold disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed",
+      "flex flex-row flex-nowrap items-center font-semibold disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed transition-[opacity,background-color,color,border-color]",
       sizes[size ?? "default"],
       styles[variant ?? "default"],
       props.className

app/src/ui/components/form/json-schema-form/Field.tsx

@@ -38,10 +38,11 @@ export const Field = ({ name, schema: _schema, onChange, label: _label, hidden }
       setValue(pointer, value as any);*/
 
       const value = coerce(e.target.value, schema as any, { required });
-      //console.log("handleChange", pointer, e.target.value, { value });
-      if (typeof value === "undefined" && !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);
       }
    }

app/src/ui/components/form/json-schema-form/FieldWrapper.tsx

@@ -2,7 +2,7 @@ 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 { Children, type ReactElement, type ReactNode, cloneElement } from "react";
+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";
@@ -14,7 +14,7 @@ export type FieldwrapperProps = {
    required?: boolean;
    errors?: JsonError[];
    schema?: Exclude<JSONSchema, boolean>;
-   debug?: object;
+   debug?: object | boolean;
    wrapper?: "group" | "fieldset";
    hidden?: boolean;
    children: ReactElement | ReactNode;
@@ -26,7 +26,7 @@ export function FieldWrapper({
    required,
    errors = [],
    schema,
-   debug = {},
+   debug,
    wrapper,
    hidden,
    children
@@ -43,20 +43,28 @@ export function FieldWrapper({
          as={wrapper === "fieldset" ? "fieldset" : "div"}
          className={hidden ? "hidden" : "relative"}
       >
-         {/*<div className="absolute right-0 top-0">
-            <Popover>
-               <Popover.Target>
-                  <IconButton Icon={IconBug} size="xs" className="opacity-30" />
-               </Popover.Target>
-               <Popover.Dropdown>
-                  <JsonViewer
-                     json={{ ...debug, pointer, required, schema, errors }}
-                     expand={6}
-                     className="p-0"
-                  />
-               </Popover.Dropdown>
-            </Popover>
-         </div>*/}
+         {debug && (
+            <div className="absolute right-0 top-0">
+               <Popover>
+                  <Popover.Target>
+                     <IconButton Icon={IconBug} size="xs" className="opacity-30" />
+                  </Popover.Target>
+                  <Popover.Dropdown>
+                     <JsonViewer
+                        json={{
+                           ...(typeof debug === "object" ? debug : {}),
+                           pointer,
+                           required,
+                           schema,
+                           errors
+                        }}
+                        expand={6}
+                        className="p-0"
+                     />
+                  </Popover.Dropdown>
+               </Popover>
+            </div>
+         )}
 
          {label && (
             <Formy.Label as={wrapper === "fieldset" ? "legend" : "label"} htmlFor={pointer}>
@@ -65,9 +73,9 @@ export function FieldWrapper({
          )}
          <div className="flex flex-row gap-2">
             <div className="flex flex-1 flex-col gap-3">
-               {children}
-               {/*{Children.count(children) === 1
+               {Children.count(children) === 1 && isValidElement(children)
                   ? cloneElement(children, {
+                       // @ts-ignore
                        list: examples.length > 0 ? examplesId : undefined
                     })
                   : children}
@@ -77,7 +85,7 @@ export function FieldWrapper({
                         <option key={i} value={e as any} />
                      ))}
                   </datalist>
-               )}*/}
+               )}
             </div>
          </div>
          {description && <Formy.Help>{description}</Formy.Help>}

app/src/ui/components/form/json-schema-form/Form.tsx

@@ -14,6 +14,7 @@ import {
    useRef,
    useState
 } from "react";
+import { JsonViewer } from "ui/components/code/JsonViewer";
 import { Field } from "./Field";
 import { isRequired, normalizePath, omitSchema, prefixPointer } from "./utils";
 
@@ -32,6 +33,10 @@ export type FormProps<
    onSubmit?: (data: Partial<Data>) => void | Promise<void>;
    onInvalidSubmit?: (errors: JsonError[], data: Partial<Data>) => void;
    hiddenSubmit?: boolean;
+   options?: {
+      debug?: boolean;
+      keepEmpty?: boolean;
+   };
 };
 
 export type FormContext<Data> = {
@@ -44,6 +49,7 @@ export type FormContext<Data> = {
    submitting: boolean;
    schema: JSONSchema;
    lib: Draft2019;
+   options: FormProps["options"];
 };
 
 const FormContext = createContext<FormContext<any>>(undefined!);
@@ -62,6 +68,7 @@ export function Form<
    validateOn = "submit",
    hiddenSubmit = true,
    ignoreKeys = [],
+   options = {},
    ...props
 }: FormProps<Schema, Data>) {
    const [schema, initial] = omitSchema(_schema, ignoreKeys, _initialValues);
@@ -146,7 +153,8 @@ export function Form<
       deleteValue,
       errors,
       schema,
-      lib
+      lib,
+      options
    } as any;
    //console.log("context", context);
 
@@ -229,3 +237,10 @@ export function Subscribe({ children }: { children: (ctx: FormContext<any>) => R
    const ctx = useFormContext();
    return children(ctx);
 }
+
+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} />;
+}