@pathscale/ui 2.7.3 → 2.8.0

package/dist/components/flex-grid/FlexGrid.css

@@ -0,0 +1,36 @@
+/*
+ * FlexGrid: a list that starts short and grows.
+ *
+ * Deliberately almost bare. The rows are the consumer's, and the one thing this
+ * component owns visually is the scroll container that `onScroll` reads: it has
+ * to actually scroll, or the reveal never triggers.
+ */
+
+.flex-grid {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+}
+
+/*
+ * `overflow-y: auto` is load-bearing, not decoration. `onScroll` measures
+ * `scrollTop` against `scrollHeight` on this element, and an element that does
+ * not scroll reports the two as equal forever, so nothing is ever revealed.
+ */
+.flex-grid__list {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.flex-grid__more {
+  flex: none;
+  align-self: center;
+}
+
+.flex-grid__status {
+  flex: none;
+}

package/dist/components/flex-grid/FlexGrid.generated.d.ts

@@ -0,0 +1,36 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import "./FlexGrid.css";
+interface FlexGridProps<T> extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
+    class?: string;
+    /** Everything there is, in the order it should appear. */
+    rows: readonly T[];
+    /** One row. */
+    children: (row: T, index: () => number) => JSX.Element;
+    /** How many rows to build up front, and how many each reveal adds. */
+    pageSize?: number;
+    /**
+     * Reveal from the end rather than the start: a log or a transcript, whose
+     * useful rows are the last ones and whose "more" means *earlier*.
+     */
+    fromEnd?: boolean;
+    /**
+     * Reveal more as the reader scrolls, without them having to ask. On by
+     * default, because it is what a list of this shape is expected to do.
+     */
+    autoLoad?: boolean;
+    /**
+     * The control that reveals the next page, given the count so it can say how
+     * many are coming. Omit it to rely on scrolling alone.
+     */
+    more?: (props: {
+        count: number;
+        remaining: number;
+        reveal: () => void;
+    }) => JSX.Element;
+    /** Shown in place of the list when there is nothing at all. */
+    empty?: JSX.Element;
+}
+declare const FlexGridRoot: __LayoutComponent<FlexGridProps<unknown>>;
+export { FlexGridRoot };
+export type { FlexGridProps };

package/dist/components/flex-grid/FlexGrid.generated.js

@@ -0,0 +1,91 @@
+import { createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
+import { For, Show, omit } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
+import { CLASSES, componentRecipe } from "./FlexGrid.recipe.js";
+import "./FlexGrid.css";
+import { createFlexGrid } from "./createFlexGrid.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<div><!><!><!>");
+const __solidLayoutFlexGridRoot = (_stable, p)=>{
+    const others = omit(p, "class", "rows", "children", "pageSize", "fromEnd", "autoLoad", "more", "empty");
+    const grid = createFlexGrid({
+        rows: ()=>p.rows,
+        pageSize: p.pageSize,
+        fromEnd: p.fromEnd
+    });
+    const autoLoad = ()=>p.autoLoad ?? true;
+    const moreControl = ()=>p.more?.({
+            count: grid.nextCount(),
+            remaining: grid.remaining(),
+            reveal: grid.revealMore
+        });
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.base, p.class)
+        }), {
+        "data-slot": "root"
+    }), true);
+    insert(_el$, createComponent(Show, {
+        get when () {
+            return p.rows.length > 0;
+        },
+        get fallback () {
+            return p.empty;
+        },
+        get children () {
+            var _el$2 = _tmpl$2(), _el$5 = _el$2.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$6.nextSibling;
+            spread(_el$2, mergeProps(()=>({
+                    class: CLASSES.slot.list
+                }), {
+                "data-slot": "flex-grid-list",
+                onScroll: (event)=>{
+                    if (autoLoad()) grid.onScroll(event);
+                }
+            }), true);
+            insert(_el$2, createComponent(Show, {
+                get when () {
+                    return memo(()=>!!(p.fromEnd && grid.hasMore()))() ? p.more : p.fromEnd && grid.hasMore();
+                },
+                get children () {
+                    var _el$3 = _tmpl$();
+                    spread(_el$3, mergeProps(()=>({
+                            class: CLASSES.slot.more
+                        }), {
+                        "data-slot": "flex-grid-more"
+                    }), true);
+                    insert(_el$3, moreControl);
+                    return _el$3;
+                }
+            }), _el$5);
+            insert(_el$2, createComponent(For, {
+                get each () {
+                    return grid.visible();
+                },
+                children: (row, index)=>p.children(row, index)
+            }), _el$6);
+            insert(_el$2, createComponent(Show, {
+                get when () {
+                    return memo(()=>!!(!p.fromEnd && grid.hasMore()))() ? p.more : !p.fromEnd && grid.hasMore();
+                },
+                get children () {
+                    var _el$4 = _tmpl$();
+                    spread(_el$4, mergeProps(()=>({
+                            class: CLASSES.slot.more
+                        }), {
+                        "data-slot": "flex-grid-more"
+                    }), true);
+                    insert(_el$4, moreControl);
+                    return _el$4;
+                }
+            }), _el$7);
+            return _el$2;
+        }
+    }));
+    return _el$;
+};
+const FlexGridRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutFlexGridRoot,
+    embedded: true
+});
+export { FlexGridRoot };

