@pathscale/ui 3.0.0 → 3.2.0

package/dist/components/switch/Switch.recipe.d.ts

@@ -1,43 +1,66 @@
-export declare const CLASSES: {
-    readonly base: "switch";
-    readonly slot: {
-        readonly input: "switch__input";
-        readonly control: "switch__control";
-        readonly thumb: "switch__thumb";
-        readonly icon: "switch__icon";
-        readonly content: "switch__content";
-        readonly description: "switch__description";
-    };
-    readonly flavor: {
-        readonly neutral: "switch--flavor-neutral";
-        readonly primary: "switch--flavor-primary";
-        readonly secondary: "switch--flavor-secondary";
-        readonly accent: "switch--flavor-accent";
-        readonly destructive: "switch--flavor-destructive";
-        readonly success: "switch--flavor-success";
-        readonly warning: "switch--flavor-warning";
-        readonly info: "switch--flavor-info";
-    };
-    readonly size: {
-        readonly sm: "switch--sm";
-        readonly md: "switch--md";
-        readonly lg: "switch--lg";
-    };
-    readonly flag: {
-        readonly disabled: "switch--disabled";
-    };
-};
+/**
+ * Presentation, owned here rather than assembled in the component.
+ *
+ * The recipe declared nine empty slots while `Switch.layout.tsx` kept a
+ * `CLASSES` table and built the root's class with `twMerge` over base, size,
+ * flavor and a disabled flag. The slot names it declared did not match what the
+ * component rendered either -- `label` and `switch` were never used, and the
+ * classes lived somewhere else entirely.
+ *
+ * `flavor` and `size` are call-site props. `disabled` is computed from
+ * `props.disabled`, `props.state` and the enclosing group, so it is `state`:
+ * the compiler mirrors it to `data-disabled`, which is what the component was
+ * already setting by hand alongside the class.
+ */
 export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "switch";
+    readonly element: "label";
     readonly slots: {
-        readonly description: {};
-        readonly label: {};
-        readonly root: {};
-        readonly switch: {};
-        readonly "switch-content": {};
-        readonly "switch-control": {};
-        readonly "switch-icon": {};
-        readonly "switch-input": {};
-        readonly "switch-thumb": {};
+        readonly root: {
+            readonly base: "switch";
+        };
+        readonly input: {
+            readonly base: "switch__input";
+        };
+        readonly control: {
+            readonly base: "switch__control";
+        };
+        readonly thumb: {
+            readonly base: "switch__thumb";
+        };
+        readonly icon: {
+            readonly base: "switch__icon";
+        };
+        readonly content: {
+            readonly base: "switch__content";
+        };
+        readonly label: {
+            readonly slot: "label";
+        };
+        readonly description: {
+            readonly base: "switch__description";
+            readonly slot: "description";
+        };
+    };
+    readonly props: {
+        readonly flavor: {
+            readonly neutral: "switch--flavor-neutral";
+            readonly primary: "switch--flavor-primary";
+            readonly secondary: "switch--flavor-secondary";
+            readonly accent: "switch--flavor-accent";
+            readonly destructive: "switch--flavor-destructive";
+            readonly success: "switch--flavor-success";
+            readonly warning: "switch--flavor-warning";
+            readonly info: "switch--flavor-info";
+        };
+        readonly size: {
+            readonly sm: "switch--sm";
+            readonly md: "switch--md";
+            readonly lg: "switch--lg";
+        };
+    };
+    readonly defaults: {
+        readonly flavor: "accent";
+        readonly size: "md";
     };
 }>;

package/dist/components/switch/Switch.recipe.js

@@ -1,97 +1,117 @@
 import { recipe } from "../../lib/layouts/index.js";
