@valentinkolb/cloud 0.4.0 → 0.5.1

package/src/ui/prompts.tsx

@@ -3,18 +3,18 @@
  * @module prompt-lib
  */
 
+import { mutation, timed } from "@valentinkolb/stdlib/solid";
+import { createEffect, createMemo, createSignal, For, type JSX, onCleanup, Show } from "solid-js";
+import { createStore } from "solid-js/store";
+import { dialogCore } from "./dialog-core";
 import CheckboxInput from "./input/Checkbox";
-import DateTimeInput from "./input/DateTimeInput";
+import { DatePicker, DateTimePicker } from "./input/DatePicker";
 import ImageInput from "./input/ImageInput";
 import NumberInput from "./input/NumberInput";
 import PinInput from "./input/PinInput";
 import SelectInput from "./input/Select";
 import TagsInput from "./input/TagsInput";
 import TextInput from "./input/TextInput";
-import { mutation, timed } from "@valentinkolb/stdlib/solid";
-import { For, Show, createEffect, createMemo, createSignal, onCleanup, type JSX } from "solid-js";
-import { createStore } from "solid-js/store";
-import { dialogCore } from "./dialog-core";
 
 /**
  * Configuration options for dialog appearance and behavior
@@ -31,7 +31,11 @@ export interface DialogOptions {
   /** Visual variant affecting button and outline colors */
   variant?: "danger" | "primary" | "success";
   /** Dialog size preset (default: "medium") */
