@vitavision/ui 0.7.0 → 0.9.0

package/src/components/ui/numberText.ts

@@ -0,0 +1,36 @@
+/*
+ * Numbers as a field shows them and as a person types them. Internal to this package (used by
+ * `VectorInput` and `PoseInput`); not exported.
+ *
+ * A field bound straight to a number re-formats under the cursor: typing `0.` into a field
+ * showing `0.000` becomes `0` before the next digit arrives. So the multi-number fields keep
+ * the typed text while they have focus and show the formatted value otherwise; these are the
+ * two conversions between the two.
+ */
+
+/**
+ * A number at a fixed number of decimals, without a negative zero (`-0.000` reads as a sign
+ * error in a coordinate readout).
+ *
+ * @param value - The number. Non-finite values print as `NaN`, `Infinity`, `-Infinity`.
+ * @param precision - Decimals, 0–20.
+ * @returns The text.
+ */
+export function formatNumber(value: number, precision: number): string {
+  if (!Number.isFinite(value)) return String(value);
+  const text = value.toFixed(precision);
+  return /^-0(?:\.0*)?$/.test(text) ? text.slice(1) : text;
+}
+
+/**
+ * The number a field's text means, if it means one.
+ *
+ * @param text - What is in the field.
+ * @returns The number, or `null` for empty, partial (`-`, `1e`) or non-numeric text.
+ */
+export function parseNumber(text: string): number | null {
+  const trimmed = text.trim();
+  if (trimmed === "") return null;
+  const value = Number(trimmed);
+  return Number.isFinite(value) ? value : null;
+}

package/src/components/ui/toastStore.ts

@@ -0,0 +1,128 @@
+/*
+ * Notifications, as a store any module can write to.
+ *
+ * A toast is raised from wherever the news is — a file loader, a worker's error handler, a
+ * bake that finished — which is rarely a component with a context in reach. So `toast()` is
+ * a plain function over a module-level store, and `<Toaster />`, mounted once, is its only
+ * reader. The store holds no timers and touches no DOM: auto-dismissal belongs to the
+ * `Toaster`, which is what knows whether a reader is hovering it.
+ */
+
+/** A toast's kind: a fact (`info`), a completed action (`success`), a caveat (`warn`), a failure (`error`). */
+export type ToastTone = "info" | "success" | "warn" | "error";
+
+/** What `toast()` takes. */
+export interface ToastOptions {
+  /** One line: what happened. */
+  title: string;
+  /** More detail, and what to do about it. */
+  description?: string | undefined;
+  /** Defaults to `info`. */
+  tone?: ToastTone | undefined;
+  /**
+   * How long it stays, in milliseconds, while not hovered or focused. Defaults to 5000
+   * (8000 for `error`); `Infinity` keeps it until dismissed.
+   */
+  duration?: number | undefined;
+  /** Replace the toast with this id instead of adding one — for progress that updates in place. */
+  id?: string | undefined;
+}
+
+/** A toast in the store. */
+export interface ToastRecord {
+  /** Identifies the toast to `dismiss` and to `id` replacement. */
+  id: string;
+  /** One line: what happened. */
+  title: string;
+  /** More detail, if any. */
+  description: string | undefined;
+  /** Its kind. */
+  tone: ToastTone;
+  /** Milliseconds before it dismisses itself (`Infinity`: never). */
+  duration: number;
+}
+
+/**
+ * A toast store: what `toast()` writes to and `<Toaster />` reads. Every member may be called
+ * detached.
+ */
+export interface ToastStore {
+  /** Add a toast (or replace the one with `options.id`), returning its id. */
+  readonly toast: (options: ToastOptions) => string;
+  /** Remove one toast, or every toast when `id` is omitted. */
+  readonly dismiss: (id?: string) => void;
+  /** The toasts, oldest first. The same array until the store changes. */
+  readonly getSnapshot: () => readonly ToastRecord[];
+  /** Be told when the toasts change; returns the unsubscribe function. */
+  readonly subscribe: (listener: () => void) => () => void;
+}
+
+const DEFAULT_DURATION = 5000;
+const ERROR_DURATION = 8000;
+
+/**
+ * A new, empty toast store. The package keeps one (behind `toast()` and the default
+ * `<Toaster />`); create another only to isolate a region or a test.
+ *
+ * @returns The store.
+ */
+export function createToastStore(): ToastStore {
+  let toasts: readonly ToastRecord[] = [];
+  let sequence = 0;
+  const listeners = new Set<() => void>();
+  const commit = (next: readonly ToastRecord[]) => {
+    toasts = next;
+    for (const listener of [...listeners]) listener();
+  };
+
+  return {
+    toast: (options) => {
+      const tone = options.tone ?? "info";
+      sequence += 1;
+      const record: ToastRecord = {
+        id: options.id ?? `toast-${sequence}`,
+        title: options.title,
+        description: options.description,
+        tone,
+        duration: options.duration ?? (tone === "error" ? ERROR_DURATION : DEFAULT_DURATION),
+      };
+      const existing = toasts.findIndex((t) => t.id === record.id);
+      commit(existing === -1 ? [...toasts, record] : toasts.map((t, i) => (i === existing ? record : t)));
+      return record.id;
+    },
+    dismiss: (id) => {
+      if (id === undefined) {
+        if (toasts.length > 0) commit([]);
+        return;
+      }
+      if (toasts.some((t) => t.id === id)) commit(toasts.filter((t) => t.id !== id));
+    },
+    getSnapshot: () => toasts,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+}
+
+/** The store behind `toast()` and a `<Toaster />` given no `store`. */
+export const defaultToastStore: ToastStore = createToastStore();
+
+/**
+ * Raise a notification, from anywhere — shown by the mounted `<Toaster />`.
+ *
+ * `toast({ title: "Scenario loaded", tone: "success" })`. Pass `id` to update a toast in
+ * place (a progress message that becomes a result). `toast.dismiss(id)` removes one early,
+ * `toast.dismiss()` all of them.
+ *
+ * @param options - The message, its tone and its duration.
+ * @returns The toast's id.
+ */
+export const toast: ((options: ToastOptions) => string) & {
+  /** Remove one toast, or every toast when `id` is omitted. */
+  dismiss: (id?: string) => void;
+} = Object.assign((options: ToastOptions) => defaultToastStore.toast(options), {
+  dismiss: (id?: string) => defaultToastStore.dismiss(id),
+});

package/src/styles.css

@@ -159,13 +159,30 @@
     list-style: none;
   }
 
+  /*
+   * Reduced motion makes motion synchronous, not merely short.
+   *
+   * A transition of any non-zero duration -- 0.01ms included -- is still a transition: the
+   * computed style keeps its old value until the next frame, so code that sets a style and
+   * measures in the same tick (mermaid's layout) reads stale numbers wherever an element
+   * has `transition-property: all`. A 0s transition is never started, so the new value is
+   * visible at once. Nothing in this repo waits for `transitionend`.
+   *
+   * Animations keep a name with a 0s duration rather than `animation: none`: the animation
+   * still runs to its end state and fires `animationend` immediately, which is what Radix
+   * `Presence` waits for before unmounting an overlay whose consumer gave it an exit
+   * animation (`data-[state=closed]:animate-out`). `animation: none` would unmount it at
+   * once too, but would also freeze `animate-spin` / `animate-pulse` in their first frame.
+   */
   @media (prefers-reduced-motion: reduce) {
     *,
     *::before,
     *::after {
-      animation-duration: 0.01ms !important;
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
       animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
+      transition-duration: 0s !important;
+      transition-delay: 0s !important;
     }
   }
 }