package/dist/components/flex-grid/FlexGrid.recipe.d.ts

@@ -0,0 +1,15 @@
+export declare const CLASSES: {
+    readonly base: "flex-grid";
+    readonly slot: {
+        readonly list: "flex-grid__list";
+        readonly more: "flex-grid__more";
+    };
+};
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
+    readonly component: "flex-grid";
+    readonly slots: {
+        readonly root: {};
+        readonly "flex-grid-list": {};
+        readonly "flex-grid-more": {};
+    };
+}>;

package/dist/components/flex-grid/FlexGrid.recipe.js

@@ -0,0 +1,39 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "flex-grid",
+    slot: {
+        list: "flex-grid__list",
+        more: "flex-grid__more"
+    }
+};
+const componentRecipe = recipe({
+    component: "flex-grid",
+    slots: {
+        root: {},
+        "flex-grid-list": {},
+        "flex-grid-more": {}
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "",
+                axes: {}
+            },
+            "flex-grid-list": {
+                base: "",
+                axes: {}
+            },
+            "flex-grid-more": {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 2,
+            "flex-grid-list": 0,
+            "flex-grid-more": 1
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/flex-grid/createFlexGrid.d.ts

@@ -0,0 +1,69 @@
+import { type Accessor } from "solid-js";
+/**
+ * Incremental reveal for a long list: render N, reveal more on demand.
+ *
+ * This is not `createDataGrid`. That one is discrete pagination — page 3 of 12,
+ * with the reader moving between fixed windows. This is the other shape: one
+ * continuous list that starts short and grows, which is what a feed, a log or an
+ * item list wants. Both exist because neither can be spelled as the other
+ * without lying to the reader about where they are.
+ *
+ * The cost this removes is construction, not data. A list of 700 rows where 20
+ * are visible still builds 700 subtrees, and in a component library each of
+ * those rows is a handful of instances rather than one element. The consuming
+ * application measured a 40-row log at 122-178ms of a 203-339ms panel build for
+ * exactly this reason.
+ *
+ * Headless on purpose: the reveal rule is the part worth testing and the part
+ * every consumer shares, while the markup is the part each one wants to own.
+ */
+export interface CreateFlexGridOptions<T> {
+    /** Everything there is, in the order it should appear. */
+    rows: Accessor<readonly T[]>;
+    /**
+     * How many rows to build up front, and how many each reveal adds.
+     *
+     * Twenty by default, which covers a typical viewport without building a
+     * screenful of rows nobody scrolls to.
+     */
+    pageSize?: number;
+    /**
+     * Reveal from the end rather than the start.
+     *
+     * A task log or a transcript is read newest-first: its useful rows are the
+     * last ones, so the first page should be the tail and "more" should mean
+     * *earlier*. A to-do list is the opposite. Defaults to `false`.
+     */
+    fromEnd?: boolean;
+}
+export interface FlexGridModel<T> {
+    /** The rows to render now. */
+    visible: Accessor<T[]>;
+    /** How many rows exist in total, revealed or not. */
+    total: Accessor<number>;
+    /** How many are still hidden. */
+    remaining: Accessor<number>;
+    /** Whether anything is left to reveal. */
+    hasMore: Accessor<boolean>;
+    /** How many the next reveal will add: the page size, or whatever is left. */
+    nextCount: Accessor<number>;
+    /** Reveal one more page. A no-op once everything is visible. */
+    revealMore(): void;
+    /** Reveal everything at once. */
+    revealAll(): void;
+    /** Back to a single page. */
+    reset(): void;
+    /**
+     * Handle a scroll event from the element that owns the scrollbar.
+     *
+     * A scroll listener rather than an `IntersectionObserver` sentinel, and that
+     * is deliberate rather than dated: consumers of this library do not all run in
+     * a browser engine that has observers. One of them renders through Blitz,
+     * where `IntersectionObserver`, `ResizeObserver` and `MutationObserver` are
+     * all absent, so a sentinel would never intersect, `revealMore` would never
+     * fire, and the list would silently stop at its first page with no error to
+     * explain it. A `scroll` event is the one signal every target has.
+     */
+    onScroll(event: Event): void;
+}
+export declare function createFlexGrid<T>(options: CreateFlexGridOptions<T>): FlexGridModel<T>;

package/dist/components/flex-grid/createFlexGrid.js

@@ -0,0 +1,44 @@
+import { createMemo, createSignal } from "solid-js";
+const SCROLL_THRESHOLD = 120;
+function createFlexGrid(options) {
+    const pageSize = Math.max(1, options.pageSize ?? 20);
+    const [limit, setLimit] = createSignal(pageSize);
+    const total = createMemo(()=>options.rows().length);
+    const visible = createMemo(()=>{
+        const all = options.rows();
+        const count = Math.min(limit(), all.length);
+        return options.fromEnd ? all.slice(all.length - count) : all.slice(0, count);
+    });
+    const remaining = createMemo(()=>Math.max(0, total() - visible().length));
+    const hasMore = createMemo(()=>remaining() > 0);
+    const nextCount = createMemo(()=>Math.min(pageSize, remaining()));
+    const revealMore = ()=>{
+        if (!hasMore()) return;
+        setLimit((current)=>current + pageSize);
+    };
+    const revealAll = ()=>{
+        setLimit(total());
+    };
+    const reset = ()=>{
+        setLimit(pageSize);
+    };
+    const onScroll = (event)=>{
+        if (!hasMore()) return;
+        const element = event.currentTarget;
+        if (!element) return;
+        const atEdge = options.fromEnd ? element.scrollTop <= SCROLL_THRESHOLD : element.scrollHeight - element.scrollTop - element.clientHeight <= SCROLL_THRESHOLD;
+        if (atEdge) revealMore();
+    };
+    return {
+        visible,
+        total,
+        remaining,
+        hasMore,
+        nextCount,
+        revealMore,
+        revealAll,
+        reset,
+        onScroll
+    };
+}
+export { createFlexGrid };

package/dist/components/flex-grid/index.d.ts

@@ -0,0 +1,9 @@
+import { FlexGridRoot } from "./FlexGrid.generated";
+declare const FlexGrid: import("solid-js").Component<import("./FlexGrid.generated").FlexGridProps<unknown>> & {
+    Root: import("solid-js").Component<import("./FlexGrid.generated").FlexGridProps<unknown>>;
+};
+export default FlexGrid;
+export { FlexGrid, FlexGridRoot };
+export type { FlexGridProps } from "./FlexGrid.generated";
+export { createFlexGrid } from "./createFlexGrid";
+export type { CreateFlexGridOptions, FlexGridModel } from "./createFlexGrid";

package/dist/components/flex-grid/index.js

@@ -0,0 +1,8 @@
+import { FlexGridRoot } from "./FlexGrid.generated.js";
+const FlexGrid = Object.assign(FlexGridRoot, {
+    Root: FlexGridRoot
+});
+const flex_grid = FlexGrid;
+export { createFlexGrid } from "./createFlexGrid.js";
+export default flex_grid;
+export { FlexGrid, FlexGridRoot };

package/dist/index.d.ts

@@ -44,6 +44,8 @@ export { Empty, type EmptyProps } from "./components/empty";
 export type { FieldGroupProps, FieldsetActionsProps, FieldsetLegendProps, FieldsetProps, FieldsetRootProps, } from "./components/fieldset";
 export { default as Fieldset, FieldGroup, FieldsetActions, FieldsetLegend, } from "./components/fieldset";
 export { default as Flex } from "./components/flex";
+export type { CreateFlexGridOptions, FlexGridModel, FlexGridProps } from "./components/flex-grid";
+export { createFlexGrid, default as FlexGrid } from "./components/flex-grid";
 export type { FooterProps, FooterTitleProps } from "./components/footer";
 export { default as Footer } from "./components/footer";
 export type { FieldErrorMessageProps, FormFieldProps, FormProps, FormRootProps, FormSubmitButtonProps, FormWithContextProps, } from "./components/form";

package/dist/index.js

@@ -29,6 +29,7 @@ export { default as Dropdown } from "./components/dropdown/index.js";
 export { Empty } from "./components/empty/index.js";
 export { FieldGroup, FieldsetActions, FieldsetLegend, default as Fieldset } from "./components/fieldset/index.js";
 export { default as Flex } from "./components/flex/index.js";
+export { createFlexGrid, default as FlexGrid } from "./components/flex-grid/index.js";
 export { default as Footer } from "./components/footer/index.js";
 export { FormField, FormSubmitButton, FormWithContext, default as Form } from "./components/form/index.js";
 export { GlowCard } from "./components/glow-card/index.js";

package/dist/layouts.manifest.json

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

package/dist/purge-manifest.json

@@ -11410,6 +11410,34 @@
         "referenced": []
       }
     },
+    "FlexGrid": {
+      "key": "FlexGrid",
+      "component": "FlexGrid",
+      "classes": {
+        "always": [],
+        "byProp": {
+          "slot": {
+            "list": [],
+            "more": []
+          }
+        }
+      },
+      "attributeSelectors": [],
+      "selectors": [
+        ".flex-grid",
+        ".flex-grid__list",
+        ".flex-grid__more",
+        ".flex-grid__status"
+      ],
+      "cssVars": {
+        "declared": [],
+        "referenced": []
+      },
+      "keyframes": {
+        "declared": [],
+        "referenced": []
+      }
+    },
     "Drawer.Root": {
       "key": "Drawer.Root",
       "component": "Drawer",
@@ -24172,6 +24200,30 @@
           "Fieldset.Root"
         ]
       },
