@valentinkolb/cloud 0.1.0

package/src/ui/index.ts

@@ -0,0 +1,19 @@
+export * from "./misc";
+export * from "./ipa";
+export * from "./input";
+export * from "./filter";
+export * from "./widgets";
+export { currentPathWithQuery, refreshCurrentPath, navigateTo } from "./navigation";
+export { SettingsField, SettingsSaveBar, sameSettingValue, readSettingsError } from "./admin-settings";
+export type { SettingsFieldProps, SettingsSaveBarProps } from "./admin-settings";
+export { prompts, DialogHeader, createFormState } from "./prompts";
+export type { PromptSearchItem, PromptSearchInput, PromptSearchOptions } from "./prompts";
+export { dialogCore, createDialogCore } from "./dialog-core";
+export type { DialogClose, OpenDialogOptions, DialogRender, DialogCore } from "./dialog-core";
+export { default as SidebarLayout, SidebarFromSpec } from "./sidebar";
+export type { SidebarSpec, SidebarRow, SidebarSection, SidebarTreeNode, SidebarTreeSpec } from "./sidebar";
+// NOTE: islands (*.island.tsx) belong inside the consuming app's package, not
+// in cloud-lib. The SSR plugin discovers islands by import-path suffix; barrel
+// re-exports strip the `.island` segment and silently break hydration. Apps
+// that need a complex stateful component build their own admin/page islands
+// using the input primitives exported above (TextInput, Switch, ImageInput, …).

package/src/ui/input/Checkbox.tsx

