@quaffui/quaff 0.1.0-prealpha15 → 0.1.0-prealpha19

package/dist/helpers/ripple.js

@@ -4,18 +4,25 @@ export function ripple(el, options = {}) {
     const rippleContainer = document.createElement("div");
     addClasses();
     setOptions(options);
-    el.appendChild(rippleContainer);
     function addClasses(center) {
-        let shouldBeCentered = center || options.center;
+        const shouldBeCentered = center || options.center;
         if (!rippleContainer.classList.contains("q-ripple--effect")) {
             rippleContainer.classList.add("q-ripple--effect");
         }
         if (!shouldBeCentered && rippleContainer.classList.contains("q-ripple--center")) {
             rippleContainer.classList.remove("q-ripple--center");
         }
-        shouldBeCentered && rippleContainer.classList.add("q-ripple--center");
+        if (shouldBeCentered) {
+            rippleContainer.classList.add("q-ripple--center");
+        }
     }
     function setOptions(options) {
+        if (options.disabled || el.hasAttribute("aria-disabled")) {
+            rippleContainer.remove();
+        }
+        else {
+            el.appendChild(rippleContainer);
+        }
         if (options.duration && options.duration < 0) {
             options.duration = undefined;
         }
@@ -27,8 +34,9 @@ export function ripple(el, options = {}) {
         }
     }
     function createRipple(e, center) {
-        if (options.disable || el.hasAttribute("aria-disabled"))
+        if (options.disabled || el.hasAttribute("aria-disabled")) {
             return;
+        }
         if (e instanceof KeyboardEvent) {
             if (!["Enter", "Space"].includes(e.code) || e.repeat) {
                 return;
@@ -56,8 +64,9 @@ export function ripple(el, options = {}) {
         ripple.style.width = ripple.style.height = `${radius * 2}px`;
         rippleContainer.appendChild(ripple);
         function removeRipple() {
-            if (ripple === null)
+            if (ripple === null) {
                 return;
+            }
             ripple.style.opacity = "0";
             setTimeout(() => {
                 ripple.remove();

package/dist/helpers/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.1.0-prealpha15";
+declare const _default: "0.1.0-prealpha19";
 export default _default;

package/dist/helpers/version.js

@@ -1 +1 @@
-export default "0.1.0-prealpha15";
+export default "0.1.0-prealpha19";

package/dist/index.d.ts

@@ -1,2 +1,3 @@
+import Quaff from "./classes/Quaff.svelte.js";
 export * from "./components";
-export { Quaff } from "./stores/Quaff.js";
+export { Quaff };

package/dist/index.js

@@ -1,3 +1,4 @@
+import Quaff from "./classes/Quaff.svelte.js";
 // Reexport your entry components here
 export * from "./components";
-export { Quaff } from "./stores/Quaff.js";
+export { Quaff };

package/dist/stores/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./QTheme";
-export * from "./Quaff";

package/dist/stores/index.js

@@ -1,2 +1 @@
-export * from "./QTheme";
-export * from "./Quaff";
+"use strict";

package/dist/utils/clipboard.js

@@ -1,7 +1,7 @@
 export async function copy(text) {
     if (navigator.clipboard.write) {
-        let blob = new Blob([text], { type: "text/plain" });
-        let item = new ClipboardItem({ "text/plain": blob });
+        const blob = new Blob([text], { type: "text/plain" });
+        const item = new ClipboardItem({ "text/plain": blob });
         await navigator.clipboard.write([item]);
     }
     else {

package/dist/utils/colors.d.ts

@@ -1,3 +1,74 @@
+export type Mode = "light" | "dark";
+export type HexValue = `#${string}`;
+type BaseColorNames = [
+    "error",
+    "error-container",
+    "neutral",
+    "neutral-container",
+    "neutral-variant",
+    "neutral-variant-container",
+    "on-error",
+    "on-error-container",
+    "on-neutral",
+    "on-neutral-container",
+    "on-neutral-variant",
+    "on-neutral-variant-container",
+    "on-primary",
+    "on-primary-container",
+    "on-secondary",
+    "on-secondary-container",
+    "on-tertiary",
+    "on-tertiary-container",
+    "primary",
+    "primary-container",
+    "secondary",
+    "secondary-container",
+    "tertiary",
+    "tertiary-container"
+];
+type BaseColors = Record<BaseColorNames[number], HexValue>;
+type ToneColorNames = [
+    "background",
+    "inverse-on-surface",
+    "inverse-primary",
+    "inverse-surface",
+    "on-background",
+    "on-primary-fixed",
+    "on-primary-fixed-variant",
+    "on-secondary-fixed",
+    "on-secondary-fixed-variant",
+    "on-surface",
+    "on-surface-variant",
+    "on-tertiary-fixed",
+    "on-tertiary-fixed-variant",
+    "outline",
+    "outline-variant",
+    "primary-fixed",
+    "primary-fixed-dim",
+    "scrim",
+    "secondary-fixed",
+    "secondary-fixed-dim",
+    "shadow",
+    "surface",
+    "surface-bright",
+    "surface-container",
+    "surface-container-high",
+    "surface-container-highest",
+    "surface-container-low",
+    "surface-container-lowest",
+    "surface-dim",
+    "surface-tint",
+    "surface-variant",
+    "tertiary-fixed",
+    "tertiary-fixed-dim"
+];
+type ToneColors = Record<ToneColorNames[number], HexValue>;
+export type QuaffColorNames = [...BaseColorNames, ...ToneColorNames];
+export type QuaffColors = BaseColors & ToneColors;
+export declare function generateColors(from: string): {
+    light: QuaffColors;
+    dark: QuaffColors;
+};
 declare class QColors {
     private static hexRegex;
     private static isValidRgb;

package/dist/utils/colors.js

@@ -1,10 +1,88 @@
-import { isNumber } from "./types";
+import { argbFromHex, hexFromArgb, themeFromSourceColor, } from "@material/material-color-utilities";
+import { isNumeric } from "./number.js";
+import { convertCase } from "./string.js";
+const COLOR_TONES = {
+    background: { fromColor: "neutral", light: 98, dark: 6 },
+    "inverse-on-surface": { fromColor: "neutral", light: 95, dark: 20 },
+    "inverse-primary": { fromColor: "primary", light: 80, dark: 40 },
+    "inverse-surface": { fromColor: "neutral", light: 20, dark: 90 },
+    "on-background": { fromColor: "neutral", light: 10, dark: 90 },
+    "on-primary-fixed": { fromColor: "primary", light: 10, dark: 10 },
+    "on-primary-fixed-variant": { fromColor: "primary", light: 30, dark: 30 },
+    "on-secondary-fixed": { fromColor: "secondary", light: 10, dark: 10 },
+    "on-secondary-fixed-variant": { fromColor: "secondary", light: 30, dark: 30 },
+    "on-surface": { fromColor: "neutral", light: 10, dark: 90 },
+    "on-surface-variant": { fromColor: "neutralVariant", light: 30, dark: 80 },
+    "on-tertiary-fixed": { fromColor: "tertiary", light: 10, dark: 10 },
+    "on-tertiary-fixed-variant": { fromColor: "tertiary", light: 30, dark: 30 },
+    outline: { fromColor: "neutralVariant", light: 50, dark: 60 },
+    "outline-variant": { fromColor: "neutralVariant", light: 80, dark: 30 },
+    "primary-fixed": { fromColor: "primary", light: 90, dark: 90 },
+    "primary-fixed-dim": { fromColor: "primary", light: 80, dark: 80 },
+    scrim: { fromColor: "neutral", light: 0, dark: 0 },
+    "secondary-fixed": { fromColor: "secondary", light: 90, dark: 90 },
+    "secondary-fixed-dim": { fromColor: "secondary", light: 80, dark: 80 },
+    shadow: { fromColor: "neutral", light: 0, dark: 0 },
+    surface: { fromColor: "neutral", light: 98, dark: 6 },
+    "surface-bright": { fromColor: "neutral", light: 98, dark: 24 },
+    "surface-container": { fromColor: "neutral", light: 94, dark: 12 },
+    "surface-container-high": { fromColor: "neutral", light: 92, dark: 17 },
+    "surface-container-highest": { fromColor: "neutral", light: 90, dark: 22 },
+    "surface-container-low": { fromColor: "neutral", light: 96, dark: 10 },
+    "surface-container-lowest": { fromColor: "neutral", light: 100, dark: 4 },
+    "surface-dim": { fromColor: "neutral", light: 87, dark: 6 },
+    "surface-tint": { fromColor: "primary", light: 40, dark: 80 },
+    "surface-variant": { fromColor: "neutral", light: 90, dark: 30 },
+    "tertiary-fixed": { fromColor: "tertiary", light: 90, dark: 90 },
+    "tertiary-fixed-dim": { fromColor: "tertiary", light: 80, dark: 80 },
+};
+export function generateColors(from) {
+    const argb = argbFromHex(from);
+    const palettes = themeFromSourceColor(argb).palettes;
+    return {
+        light: getColors(palettes, "light"),
+        dark: getColors(palettes, "dark"),
+    };
+}
+function getColors(palettes, mode) {
+    const tones = mode === "light"
+        ? {
+            base: 40,
+            onBase: 100,
+            baseContainer: 90,
+            onBaseContainer: 10,
+        }
+        : {
+            base: 80,
+            onBase: 20,
+            baseContainer: 30,
+            onBaseContainer: 90,
+        };
+    const getColor = (color, palette) => {
+        color = convertCase(color, "pascal", "kebab");
+        return [
+            [color, palette.tone(tones.base)],
+            [`on-${color}`, palette.tone(tones.onBase)],
+            [`${color}-container`, palette.tone(tones.baseContainer)],
+            [`on-${color}-container`, palette.tone(tones.onBaseContainer)],
+        ];
+    };
+    const results = Object.fromEntries(Object.entries(palettes)
+        .map(([color, palette]) => getColor(color, palette))
+        .flat(1));
+    let toneColor;
+    for (toneColor in COLOR_TONES) {
+        const toneInfo = COLOR_TONES[toneColor];
+        results[toneColor] = palettes[toneInfo.fromColor].tone(toneInfo[mode]);
+    }
+    return Object.fromEntries(Object.entries(results).map(([color, value]) => [color, hexFromArgb(value)]));
+}
 class QColors {
     static hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
     static isValidRgb(r, g, b) {
-        return (isNumber(r) &&
-            isNumber(g) &&
-            isNumber(b) &&
+        return (isNumeric(r) &&
+            isNumeric(g) &&
+            isNumeric(b) &&
             +r >= 0 &&
             +r <= 255 &&
             +g >= 0 &&
@@ -13,9 +91,9 @@ class QColors {
             +b <= 255);
     }
     static isValidHsl(h, s, l) {
-        return (isNumber(h) &&
-            isNumber(s) &&
-            isNumber(l) &&
+        return (isNumeric(h) &&
+            isNumeric(s) &&
+            isNumeric(l) &&
             +h >= 0 &&
             +h <= 360 &&
             +s >= 0 &&
@@ -42,9 +120,12 @@ class QColors {
         if (!QColors.isValidRgb(r, g, b)) {
             throw new Error("Invalid RGB values. They should be in the range 0-255.");
         }
-        (r = +r / 255), (g = +g / 255), (b = +b / 255);
+        r = +r / 255;
+        g = +g / 255;
+        b = +b / 255;
         const max = Math.max(r, g, b), min = Math.min(r, g, b);
-        let h, s, l = (max + min) / 2;
+        const l = (max + min) / 2;
+        let h, s;
         if (max === min) {
             h = s = 0; // achromatic
         }
@@ -72,22 +153,29 @@ class QColors {
             throw new Error("Invalid HSL values. Hue should be in the range 0-360, saturation and lightness in the range 0-100.");
         }
         let r, g, b;
-        (h = +h / 360), (s = +s / 100), (l = +l / 100);
+        h = +h / 360;
+        s = +s / 100;
+        l = +l / 100;
         if (s === 0) {
             r = g = b = l; // achromatic
         }
         else {
             const hue2rgb = (p, q, t) => {
-                if (t < 0)
+                if (t < 0) {
                     t += 1;
-                if (t > 1)
+                }
+                if (t > 1) {
                     t -= 1;
-                if (t < 1 / 6)
+                }
+                if (t < 1 / 6) {
                     return p + (q - p) * 6 * t;
-                if (t < 1 / 2)
+                }
+                if (t < 1 / 2) {
                     return q;
-                if (t < 2 / 3)
+                }
+                if (t < 2 / 3) {
                     return p + (q - p) * (2 / 3 - t) * 6;
+                }
                 return p;
             };
             const q = l < 0.5 ? l * (1 + s) : l + s - l * s;

package/dist/utils/dom.d.ts

@@ -7,3 +7,5 @@ export declare function getClosestFocusableChild(el: HTMLElement): HTMLElement;
 export declare function getClosestFocusableSibling<T extends HTMLElement>(el: T, direction: Direction): HTMLElement;
 export declare function getClosestFocusableBlock(el: HTMLElement, direction: Direction): HTMLElement;
 export declare function movementDirection(from: HTMLElement, to: HTMLElement): Direction;
+export declare function shouldReduceMotion(): boolean;
+export declare function elFromSelector<T extends HTMLElement>(selector: string | T | null | typeof window | Document): Document | (Window & typeof globalThis) | T | null;

package/dist/utils/dom.js

@@ -21,14 +21,14 @@ export function getFocusableChildren(el) {
     return Array.from(el.querySelectorAll(focusableElements));
 }
 export function getClosestFocusableChild(el) {
-    let children = Array.from(el.querySelectorAll(focusableElements));
+    const children = Array.from(el.querySelectorAll(focusableElements));
     const focusableChildren = children.filter(isFocusable);
     return focusableChildren[0] || null;
 }
 export function getClosestFocusableSibling(el, direction) {
     const parent = getParentElement(el);
     const allSiblings = Array.from(parent.childNodes);
-    let filtered = allSiblings.filter(isFocusable);
+    const filtered = allSiblings.filter(isFocusable);
     const indexOfEl = filtered.indexOf(el);
     if (direction === "next") {
         const i = indexOfEl + 1 === filtered.length ? 0 : indexOfEl + 1;
@@ -48,8 +48,8 @@ export function getClosestFocusableSibling(el, direction) {
     }
 }
 export function getClosestFocusableBlock(el, direction) {
-    let parent = getParentElement(el);
-    let parentFocusableChildren = getFocusableChildren(parent);
+    const parent = getParentElement(el);
+    const parentFocusableChildren = getFocusableChildren(parent);
     function getNextFocusableBlock(parentBlock) {
         const grandParent = getParentElement(parentBlock);
         const grandParentChildren = getAllChildren(grandParent);
@@ -73,3 +73,9 @@ export function movementDirection(from, to) {
     const relativePosition = from.compareDocumentPosition(to);
     return relativePosition === 2 ? "previous" : "next";
 }
+export function shouldReduceMotion() {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+export function elFromSelector(selector) {
+    return typeof selector === "string" ? document.querySelector(selector) : selector;
+}

package/dist/utils/number.d.ts

@@ -0,0 +1,2 @@
+export declare function isNumeric(input: number | string): input is number | `${number}`;
+export declare function between(value: number, min: number, max: number): number;

package/dist/utils/number.js

@@ -0,0 +1,9 @@
+export function isNumeric(input) {
+    return typeof input === "number" || !isNaN(Number(input));
+}
+export function between(value, min, max) {
+    if (max < min) {
+        console.warn(`max (${max}) should not be smaller than min (${min}).`);
+    }
+    return max <= min ? min : Math.min(max, Math.max(min, value));
+}

package/dist/utils/props.d.ts

@@ -3,7 +3,7 @@ interface CreateClassesOptions {
     component?: string;
     element?: string;
     userClasses?: string | null;
-    quaffClasses?: any[];
+    quaffClasses?: unknown[];
 }
-export declare function createClasses(modifiers: any[], options?: CreateClassesOptions): string;
+export declare function createClasses(modifiers: unknown[], options?: CreateClassesOptions): string;
 export {};

package/dist/utils/props.js

@@ -2,14 +2,15 @@ import { convertCase } from "./string";
 export function createStyles(styleObj, userStyles) {
     const stylesArray = Object.entries(styleObj);
     const toJoin = [];
-    for (let [styleName, styleVal] of stylesArray) {
+    for (const [styleName, styleVal] of stylesArray) {
         if (styleVal === undefined || styleVal === null || styleVal === false) {
             continue;
         }
-        styleName = convertCase(styleName, "camel", "kebab");
-        toJoin.push(`${styleName}: ${styleVal}`);
+        toJoin.push(`${convertCase(styleName, "camel", "kebab")}: ${styleVal}`);
+    }
+    if (userStyles) {
+        toJoin.push(userStyles);
     }
-    userStyles && toJoin.push(userStyles);
     if (toJoin.length === 0) {
         return null;
     }
@@ -19,12 +20,13 @@ export function createClasses(modifiers, options = { userClasses: "", quaffClass
     const userClasses = options.userClasses?.trim();
     const quaffClasses = options.quaffClasses?.length && createClasses(options.quaffClasses);
     const baseClasses = `${quaffClasses || ""} ${userClasses || ""}`.trim();
-    let component = options.component, element;
+    const component = options.component;
+    let element;
     if (component && options.element) {
         element = `${component}__${options.element}`;
     }
     const filteredModifiers = modifiers.filter(Boolean);
-    let withModifiers = component
+    const withModifiers = component
         ? filteredModifiers.map((modifier) => `${element || component}--${modifier}`)
         : filteredModifiers;
     return [element || component, ...withModifiers, baseClasses].filter(Boolean).join(" ").trim();

package/dist/utils/router.d.ts

@@ -0,0 +1,17 @@
+import type { Readable } from "svelte/store";
+export interface RouterProps {
+    activeClass?: string;
+    disabled?: boolean;
+    href?: string;
+    replace?: boolean;
+    to?: string;
+}
+export declare const isRouteActive: Readable<(route?: string) => boolean>;
+export declare function getRouterInfo<T extends RouterProps>(props: T): {
+    hasLink: boolean;
+    linkAttributes: {
+        href: string | undefined;
+        "data-sveltekit-reload": boolean | undefined;
+    };
+    linkClasses: string;
+};

package/dist/utils/router.js

@@ -0,0 +1,23 @@
+import { derived } from "svelte/store";
+import { page } from "$app/stores";
+export const isRouteActive = derived(page, ($page) => {
+    return (route) => {
+        if (!route) {
+            return false;
+        }
+        return $page.url.pathname === route || $page.url.pathname.startsWith(`${route}/`);
+    };
+});
+export function getRouterInfo(props) {
+    const hasLink = [props.to, props.href].some((entry) => entry !== undefined);
+    const linkClasses = `${hasLink ? "q-link" : ""} ${props.disabled ? "disabled" : ""}`.trim();
+    const linkAttributes = {
+        href: props.to || props.href,
+        "data-sveltekit-reload": props.replace ? true : undefined,
+    };
+    return {
+        hasLink,
+        linkAttributes,
+        linkClasses,
+    };
+}

package/dist/utils/string.d.ts

@@ -7,4 +7,5 @@ declare const cases: {
     snake: string;
 };
 export declare function convertCase(str: string, fromCase: keyof typeof cases, toCase: keyof typeof cases): string;
+export declare function extractImgSrc(prop?: string): string | undefined;
 export {};

package/dist/utils/string.js

@@ -31,6 +31,7 @@ function convertToKebabSnakeCase(str, caseType) {
         .join("");
 }
 export function convertCase(str, fromCase, toCase) {
+    const uncap = uncapitalize(str);
     switch (fromCase) {
         case "camel":
             if (toCase === "pascal") {
@@ -41,7 +42,6 @@ export function convertCase(str, fromCase, toCase) {
             }
             break;
         case "pascal":
-            let uncap = uncapitalize(str);
             if (toCase === "camel") {
                 return uncap;
             }
@@ -76,3 +76,6 @@ export function convertCase(str, fromCase, toCase) {
     }
     return str;
 }
+export function extractImgSrc(prop) {
+    return prop?.startsWith("img:") ? prop.slice(4) : undefined;
+}

package/dist/utils/types.d.ts

@@ -19,7 +19,7 @@ export interface QComponentDocs {
 export interface QComponentProp {
     name: string;
     type: string;
-    default?: any;
+    default?: unknown;
     description: string;
     clickableType?: boolean;
     optional?: boolean;
@@ -42,4 +42,9 @@ export interface QComponentMethod {
     type: string;
     description: string;
 }
-export declare function isNumber(input: any): input is number;
+export type Entries<T> = {
+    [K in keyof T]: [K, T[K]];
+}[keyof T][];
+export type QEvent<T, E> = T & {
+    currentTarget: EventTarget & E;
+};

package/dist/utils/types.js

@@ -2,6 +2,3 @@ export const NativePropsDefaults = {
     userClasses: undefined,
     userStyles: undefined,
 };
-export function isNumber(input) {
-    return typeof input === "number" || !isNaN(Number(input));
-}

package/dist/utils/types.json

@@ -1,14 +1,17 @@
 {
   "QAvatarShapeOptions": "type QAvatarShapeOptions =\n  | \"circle\"\n  | \"rounded\"\n  | \"top-round\"\n  | \"left-round\"\n  | \"right-round\"\n  | \"bottom-round\"\n  | \"top-left-round\"\n  | \"top-right-round\"\n  | \"bottom-left-round\"\n  | \"bottom-right-round\"",
-  "QAvatarSizeOptions": "type QAvatarSizeOptions = QuaffSizes | CssValue | number",
-  "QBreadcrumbsGutterOptions": "type QBreadcrumbsGutterOptions = \"none\" | \"sm\" | \"md\" | \"lg\"",
-  "QBtnSizeOptions": "type QBtnSizeOptions = Exclude<QuaffSizes, \"xs\">",
+  "QAvatarSizeOptions": "type QAvatarSizeOptions = Q.Size | Q.CssValue | number",
+  "QBreadcrumbsGutterOptions": "type QBreadcrumbsGutterOptions = Exclude<Q.Size, \"xs\" | \"xl\">",
+  "QBtnDesignOptions": "type QBtnDesignOptions = \"elevated\" | \"filled\" | \"tonal\" | \"outlined\" | \"flat\"",
+  "QBtnSizeOptions": "type QBtnSizeOptions = Exclude<Q.Size, \"xs\">",
   "QCardFillColors": "type QCardFillColors = \"primary\" | \"secondary\" | \"tertiary\"",
-  "QChipSizeOptions": "type QChipSizeOptions = Exclude<QuaffSizes, \"xs\" | \"xl\">",
+  "QChipFillOptions": "type QChipFillOptions =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"neutral\"\n  | \"neutral-variant\"\n  | \"error\"",
+  "QChipKindOptions": "type QChipKindOptions = \"assist\" | \"filter\" | \"input\" | \"suggestion\"",
+  "QChipSizeOptions": "type QChipSizeOptions = Exclude<Q.Size, \"xs\" | \"xl\" | \"none\">",
   "QDialogPositionOptions": "type QDialogPositionOptions = \"default\" | \"top\" | \"right\" | \"bottom\" | \"left\"",
   "QDrawerBehaviorOptions": "type QDrawerBehaviorOptions = \"default\" | \"desktop\" | \"mobile\"",
   "QDrawerSideOptions": "type QDrawerSideOptions = \"left\" | \"right\"",
-  "QIconSizeOptions": "type QIconSizeOptions = QuaffSizes | CssValue | number",
+  "QIconSizeOptions": "type QIconSizeOptions = Q.Size | Q.CssValue | number",
   "QIconTypeOptions": "type QIconTypeOptions = \"outlined\" | \"sharp\" | \"rounded\"",
   "QItemSectionTypes": "type QItemSectionTypes =\n  | \"thumbnail\"\n  | \"video\"\n  | \"avatar\"\n  | \"toggle\"\n  | \"icon\"\n  | \"trailingIcon\"\n  | \"trailingText\"\n  | \"content\"",
   "QLayoutEvents": "type QLayoutEvents = \"resize\" | \"scroll\" | \"scrollHeight\"",

package/dist/utils/watchable.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="svelte" />
 import { Readable, Writable } from "svelte/store";
 export declare function watchable<T>(value: T): readonly [Writable<T>, Readable<T | null>];

package/dist/utils/watchable.js

@@ -1,6 +1,6 @@
 import { derived, writable } from "svelte/store";
 export function watchable(value) {
-    let values = writable([value, null]);
+    const values = writable([value, null]);
     const subscribe = derived(values, ($values) => $values[0]).subscribe;
     const update = (fn, isEqual = (a, b) => a === b) => {
         values.update(($values) => {