-const CLASSES = {
-    base: "switch",
-    slot: {
-        input: "switch__input",
-        control: "switch__control",
-        thumb: "switch__thumb",
-        icon: "switch__icon",
-        content: "switch__content",
-        description: "switch__description"
-    },
-    flavor: {
-        neutral: "switch--flavor-neutral",
-        primary: "switch--flavor-primary",
-        secondary: "switch--flavor-secondary",
-        accent: "switch--flavor-accent",
-        destructive: "switch--flavor-destructive",
-        success: "switch--flavor-success",
-        warning: "switch--flavor-warning",
-        info: "switch--flavor-info"
-    },
-    size: {
-        sm: "switch--sm",
-        md: "switch--md",
-        lg: "switch--lg"
-    },
-    flag: {
-        disabled: "switch--disabled"
-    }
-};
 const componentRecipe = recipe({
     component: "switch",
+    element: "label",
     slots: {
-        description: {},
-        label: {},
-        root: {},
-        switch: {},
-        "switch-content": {},
-        "switch-control": {},
-        "switch-icon": {},
-        "switch-input": {},
-        "switch-thumb": {}
+        root: {
+            base: "switch"
+        },
+        input: {
+            base: "switch__input"
+        },
+        control: {
+            base: "switch__control"
+        },
+        thumb: {
+            base: "switch__thumb"
+        },
+        icon: {
+            base: "switch__icon"
+        },
+        content: {
+            base: "switch__content"
+        },
+        label: {
+            slot: "label"
+        },
+        description: {
+            base: "switch__description",
+            slot: "description"
+        }
+    },
+    props: {
+        flavor: {
+            neutral: "switch--flavor-neutral",
+            primary: "switch--flavor-primary",
+            secondary: "switch--flavor-secondary",
+            accent: "switch--flavor-accent",
+            destructive: "switch--flavor-destructive",
+            success: "switch--flavor-success",
+            warning: "switch--flavor-warning",
+            info: "switch--flavor-info"
+        },
+        size: {
+            sm: "switch--sm",
+            md: "switch--md",
+            lg: "switch--lg"
+        }
+    },
+    defaults: {
+        flavor: "accent",
+        size: "md"
     },
     _layouts: {
         slots: {
-            description: {
-                base: "",
-                axes: {}
-            },
-            label: {
-                base: "",
-                axes: {}
-            },
             root: {
-                base: "",
+                base: "switch",
+                axes: {
+                    flavor: {
+                        neutral: "switch--flavor-neutral",
+                        primary: "switch--flavor-primary",
+                        secondary: "switch--flavor-secondary",
+                        accent: "switch--flavor-accent",
+                        destructive: "switch--flavor-destructive",
+                        success: "switch--flavor-success",
+                        warning: "switch--flavor-warning",
+                        info: "switch--flavor-info"
+                    },
+                    size: {
+                        sm: "switch--sm",
+                        md: "switch--md",
+                        lg: "switch--lg"
+                    }
+                }
+            },
+            input: {
+                base: "switch__input",
                 axes: {}
             },
-            switch: {
-                base: "",
+            control: {
+                base: "switch__control",
                 axes: {}
             },
-            "switch-content": {
-                base: "",
+            thumb: {
+                base: "switch__thumb",
                 axes: {}
             },
-            "switch-control": {
-                base: "",
+            icon: {
+                base: "switch__icon",
                 axes: {}
             },
-            "switch-icon": {
-                base: "",
+            content: {
+                base: "switch__content",
                 axes: {}
             },
-            "switch-input": {
+            label: {
                 base: "",
                 axes: {}
             },
-            "switch-thumb": {
-                base: "",
+            description: {
+                base: "switch__description",
                 axes: {}
             }
         },
         stateKeys: [],
         slotIds: {
-            description: 0,
-            label: 1,
-            root: 2,
-            switch: 3,
-            "switch-content": 4,
-            "switch-control": 5,
-            "switch-icon": 6,
-            "switch-input": 7,
-            "switch-thumb": 8
+            root: 6,
+            input: 4,
+            control: 1,
+            thumb: 7,
+            icon: 3,
+            content: 0,
+            label: 5,
+            description: 2
         }
     }
 });
-export { CLASSES, componentRecipe };
+export { componentRecipe };

package/dist/components/table/MobileListView.generated.js

@@ -23,7 +23,7 @@ const __solidLayoutMobileListView = (_stable, p)=>{
                         get children () {
                             return createComponent(icon, {
                                 get src () {
-                                    return p.emptyIcon ?? "icon-[mdi--inbox-outline]";
+                                    return p.emptyIcon ?? "icon-[lucide--inbox]";
                                 },
                                 width: 24,
                                 height: 24

package/dist/components/text/Text.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Text.css";
-import type { JSX } from "@solidjs/web";
+import { type JSX } from "@solidjs/web";
 import type { UIBaseProps } from "../vocabulary";
 export type TextSize = "xs" | "sm" | "base" | "lg" | "xl";
 export type TextVariant = "default" | "muted" | "subtle" | "success" | "warning" | "danger";
@@ -9,6 +9,16 @@ export type TextTransform = "none" | "uppercase" | "lowercase" | "capitalize";
 export type TextTracking = "normal" | "wide";
 export type TextLeading = "normal" | "none";
 export type TextFamily = "body" | "heading" | "display" | "mono";
+/**
+ * The elements `Text` will render as.
+ *
+ * Deliberately a closed list rather than `keyof JSX.IntrinsicElements`. The
+ * point of the prop is to let a title *be* a heading, and an open list makes
+ * that one option among two hundred, most of which are wrong for a run of
+ * text. Six heading levels, the three neutral containers, and the two
+ * inline emphases that carry meaning of their own.
+ */
+export type TextAs = "span" | "p" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "strong" | "em";
 export type TextRootProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "color"> & UIBaseProps & {
     size?: TextSize;
     variant?: TextVariant;
@@ -17,6 +27,21 @@ export type TextRootProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "color"> &
     tracking?: TextTracking;
     leading?: TextLeading;
     family?: TextFamily;
+    /**
+     * The element this text is.
+     *
+     * `span` by default, which is what it has always been and what a run of
+     * text inside a sentence should stay. Reach for this whenever the text is
+     * structural: `as="h1"` for a page title, `as="h2"` for a section, `as="p"`
+     * for a paragraph.
+     *
+     * `family="heading"` is a *typeface*: it says which face to set the text
+     * in, and it has never said anything about the document. Sites read the
+     * two as one thing and styled titles that were not headings, so entire
+     * pages, landing pages included, had no heading of any role on them and no
+     * way for a reader to move between sections. This is the axis that says so.
+     */
+    as?: TextAs;
     children?: JSX.Element;
 };
 declare const TextRoot: __LayoutComponent<TextRootProps>;

package/dist/components/text/Text.generated.js

@@ -1,19 +1,18 @@
-import { insert, mergeProps, spread, template } from "@solidjs/web";
+import { Dynamic, createComponent, mergeProps } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Text.css";
 import { omit } from "solid-js";
-import { twMerge } from "../../lib/twMerge.js";
-import { CLASSES, componentRecipe } from "./Text.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<span>");
+import { componentRecipe } from "./Text.recipe.js";
 const __solidLayoutTextRoot = (_stable, p)=>{
-    const others = omit(p, "children", "class", "dataTheme", "style", "size", "variant", "weight", "transform", "tracking", "leading", "family");
+    const others = omit(p, "children", "class", "dataTheme", "style", "size", "variant", "weight", "transform", "tracking", "leading", "family", "as");
     const size = ()=>p.size ?? "base";
     const variant = ()=>p.variant ?? "default";
-    var _el$ = _tmpl$();
-    spread(_el$, mergeProps(others, ()=>({
-            class: twMerge(CLASSES.base, p.class)
-        }), {
-        "data-slot": "text",
+    const tag = ()=>p.as ?? "span";
+    return createComponent(Dynamic, mergeProps({
+        get component () {
+            return tag();
+        }
+    }, others, ()=>_stable.slot.root, {
         get ["data-size"] () {
             return size();
         },
@@ -40,10 +39,11 @@ const __solidLayoutTextRoot = (_stable, p)=>{
         },
         get style () {
             return p.style;
+        },
+        get children () {
+            return p.children;
         }
-    }), true);
-    insert(_el$, ()=>p.children);
-    return _el$;
+    }));
 };
 const TextRoot = defineComponent({
     recipe: componentRecipe,
@@ -57,6 +57,7 @@ const TextRoot = defineComponent({
         "tracking",
         "leading",
         "family",
+        "as",
         "children"
     ]
 });

package/dist/components/text/Text.recipe.d.ts

@@ -1,10 +1,22 @@
-export declare const CLASSES: {
-    readonly base: "text";
-};
+/**
+ * The root class, owned here.
+ *
+ * Text's presentation axes stay `data-*` attributes rather than becoming recipe
+ * `props`, and deliberately: `Text.css` selects on `[data-size]`, `[data-variant]`
+ * and the rest, so turning them into recipe props would emit classes nothing
+ * styles. Recipe `props` map a value to a class; these map a value to an
+ * attribute, which is what `state` is for -- except these are set at the call
+ * site, not computed.
+ *
+ * So the only thing that was manual here is the base class, and that is what
+ * moves: the layout spreads `{...slot.root}` instead of calling `twMerge`.
+ */
 export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "text";
+    readonly element: "span";
     readonly slots: {
-        readonly root: {};
-        readonly text: {};
+        readonly root: {
+            readonly base: "text";
+        };
     };
 }>;

package/dist/components/text/Text.recipe.js

@@ -1,29 +1,23 @@
 import { recipe } from "../../lib/layouts/index.js";
-const CLASSES = {
-    base: "text"
-};
 const componentRecipe = recipe({
     component: "text",
+    element: "span",
     slots: {
-        root: {},
-        text: {}
+        root: {
+            base: "text"
+        }
     },
     _layouts: {
         slots: {
             root: {
-                base: "",
-                axes: {}
-            },
-            text: {
-                base: "",
+                base: "text",
                 axes: {}
             }
         },
         stateKeys: [],
         slotIds: {
-            root: 0,
-            text: 1
+            root: 0
         }
     }
 });
-export { CLASSES, componentRecipe };
+export { componentRecipe };

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

@@ -1 +1 @@
-export { default, Text, type TextFamily, type TextLeading, type TextProps, TextRoot, type TextRootProps, type TextSize, type TextTracking, type TextTransform, type TextVariant, type TextWeight, } from "./Text.generated";
+export { default, Text, type TextAs, type TextFamily, type TextLeading, type TextProps, TextRoot, type TextRootProps, type TextSize, type TextTracking, type TextTransform, type TextVariant, type TextWeight, } from "./Text.generated";

package/dist/components/theme-color-picker/ThemeColorPicker.generated.js

@@ -141,7 +141,7 @@ const __solidLayoutThemeColorPicker = (_stable, p)=>{
                 },
                 get children () {
                     return p.children ?? createComponent(icon, mergeProps({
-                        src: "icon-[mdi--palette]",
+                        src: "icon-[lucide--palette]",
                         width: 16,
                         height: 16
                     }, ()=>({

package/dist/hooks/connection/createConnectionSettings.d.ts

@@ -0,0 +1,128 @@
+import type { Accessor } from "solid-js";
+/**
+ * Where an application points itself, and how that survives a reload.
+ *
+ * Every property in this family ships a "connection settings" page: a toggle,
+ * one or more backend URLs, an app id, and a save that reconfigures the
+ * transport. Six of them had written it separately, in two different shapes and
+ * with different bugs, which is what this replaces.
+ *
+ * The storage model is per-endpoint rather than global. Four sites had a single
+ * `useCustomUrl` covering every backend at once; two had already grown a flag
+ * per backend, because pointing the API at a local instance while leaving auth
+ * on production is the ordinary case. Per-endpoint is the shape that covers
+ * both, and {@link ConnectionSettingsStore.setUseCustom} flips them together
+ * for a page that only wants one switch.
+ */
+export interface ConnectionEndpoint {
+    /** Stable key. Names the value in storage and in {@link ConnectionSettingsStore.urls}. */
+    name: string;
+    /** The address used whenever this endpoint's override is off. */
+    fallback: string;
+    /**
+     * Reject an address before it is saved. Return a message to refuse it, or
+     * nothing to accept.
+     *
+     * Defaults to {@link isAbsoluteUrl}: the value has to parse as an absolute
+     * URL. That is deliberately weak, because this hook does not know what a
+     * given endpoint speaks. An endpoint that knows should say so -- a WebSocket
+     * transport handed `http://…` fails at connect time, long after the page
+     * that could have explained it has gone.
+     */
+    validate?: (url: string) => string | undefined;
+}
+/** What {@link ConnectionSettingsStore.apply} hands to `onApply`. */
+export interface ConnectionSettingsApplied {
+    /** Resolved per endpoint, overrides taken into account. Never empty. */
+    urls: Readonly<Record<string, string>>;
+    appPublicId: string;
+    /** Which endpoints the resolved address came from an override for. */
+    overrides: Readonly<Record<string, boolean>>;
+}
+/**
+ * Whether a bracketed host is an IPv6 literal.
+ *
+ * `https://[1:2:3]` is not an address, and a character class of hex digits and
+ * colons said it was. This is the shape the URL Standard describes: eight
+ * 16-bit groups, or fewer with exactly one `::` standing for the run of zeroes
+ * it elides, optionally ending in a dotted IPv4 form.
+ *
+ * Written out rather than folded into one pattern because the `::` rule is a
+ * count, not a shape: each half has to parse, and together they have to leave
+ * at least one group for the `::` to stand for.
+ */
+export declare const isIpv6Literal: (host: string) => boolean;
+export declare const isAbsoluteUrl: (url: string) => string | undefined;
+export interface ConnectionSettingsOptions {
+    /** `localStorage` key. Namespace it per application; two apps on one origin would collide. */
+    storageKey: string;
+    endpoints: readonly ConnectionEndpoint[];
+    /** The application's own id, when it has one. Stored alongside the URLs. */
+    appPublicId?: string;
+    /**
+     * Run after a successful save or reset, with everything that was applied.
+     *
+     * This is where an application reconfigures its transport. It is awaited, so
+     * `isApplying` covers the reconnect rather than just the write.
+     *
+     * It receives the whole applied state, not only the URLs: a site that stores
+     * an app id here reconfigures its identity from the same call, and passing
+     * the URLs alone left it reaching back into the store it had just handed to
+     * this hook.
+     */
+    onApply?: (applied: ConnectionSettingsApplied) => void | Promise<void>;
+}
+export interface ConnectionSettingsState {
+    /** Per endpoint: is the override in use. Absent means no. */
+    overrides: Record<string, boolean>;
+    /** Per endpoint: the address to use when its override is on. */
+    urls: Record<string, string>;
+    appPublicId: string;
+}
+export interface ConnectionSettingsStore {
+    /** What is stored, override flags included. Read this to populate a form. */
+    readonly state: ConnectionSettingsState;
+    /**
+     * The address for each endpoint after overrides are applied. This is what a
+     * transport should read; it never contains an empty string.
+     */
+    readonly urls: Readonly<Record<string, string>>;
+    /** The address each endpoint falls back to, by name. What "not overridden" means. */
+    readonly fallbacks: Readonly<Record<string, string>>;
+    /** True while `onApply` is in flight. */
+    readonly isApplying: boolean;
+    /** Nothing has been overridden and the app id is untouched. */
+    readonly isAtDefaults: boolean;
+    /** True when this endpoint is overridden. */
+    isOverridden(name: string): boolean;
+    /**
+     * Why this address cannot be saved for this endpoint, or `undefined` if it
+     * can. Empty is always refused; beyond that the endpoint's own `validate`
+     * decides, defaulting to {@link isAbsoluteUrl}.
+     *
+     * A settings page is the last place able to explain a bad address. Saved
+     * unchecked, the value survives a failed reconnect and is still there on the
+     * next launch, with nothing on screen saying why nothing connects.
+     */
+    validate(name: string, url: string): string | undefined;
+    /**
+     * Set an endpoint's override.
+     *
+     * Returns the reason it was refused, or `undefined` when it was stored. A
+     * value written here becomes an active, persisted override, so it has to
+     * pass the same check {@link ConnectionSettingsStore.validate} applies;
+     * an invalid one is not stored at all. Keep it as a draft in the UI instead.
+     */
+    setUrl(name: string, url: string): string | undefined;
+    setOverride(name: string, on: boolean): void;
+    /** Flip every endpoint together, for a page with one switch. */
+    setUseCustom(on: boolean): void;
+    setAppPublicId(id: string): void;
+    /** Drop every override and forget the stored copy. Does not apply. */
+    reset(): void;
+    /** Persist, then hand the resolved addresses to `onApply`. */
+    apply(): Promise<void>;
+    /** For a component that wants to track the state rather than read it once. */
+    state$: Accessor<ConnectionSettingsState>;
+}
+export declare const createConnectionSettings: (options: ConnectionSettingsOptions) => ConnectionSettingsStore;