@@ -0,0 +1,55 @@
+import type { CheckboxInputProps } from "./types";
+
+/**
+ * Checkbox/Boolean input component
+ * @param label - Text displayed next to checkbox
+ * @param description - Optional description text below
+ * @param value - Reactive boolean value getter
+ * @param onChange - Called when checkbox state changes
+ * @param error - Reactive error message getter
+ * @param required - Show required asterisk
+ * @param disabled - Disable the checkbox
+ */
+const CheckboxInput = ({ label, description, value, onChange, error, required = false, disabled = false }: CheckboxInputProps) => {
+  const inputId = crypto.randomUUID();
+
+  return (
+    <div class="flex flex-col gap-2 select-none">
+      <div class="flex flex-row items-center gap-2">
+        <input
+          id={inputId}
+          type="checkbox"
+          checked={value?.() || false}
+          onChange={(e) => onChange?.(e.target.checked)}
+          disabled={disabled}
+          aria-required={required}
+          aria-invalid={!!error?.()}
+          aria-describedby={error?.() ? `${inputId}-error` : undefined}
+          class="h-4 w-4"
+        />
+        {label && (
+          <label for={inputId} class={`text-xs select-none ${disabled ? "opacity-50" : "cursor-pointer"}`}>
+            {label}
+            {required && (
+              <span class="ml-0.5 text-red-500" aria-hidden="true">
+                *
+              </span>
+            )}
+          </label>
+        )}
+      </div>
+
+      {description && <p class="text-dimmed ml-6 text-xs">{description}</p>}
+
+      {error?.() && (
+        <p id={`${inputId}-error`} class="ml-6 text-sm text-red-500" role="alert" aria-live="polite">
+          {error()}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export { CheckboxInput };
+export const Checkbox = CheckboxInput;
+export default CheckboxInput;

package/src/ui/input/ColorInput.tsx

@@ -0,0 +1,122 @@
+import { createSignal, Show } from "solid-js";
+import { InputWrapper, createInputA11y } from "./util";
+import type { ColorInputProps } from "./types";
+
+/**
+ * Color input component using native color picker
+ */
+const ColorInput = (props: ColorInputProps) => {
+  const disabled = () => props.disabled ?? false;
+  const compact = () => props.compact ?? !props.label;
+  const [isFocused, setIsFocused] = createSignal(false);
+  const inputId = crypto.randomUUID();
+  const a11y = createInputA11y({ description: props.description, error: props.error });
+
+  const currentColor = () => props.value?.() || "#3b82f6";
+  const isTransparent = () => props.isTransparent?.() ?? false;
+
+  // Compact version - just a clickable swatch
+  if (compact()) {
+    return (
+      <div class="relative inline-flex">
+        <button
+          type="button"
+          class={`w-7 h-7 border border-zinc-300 dark:border-zinc-600 rounded ${
+            disabled() ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:border-zinc-400 dark:hover:border-zinc-500"
+          }`}
+          style={`background-color: ${currentColor()}`}
+          onClick={() => document.getElementById(inputId)?.click()}
+          disabled={disabled()}
+        />
+        <input
+          id={inputId}
+          type="color"
+          class="absolute opacity-0 w-0 h-0"
+          value={currentColor()}
+          onInput={(e) => props.onChange?.(e.currentTarget.value)}
+          onChange={(e) => props.onChange?.(e.currentTarget.value)}
+          disabled={disabled()}
+        />
+      </div>
+    );
+  }
+
+  // Full version with label
+  return (
+    <InputWrapper
+      label={props.label}
+      description={props.description}
+      error={props.error?.()}
+      required={props.required}
+      inputId={a11y.inputId}
+      descriptionId={a11y.descriptionId}
+      errorId={a11y.errorId}
+    >
+      <div class="relative">
+        <div
+          class={`input flex items-center gap-2 transition-all ${isFocused() ? "border-blue-500 bg-white dark:border-blue-400 dark:bg-zinc-900" : ""} ${
+            disabled() || isTransparent() ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+          }`}
+          onClick={() => {
+            if (!disabled() && !isTransparent()) {
+              document.getElementById(a11y.inputId)?.click();
+            }
+          }}
+          onKeyDown={(e) => {
+            if ((e.key === "Enter" || e.key === " ") && !disabled() && !isTransparent()) {
+              e.preventDefault();
+              document.getElementById(a11y.inputId)?.click();
+            }
+          }}
+          role="button"
+          tabIndex={disabled() || isTransparent() ? -1 : 0}
+        >
+          <Show
+            when={!isTransparent()}
+            fallback={
+              <div class="h-4 w-4 shrink-0 border border-zinc-300 dark:border-zinc-600 bg-[repeating-conic-gradient(#ccc_0_25%,transparent_0_50%)] bg-size-[6px_6px] rounded" />
+            }
+          >
+            <div
+              class="h-4 w-4 shrink-0 border border-zinc-300 dark:border-zinc-600 rounded"
+              style={`background-color: ${currentColor()}`}
+            />
+          </Show>
+          <span class="flex-1 font-mono text-sm uppercase leading-tight">{isTransparent() ? "transparent" : currentColor()}</span>
+          {props.transparent && (
+            <button
+              type="button"
+              class={`shrink-0 flex items-center justify-center p-0.5 transition-colors rounded ${
+                isTransparent()
+                  ? "bg-zinc-200 dark:bg-zinc-700 text-primary font-medium"
+                  : "text-dimmed hover:text-secondary hover:bg-zinc-100 dark:hover:bg-zinc-800"
+              }`}
+              onClick={(e) => {
+                e.stopPropagation();
+                props.onTransparentChange?.(!isTransparent());
+              }}
+              aria-label="Toggle transparent"
+            >
+              <i class="ti ti-grid-dots text-sm leading-none" />
+            </button>
+          )}
+          <input
+            id={a11y.inputId}
+            type="color"
+            class="absolute opacity-0 w-0 h-0"
+            value={currentColor()}
+            onInput={(e) => props.onChange?.(e.currentTarget.value)}
+            onChange={(e) => props.onChange?.(e.currentTarget.value)}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            disabled={disabled() || isTransparent()}
+            aria-describedby={a11y.ariaDescribedBy()}
+            aria-invalid={!!props.error?.()}
+          />
+        </div>
+      </div>
+    </InputWrapper>
+  );
+};
+
+export default ColorInput;

package/src/ui/input/DateTimeInput.tsx

@@ -0,0 +1,86 @@
+import { InputWrapper, createInputA11y } from "./util";
+
+type DateTimeInputProps = {
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  value?: () => string | undefined | null;
+  onChange?: (value: string) => void;
+  error?: () => string | undefined;
+  required?: boolean;
+  disabled?: boolean;
+  /** Use date-only input instead of datetime-local */
+  dateOnly?: boolean;
+};
+
+/**
+ * Date/DateTime input component using native browser inputs
+ * @param label - Optional label text
+ * @param description - Optional description text
+ * @param placeholder - Placeholder text (not shown in date inputs)
+ * @param value - Reactive value getter (ISO string or datetime-local format)
+ * @param onChange - Called on change event with datetime-local format string
+ * @param error - Reactive error message getter
+ * @param required - Show required asterisk after label
+ * @param disabled - Disable the input
+ * @param dateOnly - Use date input instead of datetime-local
+ */
+const DateTimeInput = (props: DateTimeInputProps) => {
+  const disabled = () => props.disabled ?? false;
+  const dateOnly = () => props.dateOnly ?? false;
+  const icon = () => (dateOnly() ? "ti ti-calendar" : "ti ti-calendar-time");
+  const a11y = createInputA11y({ description: props.description, error: props.error });
+
+  // Convert ISO string to input format if needed
+  const inputValue = () => {
+    const v = props.value?.();
+    if (!v) return "";
+    // If it's already in the right format, return as-is
+    if (!v.includes("Z") && !v.includes("+")) return v;
+    // Convert ISO to local datetime-local format
+    const d = new Date(v);
+    if (dateOnly()) {
+      return d.toISOString().slice(0, 10);
+    }
+    // Get local time
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    const hours = String(d.getHours()).padStart(2, "0");
+    const minutes = String(d.getMinutes()).padStart(2, "0");
+    return `${year}-${month}-${day}T${hours}:${minutes}`;
+  };
+
+  return (
+    <InputWrapper
+      label={props.label}
+      description={props.description}
+      error={props.error?.()}
+      required={props.required}
+      inputId={a11y.inputId}
+      descriptionId={a11y.descriptionId}
+      errorId={a11y.errorId}
+    >
+      <div class="group relative">
+        <div class="absolute inset-y-0 left-3 z-10 flex items-center pointer-events-none text-zinc-400 dark:text-zinc-500">
+          <i class={`${icon()} group-focus-within:text-blue-500`} />
+        </div>
+        <input
+          id={a11y.inputId}
+          type={dateOnly() ? "date" : "datetime-local"}
+          class={`input w-full pl-9 ${disabled() ? "cursor-not-allowed opacity-50" : ""}`}
+          value={inputValue()}
+          onChange={(e) => props.onChange?.(e.currentTarget.value)}
+          disabled={disabled()}
+          aria-label={!props.label ? props.placeholder : undefined}
+          aria-describedby={a11y.ariaDescribedBy()}
+          aria-invalid={!!props.error?.()}
+          aria-required={props.required}
+          aria-disabled={disabled()}
+        />
+      </div>
+    </InputWrapper>
+  );
+};
+
+export default DateTimeInput;

package/src/ui/input/ImageInput.tsx

@@ -0,0 +1,170 @@
+import { showFileDialog } from "@valentinkolb/stdlib/browser";
+import { img } from "@valentinkolb/stdlib/browser";
+import { Show } from "solid-js";
+import { InputWrapper, createInputA11y } from "./util";
+
+type ImageInputProps = {
+  label?: string;
+  description?: string;
+  ariaLabel?: string;
+  value?: () => string | null;
+  round?: boolean;
+  variant?: "default" | "small";
+  onChange?: (value: string | null) => void;
+  error?: () => string | undefined;
+  required?: boolean;
+  disabled?: boolean;
+};
+
+/**
+ * Image input component with file upload and preview
+ * @param label - Optional label text
+ * @param description - Optional description text
+ * @param ariaLabel - Accessibility label (defaults to label if not provided)
+ * @param value - Reactive string value getter (base64 or URL, fallback URLs are treated as null)
+ * @param onChange - Called when image changes (receives base64 string or null)
+ * @param error - Reactive error message getter
+ * @param round - Display image in circular shape
+ * @param variant - "default" for large preview, "small" for inline compact view
+ * @param required - Show required asterisk after label
+ * @param disabled - Disable the input
+ */
+const ImageInput = (props: ImageInputProps) => {
+  const disabled = () => (props.disabled ?? false) || !props.onChange;
+  const variant = () => props.variant ?? "default";
+  const a11y = createInputA11y({ description: props.description, error: props.error });
+
+  // Effective value: treat fallback URLs as null (no custom image set)
+  const value = () => {
+    const val = props.value?.();
+    return val && !val.includes("?fallback") ? val : null;
+  };
+
+  const selectImage = () => {
+    if (disabled()) return;
+    showFileDialog({ accept: ".jpg,.jpeg,.png,.gif,.webp" })
+      .then((file) => img.presets.avatar(file))
+      .then((image) => props.onChange?.(image));
+  };
+
+  // Small variant - inline compact view (same height as text input)
+  if (variant() === "small") {
+    return (
+      <InputWrapper
+        label={props.label}
+        description={props.description}
+        error={props.error?.()}
+        required={props.required}
+        inputId={a11y.inputId}
+        descriptionId={a11y.descriptionId}
+        errorId={a11y.errorId}
+      >
+        <div class="flex h-9 items-center gap-1" role="group" aria-labelledby={a11y.inputId} aria-describedby={a11y.ariaDescribedBy()}>
+            <button
+              type="button"
+              class={`btn-secondary btn-sm h-9 w-9 shrink-0 overflow-hidden !p-0 ${props.round ? "rounded-full" : "rounded-lg"}`}
+              disabled
+              aria-hidden="true"
+              tabIndex={-1}
+            >
+              <Show
+                when={value()}
+                fallback={
+                  <div class="flex h-full w-full items-center justify-center">
+                    <i class="ti ti-photo-off opacity-65" aria-hidden="true" />
+                  </div>
+                }
+              >
+                <img src={value()!} alt={props.label || "Selected image"} class="h-full w-full object-cover" />
+              </Show>
+            </button>
+            <button
+              type="button"
+              class="btn-secondary btn-sm flex h-9 w-9 items-center justify-center"
+              onClick={selectImage}
+              aria-label={value() ? "Change image" : "Add image"}
+              disabled={disabled()}
+            >
+              <i class={value() ? "ti ti-edit" : "ti ti-photo-plus"} aria-hidden="true" />
+            </button>
+            <Show when={value()}>
+              <button
+                type="button"
+                class="btn-secondary btn-sm flex h-9 w-9 items-center justify-center"
+                onClick={() => props.onChange?.(null)}
+                aria-label="Remove image"
+                disabled={disabled()}
+              >
+                <i class="ti ti-trash" aria-hidden="true" />
+              </button>
+            </Show>
+        </div>
+      </InputWrapper>
+    );
+  }
+
+  // Default variant - large preview
+  return (
+    <InputWrapper
+      label={props.label}
+      description={props.description}
+      error={props.error?.()}
+      required={props.required}
+      inputId={a11y.inputId}
+      descriptionId={a11y.descriptionId}
+      errorId={a11y.errorId}
+    >
+      <div class="flex flex-col items-center gap-1" role="group" aria-labelledby={a11y.inputId} aria-describedby={a11y.ariaDescribedBy()}>
+          <div
+            class={`h-30 w-30 self-center overflow-hidden border-2 border-zinc-200 md:h-50 md:w-50 dark:border-zinc-700 ${
+              props.round ? "rounded-full" : "rounded-2xl"
+            }`}
+          >
+            <Show
+              when={value()}
+              fallback={
+                <div class="flex h-full w-full items-center justify-center bg-zinc-100 dark:bg-zinc-800">
+                  <i class="ti ti-photo-off text-2xl text-zinc-400 dark:text-zinc-600" aria-hidden="true" />
+                </div>
+              }
+            >
+              <img
+                src={value()!}
+                alt={props.label || "Selected image"}
+                class="h-full w-full object-cover"
+                aria-label={props.ariaLabel || props.label || "Selected image"}
+              />
+            </Show>
+          </div>
+
+          <div class="mb-4 flex flex-row items-center gap-2 self-center">
+            <Show when={value()}>
+              <button
+                type="button"
+                class="btn-simple btn-sm"
+                onClick={() => props.onChange?.(null)}
+                aria-label="Remove image"
+                disabled={disabled()}
+              >
+                <i class="ti ti-trash" aria-hidden="true" />
+                Remove
+              </button>
+            </Show>
+
+            <button
+              type="button"
+              class="btn-simple btn-sm"
+              onClick={selectImage}
+              aria-label={value() ? "Change image" : "Add image"}
+              disabled={disabled()}
+            >
+              <i class="ti ti-photo-plus" aria-hidden="true" />
+              {value() ? "Change" : "Add"}
+            </button>
+          </div>
+      </div>
+    </InputWrapper>
+  );
+};
+
+export default ImageInput;

package/src/ui/input/NumberInput.tsx

@@ -0,0 +1,113 @@
+import { InputWrapper, createInputA11y } from "./util";
+
+type NumberInputProps = {
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  value?: () => number | undefined;
+  onChange?: (value: number) => void;
+  onInput?: (value: number) => void;
+  error?: () => string | undefined;
+  max?: number;
+  min?: number;
+  step?: number;
+  required?: boolean;
+  disabled?: boolean;
+};
+
+/**
+ * Number input component with increment/decrement buttons
+ * @param label - Optional label text
+ * @param description - Optional description text
+ * @param placeholder - Placeholder text
+ * @param value - Reactive number value getter
+ * @param onChange - Called on change event
+ * @param onInput - Called on input event
+ * @param error - Reactive error message getter
+ * @param max - Maximum allowed value (default: Infinity)
+ * @param min - Minimum allowed value (default: -Infinity)
+ * @param step - Step increment/decrement amount (default: 1)
+ * @param required - Show required asterisk after label
+ * @param disabled - Disable the input
+ */
+const NumberInput = (props: NumberInputProps) => {
+  const value = () => props.value?.() ?? 0;
+  const max = () => props.max ?? Infinity;
+  const min = () => props.min ?? -Infinity;
+  const step = () => props.step ?? 1;
+  const disabled = () => props.disabled ?? false;
+  const a11y = createInputA11y({ description: props.description, error: props.error });
+
+  const parse = (val: string, applyConstraints: boolean = true) => {
+    const parsed = parseInt(val);
+    if (isNaN(parsed)) return min();
+    return applyConstraints ? Math.max(min(), Math.min(max(), parsed)) : parsed;
+  };
+
+  return (
+    <InputWrapper
+      label={props.label}
+      description={props.description}
+      error={props.error?.()}
+      required={props.required}
+      inputId={a11y.inputId}
+      descriptionId={a11y.descriptionId}
+      errorId={a11y.errorId}
+    >
+      <div class={`flex flex-row flex-nowrap gap-3 text-nowrap ${disabled() ? "opacity-50" : ""}`}>
+        <button
+          type="button"
+          class={`input ti ti-minus px-3 cursor-pointer hover:text-primary ${value() <= min() && "opacity-40"}`}
+          aria-label="Decrease value"
+          onClick={() => {
+            const v = Math.max(min(), value() - step());
+            props.onChange?.(v);
+            props.onInput?.(v);
+          }}
+          disabled={disabled() || value() <= min()}
+        />
+        <div class="group relative flex-1">
+          <input
+            id={a11y.inputId}
+            type="number"
+            class={`input w-full text-center font-mono font-semibold ${disabled() ? "cursor-not-allowed" : ""}`}
+            placeholder={props.placeholder}
+            value={value()}
+            onChange={(e) => {
+              const v = parse(e.currentTarget.value, true);
+              props.onChange?.(v);
+              e.currentTarget.value = `${v}`;
+            }}
+            onInput={(e) => {
+              const v = parse(e.currentTarget.value, false);
+              props.onInput?.(v);
+            }}
+            disabled={disabled()}
+            aria-label={!props.label ? props.placeholder || "Enter number" : undefined}
+            aria-describedby={a11y.ariaDescribedBy()}
+            aria-invalid={!!props.error?.()}
+            aria-required={props.required}
+            aria-disabled={disabled()}
+            aria-valuemin={min()}
+            aria-valuemax={max()}
+            aria-valuenow={value()}
+          />
+        </div>
+
+        <button
+          type="button"
+          class={`input ti ti-plus px-3 cursor-pointer hover:text-primary ${value() >= max() && "opacity-40"}`}
+          aria-label="Increase value"
+          onClick={() => {
+            const v = Math.min(max(), value() + step());
+            props.onChange?.(v);
+            props.onInput?.(v);
+          }}
+          disabled={disabled() || value() >= max()}
+        />
+      </div>
+    </InputWrapper>
+  );
+};
+
+export default NumberInput;