@pathscale/ui 2.3.3 → 2.5.0

package/dist/components/button/Button.generated.d.ts

@@ -11,6 +11,22 @@ export type ButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "col
     width?: Width | "square";
     radius?: Radius;
     type?: "button" | "submit" | "reset";
+    /**
+     * Renders an anchor instead of a button, and navigates.
+     *
+     * A link that looks like a button is the single most common thing every
+     * app in the fleet was reaching outside the library for, because `Button`
+     * was a `<button>` and `Link`'s variants are underline treatments rather
+     * than fills. Both spellings existed and neither was this one, so call
+     * sites wrote the raw classes instead.
+     *
+     * It is a real anchor: middle-click, right-click, open-in-new-tab and
+     * "copy link address" all work, which is exactly what a `<button>` with an
+     * onClick handler takes away.
+     */
+    href?: string;
+    target?: JSX.AnchorHTMLAttributes<HTMLAnchorElement>["target"];
+    rel?: string;
     children?: JSX.Element;
 };
 export declare const ButtonLayout: __LayoutComponent<ButtonProps>;

package/dist/components/button/Button.generated.js

@@ -1,71 +1,86 @@
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { Dynamic, createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
 import { defineComponent } from "solid-layouts/application-boundary";
 import "./Button.css";
 import { Show } from "solid-js";
 import { button as external_Button_recipe_js_button } from "./Button.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<button>");
