@jovertical/mise-design-system 0.0.0-stage → 1.0.0

package/dist/components/forms/media-dropzone/media-dropzone.svelte

@@ -0,0 +1,248 @@
+<!--
+  Origin: the React package 2.23.0 `media-dropzone.tsx`
+  Diverged: over MediaUploader, the one-slot part of React's useMediaUploader
+    (round 8 plan, R8-7). `value` is bindable, with `onValueChange` for React's
+    `onChange`; `icon` is a snippet. Lucide's cloud-upload and trash.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+
+  import type { MediaAsset, MediaLinkMode, MediaUploaderAdapter } from './media-uploader.svelte.js'
+
+  /**
+   * One image, on a zone that stays put: a logo, an avatar, a cover.
+   *
+   * The zone does not collapse once something is in it: a single slot's
+   * prompt is the control, and replacing is the common action, so dropping a
+   * new file replaces the old one (unlinking it under `immediate`). The
+   * preview is a panel, not a tile, and contains the image rather than
+   * cropping it: a cropped logo is a wrong logo.
+   */
+  export type MediaDropzoneProps = {
+    value?: MediaAsset | null
+    onValueChange?: (value: MediaAsset | null) => void
+    /** The consumer's media service: the package makes no request of its own. */
+    adapter: MediaUploaderAdapter
+    linkMode?: MediaLinkMode
+    /** What a native `<input accept>` takes. Images when absent. */
+    accept?: string
+    /** Bytes. 2MB when absent. */
+    maxSize?: number
+    disabled?: boolean
+    class?: string
+    icon?: Snippet
+    placeholder?: string
+    hint?: string
+    recommendation?: string
+    actionLabel?: string
+    /** Heads the preview panel. Without it there is no panel. */
+    previewLabel?: string
+    previewCaption?: string
+    emptyLabel?: string
+    /**
+     * Failures the zone recovers from on its own: an unlink that did not take,
+     * an adapter that was not ready. A failed upload keeps its message and a
+     * Retry instead.
+     */
+    onError?: (error: Error) => void
+  }
+
+  const DEFAULT_ACCEPT = 'image/png,image/jpeg,image/jpg,image/svg+xml,image/webp'
+  const DEFAULT_MAX_SIZE = 2 * 1024 * 1024
+</script>
+
+<script lang="ts">
+  import CloudUploadIcon from '@lucide/svelte/icons/cloud-upload'
+  import TrashIcon from '@lucide/svelte/icons/trash'
+
+  import { cn } from '../../../utils/cn.js'
+  import Button from '../../actions/button/button.svelte'
+  import Progress from '../../feedback/progress/progress.svelte'
+  import Spinner from '../../feedback/spinner/spinner.svelte'
+  import Text from '../../typography/text/text.svelte'
+  import { MediaUploader } from './media-uploader.svelte.js'
+
+  let {
+    value = $bindable(null),
+    onValueChange,
+    adapter,
+    linkMode = 'deferred',
+    accept = DEFAULT_ACCEPT,
+    maxSize = DEFAULT_MAX_SIZE,
+    disabled = false,
+    class: className,
+    icon,
+    placeholder = 'Drag and drop your image here',
+    hint,
+    recommendation,
+    actionLabel = 'Choose file',
+    previewLabel,
+    previewCaption,
+    emptyLabel = 'Nothing uploaded yet',
+    onError,
+  }: MediaDropzoneProps = $props()
+
+  const uploader = new MediaUploader(() => ({
+    value,
+    onChange: (next) => {
+      value = next
+      onValueChange?.(next)
+    },
+    adapter,
+    linkMode,
+    accept,
+    maxSize,
+    disabled,
+    onError,
+  }))
+
+  $effect(() => uploader.destroy)
+
+  let input = $state<HTMLInputElement | null>(null)
+  let draggingOver = $state(false)
+
+  const uploading = $derived(uploader.uploading)
+  // A failure keeps its entry so the message and Retry survive; that is not
+  // busy, and the zone keeps accepting a fresh drop.
+  const busy = $derived(disabled || !adapter.ready || Boolean(uploading))
+
+  function drop(event: DragEvent) {
+    event.preventDefault()
+    draggingOver = false
+    if (busy) return
+    uploader.addFiles(event.dataTransfer?.files ?? null)
+  }
+</script>
+
+<div data-slot="media-dropzone" class={cn('flex flex-col gap-4', className)}>
+  <input
+    bind:this={input}
+    type="file"
+    {accept}
+    class="hidden"
+    disabled={busy}
+    onchange={(event) => {
+      uploader.addFiles(event.currentTarget.files)
+      event.currentTarget.value = ''
+    }}
+  >
+
+  <!-- Dropping a file is a pointer affordance with no keyboard equivalent; the
+       keyboard path is the real button inside the zone, so the zone takes no
+       role that would announce a target a keyboard cannot operate. -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- biome-ignore lint/a11y/noStaticElementInteractions: drop target, keyboard path is the button inside it -->
+  <div
+    data-slot="media-dropzone-zone"
+    data-dragging={draggingOver || undefined}
+    ondrop={drop}
+    ondragover={(event) => {
+      if (busy) return
+      event.preventDefault()
+      draggingOver = true
+    }}
+    ondragleave={() => (draggingOver = false)}
+    class={cn(
+      'flex flex-col items-center justify-center rounded-2xl border-2 border-dashed p-8 text-center transition-colors',
+      draggingOver ? 'border-primary bg-primary/5' : 'border-border',
+    )}
+  >
+    <span
+      class="bg-foreground/[0.07] text-muted-foreground mb-2 flex size-10 items-center justify-center rounded-xl [&_svg]:size-5"
+    >
+      {#if uploading}
+        <Spinner class="size-5" />
+      {:else if icon}
+        {@render icon()}
+      {:else}
+        <CloudUploadIcon />
+      {/if}
+    </span>
+    <p class="text-sm font-medium">{placeholder}</p>
+    {#if hint}
+      <Text as="p" size="xs" muted>{hint}</Text>
+    {/if}
+    {#if recommendation}
+      <Text as="p" size="xs" muted>{recommendation}</Text>
+    {/if}
+
+    {#if uploading}
+      <Progress
+        value={uploading.progress}
+        class="mt-3 w-40"
+        aria-label="Uploading {uploading.name}"
+      />
+    {:else}
+      <Button
+        type="button"
+        variant="outline"
+        class="mt-3"
+        disabled={busy}
+        onclick={() => input?.click()}
+      >
+        {actionLabel}
+      </Button>
+    {/if}
+  </div>
+
+  {#if previewLabel}
+    <div class="flex flex-col gap-2">
+      <p class="text-sm font-medium">{previewLabel}</p>
+      <div
+        class="border-border bg-muted/40 flex h-40 items-center justify-center rounded-2xl border"
+      >
+        {#if value}
+          <div class="group relative">
+            <!-- object-contain, not cover: the thing in a one-image field is
+                 usually a logo, and a cropped logo is a wrong logo. -->
+            <img
+              src={value.thumbnailUrl || value.url}
+              alt={value.name || previewLabel}
+              class="max-h-32 object-contain"
+            >
+            {#if !disabled}
+              <Button
+                type="button"
+                iconOnly
+                variant="ghost"
+                class="bg-background/90 hover:text-destructive absolute -top-2 -right-2 size-7 rounded-full opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100"
+                onclick={uploader.remove}
+                aria-label="Remove {value.name || previewLabel}"
+              >
+                <TrashIcon class="size-3.5" />
+              </Button>
+            {/if}
+          </div>
+        {:else}
+          <Text as="p" size="sm" muted>{emptyLabel}</Text>
+        {/if}
+      </div>
+      {#if previewCaption}
+        <Text as="p" size="xs" muted>{previewCaption}</Text>
+      {/if}
+    </div>
+  {/if}
+
+  {#if uploader.failed}
+    {@const failed = uploader.failed}
+    <p class="text-destructive flex items-center gap-2 text-sm">
+      <span class="truncate">{failed.error}</span>
+      <Button
+        type="button"
+        size="sm"
+        variant="outline"
+        class="h-7"
+        onclick={() => uploader.retry(failed.id)}
+      >
+        Retry
+      </Button>
+    </p>
+  {/if}
+
+  {#each uploader.rejected as item (item.id)}
+    <p class="text-destructive text-sm">
+      <span class="text-foreground">{item.name}</span>
+      — {item.message}
+    </p>
+  {/each}
+</div>

package/dist/components/forms/media-dropzone/media-dropzone.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { Snippet } from 'svelte';
+import type { MediaAsset, MediaLinkMode, MediaUploaderAdapter } from './media-uploader.svelte.js';
+/**
+ * One image, on a zone that stays put: a logo, an avatar, a cover.
+ *
+ * The zone does not collapse once something is in it: a single slot's
+ * prompt is the control, and replacing is the common action, so dropping a
+ * new file replaces the old one (unlinking it under `immediate`). The
+ * preview is a panel, not a tile, and contains the image rather than
+ * cropping it: a cropped logo is a wrong logo.
+ */
+export type MediaDropzoneProps = {
+    value?: MediaAsset | null;
+    onValueChange?: (value: MediaAsset | null) => void;
+    /** The consumer's media service: the package makes no request of its own. */
+    adapter: MediaUploaderAdapter;
+    linkMode?: MediaLinkMode;
+    /** What a native `<input accept>` takes. Images when absent. */
+    accept?: string;
+    /** Bytes. 2MB when absent. */
+    maxSize?: number;
+    disabled?: boolean;
+    class?: string;
+    icon?: Snippet;
+    placeholder?: string;
+    hint?: string;
+    recommendation?: string;
+    actionLabel?: string;
+    /** Heads the preview panel. Without it there is no panel. */
+    previewLabel?: string;
+    previewCaption?: string;
+    emptyLabel?: string;
+    /**
+     * Failures the zone recovers from on its own: an unlink that did not take,
+     * an adapter that was not ready. A failed upload keeps its message and a
+     * Retry instead.
+     */
+    onError?: (error: Error) => void;
+};
+declare const MediaDropzone: import("svelte").Component<MediaDropzoneProps, {}, "value">;
+type MediaDropzone = ReturnType<typeof MediaDropzone>;
+export default MediaDropzone;

package/dist/components/forms/media-dropzone/media-uploader.svelte.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Origin: the React package 2.23.0 `use-media-uploader.ts`, in its hooks folder
+ * Diverged: the part MediaDropzone uses (round 8 plan, R8-7), as a rune-backed
+ *   class for one slot rather than React's 640-line hook for galleries: one
+ *   file's upload with progress, abort and failure, the type and size checks,
+ *   replacing what is there (and unlinking it under `immediate`), retry and
+ *   remove. Sources, reordering and the multi-file queue are not ported. A new
+ *   file clears a failed upload first: React counted the failure toward the
+ *   one slot, so after a failure a fresh drop was refused as "No slots left",
+ *   though its own comment said the zone keeps accepting one.
+ */
+/** One stored file, as the consumer's media service returns it. */
+export type MediaAsset = {
+    uuid: string;
+    url: string;
+    thumbnailUrl?: string | null;
+    name?: string;
+    mimeType?: string;
+    size?: number;
+};
+export type MediaUploadOptions = {
+    signal: AbortSignal;
+    onProgress: (percent: number) => void;
+};
+/**
+ * Everything the uploader needs the outside world to do. The package makes no
+ * request, holds no token and knows no URL: the consumer closes over all three
+ * and hands this in. `unlink` is called only under `linkMode: 'immediate'`.
+ */
+export type MediaUploaderAdapter = {
+    /** False while a token or session is still resolving. Gates the add control. */
+    ready: boolean;
+    upload(file: File, options: MediaUploadOptions): Promise<MediaAsset>;
+    link?(asset: MediaAsset): Promise<MediaAsset>;
+    unlink?(asset: MediaAsset): Promise<void>;
+};
+/**
+ * When media is attached to the record it belongs to. `immediate` unlinks on
+ * removal and replacement, as an edit page does; `deferred` does neither, and
+ * the form reconciles on submit, as a create page must.
+ */
+export type MediaLinkMode = 'immediate' | 'deferred';
+export type QueuedUpload = {
+    id: string;
+    name: string;
+    progress: number;
+    status: 'uploading' | 'failed';
+    error?: string;
+};
+export type RejectedFile = {
+    id: string;
+    name: string;
+    reason: 'type' | 'size' | 'limit';
+    message: string;
+};
+export type MediaUploaderOptions = {
+    value: MediaAsset | null;
+    onChange: (value: MediaAsset | null) => void;
+    adapter: MediaUploaderAdapter;
+    linkMode: MediaLinkMode;
+    accept: string;
+    maxSize: number;
+    disabled: boolean;
+    onError?: (error: Error) => void;
+};
+export declare class MediaUploader {
+    #private;
+    queue: QueuedUpload[];
+    rejected: RejectedFile[];
+    /** Options are read through a getter, so every call sees the current props. */
+    constructor(options: () => MediaUploaderOptions);
+    get uploading(): QueuedUpload | undefined;
+    get failed(): QueuedUpload | undefined;
+    addFiles: (files: FileList | File[] | null) => void;
+    retry: (id: string) => void;
+    cancel: (id: string) => void;
+    /** Clears the slot. An unlink that fails is reported, not rolled back. */
+    remove: () => void;
+    /** Stops every request; call when the zone goes away. */
+    destroy: () => void;
+}

package/dist/components/forms/media-dropzone/media-uploader.svelte.js

@@ -0,0 +1,177 @@
+/**
+ * Origin: the React package 2.23.0 `use-media-uploader.ts`, in its hooks folder
+ * Diverged: the part MediaDropzone uses (round 8 plan, R8-7), as a rune-backed
+ *   class for one slot rather than React's 640-line hook for galleries: one
+ *   file's upload with progress, abort and failure, the type and size checks,
+ *   replacing what is there (and unlinking it under `immediate`), retry and
+ *   remove. Sources, reordering and the multi-file queue are not ported. A new
+ *   file clears a failed upload first: React counted the failure toward the
+ *   one slot, so after a failure a fresh drop was refused as "No slots left",
+ *   though its own comment said the zone keeps accepting one.
+ */
+export class MediaUploader {
+    queue = $state([]);
+    rejected = $state([]);
+    #options;
+    #controllers = new Map();
+    #attempts = new Map();
+    /** Options are read through a getter, so every call sees the current props. */
+    constructor(options) {
+        this.#options = options;
+    }
+    get uploading() {
+        return this.queue.find((item) => item.status === 'uploading');
+    }
+    get failed() {
+        return this.queue.find((item) => item.status === 'failed');
+    }
+    addFiles = (files) => {
+        const { adapter, disabled, accept, maxSize, onError } = this.#options();
+        const candidates = Array.from(files ?? []);
+        if (disabled || candidates.length === 0)
+            return;
+        if (!adapter.ready) {
+            onError?.(new Error('Media service is not ready yet.'));
+            return;
+        }
+        if (this.uploading)
+            return;
+        for (const failed of this.queue)
+            this.#settle(failed.id);
+        const acceptedTypes = accept
+            .split(',')
+            .map((type) => type.trim())
+            .filter(Boolean);
+        const [first, ...extra] = candidates;
+        const refusals = extra.map((file) => ({
+            id: newId(),
+            name: file.name,
+            reason: 'limit',
+            message: 'No slots left.',
+        }));
+        const refusal = refuse(first, acceptedTypes, maxSize);
+        if (refusal) {
+            this.rejected = [{ id: newId(), name: first.name, ...refusal }, ...refusals];
+            return;
+        }
+        this.rejected = refusals;
+        // A single slot is replaced, not filled: make room for the new file.
+        this.#evict();
+        const id = newId();
+        this.queue = [{ id, name: first.name, progress: 0, status: 'uploading' }];
+        this.#attempts.set(id, (options) => adapter.upload(first, options));
+        void this.#run(id);
+    };
+    retry = (id) => {
+        if (this.queue.find((item) => item.id === id)?.status !== 'failed')
+            return;
+        void this.#run(id);
+    };
+    cancel = (id) => {
+        this.#controllers.get(id)?.abort();
+        this.#settle(id);
+    };
+    /** Clears the slot. An unlink that fails is reported, not rolled back. */
+    remove = () => {
+        this.rejected = [];
+        this.#evict();
+    };
+    /** Stops every request; call when the zone goes away. */
+    destroy = () => {
+        for (const controller of this.#controllers.values())
+            controller.abort();
+        this.#controllers.clear();
+    };
+    #evict() {
+        const { value, onChange, linkMode, adapter, onError } = this.#options();
+        if (!value)
+            return;
+        onChange(null);
+        if (linkMode !== 'immediate' || !adapter.unlink)
+            return;
+        adapter.unlink(value).catch((error) => {
+            onError?.(new Error(messageOf(error, 'Failed to detach the image.')));
+        });
+    }
+    #settle(id) {
+        this.#controllers.delete(id);
+        this.#attempts.delete(id);
+        this.queue = this.queue.filter((item) => item.id !== id);
+    }
+    #update(id, patch) {
+        this.queue = this.queue.map((item) => (item.id === id ? { ...item, ...patch } : item));
+    }
+    async #run(id) {
+        const attempt = this.#attempts.get(id);
+        if (!attempt)
+            return;
+        const controller = new AbortController();
+        this.#controllers.set(id, controller);
+        this.#update(id, { status: 'uploading', error: undefined, progress: 0 });
+        try {
+            const asset = await attempt({
+                signal: controller.signal,
+                onProgress: (percent) => this.#update(id, { progress: percent }),
+            });
+            this.#settle(id);
+            this.#options().onChange(asset);
+        }
+        catch (error) {
+            this.#controllers.delete(id);
+            // An abort is a person removing the upload, not a failure to report.
+            if (controller.signal.aborted) {
+                this.#settle(id);
+                return;
+            }
+            this.#update(id, { status: 'failed', error: messageOf(error, 'Upload failed') });
+        }
+    }
+}
+function newId() {
+    if (typeof crypto !== 'undefined' && 'randomUUID' in crypto)
+        return crypto.randomUUID();
+    return `media-${Math.random().toString(36).slice(2)}`;
+}
+function messageOf(error, fallback) {
+    return error instanceof Error && error.message ? error.message : fallback;
+}
+/**
+ * `image/png` matches itself, `image/*` any image, and `.pdf` by extension:
+ * the grammar a native `<input accept>` takes, and browsers report an empty
+ * `file.type` for some documents.
+ */
+function matches(file, pattern) {
+    if (pattern.startsWith('.'))
+        return file.name.toLowerCase().endsWith(pattern.toLowerCase());
+    if (pattern === file.type)
+        return true;
+    if (!pattern.endsWith('/*'))
+        return false;
+    return file.type.startsWith(pattern.slice(0, -1));
+}
+function refuse(file, acceptedTypes, maxSize) {
+    if (!acceptedTypes.some((pattern) => matches(file, pattern))) {
+        return { reason: 'type', message: `${describe(acceptedTypes)} only.` };
+    }
+    if (file.size > maxSize) {
+        return { reason: 'size', message: `Larger than ${formatSize(maxSize)}.` };
+    }
+    return null;
+}
+/** `image/png,.pdf` reads as `PNG, PDF` on screen. */
+function describe(acceptedTypes) {
+    const labels = acceptedTypes
+        .map((pattern) => {
+        if (pattern.startsWith('.'))
+            return pattern.slice(1).toUpperCase();
+        if (pattern.endsWith('/*'))
+            return pattern.split('/')[0]?.toUpperCase();
+        return pattern.split('/')[1]?.toUpperCase();
+    })
+        .filter(Boolean);
+    return Array.from(new Set(labels)).join(', ');
+}
+function formatSize(bytes) {
+    const megabytes = bytes / 1024 / 1024;
+    return megabytes >= 1 ? `${Math.round(megabytes)}MB` : `${Math.round(bytes / 1024)}KB`;
+}

package/dist/components/forms/number-input/index.d.ts

@@ -0,0 +1,3 @@
+export { default as NumberInput, type NumberInputProps } from './number-input.svelte';
+export { default as NumberInputField, type NumberInputFieldProps, } from './number-input-field.svelte';
+export type { NumberInputFormat } from './number-input-math.js';

package/dist/components/forms/number-input/index.js

@@ -0,0 +1,2 @@
+export { default as NumberInput } from './number-input.svelte';
+export { default as NumberInputField, } from './number-input-field.svelte';