@pathscale/ui 2.1.1 → 2.2.0

package/dist/components/slider/Slider.generated.js

@@ -26,7 +26,6 @@ const __solidLayoutSlider = (_stable, p)=>{
         "size",
         "dataTheme",
         "class",
-        "className",
         "style"
     ]);
     const min = ()=>local.min ?? 0;
@@ -111,7 +110,7 @@ const __solidLayoutSlider = (_stable, p)=>{
     return (()=>{
         var _el$ = _tmpl$2(), _el$4 = _el$.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
         spread(_el$, mergeProps(()=>({
-                class: twMerge(CLASSES.base, CLASSES.size[size()], local.class, local.className)
+                class: twMerge(CLASSES.base, CLASSES.size[size()], local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;

package/dist/components/spinner/Spinner.generated.d.ts

@@ -1,14 +1,12 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Spinner.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type SpinnerSize = "xs" | "sm" | "md" | "lg" | "xl";
-export type SpinnerColor = "current" | "accent" | "success" | "warning" | "danger";
-export type SpinnerVariant = "spinner" | "dots" | "ring" | "ball" | "bars" | "infinity";
-export type SpinnerProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
-    size?: SpinnerSize;
-    color?: SpinnerColor;
-    variant?: SpinnerVariant;
+import type { Size, State, UIBaseProps } from "../vocabulary";
+export type SpinnerShape = "spinner" | "dots" | "ring" | "ball" | "bars" | "infinity";
+export type SpinnerProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & UIBaseProps & {
+    size?: Size;
+    state?: State;
+    shape?: SpinnerShape;
     label?: string;
 };
 export declare const SpinnerLayout: __LayoutComponent<SpinnerProps>;

package/dist/components/spinner/Spinner.generated.js

@@ -3,7 +3,7 @@ import { defineComponent } from "solid-layouts/application-boundary";
 import "./Spinner.css";
 import { createUniqueId } from "solid-js";
 import { spinner } from "./Spinner.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=spinner-icon fill=none viewBox="0 0 24 24"><defs><linearGradient x1=50% x2=50% y1=5.271% y2=91.793%><stop offset=0% stop-color=currentColor></stop><stop offset=100% stop-color=currentColor stop-opacity=0.55></stop></linearGradient><linearGradient x1=50% x2=50% y1=15.24% y2=87.15%><stop offset=0% stop-color=currentColor stop-opacity=0></stop><stop offset=100% stop-color=currentColor stop-opacity=0.55></stop></linearGradient></defs><g fill=none><path d="M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021"transform="translate(1.5 1.625)"></path><path d="M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118"transform="translate(1.5 1.625)">'), _tmpl$2 = /*#__PURE__*/ template("<span>");
+var _tmpl$ = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=spinner-icon fill=none viewBox="0 0 24 24"><defs><linearGradient x1=50% x2=50% y1=5.271% y2=91.793%><stop offset=0% stop-state=currentColor></stop><stop offset=100% stop-state=currentColor stop-opacity=0.55></stop></linearGradient><linearGradient x1=50% x2=50% y1=15.24% y2=87.15%><stop offset=0% stop-state=currentColor stop-opacity=0></stop><stop offset=100% stop-state=currentColor stop-opacity=0.55></stop></linearGradient></defs><g fill=none><path d="M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021"transform="translate(1.5 1.625)"></path><path d="M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118"transform="translate(1.5 1.625)">'), _tmpl$2 = /*#__PURE__*/ template("<span>");
 const SpinnerSVG = ()=>{
     const id = createUniqueId();
     return (()=>{
@@ -15,9 +15,9 @@ const SpinnerSVG = ()=>{
         return _el$;
     })();
 };
-const __solidLayoutSpinnerLayout = ({ slot, children }, p)=>(()=>{
+const __solidLayoutSpinnerLayout = (_stable, p)=>(()=>{
         var _el$8 = _tmpl$2();
-        spread(_el$8, mergeProps(()=>slot.root, {
+        spread(_el$8, mergeProps(()=>_stable.slot.root, {
             role: "status",
             get ["aria-label"] () {
                 return p.label ?? "Loading";
@@ -29,7 +29,7 @@ const __solidLayoutSpinnerLayout = ({ slot, children }, p)=>(()=>{
             }
         }), false, true);
         insert(_el$8, (()=>{
-            var _c$ = memo(()=>"spinner" === p.variant);
+            var _c$ = memo(()=>"spinner" === p.shape);
             return ()=>_c$() ? createComponent(SpinnerSVG, {}) : void 0;
         })());
         return _el$8;

package/dist/components/spinner/Spinner.recipe.d.ts

@@ -1,28 +1,9 @@
-export declare const CLASSES: {
-    readonly base: "spinner";
-    readonly size: {
-        readonly xs: "spinner--xs";
-        readonly sm: "spinner--sm";
-        readonly md: "";
-        readonly lg: "spinner--lg";
-        readonly xl: "spinner--xl";
-    };
-    readonly color: {
-        readonly current: "spinner--current";
-        readonly accent: "spinner--accent";
-        readonly success: "spinner--success";
-        readonly warning: "spinner--warning";
-        readonly danger: "spinner--danger";
-    };
-    readonly variant: {
-        readonly spinner: "spinner--spinner";
-        readonly dots: "spinner--dots";
-        readonly ring: "spinner--ring";
-        readonly ball: "spinner--ball";
-        readonly bars: "spinner--bars";
-        readonly infinity: "spinner--infinity";
-    };
-};
+/**
+ * `shape` rather than `variant`: the thing that varies here is the animation
+ * (bars, dots, a ring), not emphasis, so it must not borrow the word that
+ * means solid/soft/outline everywhere else. The fleet passed `bars` at 23 of
+ * the 38 sites that used the old `Loading` alias.
+ */
 export declare const spinner: import("solid-layouts").Recipe<{
     readonly component: "spinner";
     readonly element: "span";
@@ -35,18 +16,21 @@ export declare const spinner: import("solid-layouts").Recipe<{
         readonly size: {
             readonly xs: "spinner--xs";
             readonly sm: "spinner--sm";
-            readonly md: "";
+            readonly md: "spinner--md";
             readonly lg: "spinner--lg";
             readonly xl: "spinner--xl";
         };
-        readonly color: {
-            readonly current: "spinner--current";
+        readonly state: {
+            readonly neutral: "spinner--neutral";
+            readonly primary: "spinner--primary";
+            readonly secondary: "spinner--secondary";
             readonly accent: "spinner--accent";
             readonly success: "spinner--success";
             readonly warning: "spinner--warning";
             readonly danger: "spinner--danger";
+            readonly info: "spinner--info";
         };
-        readonly variant: {
+        readonly shape: {
             readonly spinner: "spinner--spinner";
             readonly dots: "spinner--dots";
             readonly ring: "spinner--ring";
@@ -58,8 +42,8 @@ export declare const spinner: import("solid-layouts").Recipe<{
     };
     readonly defaults: {
         readonly size: "md";
-        readonly color: "current";
-        readonly variant: "spinner";
+        readonly state: "neutral";
+        readonly shape: "spinner";
         readonly label: "Loading";
     };
 }>;

package/dist/components/spinner/Spinner.recipe.js

@@ -1,48 +1,83 @@
 import { recipe } from "../../lib/layouts/index.js";
-const CLASSES = {
-    base: "spinner",
-    size: {
-        xs: "spinner--xs",
-        sm: "spinner--sm",
-        md: "",
-        lg: "spinner--lg",
-        xl: "spinner--xl"
-    },
-    color: {
-        current: "spinner--current",
-        accent: "spinner--accent",
-        success: "spinner--success",
-        warning: "spinner--warning",
-        danger: "spinner--danger"
-    },
-    variant: {
-        spinner: "spinner--spinner",
-        dots: "spinner--dots",
-        ring: "spinner--ring",
-        ball: "spinner--ball",
-        bars: "spinner--bars",
-        infinity: "spinner--infinity"
-    }
-};
 const spinner = recipe({
     component: "spinner",
     element: "span",
     slots: {
         root: {
-            base: CLASSES.base
+            base: "spinner"
         }
     },
     props: {
-        size: CLASSES.size,
-        color: CLASSES.color,
-        variant: CLASSES.variant,
+        size: {
+            xs: "spinner--xs",
+            sm: "spinner--sm",
+            md: "spinner--md",
+            lg: "spinner--lg",
+            xl: "spinner--xl"
+        },
+        state: {
+            neutral: "spinner--neutral",
+            primary: "spinner--primary",
+            secondary: "spinner--secondary",
+            accent: "spinner--accent",
+            success: "spinner--success",
+            warning: "spinner--warning",
+            danger: "spinner--danger",
+            info: "spinner--info"
+        },
+        shape: {
+            spinner: "spinner--spinner",
+            dots: "spinner--dots",
+            ring: "spinner--ring",
+            ball: "spinner--ball",
+            bars: "spinner--bars",
+            infinity: "spinner--infinity"
+        },
         label: {}
     },
     defaults: {
         size: "md",
-        color: "current",
-        variant: "spinner",
+        state: "neutral",
+        shape: "spinner",
         label: "Loading"
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "spinner",
+                axes: {
+                    size: {
+                        xs: "spinner--xs",
+                        sm: "spinner--sm",
+                        md: "spinner--md",
+                        lg: "spinner--lg",
+                        xl: "spinner--xl"
+                    },
+                    state: {
+                        neutral: "spinner--neutral",
+                        primary: "spinner--primary",
+                        secondary: "spinner--secondary",
+                        accent: "spinner--accent",
+                        success: "spinner--success",
+                        warning: "spinner--warning",
+                        danger: "spinner--danger",
+                        info: "spinner--info"
+                    },
+                    shape: {
+                        spinner: "spinner--spinner",
+                        dots: "spinner--dots",
+                        ring: "spinner--ring",
+                        ball: "spinner--ball",
+                        bars: "spinner--bars",
+                        infinity: "spinner--infinity"
+                    }
+                }
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0
+        }
     }
 });
-export { CLASSES, spinner };
+export { spinner };

package/dist/components/spinner/index.d.ts

@@ -1,2 +1,3 @@
-export { SpinnerLayout as default, SpinnerLayout as Spinner, SpinnerLayout as Loading, } from "./Spinner.generated";
-export type { SpinnerProps, SpinnerSize, SpinnerColor, SpinnerVariant } from "./Spinner.generated";
+export { SpinnerLayout as default, SpinnerLayout as Spinner } from "./Spinner.generated";
+export type { SpinnerProps, SpinnerShape } from "./Spinner.generated";
+export { spinner } from "./Spinner.recipe";

package/dist/components/spinner/index.js

@@ -1 +1,2 @@
-export { SpinnerLayout as Loading, SpinnerLayout as Spinner, SpinnerLayout as default } from "./Spinner.generated.js";
+export { SpinnerLayout as Spinner, SpinnerLayout as default } from "./Spinner.generated.js";
+export { spinner } from "./Spinner.recipe.js";

package/dist/components/status/index.d.ts

@@ -0,0 +1,3 @@
+export { summarizeStatus, diffStatus } from "./status";
+export type { Health, Quality, StatusItem, StatusSummary, StatusTransition } from "./status";
+export { FLAPPING_THRESHOLD } from "./status";

package/dist/components/status/index.js

@@ -0,0 +1 @@
+export { FLAPPING_THRESHOLD, diffStatus, summarizeStatus } from "./status.js";

package/dist/components/status/status.d.ts

@@ -0,0 +1,167 @@
+import type { JSX } from "solid-js";
+/**
+ * Aggregate status: combining many conditions into one indicator without
+ * losing the one fact that matters.
+ *
+ * A realtime call has at least seven independent conditions — is my internet
+ * up, am I on the server, is my mic working, is my camera working, is the
+ * other party connected, is their mic working, is their camera working — and
+ * the naive answer, "show the worst one", is wrong in the way that costs
+ * support time: if the internet is down then six of the seven are also down,
+ * and reporting "their camera is off" is true, useless, and sends the user to
+ * fix the wrong thing.
+ *
+ * These conditions are not peers. They form a dependency graph, and the useful
+ * report is the **root cause**: the deepest failing item whose own
+ * dependencies are all healthy. Everything downstream of it is a symptom.
+ */
+/**
+ * `flapping` earns a value rather than a boolean because it is a condition
+ * people name and treat specifically — a link that keeps returning just long
+ * enough to look fine is not merely "degraded", and the remedy differs: back
+ * off rather than retry harder.
+ *
+ * It ranks between `degraded` and `reconnecting`. Worse than degraded, because
+ * nothing can be relied on; better than reconnecting, because it does work
+ * sometimes.
+ *
+ * `reconnecting` is a value for the same reason: it is a condition a user asks
+ * about by name — "was I ever connected?" — and it is not `down`, because down
+ * is over and this is in progress.
+ *
+ * `connecting` and `reconnecting` are separate values because a user reads
+ * them differently: the first says be patient, the second says something that
+ * was working just broke. "Was I ever connected?" is the question, and only
+ * `reconnecting` carries evidence that the answer is yes.
+ *
+ *   down > reconnecting > connecting > flapping > degraded > unknown > ok
+ *
+ * `connecting` outranks `flapping` because a flapping link at least serves
+ * some traffic, and outranks nothing above it because a first attempt is
+ * expected rather than broken.
+ */
+export type Health = "ok" | "degraded" | "flapping" | "connecting" | "reconnecting" | "down" | "unknown";
+/**
+ * How well it is working, given that it *is* working.
+ *
+ * Orthogonal to `Health` on purpose. nofilter.io proves the need: a call can
+ * be `connected` and simultaneously "Quality critical", which is why its chip
+ * ends up concatenating two sentences with a separator. Folding quality into
+ * health would force a choice between "up" and "bad" when both are true.
+ */
+export type Quality = "good" | "fair" | "poor" | "unknown";
+export interface StatusItem {
+    id: string;
+    health: Health;
+    /**
+     * Whose problem is it. Only `local` is actionable by this user, which is
+     * what decides whether to offer a fix or an explanation.
+     */
+    scope?: "local" | "remote";
+    /** Ids this depends on. Internet before server, server before media. */
+    dependsOn?: string[];
+    label?: JSX.Element;
+    detail?: JSX.Element;
+    /** Present when the user can do something about it. */
+    onRetry?: () => void;
+    /** Working, but how well. Independent of `health`. */
+    quality?: Quality;
+    /**
+     * Can this recover on its own?
+     *
+     * ICE distinguishes `disconnected` — dropped, may come back — from `failed`,
+     * which will not. That difference decides whether the UI shows a spinner or
+     * a retry button, and collapsing both to `down` loses it.
+     */
+    recoverable?: boolean;
+    /** Mid-transition: connecting, checking, reconnecting. Drives the pulse. */
+    transitioning?: boolean;
+    /**
+     * Has this ever been healthy in this session?
+     *
+     * The difference between "Connecting" and "Reconnecting", which the user
+     * reads very differently: the first says be patient, the second says
+     * something that was working just broke. Same spinner, different sentence.
+     */
+    everHealthy?: boolean;
+    /**
+     * How many times this has flipped recently.
+     *
+     * Flapping is worse than being cleanly down: the connection keeps coming
+     * back just long enough for the app to re-run its reconnect work, and a
+     * chip that says "connected" between flaps is lying about the experience.
+     */
+    recentChanges?: number;
+}
+/** Flips within the window above which a connection is treated as unstable. */
+export declare const FLAPPING_THRESHOLD = 3;
+export interface StatusSummary {
+    /**
+     * The worst health among **causes**, not symptoms.
+     *
+     * Symptoms inherit their severity from what broke them, so counting them
+     * would report the consequence and bury the cause: a server that is
+     * reconnecting takes its media down with it, and "reconnecting" is both
+     * truer and more useful than "down".
+     */
+    health: Health;
+    /** Worst quality among items that are otherwise healthy. */
+    quality: Quality;
+    /**
+     * What to call the attempt in progress, if any.
+     *
+     * `connecting` has never worked; `reconnecting` did and stopped. Answers
+     * "was I ever connected?", which is the question behind the spinner.
+     */
+    attempting?: "connecting" | "reconnecting";
+    /** Flipping repeatedly. Not the same as down, and worse to live with. */
+    flapping: boolean;
+    /** True when the only problems can recover on their own — wait, do not retry. */
+    recovering: boolean;
+    /**
+     * The item to actually tell the user about: the deepest failure whose own
+     * dependencies are healthy. Undefined when everything is `ok`.
+     */
+    cause?: StatusItem;
+    /** Every unhealthy item, worst first — the breakdown behind the summary. */
+    failing: StatusItem[];
+    /** Failures explained by something upstream. Shown as consequences, not causes. */
+    symptoms: StatusItem[];
+}
+/**
+ * Combine many conditions into one.
+ *
+ * `health` is the worst present, so the indicator never looks better than
+ * reality. `cause` is the root: an item is only a cause if everything it
+ * depends on is healthy, which is what stops "camera off" being reported when
+ * the real answer is "no internet".
+ *
+ * Cycles and unknown ids are tolerated — a dependency that is not in the list
+ * counts as healthy, so a partial set still produces a sane answer.
+ */
+export declare function summarizeStatus(input: StatusItem[]): StatusSummary;
+export interface StatusTransition {
+    previous: StatusSummary;
+    current: StatusSummary;
+    /** Items that just became unhealthy. */
+    degraded: StatusItem[];
+    /** Items that just became healthy — what "reconnected" is made of. */
+    recovered: StatusItem[];
+    /** Overall health changed direction. */
+    healthChanged: boolean;
+    /** Quality moved while health stayed put — nofilter's `quality-restored`/`unstable`. */
+    qualityChanged: boolean;
+}
+/**
+ * Diff two summaries into the transition between them.
+ *
+ * Pure, so the caller owns when to run it and how long to show anything. A
+ * transient like "quality restored" is `qualityChanged` plus an improvement,
+ * displayed for a while by whoever is rendering — the model does not hold a
+ * timer, because a timer in a pure function is how you get a status that lies
+ * after a tab has been backgrounded.
+ */
+export declare function diffStatus(previous: StatusSummary, current: StatusSummary, items: {
+    previous: StatusItem[];
+    current: StatusItem[];
+}): StatusTransition;

package/dist/components/status/status.js

@@ -0,0 +1,101 @@
+const RANK = {
+    down: 6,
+    reconnecting: 5,
+    connecting: 4,
+    flapping: 3,
+    degraded: 2,
+    unknown: 1,
+    ok: 0
+};
+const FLAPPING_THRESHOLD = 3;
+const isUnhealthy = (i)=>"ok" !== i.health;
+function summarizeStatus(input) {
+    const items = input.map((i)=>{
+        if ("flapping" === i.health || "reconnecting" === i.health || "connecting" === i.health) return i;
+        if ((i.recentChanges ?? 0) >= FLAPPING_THRESHOLD) return {
+            ...i,
+            health: "flapping"
+        };
+        if (i.transitioning && isUnhealthy(i)) return {
+            ...i,
+            health: i.everHealthy ? "reconnecting" : "connecting"
+        };
+        return i;
+    });
+    const byId = new Map(items.map((i)=>[
+            i.id,
+            i
+        ]));
+    const unhealthy = items.filter(isUnhealthy).sort((a, b)=>RANK[b.health] - RANK[a.health]);
+    const worstQuality = (list)=>{
+        const rank = {
+            poor: 3,
+            fair: 2,
+            unknown: 1,
+            good: 0
+        };
+        return list.reduce((worst, i)=>i.quality && rank[i.quality] > rank[worst] ? i.quality : worst, "good");
+    };
+    const flapping = items.some((i)=>"flapping" === i.health);
+    const attempting = (list)=>{
+        const trying = list.find((i)=>i.transitioning);
+        if (!trying) return;
+        return trying.everHealthy ? "reconnecting" : "connecting";
+    };
+    if (0 === unhealthy.length) return {
+        health: "ok",
+        quality: flapping ? "poor" : worstQuality(items),
+        attempting: attempting(items),
+        flapping,
+        recovering: false,
+        failing: [],
+        symptoms: []
+    };
+    const explainedByUpstream = (item, seen = new Set())=>{
+        if (seen.has(item.id)) return false;
+        seen.add(item.id);
+        return (item.dependsOn ?? []).some((id)=>{
+            const dep = byId.get(id);
+            return dep ? isUnhealthy(dep) : false;
+        });
+    };
+    const causes = unhealthy.filter((i)=>!explainedByUpstream(i));
+    const symptoms = unhealthy.filter((i)=>explainedByUpstream(i));
+    const ranked = [
+        ...causes
+    ].sort((a, b)=>{
+        const byHealth = RANK[b.health] - RANK[a.health];
+        if (0 !== byHealth) return byHealth;
+        const actionable = (i)=>("local" === i.scope ? 1 : 0) + (i.onRetry ? 1 : 0);
+        return actionable(b) - actionable(a);
+    });
+    return {
+        health: ranked[0]?.health ?? unhealthy[0].health,
+        quality: flapping ? "poor" : worstQuality(items.filter((i)=>!isUnhealthy(i))),
+        attempting: attempting(unhealthy),
+        flapping,
+        recovering: unhealthy.every((i)=>false !== i.recoverable) && unhealthy.some((i)=>i.transitioning || i.recoverable),
+        cause: ranked[0],
+        failing: unhealthy,
+        symptoms
+    };
+}
+const QUALITY_RANK = {
+    poor: 3,
+    fair: 2,
+    unknown: 1,
+    good: 0
+};
+function diffStatus(previous, current, items) {
+    const wasUnhealthy = new Set(items.previous.filter(isUnhealthy).map((i)=>i.id));
+    const isNowUnhealthy = new Set(items.current.filter(isUnhealthy).map((i)=>i.id));
+    return {
+        previous,
+        current,
+        degraded: items.current.filter((i)=>isNowUnhealthy.has(i.id) && !wasUnhealthy.has(i.id)),
+        recovered: items.current.filter((i)=>!isNowUnhealthy.has(i.id) && wasUnhealthy.has(i.id)),
+        healthChanged: previous.health !== current.health,
+        qualityChanged: QUALITY_RANK[previous.quality] !== QUALITY_RANK[current.quality]
+    };
+}
+export { FLAPPING_THRESHOLD, diffStatus, summarizeStatus };