@k2b/ui 0.1.0-rc.0

package/dist/browser/feedback/prompts.js

@@ -0,0 +1,991 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { addEventListener as _$addEventListener } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<header class=k2b-dialog__header><!$><!/><!$><!/><button type=button class=k2b-dialog__close><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-dialog__header-spacer>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<h2>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<p>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<button type=button class=k2b-button data-variant=secondary>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<form class=k2b-dialog__panel><!$><!/><div class="k2b-dialog__body k2b-prompt-form"></div><footer class=k2b-dialog__actions><!$><!/><button type=submit class=k2b-button>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-prompt-form__info>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<i class="ti ti-loader-2 k2b-spin"aria-hidden=true>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-prompt-search__list role=listbox>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-prompt-search-shell><!$><!/><div class=k2b-prompt-search><label class=k2b-prompt-search__input><i aria-hidden=true></i><input type=search role=combobox aria-autocomplete=list autocapitalize=off autocomplete=off autocorrect=off><!$><!/></label><div class=k2b-prompt-search__collapse><div class=k2b-prompt-search__results><!$><!/><!$><!/>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<p class=k2b-prompt-search-shell__title>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-prompt-search__error role=status aria-live=polite>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<p role=status aria-live=polite>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<img alt>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<span class=k2b-prompt-search__preview>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<button type=button role=option><!$><!/><span class=k2b-prompt-search__copy><strong></strong><!$><!/>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<small>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<div class=k2b-prompt-copy>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<div class=k2b-dialog__panel><!$><!/><div class=k2b-dialog__body></div><footer class=k2b-dialog__actions><button type=button class=k2b-button>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<div class=k2b-dialog__panel><!$><!/><div class=k2b-dialog__body></div><footer class=k2b-dialog__actions><button type=button class=k2b-button data-variant=secondary></button><button type=button class=k2b-button>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<form class=k2b-dialog__panel><!$><!/><div class="k2b-dialog__body k2b-prompt-form"><div class=k2b-prompt-copy></div><!$><!/></div><footer class=k2b-dialog__actions><button type=button class=k2b-button data-variant=secondary></button><button type=submit class=k2b-button>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<code class=k2b-confirmation-phrase>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<div class="k2b-dialog__panel k2b-dialog__stack"><!$><!/><!$><!/>`);
+import { mutation, timed } from "@k2b/stdlib/solid";
+import { createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, Show } from "solid-js";
+import { createStore } from "solid-js/store";
+import { Checkbox } from "../inputs/Checkbox";
+import { PinInput } from "../inputs/ChoiceInputs";
+import { DatePicker, DateTimePicker } from "../inputs/DatePicker";
+import { ImageInput } from "../inputs/FileInputs";
+import { NumberInput } from "../inputs/NumberInput";
+import { Select } from "../inputs/Select";
+import { TagsInput } from "../inputs/TagsInput";
+import { TextInput } from "../inputs/TextInput";
+import { resolveUiMessages } from "../intl/messages";
+import { dialogCore } from "./dialog-core";
+const isEmpty = value => value === undefined || value === null || value === "" || Array.isArray(value) && value.length === 0;
+export const createFormState = schema => {
+  const messages = resolveUiMessages();
+  const [values, setValues] = createStore({});
+  const [errors, setErrors] = createStore({});
+  for (const [key, field] of Object.entries(schema)) {
+    if (field.type !== "info" && "default" in field) setValues(key, field.default);
+  }
+  const validateField = (key, value) => {
+    const field = schema[key];
+    if (!field || field.type === "info") return null;
+    if (field.type === "boolean" && field.required && value !== true) return messages.required;
+    if (field.required && isEmpty(value)) return messages.required;
+    if ("validate" in field && field.validate) {
+      const customError = field.validate(value);
+      if (customError) return customError;
+    }
+    if (field.type === "text" && typeof value === "string" && value.length > 0) {
+      if (field.minLength !== undefined && value.length < field.minLength) return `minimum ${field.minLength} characters`;
+      if (field.maxLength !== undefined && value.length > field.maxLength) return `maximum ${field.maxLength} characters`;
+    }
+    if (field.type === "tags" && Array.isArray(value) && value.length > 0) {
+      if (field.minTags !== undefined && value.length < field.minTags) return `minimum ${field.minTags} tags`;
+      if (field.maxTags !== undefined && value.length > field.maxTags) return `maximum ${field.maxTags} tags`;
+    }
+    return null;
+  };
+  const updateField = (key, value) => {
+    setValues(key, value);
+    setErrors(key, validateField(key, value) ?? undefined);
+  };
+  const validateAll = () => {
+    let valid = true;
+    for (const [key, field] of Object.entries(schema)) {
+      if (field.type === "info") continue;
+      const error = validateField(key, values[key]);
+      setErrors(key, error ?? undefined);
+      if (error) valid = false;
+    }
+    return valid;
+  };
+  const reset = () => {
+    for (const [key, field] of Object.entries(schema)) {
+      if (field.type === "info") continue;
+      setValues(key, "default" in field ? field.default : undefined);
+      setErrors(key, undefined);
+    }
+  };
+  return {
+    values,
+    errors,
+    updateField,
+    validateAll,
+    reset
+  };
+};
+export const DialogHeader = props => (() => {
+  var _el$ = _$getNextElement(_tmpl$),
+    _el$3 = _el$.firstChild,
+    [_el$4, _co$] = _$getNextMarker(_el$3.nextSibling),
+    _el$5 = _el$4.nextSibling,
+    [_el$6, _co$2] = _$getNextMarker(_el$5.nextSibling),
+    _el$2 = _el$6.nextSibling;
+  _$insert(_el$, _$createComponent(Show, {
+    get when() {
+      return props.icon;
+    },
+    children: icon => (() => {
+      var _el$7 = _$getNextElement(_tmpl$2);
+      _$effect(() => _$className(_el$7, icon()));
+      return _el$7;
+    })()
+  }), _el$4, _co$);
+  _$insert(_el$, _$createComponent(Show, {
+    get when() {
+      return props.title;
+    },
+    get fallback() {
+      return _$getNextElement(_tmpl$3);
+    },
+    children: title => (() => {
+      var _el$9 = _$getNextElement(_tmpl$4);
+      _$insert(_el$9, title);
+      return _el$9;
+    })()
+  }), _el$6, _co$2);
+  _$addEventListener(_el$2, "click", props.close, true);
+  _$effect(() => _$setAttribute(_el$2, "aria-label", resolveUiMessages().closeDialog));
+  _$runHydrationEvents();
+  return _el$;
+})();
+const panelClass = options => {
+  const size = options?.size ?? "medium";
+  const variant = options?.variant && options.variant !== "primary" ? ` k2b-dialog--${options.variant}` : "";
+  return `k2b-dialog k2b-dialog--${size}${variant}${options?.surface === "bare" ? " is-bare" : ""}`;
+};
+const contentClass = surface => surface === "bare" ? "k2b-dialog__viewport is-bare" : "k2b-dialog__viewport";
+const renderInfo = content => {
+  if (typeof content === "string") return (() => {
+    var _el$0 = _$getNextElement(_tmpl$5);
+    _$insert(_el$0, content);
+    return _el$0;
+  })();
+  if (typeof content === "function") return content();
+  return content;
+};
+const PromptControl = props => {
+  const label = props.field.label || undefined;
+  switch (props.field.type) {
+    case "text":
+      return _$createComponent(TextInput, {
+        label: label,
+        get description() {
+          return props.field.description;
+        },
+        get required() {
+          return props.field.required;
+        },
+        get placeholder() {
+          return props.field.placeholder;
+        },
+        get error() {
+          return props.error;
+        },
+        get value() {
+          return String(props.value() ?? "");
+        },
+        onValueChange: value => props.update(value ?? undefined),
+        get onSubmit() {
+          return props.submit;
+        },
+        get multiline() {
+          return props.field.multiline;
+        },
+        get lines() {
+          return props.field.lines;
+        },
+        get icon() {
+          return props.field.icon;
+        },
+        get activeIcon() {
+          return props.field.activeIcon;
+        },
+        get password() {
+          return props.field.password;
+        },
+        get markdown() {
+          return props.field.markdown;
+        },
+        get minLength() {
+          return props.field.minLength;
+        },
+        get maxLength() {
+          return props.field.maxLength;
+        }
+      });
+    case "number":
+      return _$createComponent(NumberInput, {
+        label: label,
+        get description() {
+          return props.field.description;
+        },
+        get required() {
+          return props.field.required;
+        },
+        get placeholder() {
+          return props.field.placeholder;
+        },
+        get error() {
+          return props.error;
+        },
+        get value() {
+          return _$memo(() => typeof props.value() === "number")() ? props.value() : null;
+        },
+        onValueChange: value => props.update(value ?? undefined),
+        get min() {
+          return props.field.min;
+        },
+        get max() {
+          return props.field.max;
+        },
+        get step() {
+          return props.field.step;
+        }
+      });
+    case "image":
+      return _$createComponent(ImageInput, {
+        label: label,
+        get description() {
+          return props.field.description;
+        },
+        get required() {
+          return props.field.required;
+        },
+        get error() {
+          return props.error;
+        },
+        value: () => typeof props.value() === "string" ? props.value() : null,
+        onValueChange: value => props.update(value ?? undefined),
+        get round() {
+          return props.field.round;
+        },
+        get ["aria-label"]() {
+          return props.field.ariaLabel;
+        },
+        get accept() {
+          return props.field.accept;
+        }
+      });
+    case "pin":
+      return _$createComponent(PinInput, {
+        label: label,
+        get description() {
+          return props.field.description;
+        },
+        get required() {
+          return props.field.required;
+        },
+        get error() {
+          return props.error;
+        },
+        value: () => String(props.value() ?? ""),
+        get onValueChange() {
+          return props.update;
+        },
+        get length() {
+          return props.field.length;
+        },
+        get stretch() {
+          return props.field.stretch;
+        }
+      });
+    case "select":
+      return _$createComponent(Select, {
+        label: label,
+        get description() {
+          return props.field.description;
+        },
+        get required() {
+          return props.field.required;
+        },
+        get placeholder() {
+          return props.field.placeholder;
+        },
+        get error() {
+          return props.error;
+        },
+        value: () => typeof props.value() === "string" ? props.value() : null,
+        onValueChange: value => props.update(value ?? undefined),
+        get options() {
+          return props.field.options;
+        },
+        get icon() {
+          return props.field.icon;
+        },
+        get activeIcon() {
+          return props.field.activeIcon;
+        },
+        get clearable() {
+          return props.field.clearable;
+        }
+      });
+    case "tags":
+      return _$createComponent(TagsInput, {
+        label: label,
+        get description() {
+          return props.field.description;
+        },
+        get required() {
+          return props.field.required;
+        },
+        get placeholder() {
+          return props.field.placeholder;
+        },
+        get error() {
+          return props.error;
+        },
+        value: () => Array.isArray(props.value()) ? props.value() : [],
+        get onValueChange() {
+          return props.update;
+        },
+        get maxTags() {
+          return props.field.maxTags;
+        },
+        get icon() {
+          return props.field.icon;
+        },
+        get activeIcon() {
+          return props.field.activeIcon;
+        }
+      });
+    case "boolean":
+      return _$createComponent(Checkbox, {
+        label: label,
+        get description() {
+          return props.field.description;
+        },
+        get required() {
+          return props.field.required;
+        },
+        get error() {
+          return props.error;
+        },
+        value: () => Boolean(props.value()),
+        get onValueChange() {
+          return props.update;
+        }
+      });
+    case "datetime":
+      {
+        const pickerProps = {
+          label,
+          description: props.field.description,
+          required: props.field.required,
+          placeholder: props.field.placeholder,
+          error: props.error,
+          value: () => typeof props.value() === "string" ? props.value() : null,
+          onValueChange: value => props.update(value ?? ""),
+          clearable: true
+        };
+        return props.field.dateOnly ? _$createComponent(DatePicker, pickerProps) : _$createComponent(DateTimePicker, pickerProps);
+      }
+  }
+};
+const PromptFormDialog = props => {
+  const state = createFormState(props.config.fields);
+  const submit = () => {
+    if (state.validateAll()) props.close(state.values);
+  };
+  const handleSubmit = event => {
+    event.preventDefault();
+    submit();
+  };
+  return (() => {
+    var _el$1 = _$getNextElement(_tmpl$7),
+      _el$16 = _el$1.firstChild,
+      [_el$17, _co$4] = _$getNextMarker(_el$16.nextSibling),
+      _el$10 = _el$17.nextSibling,
+      _el$11 = _el$10.nextSibling,
+      _el$14 = _el$11.firstChild,
+      [_el$15, _co$3] = _$getNextMarker(_el$14.nextSibling),
+      _el$13 = _el$15.nextSibling;
+    _el$1.addEventListener("submit", handleSubmit);
+    _$insert(_el$1, _$createComponent(DialogHeader, {
+      get title() {
+        return props.config.title;
+      },
+      get icon() {
+        return props.config.icon;
+      },
+      close: () => props.close(null)
+    }), _el$17, _co$4);
+    _$insert(_el$10, _$createComponent(For, {
+      get each() {
+        return Object.entries(props.config.fields);
+      },
+      children: ([key, field]) => {
+        if (field.type === "info") return (() => {
+          var _el$18 = _$getNextElement(_tmpl$8);
+          _$insert(_el$18, () => renderInfo(field.content));
+          return _el$18;
+        })();
+        return _$createComponent(PromptControl, {
+          field: field,
+          value: () => state.values[key],
+          update: value => state.updateField(key, value),
+          error: () => state.errors[key],
+          submit: submit
+        });
+      }
+    }));
+    _$insert(_el$11, _$createComponent(Show, {
+      get when() {
+        return props.config.cancelText !== false;
+      },
+      get children() {
+        var _el$12 = _$getNextElement(_tmpl$6);
+        _el$12.$$click = () => props.close(null);
+        _$insert(_el$12, () => props.config.cancelText || resolveUiMessages().cancel);
+        _$runHydrationEvents();
+        return _el$12;
+      }
+    }), _el$15, _co$3);
+    _$insert(_el$13, () => props.config.confirmText ?? resolveUiMessages().save);
+    _$effect(() => _$setAttribute(_el$13, "data-variant", props.config.variant ?? "primary"));
+    return _el$1;
+  })();
+};
+const openSearchPrompt = (resolver, options) => dialogCore.open(close => {
+  const [query, setQuery] = createSignal(options?.initialQuery ?? "");
+  const [items, setItems] = createSignal([]);
+  const [activeIndex, setActiveIndex] = createSignal(0);
+  const [hasLoaded, setHasLoaded] = createSignal(false);
+  const [failedPreviews, setFailedPreviews] = createStore({});
+  const [activeSearchQuery, setActiveSearchQuery] = createSignal("");
+  const rowRefs = new Map();
+  const searchId = `k2b-prompt-search-${createUniqueId()}`;
+  const listboxId = `${searchId}-listbox`;
+  const optionId = index => `${searchId}-option-${index}`;
+  const minQueryLength = options?.minQueryLength ?? 0;
+  const debounceMs = options?.debounceMs ?? 180;
+  const searchMutation = mutation.create({
+    onBefore: requestQuery => ({
+      requestQuery
+    }),
+    mutation: async (requestQuery, context) => {
+      const result = await resolver({
+        query: requestQuery,
+        abortSignal: context.abortSignal
+      });
+      return {
+        query: requestQuery,
+        items: (result ?? []).slice()
+      };
+    },
+    onSuccess: (result, context) => {
+      if (!context || context.requestQuery !== activeSearchQuery()) return;
+      setItems(result.items);
+      setActiveIndex(0);
+      setHasLoaded(true);
+    },
+    onError: (error, context) => {
+      if (!context || context.requestQuery !== activeSearchQuery() || error.name === "AbortError") return;
+      setItems([]);
+      setActiveIndex(0);
+      setHasLoaded(true);
+    }
+  });
+  const searchError = createMemo(() => {
+    const error = searchMutation.error();
+    if (!error || error.name === "AbortError") return null;
+    return error.message || resolveUiMessages().searchFailed;
+  });
+  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 ?? resolveUiMessages().typeToSearch;
+    return options?.noResultsText ?? resolveUiMessages().noResults;
+  });
+  const {
+    debouncedFn: debounceSearch,
+    cancel: cancelDebounce
+  } = timed.debounce(nextQuery => {
+    setActiveSearchQuery(nextQuery);
+    searchMutation.abort();
+    void searchMutation.mutate(nextQuery);
+  }, debounceMs);
+  const execute = item => {
+    if (!item) return;
+    close(item);
+  };
+  const moveSelection = delta => {
+    const list = items();
+    if (list.length === 0) return;
+    setActiveIndex((activeIndex() + delta + list.length) % list.length);
+  };
+  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;
+    }
+    debounceSearch(nextQuery);
+  });
+  onCleanup(() => {
+    cancelDebounce();
+    searchMutation.abort();
+  });
+  return (() => {
+    var _el$19 = _$getNextElement(_tmpl$1),
+      _el$34 = _el$19.firstChild,
+      [_el$35, _co$8] = _$getNextMarker(_el$34.nextSibling),
+      _el$20 = _el$35.nextSibling,
+      _el$21 = _el$20.firstChild,
+      _el$22 = _el$21.firstChild,
+      _el$23 = _el$22.nextSibling,
+      _el$25 = _el$23.nextSibling,
+      [_el$26, _co$5] = _$getNextMarker(_el$25.nextSibling),
+      _el$27 = _el$21.nextSibling,
+      _el$28 = _el$27.firstChild,
+      _el$30 = _el$28.firstChild,
+      [_el$31, _co$6] = _$getNextMarker(_el$30.nextSibling),
+      _el$32 = _el$31.nextSibling,
+      [_el$33, _co$7] = _$getNextMarker(_el$32.nextSibling);
+    _$insert(_el$19, _$createComponent(Show, {
+      get when() {
+        return options?.title;
+      },
+      children: title => (() => {
+        var _el$36 = _$getNextElement(_tmpl$10);
+        _$insert(_el$36, title);
+        return _el$36;
+      })()
+    }), _el$35, _co$8);
+    _el$23.$$keydown = event => {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        moveSelection(1);
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        moveSelection(-1);
+      } else if (event.key === "Enter") {
+        event.preventDefault();
+        execute(items()[activeIndex()]);
+      }
+    };
+    _el$23.$$input = event => setQuery(event.currentTarget.value);
+    _$setAttribute(_el$23, "id", searchId);
+    _$setAttribute(_el$23, "aria-controls", listboxId);
+    _$setAttribute(_el$23, "spellcheck", false);
+    _$insert(_el$21, _$createComponent(Show, {
+      get when() {
+        return searchMutation.loading();
+      },
+      get children() {
+        return _$getNextElement(_tmpl$9);
+      }
+    }), _el$26, _co$5);
+    _el$28.addEventListener("wheel", event => event.stopPropagation());
+    _$insert(_el$28, _$createComponent(Show, {
+      get when() {
+        return searchError();
+      },
+      children: message => (() => {
+        var _el$37 = _$getNextElement(_tmpl$11);
+        _$insert(_el$37, message);
+        return _el$37;
+      })()
+    }), _el$31, _co$6);
+    _$insert(_el$28, _$createComponent(Show, {
+      get when() {
+        return items().length > 0;
+      },
+      get fallback() {
+        return (() => {
+          var _el$38 = _$getNextElement(_tmpl$12);
+          _$insert(_el$38, emptyStateText);
+          return _el$38;
+        })();
+      },
+      get children() {
+        var _el$29 = _$getNextElement(_tmpl$0);
+        _$setAttribute(_el$29, "id", listboxId);
+        _$insert(_el$29, _$createComponent(For, {
+          get each() {
+            return items();
+          },
+          children: (item, index) => (() => {
+            var _el$39 = _$getNextElement(_tmpl$15),
+              _el$46 = _el$39.firstChild,
+              [_el$47, _co$0] = _$getNextMarker(_el$46.nextSibling),
+              _el$42 = _el$47.nextSibling,
+              _el$43 = _el$42.firstChild,
+              _el$44 = _el$43.nextSibling,
+              [_el$45, _co$9] = _$getNextMarker(_el$44.nextSibling);
+            _el$39.$$click = () => execute(item);
+            _el$39.addEventListener("mouseenter", () => setActiveIndex(index()));
+            _$use(element => {
+              if (!element) rowRefs.delete(index());else rowRefs.set(index(), element);
+            }, _el$39);
+            _$insert(_el$39, _$createComponent(Show, {
+              get when() {
+                return item.previewUrl?.startsWith("/") || item.icon;
+              },
+              get children() {
+                var _el$40 = _$getNextElement(_tmpl$14);
+                _$insert(_el$40, _$createComponent(Show, {
+                  get when() {
+                    return _$memo(() => !!item.previewUrl?.startsWith("/"))() && !failedPreviews[index()];
+                  },
+                  get fallback() {
+                    return (() => {
+                      var _el$48 = _$getNextElement(_tmpl$2);
+                      _$effect(() => _$className(_el$48, item.icon ?? "ti ti-file"));
+                      return _el$48;
+                    })();
+                  },
+                  get children() {
+                    var _el$41 = _$getNextElement(_tmpl$13);
+                    _el$41.addEventListener("error", () => setFailedPreviews(index(), true));
+                    _$effect(() => _$setAttribute(_el$41, "src", item.previewUrl));
+                    return _el$41;
+                  }
+                }));
+                return _el$40;
+              }
+            }), _el$47, _co$0);
+            _$insert(_el$43, () => item.label);
+            _$insert(_el$42, _$createComponent(Show, {
+              get when() {
+                return item.desc;
+              },
+              children: description => (() => {
+                var _el$49 = _$getNextElement(_tmpl$16);
+                _$insert(_el$49, description);
+                return _el$49;
+              })()
+            }), _el$45, _co$9);
+            _$effect(_p$ => {
+              var _v$9 = optionId(index()),
+                _v$0 = activeIndex() === index(),
+                _v$1 = activeIndex() === index() ? "true" : undefined,
+                _v$10 = item.desc ? "true" : undefined;
+              _v$9 !== _p$.e && _$setAttribute(_el$39, "id", _p$.e = _v$9);
+              _v$0 !== _p$.t && _$setAttribute(_el$39, "aria-selected", _p$.t = _v$0);
+              _v$1 !== _p$.a && _$setAttribute(_el$39, "data-active", _p$.a = _v$1);
+              _v$10 !== _p$.o && _$setAttribute(_el$39, "data-has-description", _p$.o = _v$10);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined,
+              a: undefined,
+              o: undefined
+            });
+            _$runHydrationEvents();
+            return _el$39;
+          })()
+        }));
+        _$effect(() => _$setAttribute(_el$29, "aria-label", resolveUiMessages().searchResults));
+        return _el$29;
+      }
+    }), _el$33, _co$7);
+    _$effect(_p$ => {
+      var _v$ = options?.icon ?? "ti ti-search",
+        _v$2 = options?.ariaLabel ?? options?.title ?? resolveUiMessages().search,
+        _v$3 = shouldShowResults(),
+        _v$4 = shouldShowResults() && items().length > 0 ? optionId(activeIndex()) : undefined,
+        _v$5 = searchMutation.loading(),
+        _v$6 = options?.placeholder ?? resolveUiMessages().search,
+        _v$7 = shouldShowResults() ? "var(--k2b-search-body-max)" : "0px",
+        _v$8 = shouldShowResults() ? "1" : "0";
+      _v$ !== _p$.e && _$className(_el$22, _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$23, "aria-label", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setAttribute(_el$23, "aria-expanded", _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setAttribute(_el$23, "aria-activedescendant", _p$.o = _v$4);
+      _v$5 !== _p$.i && _$setAttribute(_el$23, "aria-busy", _p$.i = _v$5);
+      _v$6 !== _p$.n && _$setAttribute(_el$23, "placeholder", _p$.n = _v$6);
+      _v$7 !== _p$.s && _$setStyleProperty(_el$27, "height", _p$.s = _v$7);
+      _v$8 !== _p$.h && _$setStyleProperty(_el$27, "opacity", _p$.h = _v$8);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined
+    });
+    _$effect(() => _$setProperty(_el$23, "value", query()));
+    _$runHydrationEvents();
+    return _el$19;
+  })();
+}, {
+  panelClassName: "k2b-dialog k2b-dialog--search is-bare",
+  contentClassName: "k2b-dialog__viewport is-search",
+  initialFocus: "first-input",
+  cancelBehavior: options?.cancelBehavior,
+  ariaLabel: options?.ariaLabel ?? options?.title ?? resolveUiMessages().search
+});
+const promptText = (content, defaultValue, options) => prompts.form({
+  ...options,
+  fields: {
+    message: {
+      type: "info",
+      content: () => (() => {
+        var _el$50 = _$getNextElement(_tmpl$17);
+        _$insert(_el$50, content);
+        return _el$50;
+      })()
+    },
+    value: {
+      type: "text",
+      label: false,
+      default: defaultValue || ""
+    }
+  }
+}).then(result => result?.value ?? null);
+const promptNumber = (content, defaultValue, options) => prompts.form({
+  ...options,
+  fields: {
+    message: {
+      type: "info",
+      content: () => (() => {
+        var _el$51 = _$getNextElement(_tmpl$17);
+        _$insert(_el$51, content);
+        return _el$51;
+      })()
+    },
+    value: {
+      type: "number",
+      label: false,
+      default: defaultValue || 0,
+      min: options?.min,
+      max: options?.max
+    }
+  }
+}).then(result => result?.value ?? null);
+export const prompts = {
+  alert: (content, options) => dialogCore.open(close => (() => {
+    var _el$52 = _$getNextElement(_tmpl$18),
+      _el$56 = _el$52.firstChild,
+      [_el$57, _co$1] = _$getNextMarker(_el$56.nextSibling),
+      _el$53 = _el$57.nextSibling,
+      _el$54 = _el$53.nextSibling,
+      _el$55 = _el$54.firstChild;
+    _$insert(_el$52, _$createComponent(DialogHeader, {
+      get title() {
+        return options?.title || resolveUiMessages().info;
+      },
+      get icon() {
+        return options?.icon;
+      },
+      close: () => close()
+    }), _el$57, _co$1);
+    _$insert(_el$53, content);
+    _el$55.$$click = () => close();
+    _$insert(_el$55, () => options?.confirmText || resolveUiMessages().ok);
+    _$effect(() => _$setAttribute(_el$55, "data-variant", options?.variant ?? "primary"));
+    _$runHydrationEvents();
+    return _el$52;
+  })(), {
+    panelClassName: panelClass(options),
+    contentClassName: contentClass(options?.surface),
+    cancelBehavior: options?.cancelBehavior,
+    ariaLabel: options?.ariaLabel ?? options?.title ?? resolveUiMessages().info
+  }),
+  success: (content, options) => prompts.alert(content, {
+    ...options,
+    variant: "success",
+    title: options?.title ?? resolveUiMessages().success,
+    icon: options?.icon ?? "ti ti-check"
+  }),
+  confirm: (content, options) => {
+    const confirmationPhrase = options?.confirmationPhrase;
+    if (confirmationPhrase !== undefined && (confirmationPhrase.trim().length === 0 || /[\r\n\t]/.test(confirmationPhrase))) {
+      throw new Error("confirmationPhrase must be non-empty, visible, and single-line");
+    }
+    let confirmationInput;
+    return dialogCore.open(close => {
+      if (!confirmationPhrase) {
+        return (() => {
+          var _el$58 = _$getNextElement(_tmpl$19),
+            _el$63 = _el$58.firstChild,
+            [_el$64, _co$10] = _$getNextMarker(_el$63.nextSibling),
+            _el$59 = _el$64.nextSibling,
+            _el$60 = _el$59.nextSibling,
+            _el$61 = _el$60.firstChild,
+            _el$62 = _el$61.nextSibling;
+          _$insert(_el$58, _$createComponent(DialogHeader, {
+            get title() {
+              return options?.title;
+            },
+            get icon() {
+              return options?.icon;
+            },
+            close: () => close(false)
+          }), _el$64, _co$10);
+          _$insert(_el$59, content);
+          _el$61.$$click = () => close(false);
+          _$insert(_el$61, () => options?.cancelText || resolveUiMessages().cancel);
+          _el$62.$$click = () => close(true);
+          _$insert(_el$62, () => options?.confirmText || resolveUiMessages().confirm);
+          _$effect(() => _$setAttribute(_el$62, "data-variant", options?.variant ?? "primary"));
+          _$runHydrationEvents();
+          return _el$58;
+        })();
+      }
+      const [confirmationValue, setConfirmationValue] = createSignal("");
+      const canConfirm = () => confirmationValue() === confirmationPhrase;
+      const submit = event => {
+        event.preventDefault();
+        if (canConfirm()) close(true);
+      };
+      return (() => {
+        var _el$65 = _$getNextElement(_tmpl$20),
+          _el$73 = _el$65.firstChild,
+          [_el$74, _co$12] = _$getNextMarker(_el$73.nextSibling),
+          _el$66 = _el$74.nextSibling,
+          _el$67 = _el$66.firstChild,
+          _el$68 = _el$67.nextSibling,
+          [_el$69, _co$11] = _$getNextMarker(_el$68.nextSibling),
+          _el$70 = _el$66.nextSibling,
+          _el$71 = _el$70.firstChild,
+          _el$72 = _el$71.nextSibling;
+        _el$65.addEventListener("submit", submit);
+        _$insert(_el$65, _$createComponent(DialogHeader, {
+          get title() {
+            return options?.title;
+          },
+          get icon() {
+            return options?.icon;
+          },
+          close: () => close(false)
+        }), _el$74, _co$12);
+        _$insert(_el$67, content);
+        _$insert(_el$66, _$createComponent(TextInput, {
+          ref: element => {
+            confirmationInput = element;
+          },
+          get label() {
+            return ["Type ", (() => {
+              var _el$75 = _$getNextElement(_tmpl$21);
+              _$insert(_el$75, confirmationPhrase);
+              return _el$75;
+            })(), " to confirm"];
+          },
+          value: confirmationValue,
+          onValueChange: setConfirmationValue,
+          autocomplete: "off",
+          autocapitalize: "off",
+          spellcheck: false,
+          monospace: true,
+          required: true
+        }), _el$69, _co$11);
+        _el$71.$$click = () => close(false);
+        _$insert(_el$71, () => options?.cancelText || resolveUiMessages().cancel);
+        _$insert(_el$72, () => options?.confirmText || resolveUiMessages().confirm);
+        _$effect(_p$ => {
+          var _v$11 = options?.variant ?? "primary",
+            _v$12 = !canConfirm();
+          _v$11 !== _p$.e && _$setAttribute(_el$72, "data-variant", _p$.e = _v$11);
+          _v$12 !== _p$.t && _$setProperty(_el$72, "disabled", _p$.t = _v$12);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        _$runHydrationEvents();
+        return _el$65;
+      })();
+    }, {
+      panelClassName: panelClass(options),
+      contentClassName: contentClass(options?.surface),
+      initialFocus: confirmationPhrase ? () => confirmationInput ?? null : undefined,
+      cancelBehavior: options?.cancelBehavior,
+      ariaLabel: options?.ariaLabel ?? options?.title ?? resolveUiMessages().confirmation
+    });
+  },
+  prompt: promptText,
+  promptNumber,
+  form: async config => (await dialogCore.open(close => _$createComponent(PromptFormDialog, {
+    config: config,
+    close: value => close(value)
+  }), {
+    panelClassName: panelClass(config),
+    contentClassName: contentClass(),
+    cancelBehavior: config.cancelBehavior,
+    ariaLabel: config.ariaLabel ?? config.title ?? resolveUiMessages().form
+  })) ?? null,
+  dialog: (component, options) => dialogCore.open(close => {
+    const body = component(close);
+    if (options?.surface === "bare" && options.header === false) return body;
+    return (() => {
+      var _el$76 = _$getNextElement(_tmpl$22),
+        _el$77 = _el$76.firstChild,
+        [_el$78, _co$13] = _$getNextMarker(_el$77.nextSibling),
+        _el$79 = _el$78.nextSibling,
+        [_el$80, _co$14] = _$getNextMarker(_el$79.nextSibling);
+      _$insert(_el$76, _$createComponent(Show, {
+        get when() {
+          return options?.header !== false;
+        },
+        get children() {
+          return _$createComponent(DialogHeader, {
+            get title() {
+              return options?.title;
+            },
+            get icon() {
+              return options?.icon;
+            },
+            close: () => close(undefined)
+          });
+        }
+      }), _el$78, _co$13);
+      _$insert(_el$76, body, _el$80, _co$14);
+      return _el$76;
+    })();
+  }, {
+    panelClassName: panelClass(options),
+    contentClassName: contentClass(options?.surface),
+    cancelBehavior: options?.cancelBehavior,
+    ariaLabel: options?.ariaLabel ?? options?.title ?? resolveUiMessages().dialog
+  }),
+  search: openSearchPrompt,
+  error: (content, options) => dialogCore.open(close => (() => {
+    var _el$81 = _$getNextElement(_tmpl$18),
+      _el$85 = _el$81.firstChild,
+      [_el$86, _co$15] = _$getNextMarker(_el$85.nextSibling),
+      _el$82 = _el$86.nextSibling,
+      _el$83 = _el$82.nextSibling,
+      _el$84 = _el$83.firstChild;
+    _$insert(_el$81, _$createComponent(DialogHeader, {
+      get title() {
+        return options?.title ?? resolveUiMessages().error;
+      },
+      get icon() {
+        return options?.icon ?? "ti ti-alert-circle";
+      },
+      close: close
+    }), _el$86, _co$15);
+    _$insert(_el$82, content);
+    _el$84.$$click = () => close();
+    _$insert(_el$84, () => options?.confirmText || resolveUiMessages().close);
+    _$runHydrationEvents();
+    return _el$81;
+  })(), {
+    panelClassName: panelClass({
+      ...options,
+      variant: "danger"
+    }),
+    contentClassName: contentClass(options?.surface),
+    cancelBehavior: options?.cancelBehavior,
+    ariaLabel: options?.ariaLabel ?? options?.title ?? resolveUiMessages().error
+  })
+};
+_$delegateEvents(["click", "input", "keydown"]);
+//# sourceMappingURL=prompts.js.map