+import { buttonElement, buttonHref, buttonRel } from "./Button.interactions.js";
+var _tmpl$ = /*#__PURE__*/ template("<span>");
 const __solidLayoutButtonLayout = (_stable, p)=>{
     const loading = ()=>"loading" === p.state;
     const inert = ()=>loading() || "disabled" === p.state || Boolean(p.disabled);
-    return (()=>{
-        var _el$ = _tmpl$2();
-        spread(_el$, mergeProps(()=>_stable.slot.root, {
-            get type () {
-                return p.type ?? "button";
-            },
-            get disabled () {
-                return inert();
-            },
-            get ["aria-disabled"] () {
-                return inert() ? "true" : "false";
-            },
-            get ["aria-busy"] () {
-                return loading() ? "true" : void 0;
-            },
-            get ["data-state"] () {
-                return p.state ?? "default";
-            },
-            get ["data-flavor"] () {
-                return p.flavor ?? "primary";
-            }
-        }), false, true);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return loading();
-            },
-            get children () {
-                var _el$2 = _tmpl$();
-                spread(_el$2, mergeProps(()=>_stable.slot.spinner, {
-                    "aria-hidden": "true"
-                }), false, false);
-                return _el$2;
-            }
-        }), null);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return p.startIcon;
-            },
-            get children () {
-                var _el$3 = _tmpl$();
-                spread(_el$3, mergeProps(()=>_stable.slot.startIcon), false, true);
-                insert(_el$3, ()=>p.startIcon);
-                return _el$3;
-            }
-        }), null);
-        insert(_el$, ()=>_stable.children, null);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return p.endIcon;
-            },
-            get children () {
-                var _el$4 = _tmpl$();
-                spread(_el$4, mergeProps(()=>_stable.slot.endIcon), false, true);
-                insert(_el$4, ()=>p.endIcon);
-                return _el$4;
-            }
-        }), null);
-        return _el$;
-    })();
+    const element = ()=>buttonElement(p.href);
+    return createComponent(Dynamic, mergeProps({
+        get component () {
+            return element();
+        }
+    }, ()=>_stable.slot.root, {
+        get type () {
+            return memo(()=>"a" === element())() ? void 0 : p.type ?? "button";
+        },
+        get href () {
+            return buttonHref(p.href, inert());
+        },
+        get target () {
+            return memo(()=>"a" === element())() ? p.target : void 0;
+        },
+        get rel () {
+            return memo(()=>"a" === element())() ? buttonRel(p.rel, p.target) : void 0;
+        },
+        get disabled () {
+            return memo(()=>"a" === element())() ? void 0 : inert();
+        },
+        get ["aria-disabled"] () {
+            return inert() ? "true" : "false";
+        },
+        get ["aria-busy"] () {
+            return loading() ? "true" : void 0;
+        },
+        get ["data-state"] () {
+            return p.state ?? "default";
+        },
+        get ["data-flavor"] () {
+            return p.flavor ?? "primary";
+        },
+        get children () {
+            return [
+                createComponent(Show, {
+                    get when () {
+                        return loading();
+                    },
+                    get children () {
+                        var _el$ = _tmpl$();
+                        spread(_el$, mergeProps(()=>_stable.slot.spinner, {
+                            "aria-hidden": "true"
+                        }), false, false);
+                        return _el$;
+                    }
+                }),
+                createComponent(Show, {
+                    get when () {
+                        return p.startIcon;
+                    },
+                    get children () {
+                        var _el$2 = _tmpl$();
+                        spread(_el$2, mergeProps(()=>_stable.slot.startIcon), false, true);
+                        insert(_el$2, ()=>p.startIcon);
+                        return _el$2;
+                    }
+                }),
+                memo(()=>_stable.children),
+                createComponent(Show, {
+                    get when () {
+                        return p.endIcon;
+                    },
+                    get children () {
+                        var _el$3 = _tmpl$();
+                        spread(_el$3, mergeProps(()=>_stable.slot.endIcon), false, true);
+                        insert(_el$3, ()=>p.endIcon);
+                        return _el$3;
+                    }
+                })
+            ];
+        }
+    }));
 };
 const ButtonLayout = defineComponent({
     recipe: external_Button_recipe_js_button,

package/dist/components/button/Button.interactions.d.ts

@@ -0,0 +1,28 @@
+/**
+ * What `href` decides, as three functions.
+ *
+ * A `.layout.tsx` binds free identifiers to props, so anything with a rule in
+ * it belongs beside the markup rather than inside it. These are also the parts
+ * worth testing, and the repository's tests are pure: there is no DOM in the
+ * suite, by choice.
+ */
+/** An anchor when there is somewhere to go, a button otherwise. */
+export declare const buttonElement: (href: string | undefined) => "a" | "button";
+/**
+ * The destination, unless the control is inert.
+ *
+ * There is no `disabled` on an anchor. Keeping the `href` and refusing the
+ * click leaves it focusable, activatable by Enter, and still offering "open in
+ * new tab" from the context menu - a disabled control that is not disabled.
+ * Removing the attribute is what makes it inert; `aria-disabled` is how it is
+ * announced.
+ */
+export declare const buttonHref: (href: string | undefined, inert: boolean) => string | undefined;
+/**
+ * `rel` for a link, defaulted for new tabs.
+ *
+ * A `target="_blank"` without `noopener` hands the opening document to the
+ * destination. Defaulted rather than forced, so a caller who means `me` or
+ * `nofollow` still gets it.
+ */
+export declare const buttonRel: (rel: string | undefined, target: string | undefined) => string | undefined;

package/dist/components/button/Button.interactions.js

@@ -0,0 +1,4 @@
+const buttonElement = (href)=>"string" == typeof href ? "a" : "button";
+const buttonHref = (href, inert)=>"string" != typeof href || inert ? void 0 : href;
+const buttonRel = (rel, target)=>rel ?? ("_blank" === target ? "noopener noreferrer" : void 0);
+export { buttonElement, buttonHref, buttonRel };

package/dist/components/card/Card.css

@@ -98,16 +98,26 @@
     backdrop-filter: none;
   }
 
-  /* Absorbs GlassPanel. The highlight ring was its `highlight` flag. */
+  /* Absorbs GlassPanel. The highlight ring was its `highlight` flag.
+
+     Every `--glass-*` read below carries a fallback, and that is load-bearing
+     rather than tidy. An undefined custom property does not fall back to its
+     initial value: CSS drops the whole declaration. Three of these were read
+     bare, so a theme that defined twenty-eight of the thirty-one glass tokens
+     got a card with no background at all rather than a plainer one, and the
+     only themes that defined all thirty-one were the two shipped here. Both
+     use `white` for the three colours, so that is what the fallbacks say.
+
+     `src/styles/glass.ts` derives the other twenty-five from three numbers. */
   .card--material-glass {
     --card-bg: color-mix(
       in oklab,
-      var(--glass-background-color),
+      var(--glass-background-color, white),
       transparent calc(100% - var(--glass-background-opacity, 55%))
     );
     --card-border: color-mix(
       in oklab,
-      var(--glass-border-color),
+      var(--glass-border-color, white),
       transparent calc(100% - var(--glass-border-opacity, 12%))
     );
     backdrop-filter: blur(var(--card-glass-blur, var(--glass-blur, 50px)))
@@ -125,7 +135,7 @@
     box-shadow: inset 0 var(--border, 1px) 0 0
       color-mix(
         in oklab,
-        var(--glass-highlight-color),
+        var(--glass-highlight-color, white),
         transparent calc(100% - var(--glass-highlight-opacity, 18%))
       );
   }

package/dist/index.d.ts

@@ -130,3 +130,5 @@ export type { ColorSwatchProps, ColorSwatchShape, ColorSwatchSize, } from "./com
 export { default as ChatBubble } from "./components/chatbubble";
 export { summarizeStatus, diffStatus } from "./components/status";
 export type { Health, Quality, StatusItem, StatusSummary, StatusTransition } from "./components/status";
+export { GLASS_DEFAULTS, GLASS_LIMITS, applyGlassTokens, glassTokensToCss, resolveGlassTokens, } from "./styles/glass";
+export type { GlassMode, GlassTuning } from "./styles/glass";

package/dist/index.js

@@ -73,4 +73,5 @@ export { ListBoxItem, ListBoxItemIndicator, ListBoxSection, default as ListBox }
 export { default as ColorSwatch } from "./components/color-swatch/index.js";
 export { default as ChatBubble } from "./components/chatbubble/index.js";
 export { diffStatus, summarizeStatus } from "./components/status/index.js";
+export { GLASS_DEFAULTS, GLASS_LIMITS, applyGlassTokens, glassTokensToCss, resolveGlassTokens } from "./styles/glass.js";
 export { DEFAULT_GAP as DEFAULT_TOAST_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR as DEFAULT_TOAST_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH, ToastActionButton, ToastCloseButton, ToastContent, ToastDescription, ToastIndicator, ToastProvider, ToastQueue, ToastTitle, index_js_toast as Toast, index_js_toast as toast, toastQueue };

package/dist/layouts.manifest.json

@@ -1,7 +1,7 @@
 {
   "format": "solid-layouts-library-v2",
   "package": "@pathscale/ui",
-  "version": "2.3.3",
+  "version": "2.5.0",
   "components": {
     "Accordion": {
       "kind": "embedded"

package/dist/styles/glass.d.ts

@@ -0,0 +1,89 @@
+/**
+ * Glass, as three numbers instead of thirty-one.
+ *
+ * `material="glass"` is styled by a family of `--glass-*` custom properties.
+ * Both shipped themes declare all of them by hand, which made glass a thing you
+ * inherited rather than a thing you could add: a new theme had to copy
+ * thirty-one values, and three of them are read without a fallback, so a theme
+ * that copied twenty-eight got a card with no background at all rather than a
+ * plainer one. An undefined custom property does not fall back to its initial
+ * value; CSS drops the whole declaration.
+ *
+ * So the set splits in two. Six are colours and stay with the theme, because
+ * only the theme knows what its glass is tinted with. The other twenty-five are
+ * opacities, sizes and blurs, and every one of them is a function of three
+ * numbers:
+ *
+ *   blur        how far the backdrop is smeared, in pixels
+ *   refraction  how much the surface asserts itself: tint, border, highlights
+ *   depth       how far off the page it sits: glows, sheen, shadow
+ *
+ * Adding glass to a theme is now those three numbers and, if it wants them, the
+ * six colours. The curves are lifted from the tuning surface that consulting.parcle.ai
+ * arrived at by eye against this same token vocabulary, so the shipped themes
+ * keep the appearance they already had.
+ */
+export type GlassMode = "light" | "dark";
+/** What a theme sets. Everything else is derived. */
+export type GlassTuning = {
+    /** Backdrop blur radius in pixels. 0 turns glass into a plain translucent fill. */
+    blur: number;
+    /**
+     * How much the surface asserts itself, 0 to 0.4.
+     *
+     * Drives tint, border, highlights and rim together, because they are one
+     * physical property and tuning them separately is how the thirty-one-value
+     * version became unmaintainable.
+     */
+    refraction: number;
+    /** How far off the page it sits, 0 to 30. Drives glows, sheen and shadow. */
+    depth: number;
+};
+export declare const GLASS_LIMITS: {
+    readonly blur: {
+        readonly min: 0;
+        readonly max: 50;
+    };
+    readonly refraction: {
+        readonly min: 0;
+        readonly max: 0.4;
+    };
+    readonly depth: {
+        readonly min: 0;
+        readonly max: 30;
+    };
+};
+/** What the shipped themes use. Both land on the same numbers. */
+export declare const GLASS_DEFAULTS: Record<GlassMode, GlassTuning>;
+/**
+ * The `--glass-*` custom properties three numbers imply.
+ *
+ * Returns only what is derived. The six colours - background, border,
+ * highlight, the two rim stops and the inner glow - are the theme's, and a
+ * theme that sets none of them still renders because the component CSS carries
+ * fallbacks for all six.
+ */
+export declare function resolveGlassTokens(tuning: Partial<GlassTuning>, mode: GlassMode): Record<string, string>;
+/**
+ * Writes the derived tokens onto an element, `:root` by default.
+ *
+ * Inline styles rather than a stylesheet, because this is the layer above the
+ * theme: a theme sets its glass in CSS, and this is for changing it at runtime
+ * without a rebuild - a settings panel, a per-route override, a preview.
+ *
+ * A no-op without a DOM, so it is safe to call during server rendering.
+ */
+export declare function applyGlassTokens(tuning: Partial<GlassTuning>, mode: GlassMode, target?: {
+    style: {
+        setProperty(name: string, value: string): void;
+    };
+}): void;
+/**
+ * The derived tokens as a CSS declaration block, for a theme that wants them
+ * baked in rather than applied at runtime.
+ *
+ * The intended use is a build step or a scratch buffer: paste the output into a
+ * theme file beside its six colours and glass is part of that theme, with no
+ * JavaScript involved.
+ */
+export declare function glassTokensToCss(tuning: Partial<GlassTuning>, mode: GlassMode): string;

package/dist/styles/glass.js

@@ -0,0 +1,103 @@
+const GLASS_LIMITS = {
+    blur: {
+        min: 0,
+        max: 50
+    },
+    refraction: {
+        min: 0,
+        max: 0.4
+    },
+    depth: {
+        min: 0,
+        max: 30
+    }
+};
+const GLASS_DEFAULTS = {
+    light: {
+        blur: 9,
+        refraction: 0.31,
+        depth: 24
+    },
+    dark: {
+        blur: 9,
+        refraction: 0.31,
+        depth: 24
+    }
+};
+const clamp = (value, min, max, fallback)=>{
+    const n = Number(value);
+    return Number.isFinite(n) ? Math.min(max, Math.max(min, n)) : fallback;
+};
+const round = (v, places = 2)=>String(Math.round((v + Number.EPSILON) * 10 ** places) / 10 ** places);
+const pct = (v, places = 2)=>`${round(v, places)}%`;
+const px = (v, places = 2)=>`${round(v, places)}px`;
+function normalise(tuning, mode) {
+    const base = GLASS_DEFAULTS[mode];
+    const blur = clamp(tuning.blur, GLASS_LIMITS.blur.min, GLASS_LIMITS.blur.max, base.blur);
+    const refraction = clamp(tuning.refraction, GLASS_LIMITS.refraction.min, GLASS_LIMITS.refraction.max, base.refraction);
+    const depth = clamp(tuning.depth, GLASS_LIMITS.depth.min, GLASS_LIMITS.depth.max, base.depth);
+    const r = refraction / GLASS_LIMITS.refraction.max;
+    const d = depth / GLASS_LIMITS.depth.max;
+    return {
+        blur,
+        light: "light" === mode,
+        rs: 0 === r ? 0 : r ** 0.82,
+        rv: 0 === r ? 0 : r ** 0.95,
+        ds: 0 === d ? 0 : d ** 0.85,
+        r,
+        d
+    };
+}
+function resolveGlassTokens(tuning, mode) {
+    const v = normalise(tuning, mode);
+    const { rs, rv, ds, light } = v;
+    const zero = 0 === v.r;
+    const background = light ? zero ? 0 : 18 + 30 * rv : 7 * rv;
+    const border = light ? zero ? 0 : 18 + 18 * rs : 26 * rs;
+    const highlight = light ? zero ? 0 : 22 + 26 * rs : 24 * rs;
+    const bottomHighlight = light ? zero ? 0 : 10 + 14 * rs + 5 * ds : 3.5 * rs + 3 * rs * ds;
+    const edgeHighlight = light ? zero ? 0 : 20 + 22 * rs + 4 * ds : 18 * rs + 4 * ds;
+    const rimStart = light ? zero ? 0 : 14 + 18 * rs + 4 * ds : 17 * rs + 3 * ds;
+    const rimEnd = light ? zero ? 0 : 18 + 22 * rs + 4 * ds : 23 * rs + 5 * ds;
+    const innerGlow = light ? 0.035 * rs + 0.045 * rs * ds + 0.012 * ds : 0.055 * rs * ds + 0.018 * ds;
+    const topGlow = light ? 8 * ds * (0.4 + 0.6 * rs) : 6 * ds * (0.35 + 0.65 * rs);
+    const bottomGlow = light ? 9 * ds * (0.25 + 0.65 * rs) : 5 * ds * (0.2 + 0.55 * rs);
+    const sheen = light ? 14 * ds * (0.25 + 0.75 * rs) : 10 * ds * (0.25 + 0.75 * rs);
+    const fallbackBackground = Math.min(70, light ? background + 10 * rs : 8 * background + 12 * rs);
+    const shadow = ds > 0 ? `0 ${px(light ? 5 + 10 * ds : 4 + 10 * ds)} ${px(light ? 20 + 28 * ds : 18 + 26 * ds)} rgb(0 0 0 / ${pct(light ? 2 + 5 * ds : 3 + 7 * ds)})` : "0 0 0 rgb(0 0 0 / 0%)";
+    return {
+        "--glass-blur": px(v.blur, 0),
+        "--glass-saturation": round(1 + 0.18 * rs),
+        "--glass-brightness": "1",
+        "--glass-background-opacity": pct(background),
+        "--glass-border-opacity": pct(border),
+        "--glass-highlight-opacity": pct(highlight),
+        "--glass-bottom-highlight-opacity": pct(bottomHighlight),
+        "--glass-edge-highlight-opacity": pct(edgeHighlight),
+        "--glass-rim-start-opacity": pct(rimStart),
+        "--glass-rim-end-opacity": pct(rimEnd),
+        "--glass-inner-glow-alpha": round(innerGlow, 3),
+        "--glass-inner-glow-blur": px(ds > 0 ? 1 + 3 * ds : 0),
+        "--glass-inner-glow-spread": "0px",
+        "--glass-depth-top-glow-opacity": pct(topGlow),
+        "--glass-depth-bottom-glow-opacity": pct(bottomGlow),
+        "--glass-depth-sheen-opacity": pct(sheen),
+        "--glass-depth-sheen-size": pct(82 - 16 * ds),
+        "--glass-depth-surface-opacity": "0%",
+        "--glass-depth-surface-size": pct(82),
+        "--glass-glow-ring-opacity": pct(light ? 6 * rs : 10 * rs),
+        "--glass-liquid-edge-size": px(1 + 2 * rs),
+        "--glass-liquid-inner-blur": px(6 + 12 * rs),
+        "--glass-shadow-depth": shadow,
+        "--glass-fallback-background-opacity": pct(fallbackBackground)
+    };
+}
+function applyGlassTokens(tuning, mode, target) {
+    const element = target ?? ("u" < typeof document ? void 0 : document.documentElement);
+    if (!element) return;
+    for (const [name, value] of Object.entries(resolveGlassTokens(tuning, mode)))element.style.setProperty(name, value);
+}
+function glassTokensToCss(tuning, mode) {
+    return Object.entries(resolveGlassTokens(tuning, mode)).map(([name, value])=>`  ${name}: ${value};`).join("\n");
+}
+export { GLASS_DEFAULTS, GLASS_LIMITS, applyGlassTokens, glassTokensToCss, resolveGlassTokens };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "2.3.3",
+  "version": "2.5.0",
   "author": "pathscale",
   "repository": {
     "type": "git",