-  size?: "small" | "medium" | "large";
+  size?: "small" | "medium" | "large" | "wide";
+  /** Dialog surface preset. "bare" keeps overlay/focus handling but leaves the visible panel to the content. */
+  surface?: "default" | "bare";
+  /** Hide the default title row. Mainly useful together with surface: "bare". */
+  header?: false;
 }
 
 export type PromptSearchItem<T = unknown> = {
@@ -77,11 +81,14 @@ export type FieldSchema =
   | (BaseField<string> & {
       type: "text";
       multiline?: boolean;
+      /** Approximate visible lines for multiline mode. Overrides default height. */
+      lines?: number;
       maxLength?: number;
       minLength?: number;
       icon?: string;
       activeIcon?: string;
       password?: boolean;
+      markdown?: boolean;
     })
   | (BaseField<number> & {
       type: "number";
@@ -241,8 +248,13 @@ export const createFormState = <T extends Record<string, FieldSchema>>(schema: T
 
 export const DialogHeader = (props: { close: () => void; title?: string; icon?: string }) => {
   const { title, icon, close } = props || {};
+  // Hierarchy comes from the font-semibold title + per-section
+  // padding. The previous `border-b border-zinc-200` violated the
+  // project's "no horizontal dividers between header/body/footer"
+  // rule. `pb-2` is kept so the title still has breathing room
+  // before whatever the body renders.
   return (
-    <div class="flex flex-row items-center justify-start gap-4 border-b border-zinc-200 pb-2 dark:border-zinc-700">
+    <div class="flex flex-row items-center justify-start gap-4 pb-2">
       {icon && <i class={`${icon}`} />}
       {title && <p class="truncate font-semibold">{title}</p>}
       <button type="button" onClick={() => close()} class="ti ti-x ml-auto" aria-label="close dialog" />
@@ -252,6 +264,7 @@ export const DialogHeader = (props: { close: () => void; title?: string; icon?:
 
 const getSizeClassName = (size: DialogOptions["size"] = "medium") => {
   if (size === "small") return "w-[min(90vw,22rem)] max-h-[72vh]";
+  if (size === "wide") return "w-[min(96vw,64rem)] max-h-[90vh]";
   if (size === "large") return "w-[min(96vw,48rem)] max-h-[86vh]";
   return "w-[min(94vw,28rem)] max-h-[90vh]";
 };
@@ -262,12 +275,17 @@ const getVariantClassName = (variant?: DialogOptions["variant"]) => {
   return "ring-zinc-300/60 dark:ring-zinc-700/60";
 };
 
-const getPanelClassName = (options?: Pick<DialogOptions, "variant" | "size">) => {
+const getPanelClassName = (options?: Pick<DialogOptions, "variant" | "size" | "surface">) => {
   const sizeClass = getSizeClassName(options?.size);
+  if (options?.surface === "bare") {
+    return `fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 m-0 ${sizeClass} overflow-visible border-0 bg-transparent p-0 text-zinc-900 shadow-none backdrop:bg-black/45 dark:backdrop:bg-black/35 backdrop:backdrop-blur-sm dark:text-zinc-100`;
+  }
   const variantClass = getVariantClassName(options?.variant);
   return `fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 m-0 ${sizeClass} overflow-x-hidden overflow-y-auto rounded-2xl border-0 bg-white/95 p-4 text-zinc-900 shadow-none ring-1 ring-inset ${variantClass} backdrop:bg-black/45 dark:backdrop:bg-black/35 backdrop:backdrop-blur-sm dark:bg-zinc-950/95 dark:text-zinc-100`;
 };
 
+const getContentClassName = (surface?: DialogOptions["surface"]) => (surface === "bare" ? "" : undefined);
+
 const getSearchPanelClassName = () =>
   "fixed left-1/2 top-[25vh] -translate-x-1/2 m-0 w-[min(96vw,46rem)] h-[50vh] border-0 bg-transparent p-0 text-zinc-900 shadow-none backdrop:bg-black/45 dark:backdrop:bg-black/35 backdrop:backdrop-blur-sm dark:text-zinc-100 [@media(min-height:1100px)]:top-[33vh] [@media(min-height:1100px)]:h-[33vh]";
 
@@ -277,229 +295,226 @@ const openSearchPrompt = <T = unknown>(
   resolver: (input: PromptSearchInput) => Promise<PromptSearchItem<T>[]> | PromptSearchItem<T>[],
   options?: PromptSearchOptions,
 ) =>
-  dialogCore.open<PromptSearchItem<T>>((close) => {
-    const [query, setQuery] = createSignal(options?.initialQuery ?? "");
-    const [items, setItems] = createSignal<PromptSearchItem<T>[]>([]);
-    const [activeIndex, setActiveIndex] = createSignal(0);
-    const [hasLoaded, setHasLoaded] = createSignal(false);
-    const [failedPreviews, setFailedPreviews] = createStore<Record<number, true>>({});
-    const [activeSearchQuery, setActiveSearchQuery] = createSignal("");
-
-    const rowRefs = new Map<number, HTMLButtonElement>();
-    let inputRef: HTMLInputElement | undefined;
-
-    const minQueryLength = options?.minQueryLength ?? 0;
-    const debounceMs = options?.debounceMs ?? 180;
-    const searchMutation = mutation.create<
-      {
-        query: string;
-        items: PromptSearchItem<T>[];
-      },
-      string,
-      { requestQuery: string }
-    >({
-      onBefore: (requestQuery) => ({ requestQuery }),
-      mutation: async (requestQuery, ctx) => {
-        const result = await resolver({
-          query: requestQuery,
-          abortSignal: ctx.abortSignal,
-        });
-        return { query: requestQuery, items: (result ?? []).slice() };
-      },
-      onSuccess: (result, ctx) => {
-        if (!ctx || ctx.requestQuery !== activeSearchQuery()) return;
-        setItems(result.items);
-        setActiveIndex(0);
-        setHasLoaded(true);
-      },
-      onError: (err, ctx) => {
-        if (!ctx || ctx.requestQuery !== activeSearchQuery()) return;
-        if (err.name === "AbortError") return;
-        setItems([]);
-        setActiveIndex(0);
-        setHasLoaded(true);
-      },
-    });
-    const searchError = createMemo(() => {
-      const err = searchMutation.error();
-      if (!err || err.name === "AbortError") return null;
-      return err.message || "Search failed.";
-    });
-    const shouldShowResults = createMemo(() => {
-      if (query().trim().length < minQueryLength) return false;
-      return hasLoaded() || searchError() !== null || items().length > 0;
-    });
-    const emptyStateText = createMemo(() => {
-      if (!hasLoaded()) return options?.emptyText ?? "Type to search.";
-      return options?.noResultsText ?? "No results.";
-    });
-    const getItemClassName = (isActive: boolean) =>
-      `flex w-full items-start gap-2.5 rounded-lg px-2 py-2 text-left transition-colors ${
-        isActive
-          ? "bg-blue-50/80 text-blue-900 dark:bg-blue-950/45 dark:text-blue-100"
-          : "hover:bg-zinc-200/65 dark:hover:bg-zinc-800/70"
-      }`;
-    const { debouncedFn: debounceSearch, cancel: cancelDebounce } = timed.debounce((nextQuery: string) => {
-      setActiveSearchQuery(nextQuery);
-      searchMutation.abort();
-      void searchMutation.mutate(nextQuery);
-    }, debounceMs);
-
-    const execute = async (item?: PromptSearchItem<T>) => {
-      if (!item) return;
-      if (item.onClick) await item.onClick(item);
-      close(item);
-    };
+  dialogCore.open<PromptSearchItem<T>>(
+    (close) => {
+      const [query, setQuery] = createSignal(options?.initialQuery ?? "");
+      const [items, setItems] = createSignal<PromptSearchItem<T>[]>([]);
+      const [activeIndex, setActiveIndex] = createSignal(0);
+      const [hasLoaded, setHasLoaded] = createSignal(false);
+      const [failedPreviews, setFailedPreviews] = createStore<Record<number, true>>({});
+      const [activeSearchQuery, setActiveSearchQuery] = createSignal("");
+
+      const rowRefs = new Map<number, HTMLButtonElement>();
+      let inputRef: HTMLInputElement | undefined;
+
+      const minQueryLength = options?.minQueryLength ?? 0;
+      const debounceMs = options?.debounceMs ?? 180;
+      const searchMutation = mutation.create<
+        {
+          query: string;
+          items: PromptSearchItem<T>[];
+        },
+        string,
+        { requestQuery: string }
+      >({
+        onBefore: (requestQuery) => ({ requestQuery }),
+        mutation: async (requestQuery, ctx) => {
+          const result = await resolver({
+            query: requestQuery,
+            abortSignal: ctx.abortSignal,
+          });
+          return { query: requestQuery, items: (result ?? []).slice() };
+        },
+        onSuccess: (result, ctx) => {
+          if (!ctx || ctx.requestQuery !== activeSearchQuery()) return;
+          setItems(result.items);
+          setActiveIndex(0);
+          setHasLoaded(true);
+        },
+        onError: (err, ctx) => {
+          if (!ctx || ctx.requestQuery !== activeSearchQuery()) return;
+          if (err.name === "AbortError") return;
+          setItems([]);
+          setActiveIndex(0);
+          setHasLoaded(true);
+        },
+      });
+      const searchError = createMemo(() => {
+        const err = searchMutation.error();
+        if (!err || err.name === "AbortError") return null;
+        return err.message || "Search failed.";
+      });
+      const shouldShowResults = createMemo(() => {
+        if (query().trim().length < minQueryLength) return false;
+        return hasLoaded() || searchError() !== null || items().length > 0;
+      });
+      const emptyStateText = createMemo(() => {
+        if (!hasLoaded()) return options?.emptyText ?? "Type to search.";
+        return options?.noResultsText ?? "No results.";
+      });
+      const getItemClassName = (isActive: boolean) =>
+        `flex w-full items-start gap-2.5 rounded-lg px-2 py-2 text-left transition-colors ${
+          isActive ? "bg-blue-50/80 text-blue-900 dark:bg-blue-950/45 dark:text-blue-100" : "hover:bg-zinc-200/65 dark:hover:bg-zinc-800/70"
+        }`;
+      const { debouncedFn: debounceSearch, cancel: cancelDebounce } = timed.debounce((nextQuery: string) => {
+        setActiveSearchQuery(nextQuery);
+        searchMutation.abort();
+        void searchMutation.mutate(nextQuery);
+      }, debounceMs);
 
-    const moveSelection = (delta: -1 | 1) => {
-      const list = items();
-      if (list.length === 0) return;
-      const next = (activeIndex() + delta + list.length) % list.length;
-      setActiveIndex(next);
-    };
+      const execute = async (item?: PromptSearchItem<T>) => {
+        if (!item) return;
+        if (item.onClick) await item.onClick(item);
+        close(item);
+      };
 
-    createEffect(() => {
-      const list = items();
-      const maxIndex = list.length - 1;
-      if (maxIndex < 0) {
-        setActiveIndex(0);
-        return;
-      }
-      if (activeIndex() > maxIndex) setActiveIndex(maxIndex);
-      rowRefs.get(activeIndex())?.scrollIntoView({ block: "nearest" });
-    });
+      const moveSelection = (delta: -1 | 1) => {
+        const list = items();
+        if (list.length === 0) return;
+        const next = (activeIndex() + delta + list.length) % list.length;
+        setActiveIndex(next);
+      };
+
+      createEffect(() => {
+        const list = items();
+        const maxIndex = list.length - 1;
+        if (maxIndex < 0) {
+          setActiveIndex(0);
+          return;
+        }
+        if (activeIndex() > maxIndex) setActiveIndex(maxIndex);
+        rowRefs.get(activeIndex())?.scrollIntoView({ block: "nearest" });
+      });
+
+      createEffect(() => {
+        const nextQuery = query().trim();
+        setFailedPreviews({});
+
+        if (nextQuery.length < minQueryLength) {
+          cancelDebounce();
+          searchMutation.abort();
+          setItems([]);
+          setActiveIndex(0);
+          setHasLoaded(false);
+          setActiveSearchQuery("");
+          return;
+        }
 
-    createEffect(() => {
-      const nextQuery = query().trim();
-      setFailedPreviews({});
+        debounceSearch(nextQuery);
+      });
 
-      if (nextQuery.length < minQueryLength) {
+      onCleanup(() => {
         cancelDebounce();
         searchMutation.abort();
-        setItems([]);
-        setActiveIndex(0);
-        setHasLoaded(false);
-        setActiveSearchQuery("");
-        return;
-      }
-
-      debounceSearch(nextQuery);
-    });
+      });
 
-    onCleanup(() => {
-      cancelDebounce();
-      searchMutation.abort();
-    });
+      return (
+        <div class="flex h-full min-h-0 flex-col gap-2 pb-1 [--search-body-max:calc(50vh-3.5rem)] [@media(min-height:1100px)]:[--search-body-max:calc(33vh-3.5rem)]">
+          <Show when={options?.title}>
+            {(title) => <p class="px-1 text-base font-semibold text-white dark:text-zinc-100">{title()}</p>}
+          </Show>
+
+          <div class="flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl bg-white/95 text-zinc-900 shadow-none ring-1 ring-inset ring-zinc-300/60 dark:bg-zinc-950/95 dark:text-zinc-100 dark:ring-zinc-700/60">
+            <label class="flex items-center gap-2 px-3 py-2.5">
+              <i class={`${options?.icon ?? "ti ti-search"} text-dimmed`} />
+              <input
+                ref={inputRef}
+                type="search"
+                value={query()}
+                onInput={(event) => setQuery(event.currentTarget.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "ArrowDown") {
+                    event.preventDefault();
+                    moveSelection(1);
+                    return;
+                  }
+                  if (event.key === "ArrowUp") {
+                    event.preventDefault();
+                    moveSelection(-1);
+                    return;
+                  }
+                  if (event.key === "Enter") {
+                    event.preventDefault();
+                    void execute(items()[activeIndex()]);
+                  }
+                }}
+                placeholder={options?.placeholder ?? "Search..."}
+                class="w-full border-0 bg-transparent text-sm outline-none placeholder:text-dimmed"
+                spellcheck={false}
+                autocapitalize="off"
+                autocomplete="off"
+                autocorrect="off"
+              />
+              <Show when={searchMutation.loading()}>
+                <i class="ti ti-loader-2 animate-spin text-dimmed" />
+              </Show>
+            </label>
 
-    return (
-      <div class="flex h-full min-h-0 flex-col gap-2 pb-1 [--search-body-max:calc(50vh-3.5rem)] [@media(min-height:1100px)]:[--search-body-max:calc(33vh-3.5rem)]">
-        <Show when={options?.title}>
-          {(title) => (
-            <p class="px-1 text-base font-semibold text-white dark:text-zinc-100">
-              {title()}
-            </p>
-          )}
-        </Show>
-
-        <div class="flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl bg-white/95 text-zinc-900 shadow-none ring-1 ring-inset ring-zinc-300/60 dark:bg-zinc-950/95 dark:text-zinc-100 dark:ring-zinc-700/60">
-          <label class="flex items-center gap-2 px-3 py-2.5">
-            <i class={`${options?.icon ?? "ti ti-search"} text-dimmed`} />
-            <input
-              ref={inputRef}
-              type="search"
-              value={query()}
-              onInput={(event) => setQuery(event.currentTarget.value)}
-              onKeyDown={(event) => {
-                if (event.key === "ArrowDown") {
-                  event.preventDefault();
-                  moveSelection(1);
-                  return;
-                }
-                if (event.key === "ArrowUp") {
-                  event.preventDefault();
-                  moveSelection(-1);
-                  return;
-                }
-                if (event.key === "Enter") {
-                  event.preventDefault();
-                  void execute(items()[activeIndex()]);
-                }
+            <div
+              class="overflow-hidden transition-[height,opacity] duration-200 ease-out"
+              style={{
+                height: shouldShowResults() ? "var(--search-body-max)" : "0px",
+                opacity: shouldShowResults() ? "1" : "0",
               }}
-              placeholder={options?.placeholder ?? "Search..."}
-              class="w-full border-0 bg-transparent text-sm outline-none placeholder:text-dimmed"
-              spellcheck={false}
-              autocapitalize="off"
-              autocomplete="off"
-              autocorrect="off"
-            />
-            <Show when={searchMutation.loading()}>
-              <i class="ti ti-loader-2 animate-spin text-dimmed" />
-            </Show>
-          </label>
-
-          <div
-            class="overflow-hidden transition-[height,opacity] duration-200 ease-out"
-            style={{
-              height: shouldShowResults() ? "var(--search-body-max)" : "0px",
-              opacity: shouldShowResults() ? "1" : "0",
-            }}
-          >
-            <div class="h-full min-h-0 overflow-y-auto overscroll-y-contain px-2 pb-2" onWheel={(event) => event.stopPropagation()}>
-              <Show when={searchError()}>{(message) => <div class="info-block-danger mb-2 text-xs">{message()}</div>}</Show>
-
-              <Show when={items().length > 0} fallback={<p class="px-1.5 py-2 text-xs text-dimmed">{emptyStateText()}</p>}>
-                <div class="flex flex-col gap-1">
-                  <For each={items()}>
-                    {(item, index) => (
-                      <button
-                        ref={(element) => {
-                          if (!element) {
-                            rowRefs.delete(index());
-                            return;
-                          }
-                          rowRefs.set(index(), element);
-                        }}
-                        type="button"
-                        onMouseEnter={() => setActiveIndex(index())}
-                        onClick={() => void execute(item)}
-                        class={getItemClassName(activeIndex() === index())}
-                      >
-                        <Show when={isPreviewUrl(item.previewUrl) || item.icon}>
-                          <span class="mt-0.5 grid h-7 w-7 shrink-0 place-items-center overflow-hidden rounded-md bg-zinc-200/80 dark:bg-zinc-800/80">
-                            <Show
-                              when={isPreviewUrl(item.previewUrl) && !failedPreviews[index()]}
-                              fallback={<i class={`${item.icon ?? "ti ti-file"} text-xs text-dimmed`} />}
-                            >
-                              <img
-                                src={item.previewUrl}
-                                alt={item.label}
-                                class="h-full w-full object-cover"
-                                onError={() => setFailedPreviews(index(), true)}
-                              />
-                            </Show>
-                          </span>
-                        </Show>
-
-                        <div class="min-w-0 flex-1">
-                          <p class="truncate text-sm leading-5">{item.label}</p>
-                          <Show when={item.desc}>
-                            <p class="mt-0.5 truncate text-xs leading-4 text-dimmed">{item.desc}</p>
+            >
+              <div class="h-full min-h-0 overflow-y-auto overscroll-y-contain px-2 pb-2" onWheel={(event) => event.stopPropagation()}>
+                <Show when={searchError()}>{(message) => <div class="info-block-danger mb-2 text-xs">{message()}</div>}</Show>
+
+                <Show when={items().length > 0} fallback={<p class="px-1.5 py-2 text-xs text-dimmed">{emptyStateText()}</p>}>
+                  <div class="flex flex-col gap-1">
+                    <For each={items()}>
+                      {(item, index) => (
+                        <button
+                          ref={(element) => {
+                            if (!element) {
+                              rowRefs.delete(index());
+                              return;
+                            }
+                            rowRefs.set(index(), element);
+                          }}
+                          type="button"
+                          onMouseEnter={() => setActiveIndex(index())}
+                          onClick={() => void execute(item)}
+                          class={getItemClassName(activeIndex() === index())}
+                        >
+                          <Show when={isPreviewUrl(item.previewUrl) || item.icon}>
+                            <span class="mt-0.5 grid h-7 w-7 shrink-0 place-items-center overflow-hidden rounded-md bg-zinc-200/80 dark:bg-zinc-800/80">
+                              <Show
+                                when={isPreviewUrl(item.previewUrl) && !failedPreviews[index()]}
+                                fallback={<i class={`${item.icon ?? "ti ti-file"} text-xs text-dimmed`} />}
+                              >
+                                <img
+                                  src={item.previewUrl}
+                                  alt={item.label}
+                                  class="h-full w-full object-cover"
+                                  onError={() => setFailedPreviews(index(), true)}
+                                />
+                              </Show>
+                            </span>
                           </Show>
-                        </div>
-                      </button>
-                    )}
-                  </For>
-                </div>
-              </Show>
+
+                          <div class="min-w-0 flex-1">
+                            <p class="truncate text-sm leading-5">{item.label}</p>
+                            <Show when={item.desc}>
+                              <p class="mt-0.5 truncate text-xs leading-4 text-dimmed">{item.desc}</p>
+                            </Show>
+                          </div>
+                        </button>
+                      )}
+                    </For>
+                  </div>
+                </Show>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    );
-  }, {
-    panelClassName: getSearchPanelClassName(),
-    contentClassName: "h-full min-h-0 p-0",
-  });
+      );
+    },
+    {
+      panelClassName: getSearchPanelClassName(),
+      contentClassName: "h-full min-h-0 p-0",
+    },
+  );
 
 /**
  * Simple dialog utilities for user interactions
@@ -575,6 +590,7 @@ export const prompts = {
       ),
       {
         panelClassName: getPanelClassName(options),
+        contentClassName: getContentClassName(options?.surface),
       },
     ),
 
@@ -605,7 +621,7 @@ export const prompts = {
 
           <div class="flex justify-end gap-3">
             <button type="button" onClick={() => close(false)} class="btn-secondary btn-sm">
-              {options?.cancelText || "Nope"}
+              {options?.cancelText || "Cancel"}
             </button>
             <button
               type="button"
@@ -614,13 +630,14 @@ export const prompts = {
                 options?.variant === "danger" ? "btn-danger" : options?.variant === "success" ? "btn-success" : "btn-primary"
               } btn-sm`}
             >
-              {options?.confirmText || "Yees"}
+              {options?.confirmText || "Confirm"}
             </button>
           </div>
         </div>
       ),
       {
         panelClassName: getPanelClassName(options),
+        contentClassName: getContentClassName(options?.surface),
       },
     ),
 
@@ -707,93 +724,118 @@ export const prompts = {
     confirmText?: string;
     cancelText?: string | false;
     variant?: "danger" | "primary" | "success";
-    size?: "small" | "medium" | "large";
+    size?: DialogOptions["size"];
   }): Promise<InferFormValues<T> | null> => {
-    return dialogCore.open<InferFormValues<T> | null>((close) => {
-      const state = createFormState(config.fields);
-
-      // Field renderer map
-      const fieldRenderers: Record<string, (props: any, field: any) => JSX.Element> = {
-        text: (props, field) => (
-          <TextInput {...props} multiline={field.multiline} icon={field.icon} activeIcon={field.activeIcon} password={field.password} />
-        ),
-        number: (props, field) => <NumberInput {...props} min={field.min} max={field.max} step={field.step} />,
-        image: (props, field) => <ImageInput {...props} round={field.round} ariaLabel={field.ariaLabel} />,
-        pin: (props, field) => <PinInput {...props} length={field.length} stretch={field.stretch} />,
-        select: (props, field) => (
-          <SelectInput {...props} options={field.options} icon={field.icon} activeIcon={field.activeIcon} clearable={field.clearable} />
-        ),
-        tags: (props, field) => <TagsInput {...props} icon={field.icon} activeIcon={field.activeIcon} />,
-        boolean: (props) => <CheckboxInput {...props} />,
-        datetime: (props, field) => <DateTimeInput {...props} dateOnly={field.dateOnly} />,
-      };
-
-      // Handle form submission
-      const handleSubmit = (e: Event) => {
-        e.preventDefault();
-        if (state.validateAll()) {
-          close(state.values as InferFormValues<T>);
-        }
-      };
-
-      // Determine button variant class
-      const submitButtonClass = config.variant === "danger" ? "btn-danger" : config.variant === "success" ? "btn-success" : "btn-primary";
-
-      return (
-        <form onSubmit={handleSubmit} class="flex flex-col gap-4">
-          <DialogHeader title={config.title} icon={config.icon} close={() => close(null)} />
-
-          <div class="flex flex-col gap-4">
-            <For each={Object.entries(config.fields)}>
-              {([key, field]) => {
-                // Info field - just display content
-                if (field.type === "info") {
-                  return (
-                    <div>
-                      {typeof field.content === "string" ? (
-                        <p class="text-sm text-zinc-600 dark:text-zinc-400">{field.content}</p>
-                      ) : typeof field.content === "function" ? (
-                        field.content()
-                      ) : (
-                        field.content
-                      )}
-                    </div>
-                  );
-                }
-
-                // Regular input fields
-                // Handle label: false or undefined means no label, otherwise use provided label
-                const label = field.label || undefined;
-                const commonProps = {
-                  label,
-                  description: field.description,
-                  placeholder: field.placeholder,
-                  required: field.required,
-                  value: () => state.values[key],
-                  onChange: (v: any) => state.updateField(key, v),
-                  error: () => state.errors[key],
-                };
-
-                return fieldRenderers[field.type]?.(commonProps, field);
-              }}
-            </For>
-          </div>
+    return dialogCore.open<InferFormValues<T> | null>(
+      (close) => {
+        const state = createFormState(config.fields);
+
+        // Field renderer map
+        const fieldRenderers: Record<string, (props: any, field: any) => JSX.Element> = {
+          text: (props, field) => (
+            <TextInput
+              {...props}
+              multiline={field.multiline}
+              lines={field.lines}
+              icon={field.icon}
+              activeIcon={field.activeIcon}
+              password={field.password}
+              markdown={field.markdown}
+            />
+          ),
+          number: (props, field) => <NumberInput {...props} min={field.min} max={field.max} step={field.step} />,
+          image: (props, field) => <ImageInput {...props} round={field.round} ariaLabel={field.ariaLabel} />,
+          pin: (props, field) => <PinInput {...props} length={field.length} stretch={field.stretch} />,
+          select: (props, field) => (
+            <SelectInput {...props} options={field.options} icon={field.icon} activeIcon={field.activeIcon} clearable={field.clearable} />
+          ),
+          tags: (props, field) => <TagsInput {...props} icon={field.icon} activeIcon={field.activeIcon} />,
+          boolean: (props) => <CheckboxInput {...props} />,
+          datetime: (props, field) => {
+            const pickerProps = {
+              ...props,
+              value: () => props.value?.() || null,
+              onChange: (value: string | null) => props.onChange?.(value ?? ""),
+              clearable: true,
+            };
+            return field.dateOnly ? <DatePicker {...pickerProps} /> : <DateTimePicker {...pickerProps} />;
+          },
+        };
+
+        const submit = () => {
+          if (state.validateAll()) {
+            close(state.values as InferFormValues<T>);
+          }
+        };
+
+        // Handle form submission
+        const handleSubmit = (e: Event) => {
+          e.preventDefault();
+          submit();
+        };
+
+        // Determine button variant class
+        const submitButtonClass = config.variant === "danger" ? "btn-danger" : config.variant === "success" ? "btn-success" : "btn-primary";
+
+        return (
+          <form onSubmit={handleSubmit} class="flex flex-col gap-4">
+            <DialogHeader title={config.title} icon={config.icon} close={() => close(null)} />
+
+            <div class="flex flex-col gap-4">
+              <For each={Object.entries(config.fields)}>
+                {([key, field]) => {
+                  // Info field - just display content
+                  if (field.type === "info") {
+                    return (
+                      <div>
+                        {typeof field.content === "string" ? (
+                          <p class="text-sm text-zinc-600 dark:text-zinc-400">{field.content}</p>
+                        ) : typeof field.content === "function" ? (
+                          field.content()
+                        ) : (
+                          field.content
+                        )}
+                      </div>
+                    );
+                  }
+
+                  // Regular input fields
+                  // Handle label: false or undefined means no label, otherwise use provided label
+                  const label = field.label || undefined;
+                  const commonProps = {
+                    label,
+                    description: field.description,
+                    placeholder: field.placeholder,
+                    required: field.required,
+                    value: () => state.values[key],
+                    onChange: (v: any) => state.updateField(key, v),
+                    onSubmit: submit,
+                    error: () => state.errors[key],
+                  };
+
+                  return fieldRenderers[field.type]?.(commonProps, field);
+                }}
+              </For>
+            </div>
 
-          <div class="flex justify-end gap-3">
-            <Show when={config.cancelText !== false}>
-              <button type="button" onClick={() => close(null)} class="btn-secondary btn-sm">
-                {config.cancelText || "ESC"}
+            <div class="flex justify-end gap-3">
+              <Show when={config.cancelText !== false}>
+                <button type="button" onClick={() => close(null)} class="btn-secondary btn-sm">
+                  {config.cancelText || "Cancel"}
+                </button>
+              </Show>
+              <button type="submit" class={`${submitButtonClass} btn-sm`}>
+                {config.confirmText || "Save"}
               </button>
-            </Show>
-            <button type="submit" class={`${submitButtonClass} btn-sm`}>
-              {config.confirmText || "ENTER"}
-            </button>
-          </div>
-        </form>
-      );
-    }, {
-      panelClassName: getPanelClassName(config),
-    }) as Promise<InferFormValues<T> | null>;
+            </div>
+          </form>
+        );
+      },
+      {
+        panelClassName: getPanelClassName(config),
+        contentClassName: getContentClassName(),
+      },
+    ) as Promise<InferFormValues<T> | null>;
   },
 
   /**
@@ -811,14 +853,21 @@ export const prompts = {
    */
   dialog: <T = any>(component: (close: (result?: T) => void) => JSX.Element, options?: DialogOptions) =>
     dialogCore.open<T>(
-      (close: (result?: T) => void) => (
-        <div class="flex flex-col gap-4">
-          <DialogHeader title={options?.title} icon={options?.icon} close={() => close(undefined)} />
-          {component(close)}
-        </div>
-      ),
+      (close: (result?: T) => void) => {
+        const body = component(close);
+        if (options?.surface === "bare" && options.header === false) return body;
+        return (
+          <div class="flex flex-col gap-4">
+            <Show when={options?.header !== false}>
+              <DialogHeader title={options?.title} icon={options?.icon} close={() => close(undefined)} />
+            </Show>
+            {body}
+          </div>
+        );
+      },
       {
         panelClassName: getPanelClassName(options),
+        contentClassName: getContentClassName(options?.surface),
       },
     ),
 
@@ -834,19 +883,20 @@ export const prompts = {
     dialogCore.open(
       (close) => (
         <div>
-          <DialogHeader title={options?.title ?? "Uuups"} icon={options?.icon ?? "ti ti-alert-circle"} close={close} />
+          <DialogHeader title={options?.title ?? "Error"} icon={options?.icon ?? "ti ti-alert-circle"} close={close} />
 
           <div class="font-xs p-4 text-sm">{content}</div>
 
           <div class="flex justify-end gap-3">
             <button onClick={() => close()} class="btn-primary btn-sm">
-              {options?.confirmText || "Ok .. me sad now"}
+              {options?.confirmText || "Close"}
             </button>
           </div>
         </div>
       ),
       {
         panelClassName: getPanelClassName({ ...options, variant: "danger" }),
+        contentClassName: getContentClassName(options?.surface),
       },
     ),