@valentinkolb/cloud 0.4.0 → 0.5.0

package/src/ui/input/Select.tsx

@@ -1,4 +1,5 @@
 import { createMemo, createSignal, For, onCleanup, Show } from "solid-js";
+import { mutation, timed } from "@valentinkolb/stdlib/solid";
 import { InputWrapper, createInputA11y } from "./util";
 
 type SelectOption =
@@ -10,6 +11,15 @@ type SelectOption =
       icon?: string;
     };
 
+/**
+ * Async loader for searchable selects. Receives the current query
+ * (empty on initial open) and an AbortSignal that's tripped when the
+ * caller types again before the previous request resolves, or when
+ * the dropdown closes mid-flight. Throw to surface an error in the
+ * dropdown body — users get a Retry button.
+ */
+type FetchDataFn = (query: string, signal: AbortSignal) => Promise<SelectOption[]>;
+
 type SelectInputProps = {
   label?: string;
   description?: string;
@@ -19,7 +29,22 @@ type SelectInputProps = {
   value?: () => string | undefined;
   onChange?: (value: string) => void;
   error?: () => string | undefined;
-  options: SelectOption[];
+  /** Static option list. Required when `fetchData` is not set; ignored
+   *  (still allowed for type ergonomics) when it is. */
+  options?: SelectOption[];
+  /** Async loader. When set, the dropdown becomes searchable: a search
+   *  field renders at the top, the body shows loading / error / results,
+   *  and `options` is ignored. The fetcher is wrapped in a stdlib
+   *  mutation internally so loading + error + abort come for free. */
+  fetchData?: FetchDataFn;
+  /** Cached label for the currently-selected id when the caller already
+   *  knows it (e.g. from a server-side join). Lets the trigger render
+   *  the right text immediately on first paint, without waiting for
+   *  fetchData to find the id. Falls back to a small internal cache
+   *  populated when the user picks options, then to the id itself. */
+  selectedLabel?: () => string | undefined;
+  /** Debounce window for fetchData calls, in ms. Default 200. */
+  fetchDebounceMs?: number;
   required?: boolean;
   clearable?: boolean;
   disabled?: boolean;
@@ -31,11 +56,58 @@ const SelectInput = (props: SelectInputProps) => {
   const activeIcon = () => props.activeIcon ?? "ti ti-chevron-up";
   const disabled = () => props.disabled ?? false;
   const clearable = () => props.clearable ?? false;
+  const isSearchable = () => Boolean(props.fetchData);
+
+  // Normalize a raw option (string | object) into the always-object shape
+  // the renderer expects. Used for both static options and fetchData
+  // results so the rendering loop doesn't need to branch.
+  const normalize = (option: SelectOption) =>
+    typeof option === "object" ? { ...option, label: option.label || option.id } : { id: option, label: option };
+
+  // ── Search-mode state ────────────────────────────────────────────────
+  // Only meaningful when fetchData is set. Defaults are inert otherwise
+  // so static-mode callers see exactly the previous behaviour.
+  const [searchQuery, setSearchQuery] = createSignal("");
+
+  // Internal label cache — populated whenever the user picks an option.
+  // Lets the trigger keep rendering the right label after dropdown
+  // close + reopen, even if the new fetchData call no longer surfaces
+  // that record (e.g. the user typed a different filter).
+  const [labelCache, setLabelCache] = createSignal<Record<string, string>>({});
+
+  // Wrap the caller's fetchData in a stdlib mutation so we get:
+  //  - reactive loading / error / data signals
+  //  - one in-flight request at a time (we explicitly abort() before
+  //    each new mutate() call in the debounced trigger below)
+  //  - AbortSignal threaded through to fetch()
+  // When fetchData is undefined we still create the mutation but never
+  // call it — keeps the hook order stable across re-renders.
+  const fetchMut = mutation.create<{ id: string; label: string; description?: string; icon?: string }[], string>({
+    mutation: async (query, { abortSignal }) => {
+      if (!props.fetchData) return [];
+      const raw = await props.fetchData(query, abortSignal);
+      return raw.map(normalize);
+    },
+  });
+
+  const triggerFetch = (query: string) => {
+    if (!props.fetchData) return;
+    fetchMut.abort(); // cancel any in-flight previous request
+    void fetchMut.mutate(query);
+  };
+
+  // 200ms is a sweet spot: fast enough that typing feels live, slow
+  // enough to avoid hammering the server on every keystroke.
+  const debounce = timed.debounce((q: string) => triggerFetch(q), props.fetchDebounceMs ?? 200);
 
-  const options = () =>
-    props.options.map((option) =>
-      typeof option === "object" ? { ...option, label: option.label || option.id } : { id: option, label: option },
-    );
+  // ── Options resolution ───────────────────────────────────────────────
+  // In static mode → the `options` prop. In fetch mode → the mutation's
+  // last successful payload. Either way the renderer sees the same
+  // normalized {id, label, ...} shape.
+  const options = createMemo(() => {
+    if (isSearchable()) return fetchMut.data() ?? [];
+    return (props.options ?? []).map(normalize);
+  });
 
   const [isOpen, setIsOpen] = createSignal(false);
   const [focusedIndex, setFocusedIndex] = createSignal(-1);
@@ -44,9 +116,24 @@ const SelectInput = (props: SelectInputProps) => {
 
   let triggerRef: HTMLDivElement | undefined;
   let dialogRef: HTMLDialogElement | undefined;
+  let searchInputRef: HTMLInputElement | undefined;
   let optionRefs: HTMLDivElement[] = [];
 
-  const selectedOption = createMemo(() => options().find((option) => option.id === props.value?.()));
+  // Resolve the currently-selected option's display row. Tries (in
+  // order): the live options list, the internal cache, the caller's
+  // selectedLabel getter, finally the id itself as a last-resort
+  // fallback so the trigger never goes blank when a value is set.
+  const selectedOption = createMemo(() => {
+    const id = props.value?.();
+    if (!id) return undefined;
+    const fromList = options().find((o) => o.id === id);
+    if (fromList) return fromList;
+    const cached = labelCache()[id];
+    if (cached) return { id, label: cached };
+    const fromProp = props.selectedLabel?.();
+    if (fromProp) return { id, label: fromProp };
+    return { id, label: id };
+  });
 
   const syncTheme = () => {
     if (typeof document === "undefined") return;
@@ -80,6 +167,15 @@ const SelectInput = (props: SelectInputProps) => {
     if (!open) {
       dialogRef?.close();
       setFocusedIndex(-1);
+      // Bail any in-flight request so a late response doesn't repaint
+      // a closed dropdown with stale results. Reset query so the next
+      // open starts fresh (matches user expectation of "open === fresh
+      // search").
+      if (isSearchable()) {
+        debounce.cancel();
+        fetchMut.abort();
+        setSearchQuery("");
+      }
       return;
     }
 
@@ -90,7 +186,10 @@ const SelectInput = (props: SelectInputProps) => {
       const rect = triggerRef.getBoundingClientRect();
       const spaceBelow = window.innerHeight - rect.bottom;
       const spaceAbove = rect.top;
-      const dropdownMaxHeight = 260; // max-h-60 = 15rem ~ 240px + padding
+      // Searchable dropdowns are taller because of the sticky search
+      // header on top — bump the height budget so the auto-flip logic
+      // doesn't choose the wrong side.
+      const dropdownMaxHeight = isSearchable() ? 320 : 260;
 
       dialogRef.style.left = `${rect.left}px`;
       dialogRef.style.width = `${rect.width}px`;
@@ -106,10 +205,23 @@ const SelectInput = (props: SelectInputProps) => {
       }
 
       dialogRef.showModal();
+
+      // In search mode: kick off an empty-query fetch so the user sees
+      // recent / default results immediately, and move keyboard focus
+      // into the search input so they can start typing right away.
+      if (isSearchable()) {
+        triggerFetch("");
+        // Defer the focus until the dialog is actually rendered.
+        queueMicrotask(() => searchInputRef?.focus());
+      }
     }
   };
 
   const selectOption = (option: { id: string; label: string }) => {
+    // Cache the picked label so the trigger keeps showing it after
+    // close + reopen, even if the next fetchData call doesn't surface
+    // this id (e.g. user typed a different filter mid-flow).
+    setLabelCache({ ...labelCache(), [option.id]: option.label });
     props.onChange?.(option.id);
     toggleDropdown(false);
     triggerRef?.focus();
@@ -205,8 +317,15 @@ const SelectInput = (props: SelectInputProps) => {
               aria-required={props.required}
               aria-disabled={disabled()}
             >
-              <Show when={selectedOption()} fallback={<span class="text-zinc-400 dark:text-zinc-500">{placeholder()}</span>}>
-                <span class="text-zinc-700 dark:text-zinc-300">{selectedOption()!.label}</span>
+              {/* `block truncate` keeps long option labels on one line —
+                  in narrow toolbar selects (group-by row, sort row,
+                  filter row) the trigger stays single-row instead of
+                  wrapping to two. */}
+              <Show
+                when={selectedOption()}
+                fallback={<span class="block truncate text-zinc-400 dark:text-zinc-500">{placeholder()}</span>}
+              >
+                <span class="block truncate text-zinc-700 dark:text-zinc-300">{selectedOption()!.label}</span>
               </Show>
             </div>
 
@@ -231,8 +350,51 @@ const SelectInput = (props: SelectInputProps) => {
             onClick={handleDialogClick}
             aria-label="Options"
           >
+            {/* Search input — only in fetchData mode. Borderless, no
+                icon, no divider underneath: the dropdown's own border
+                is the visual frame, an extra HR would just add noise.
+                onInput updates the visible query immediately and
+                schedules the debounced fetch. */}
+            <Show when={isSearchable()}>
+              <input
+                ref={searchInputRef}
+                type="text"
+                placeholder="Search..."
+                value={searchQuery()}
+                onInput={(e) => {
+                  const v = e.currentTarget.value;
+                  setSearchQuery(v);
+                  debounce.debouncedFn(v);
+                }}
+                class="w-full bg-transparent px-3 py-1.5 text-sm text-zinc-700 placeholder:text-zinc-400 outline-none border-0 focus:ring-0 dark:text-zinc-300 dark:placeholder:text-zinc-500"
+                aria-label="Search options"
+              />
+            </Show>
             <div class="flex max-h-60 flex-col gap-1 overflow-y-auto" role="listbox" aria-label={props.label || "Options"}>
-              <For each={options()} fallback={<div class="px-3 py-2 text-sm text-zinc-500 dark:text-zinc-400">No options available</div>}>
+              {/* Loading row — single dim line. The previous results
+                  would be more jarring than a small spinner here. */}
+              <Show when={isSearchable() && fetchMut.loading()}>
+                <div class="flex items-center gap-1.5 px-3 py-1.5 text-xs text-zinc-500 dark:text-zinc-400">
+                  <i class="ti ti-loader-2 animate-spin" /> Loading...
+                </div>
+              </Show>
+              {/* Error row — caller's fetchData threw. Surface message +
+                  Retry. retry() reuses the last query without bouncing
+                  through the debounce. */}
+              <Show when={isSearchable() && !fetchMut.loading() && fetchMut.error()}>
+                <div class="flex items-center gap-2 px-3 py-1.5 text-xs text-red-500">
+                  <i class="ti ti-alert-triangle shrink-0" />
+                  <span class="flex-1 truncate">{fetchMut.error()?.message ?? "Failed to load"}</span>
+                  <button
+                    type="button"
+                    class="text-zinc-500 underline hover:text-zinc-700 dark:hover:text-zinc-300"
+                    onClick={() => fetchMut.retry()}
+                  >
+                    Retry
+                  </button>
+                </div>
+              </Show>
+              <For each={isSearchable() && (fetchMut.loading() || fetchMut.error()) ? [] : options()} fallback={<div class="px-3 py-1.5 text-xs text-zinc-400 dark:text-zinc-500">{isSearchable() ? "No results" : "No options available"}</div>}>
                 {(option, index) => {
                   const isSelected = () => option.id === props.value?.();
                   const isFocused = () => index() === focusedIndex();

package/src/ui/input/Slider.tsx

@@ -80,7 +80,7 @@ const Slider = ({
         disabled={disabled}
         aria-describedby={descId}
         class="w-full h-1.5 appearance-none cursor-pointer
- rounded-full 
+ rounded-full [box-shadow:var(--theme-recess)]
  [&::-webkit-slider-thumb]:appearance-none
  [&::-webkit-slider-thumb]:w-3.5
  [&::-webkit-slider-thumb]:h-3.5
@@ -103,9 +103,8 @@ const Slider = ({
  ]:rounded-none
  ]:bg-(--slider-fill)
  focus-visible:outline-none
- focus-visible:[&::-webkit-slider-thumb]:ring-2
- focus-visible:[&::-webkit-slider-thumb]:ring-zinc-400
- focus-visible:[&::-webkit-slider-thumb]:ring-offset-2
+ focus-visible:[&::-webkit-slider-thumb]:[box-shadow:var(--theme-focus-ring)]
+ focus-visible:[&::-moz-range-thumb]:[box-shadow:var(--theme-focus-ring)]
  disabled:cursor-not-allowed
  disabled:[&::-webkit-slider-thumb]:bg-zinc-400
  disabled:[&::-moz-range-thumb]:bg-zinc-400"

package/src/ui/input/Switch.tsx

@@ -25,11 +25,12 @@ const Switch = ({ label, value, onChange, disabled = false }: SwitchInputProps)
         class={`
  relative transition-colors
  w-9 h-5 rounded-full
- 
+ [box-shadow:var(--theme-recess)]
+
  bg-zinc-200 dark:bg-zinc-600/40
  peer-checked:bg-blue-500
  
- peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500 peer-focus-visible:ring-offset-2
+ peer-focus-visible:[box-shadow:var(--theme-focus-ring)]
  
  peer-disabled:opacity-50
  `}

package/src/ui/input/TemplateEditor.tsx

@@ -0,0 +1,212 @@
+import { createMemo, For } from "solid-js";
+import type { Completion, Suggestion } from "../completion";
+import type { PanesValue } from "../misc/Panes";
+import AutocompleteEditor from "./AutocompleteEditor";
+import TextInput from "./TextInput";
+
+export type TemplateVariableKind = "string" | "email" | "url" | "number" | "boolean" | "array" | "object";
+
+export type TemplateVariable = {
+  name: string;
+  kind?: TemplateVariableKind;
+};
+
+export type TemplateEditorProps = {
+  value: () => string;
+  onInput: (value: string) => void;
+  variables: readonly TemplateVariable[];
+  lines?: number;
+  fill?: boolean;
+  placeholder?: string;
+};
+
+export type TemplatePreviewProps = {
+  html: () => string;
+};
+
+export type TemplateSampleDataProps = {
+  variables: readonly TemplateVariable[];
+  values: () => Record<string, string>;
+  onChange: (name: string, value: string) => void;
+};
+
+export const createTemplateEditorPanesValue = (): PanesValue => ({
+  root: {
+    type: "split",
+    id: "template-editor-root",
+    direction: "horizontal",
+    sizes: [50, 50],
+    children: [
+      {
+        type: "leaf",
+        id: "template-editor-source",
+        presentation: "tabs",
+        elementIds: ["html"],
+        activeElementId: "html",
+      },
+      {
+        type: "leaf",
+        id: "template-editor-output",
+        presentation: "tabs",
+        elementIds: ["preview", "sample-data"],
+        activeElementId: "preview",
+      },
+    ],
+  },
+});
+
+const HTML_TAGS = [
+  { name: "p", snippet: "<p></p>", hint: "paragraph" },
+  { name: "a", snippet: '<a href="{{LOGIN_URL}}">Link</a>', hint: "link" },
+  { name: "strong", snippet: "<strong></strong>", hint: "bold" },
+  { name: "em", snippet: "<em></em>", hint: "emphasis" },
+  { name: "br", snippet: "<br>", hint: "line break" },
+  { name: "ul", snippet: "<ul>\n  <li></li>\n</ul>", hint: "list" },
+  { name: "table", snippet: "<table>\n  <tr><td></td></tr>\n</table>", hint: "table" },
+] as const;
+
+const escapeHtml = (value: string): string =>
+  value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+
+const buildSuggestion = (text: string, hint: string, label?: string): Suggestion => ({
+  text,
+  hint,
+  label,
+  appendSpace: false,
+});
+
+const makeCompletions = (variables: readonly TemplateVariable[]): Completion[] => [
+  {
+    trigger: "{",
+    dropdown: true,
+    allowAfterWord: true,
+    suggest: (query, ctx) => {
+      const normalized = query.toLowerCase();
+      const hasLeadingBrace = ctx.tokenStart > 0 && ctx.fullText[ctx.tokenStart - 1] === "{";
+      const open = hasLeadingBrace ? "{" : "{{";
+      const variableSuggestions = variables
+        .filter((variable) => variable.name.toLowerCase().startsWith(normalized))
+        .map((variable) => buildSuggestion(`${open}${variable.name}}}`, variable.kind ?? "string", variable.name));
+
+      const sectionSuggestions = variables
+        .filter((variable) => variable.kind === "array" || variable.kind === "object" || variable.kind === "boolean")
+        .filter((variable) => variable.name.toLowerCase().startsWith(normalized))
+        .map((variable) => buildSuggestion(`${open}#${variable.name}}}\n  \n{{/${variable.name}}}`, "section", `#${variable.name}`));
+
+      return [...variableSuggestions, ...sectionSuggestions];
+    },
+  },
+  {
+    trigger: "#",
+    dropdown: true,
+    allowAfterWord: true,
+    suggest: (query) => {
+      const normalized = query.toLowerCase();
+      return variables
+        .filter((variable) => variable.kind === "array" || variable.kind === "object" || variable.kind === "boolean")
+        .filter((variable) => variable.name.toLowerCase().startsWith(normalized))
+        .map((variable) => buildSuggestion(`#${variable.name}}}\n  \n{{/${variable.name}}}`, "section", `#${variable.name}`));
+    },
+  },
+  {
+    trigger: "<",
+    dropdown: true,
+    allowAfterWord: true,
+    suggest: (query) => {
+      const normalized = query.toLowerCase();
+      return HTML_TAGS.filter((tag) => tag.name.startsWith(normalized)).map((tag) => buildSuggestion(tag.snippet, tag.hint, tag.name));
+    },
+  },
+];
+
+const highlightMustacheToken = (token: string): string => {
+  const inner = token
+    .replace(/^\{\{\{?/, "")
+    .replace(/\}\}\}?$/, "")
+    .trim();
+  const prefix = inner[0];
+  const tone =
+    prefix === "#"
+      ? "text-emerald-600 dark:text-emerald-400"
+      : prefix === "/"
+        ? "text-amber-600 dark:text-amber-400"
+        : prefix === "^"
+          ? "text-rose-600 dark:text-rose-400"
+          : token.startsWith("{{{")
+            ? "text-red-600 dark:text-red-400"
+            : "text-violet-600 dark:text-violet-400";
+  return `<span class="${tone}">${escapeHtml(token)}</span>`;
+};
+
+const highlightTag = (tag: string): string => {
+  const match = tag.match(/^(&lt;\/?)([a-zA-Z][\w:-]*)([\s\S]*?)(&gt;)$/);
+  if (!match) return `<span class="text-zinc-500 dark:text-zinc-400">${tag}</span>`;
+  const open = match[1] ?? "";
+  const name = match[2] ?? "";
+  const attrs = match[3] ?? "";
+  const close = match[4] ?? "";
+  const attrHtml = attrs.replace(
+    /([\w:-]+)(=)(&quot;[\s\S]*?&quot;|'[\s\S]*?'|[^\s&]+)/g,
+    '<span class="text-sky-600 dark:text-sky-400">$1</span><span class="text-zinc-400">$2</span><span class="text-orange-600 dark:text-orange-400">$3</span>',
+  );
+  return `<span class="text-zinc-400">${open}</span><span class="text-blue-600 dark:text-blue-400">${name}</span>${attrHtml}<span class="text-zinc-400">${close}</span>`;
+};
+
+const highlightTemplate = (text: string): string => {
+  const stashed: string[] = [];
+  const escaped = escapeHtml(text).replace(/{{{?[\s\S]*?}}}?/g, (token) => {
+    const marker = `\uE000${stashed.length}\uE001`;
+    stashed.push(highlightMustacheToken(token));
+    return marker;
+  });
+
+  const withHtml = escaped.replace(/&lt;!--[\s\S]*?--&gt;|&lt;\/?[a-zA-Z][\s\S]*?&gt;/g, (tag) => {
+    if (tag.startsWith("&lt;!--")) return `<span class="text-zinc-400 dark:text-zinc-500">${tag}</span>`;
+    return highlightTag(tag);
+  });
+
+  return withHtml.replace(/\uE000(\d+)\uE001/g, (_, index) => stashed[Number(index)] ?? "");
+};
+
+export default function TemplateEditor(props: TemplateEditorProps) {
+  const completions = createMemo(() => makeCompletions(props.variables));
+
+  return (
+    <AutocompleteEditor
+      value={props.value}
+      onInput={props.onInput}
+      lines={props.lines ?? 22}
+      fill={props.fill}
+      spellcheck={false}
+      placeholder={props.placeholder ?? "Write HTML with {{MUSTACHE_VALUES}}..."}
+      highlight={highlightTemplate}
+      completions={completions()}
+    />
+  );
+}
+
+export function TemplatePreview(props: TemplatePreviewProps) {
+  return (
+    <section class="paper flex h-full min-h-0 flex-col overflow-hidden">
+      <iframe class="min-h-0 flex-1 bg-white" sandbox="" srcdoc={props.html()} title="Template preview" />
+    </section>
+  );
+}
+
+export function TemplateSampleData(props: TemplateSampleDataProps) {
+  return (
+    <section class="paper h-full min-h-0 overflow-auto p-3">
+      <div class="grid gap-3">
+        <For each={props.variables}>
+          {(variable) => (
+            <TextInput
+              label={`{{${variable.name}}}`}
+              value={() => props.values()[variable.name] ?? ""}
+              onInput={(value) => props.onChange(variable.name, value)}
+            />
+          )}
+        </For>
+      </div>
+    </section>
+  );
+}