+      {
+        "selector": ".flex-grid",
+        "components": [
+          "FlexGrid"
+        ]
+      },
+      {
+        "selector": ".flex-grid__list",
+        "components": [
+          "FlexGrid"
+        ]
+      },
+      {
+        "selector": ".flex-grid__more",
+        "components": [
+          "FlexGrid"
+        ]
+      },
+      {
+        "selector": ".flex-grid__status",
+        "components": [
+          "FlexGrid"
+        ]
+      },
       {
         "selector": ".flex-layout",
         "components": [

package/dist/styles/glass.js

@@ -61,7 +61,7 @@ function resolveGlassTokens(tuning, mode) {
     const { rs, rv, ds, light } = v;
     const zero = 0 === v.r;
     const controlTint = v.controlTint;
-    const background = light ? zero ? 0 : 18 + 30 * rv : 7 * rv;
+    const background = light ? zero ? 0 : 18 + 30 * rv : zero ? 0 : 4 + 22 * 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;
@@ -69,11 +69,11 @@ function resolveGlassTokens(tuning, mode) {
     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 topGlow = light ? 8 * ds * (0.4 + 0.6 * rs) : 13 * ds * (0.35 + 0.65 * rs);
+    const bottomGlow = light ? 9 * ds * (0.25 + 0.65 * rs) : 10 * ds * (0.2 + 0.55 * rs);
+    const sheen = light ? 14 * ds * (0.25 + 0.75 * rs) : 20 * 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%)";
+    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 : 8 + 22 * ds)})` : "0 0 0 rgb(0 0 0 / 0%)";
     return {
         "--glass-blur": px(v.blur, 0),
         "--glass-saturation": round(1 + 0.18 * rs),

package/package.json

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