@smwb/ui-solid 0.4.1 → 0.6.0

package/dist/assets/styles/less/components/assetGrid/assetGrid.entry.css

@@ -0,0 +1 @@
+.smwb-asset-grid{position:relative;overflow-y:auto;width:100%}.smwb-asset-grid__empty{display:flex;align-items:center;justify-content:center;padding:32px 16px;color:var(--smui-onSurfaceColor);opacity:.7}.smwb-asset-grid__skeleton{border-radius:8px;background-color:var(--smui-surfaceVariant);animation:smwb-asset-grid-pulse 1.4s ease-in-out infinite}@keyframes smwb-asset-grid-pulse{0%,to{opacity:1}50%{opacity:.5}}

package/dist/assets/styles/less/components/chipGroup/chipGroup.entry.css

@@ -0,0 +1 @@
+.smwb-chip-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

package/dist/assets/styles/less/components/lazyImage/lazyImage.entry.css

@@ -0,0 +1 @@
+.smwb-lazy-image{display:block;position:relative;overflow:hidden;width:100%;height:100%}.smwb-lazy-image__img{display:block;width:100%;height:100%;object-fit:cover}.smwb-lazy-image__fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--smui-onSurfaceColor);background-color:var(--smui-surfaceVariant)}

package/dist/assets/styles/less/components/overflowMenu/overflowMenu.entry.css

@@ -0,0 +1 @@
+.smwb-overflow-menu{display:inline-flex}.smwb-overflow-menu__item--danger{color:var(--smui-errorColor)}

package/dist/assets/styles/less/components/saveAssetDialog/saveAssetDialog.entry.css

@@ -0,0 +1 @@
+.smwb-save-asset-dialog__body{display:flex;flex-direction:column;gap:12px;min-width:280px}.smwb-save-asset-dialog__preview{display:flex;justify-content:center;align-items:center;border-radius:8px;overflow:hidden;background-color:var(--smui-surfaceVariant)}.smwb-save-asset-dialog__preview img{max-width:100%;max-height:200px;object-fit:contain}

package/dist/assets/styles/less/components/sheet/sheet.entry.css

@@ -1 +1 @@
-.smwb-sheet{background-color:var(--smui-surfaceBackground);position:fixed;opacity:0;transition:all .2s ease-in-out;box-shadow:#00000024 0 8px 10px -5px,#00000024 0 1px 14px 1px,#00000024 0 6px 22px 4px;z-index:100;padding:10px 20px 20px;overflow:hidden;display:flex;max-width:100vw}.smwb-sheet__header{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;gap:4px;padding-bottom:5px}.smwb-sheet__header .smwb-button{min-width:0}.smwb-sheet__drag-handle{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1;touch-action:none;user-select:none}.smwb-sheet__drag-handle:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:-2px}.smwb-sheet__drag-handle-bar{display:block;border-radius:999px;background-color:var(--smui-onSurfaceVariant);opacity:.4;transition:opacity .15s ease-in-out}.smwb-sheet__drag-handle:hover .smwb-sheet__drag-handle-bar,.smwb-sheet__drag-handle:active .smwb-sheet__drag-handle-bar{opacity:.7}.smwb-sheet_resizable.smwb-bottom{padding-top:20px}.smwb-sheet_resizable.smwb-top{padding-bottom:20px}.smwb-sheet_resizable.smwb-left{padding-right:20px}.smwb-sheet_resizable.smwb-right{padding-left:20px}.smwb-sheet.smwb-bottom .smwb-sheet__drag-handle,.smwb-sheet.smwb-top .smwb-sheet__drag-handle{left:0;right:0;height:20px;cursor:ns-resize}.smwb-sheet.smwb-bottom .smwb-sheet__drag-handle .smwb-sheet__drag-handle-bar,.smwb-sheet.smwb-top .smwb-sheet__drag-handle .smwb-sheet__drag-handle-bar{width:36px;height:4px}.smwb-sheet.smwb-bottom .smwb-sheet__drag-handle{top:0}.smwb-sheet.smwb-top .smwb-sheet__drag-handle{bottom:0}.smwb-sheet.smwb-left .smwb-sheet__drag-handle,.smwb-sheet.smwb-right .smwb-sheet__drag-handle{top:0;bottom:0;width:20px;cursor:ew-resize}.smwb-sheet.smwb-left .smwb-sheet__drag-handle .smwb-sheet__drag-handle-bar,.smwb-sheet.smwb-right .smwb-sheet__drag-handle .smwb-sheet__drag-handle-bar{width:4px;height:36px}.smwb-sheet.smwb-right .smwb-sheet__drag-handle{left:0}.smwb-sheet.smwb-left .smwb-sheet__drag-handle{right:0}.smwb-sheet__inner{display:flex;flex-direction:column;height:100%;width:100%;overflow-y:auto}.smwb-sheet.smwb-bottom{border-radius:28px 28px 0 0;bottom:0;left:0;width:100%;height:var(--sizeProp);transform:translateY(100%);flex-direction:column}.smwb-sheet.smwb-bottom .smwb-sheet__header{width:100%}.smwb-sheet.smwb-top{border-radius:0 0 28px 28px;top:0;left:0;width:100%;height:var(--sizeProp);transform:translateY(-100%);flex-direction:column}.smwb-sheet.smwb-top .smwb-sheet__header{width:100%}.smwb-sheet.smwb-left{border-radius:0 28px 28px 0;top:0;left:0;height:100%;width:var(--sizeProp);transform:translate(-100%);flex-direction:row-reverse}.smwb-sheet.smwb-left .smwb-sheet__header{flex-direction:column;height:100%;padding-left:10px}.smwb-sheet.smwb-right{border-radius:28px 0 0 28px;top:0;right:0;height:100%;width:var(--sizeProp);transform:translate(100%)}.smwb-sheet.smwb-right .smwb-sheet__header{flex-direction:column;height:100%}.smwb-sheet__overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;z-index:100;opacity:0;transition:all .25s ease-in-out}.smwb-sheet__overlay.smwb-entered{opacity:1}.smwb-sheet__overlay.smwb-dark{background-color:#00000080}.smwb-sheet__default.smwb-entered .smwb-sheet,.smwb-sheet__overlay.smwb-entered .smwb-sheet{opacity:1}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-bottom,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-bottom{transform:translateY(0)}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-bottom.smwb-expanded,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-bottom.smwb-expanded{height:90%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-bottom.smwb-small,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-bottom.smwb-small{height:10%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-top,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-top{transform:translateY(0)}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-top.smwb-expanded,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-top.smwb-expanded{height:90%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-top.smwb-small,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-top.smwb-small{height:10%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-left,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-left{transform:translate(0)}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-left.smwb-expanded,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-left.smwb-expanded{width:90%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-left.smwb-small,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-left.smwb-small{width:10%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-right,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-right{transform:translate(0)}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-right.smwb-expanded,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-right.smwb-expanded{width:90%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-right.smwb-small,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-right.smwb-small{width:10%}.smwb-scrollbar::-webkit-scrollbar-thumb{background-color:var(--smui-scrollThumbColor);width:6px;border-radius:999px}.smwb-scrollbar::-webkit-scrollbar{width:6px}.smwb-scrollbar::-webkit-scrollbar-track{background-color:transparent}
+.smwb-sheet{background-color:var(--smui-surfaceBackground);position:fixed;opacity:0;transition:all .2s ease-in-out;box-shadow:#00000024 0 8px 10px -5px,#00000024 0 1px 14px 1px,#00000024 0 6px 22px 4px;z-index:100;padding:10px 20px 20px;box-sizing:border-box;overflow:hidden;display:flex;max-width:100vw}.smwb-sheet__header{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;gap:4px;padding-bottom:5px}.smwb-sheet__header .smwb-button{min-width:0}.smwb-sheet__drag-handle{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1;touch-action:none;user-select:none}.smwb-sheet__drag-handle:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:-2px}.smwb-sheet__drag-handle-bar{display:block;border-radius:999px;background-color:var(--smui-onSurfaceVariant);opacity:.4;transition:opacity .15s ease-in-out}.smwb-sheet__drag-handle:hover .smwb-sheet__drag-handle-bar,.smwb-sheet__drag-handle:active .smwb-sheet__drag-handle-bar{opacity:.7}.smwb-sheet_resizable.smwb-bottom{padding-top:20px}.smwb-sheet_resizable.smwb-top{padding-bottom:20px}.smwb-sheet_resizable.smwb-left{padding-right:20px}.smwb-sheet_resizable.smwb-right{padding-left:20px}.smwb-sheet.smwb-bottom .smwb-sheet__drag-handle,.smwb-sheet.smwb-top .smwb-sheet__drag-handle{left:0;right:0;height:20px;cursor:ns-resize}.smwb-sheet.smwb-bottom .smwb-sheet__drag-handle .smwb-sheet__drag-handle-bar,.smwb-sheet.smwb-top .smwb-sheet__drag-handle .smwb-sheet__drag-handle-bar{width:36px;height:4px}.smwb-sheet.smwb-bottom .smwb-sheet__drag-handle{top:0}.smwb-sheet.smwb-top .smwb-sheet__drag-handle{bottom:0}.smwb-sheet.smwb-left .smwb-sheet__drag-handle,.smwb-sheet.smwb-right .smwb-sheet__drag-handle{top:0;bottom:0;width:20px;cursor:ew-resize}.smwb-sheet.smwb-left .smwb-sheet__drag-handle .smwb-sheet__drag-handle-bar,.smwb-sheet.smwb-right .smwb-sheet__drag-handle .smwb-sheet__drag-handle-bar{width:4px;height:36px}.smwb-sheet.smwb-right .smwb-sheet__drag-handle{left:0}.smwb-sheet.smwb-left .smwb-sheet__drag-handle{right:0}.smwb-sheet__inner{display:flex;flex-direction:column;height:100%;width:100%;overflow-y:auto}.smwb-sheet.smwb-bottom{border-radius:28px 28px 0 0;bottom:0;left:0;width:100%;height:var(--sizeProp);transform:translateY(100%);flex-direction:column}.smwb-sheet.smwb-bottom .smwb-sheet__header{width:100%}.smwb-sheet.smwb-top{border-radius:0 0 28px 28px;top:0;left:0;width:100%;height:var(--sizeProp);transform:translateY(-100%);flex-direction:column}.smwb-sheet.smwb-top .smwb-sheet__header{width:100%}.smwb-sheet.smwb-left{border-radius:0 28px 28px 0;top:0;left:0;height:100%;width:var(--sizeProp);transform:translate(-100%);flex-direction:row-reverse}.smwb-sheet.smwb-left .smwb-sheet__header{flex-direction:column;height:100%;padding-left:10px}.smwb-sheet.smwb-right{border-radius:28px 0 0 28px;top:0;right:0;height:100%;width:var(--sizeProp);transform:translate(100%)}.smwb-sheet.smwb-right .smwb-sheet__header{flex-direction:column;height:100%}.smwb-sheet__overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;z-index:100;opacity:0;transition:all .25s ease-in-out}.smwb-sheet__overlay.smwb-entered{opacity:1}.smwb-sheet__overlay.smwb-dark{background-color:#00000080}.smwb-sheet__default.smwb-entered .smwb-sheet,.smwb-sheet__overlay.smwb-entered .smwb-sheet{opacity:1}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-bottom,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-bottom{transform:translateY(0)}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-bottom.smwb-expanded,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-bottom.smwb-expanded{height:90%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-bottom.smwb-small,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-bottom.smwb-small{height:10%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-top,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-top{transform:translateY(0)}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-top.smwb-expanded,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-top.smwb-expanded{height:90%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-top.smwb-small,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-top.smwb-small{height:10%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-left,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-left{transform:translate(0)}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-left.smwb-expanded,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-left.smwb-expanded{width:90%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-left.smwb-small,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-left.smwb-small{width:10%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-right,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-right{transform:translate(0)}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-right.smwb-expanded,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-right.smwb-expanded{width:90%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-right.smwb-small,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-right.smwb-small{width:10%}.smwb-scrollbar::-webkit-scrollbar-thumb{background-color:var(--smui-scrollThumbColor);width:6px;border-radius:999px}.smwb-scrollbar::-webkit-scrollbar{width:6px}.smwb-scrollbar::-webkit-scrollbar-track{background-color:transparent}

package/dist/assets/styles/less/components/thumbCard/thumbCard.entry.css

@@ -0,0 +1 @@
+.smwb-thumb-card{position:relative;display:flex;flex-direction:column;border-radius:8px;overflow:visible;outline:none}.smwb-thumb-card--interactive{cursor:pointer}.smwb-thumb-card--disabled{opacity:.5;pointer-events:none}.smwb-thumb-card__media{position:relative;width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;background-color:var(--smui-surfaceVariant)}.smwb-thumb-card--selected .smwb-thumb-card__media{outline:2px solid var(--smui-primaryColor);outline-offset:1px}.smwb-thumb-card--interactive:focus-visible .smwb-thumb-card__media{outline:2px solid var(--smui-primaryColor);outline-offset:1px}.smwb-thumb-card__slot{position:absolute;top:4px;display:flex;gap:4px;z-index:1}.smwb-thumb-card__slot--start{left:4px}.smwb-thumb-card__slot--end{right:4px}.smwb-thumb-card__caption{margin-top:4px;font-size:.8125rem;color:var(--smui-onSurfaceColor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.smwb-thumb-card__preview{z-index:1000;border-radius:8px;overflow:hidden;box-shadow:0 8px 24px #0000004d;background-color:var(--smui-surfaceBackground);pointer-events:none}.smwb-thumb-card__preview img{display:block;max-width:320px;max-height:320px;object-fit:contain}

package/dist/assets/styles/less/components/valueSlider/valueSlider.entry.css

@@ -0,0 +1 @@
+.smwb-value-slider{display:flex;flex-direction:column;width:100%}.smwb-value-slider__header{display:flex;align-items:center;gap:8px;min-height:24px}.smwb-value-slider__label{font-size:.875rem;color:var(--smui-onSurfaceColor)}.smwb-value-slider__spacer{flex:1 1 auto}.smwb-value-slider__readout{font-size:.875rem;font-variant-numeric:tabular-nums;color:var(--smui-onSurfaceColor);opacity:.85}.smwb-value-slider__reset{display:inline-flex;align-items:center;justify-content:center;padding:2px;border:none;background:transparent;color:var(--smui-onSurfaceColor);cursor:pointer;border-radius:50%;opacity:.7}.smwb-value-slider__reset:hover{opacity:1;background-color:var(--smui-onSurfaceHover)}.smwb-value-slider__reset:disabled{opacity:.4;cursor:default}

package/dist/components/dataDisplay/assetGrid/assetGrid.d.ts

@@ -0,0 +1,30 @@
+import { type JSX } from "solid-js";
+export interface AssetGridProps<T> {
+    items: T[];
+    /** Render one cell. `index` is the absolute index into `items`. */
+    renderItem: (item: T, index: number) => JSX.Element;
+    /** Minimum column width (px); drives the column count from the measured width. Default 160. */
+    minColumn?: number;
+    /** Fixed cell height (px). */
+    rowHeight: number;
+    /** Gap (px) between cells on both axes. Default 8. */
+    gap?: number;
+    /** Extra rows rendered above/below the viewport. Default 2. */
+    overscan?: number;
+    loading?: boolean;
+    /** Skeleton tile count while loading. Default 12. */
+    loadingCount?: number;
+    emptyLabel?: JSX.Element;
+    class?: string;
+    style?: JSX.CSSProperties | string;
+}
+/**
+ * A virtualized, data-shape-agnostic asset grid: measures its own width to pick a
+ * column count, windows rows via `createVirtualList`, and renders only the visible
+ * cells through a `renderItem` slot — with loading skeletons + an empty state. The
+ * windowing math every catalog app reimplements, upstreamed. SSR-safe: before it
+ * can measure (server + first paint) it renders a plain auto-fill grid of all
+ * items, then virtualizes after mount.
+ */
+export declare function AssetGrid<T>(props: AssetGridProps<T>): JSX.Element;
+export default AssetGrid;

package/dist/components/dataDisplay/assetGrid/assetGrid.js

@@ -0,0 +1,144 @@
+import { addEventListener as P, use as E, insert as g, createComponent as o, effect as m, style as h, setStyleProperty as w, className as O, template as c } from "solid-js/web";
+import '../../../assets/styles/less/components/assetGrid/assetGrid.entry.css';/* empty css                                                             */
+import { mergeProps as W, splitProps as Y, createSignal as f, onMount as F, createMemo as _, Show as p, For as v, onCleanup as G } from "solid-js";
+import N from "clsx";
+import { createVirtualList as V } from "../../../primitives/createVirtualList.js";
+var j = /* @__PURE__ */ c("<div class=smwb-asset-grid__sizer style=position:relative><div class=smwb-asset-grid__band style=position:absolute;top:0;left:0;right:0>"), q = /* @__PURE__ */ c("<div>"), b = /* @__PURE__ */ c("<div class=smwb-asset-grid__plain>"), B = /* @__PURE__ */ c("<div class=smwb-asset-grid__skeleton>"), D = /* @__PURE__ */ c("<div class=smwb-asset-grid__empty>"), J = /* @__PURE__ */ c("<div class=smwb-asset-grid__row>");
+function ee(y) {
+  const x = W({
+    minColumn: 160,
+    gap: 8,
+    overscan: 2,
+    loadingCount: 12
+  }, y), [t] = Y(x, ["items", "renderItem", "minColumn", "rowHeight", "gap", "overscan", "loading", "loadingCount", "emptyLabel", "class", "style"]);
+  let l;
+  const [C, H] = f(0), [S, I] = f(0), [M, k] = f(!1);
+  F(() => {
+    if (!l || typeof ResizeObserver > "u") return;
+    const r = new ResizeObserver(() => {
+      l && (H(l.clientWidth), I(l.clientHeight), k(!0));
+    });
+    r.observe(l), G(() => r.disconnect());
+  });
+  const u = _(() => {
+    const r = C();
+    return r <= 0 ? 1 : Math.max(1, Math.floor((r + t.gap) / (t.minColumn + t.gap)));
+  }), L = _(() => Math.ceil(t.items.length / u())), d = V({
+    itemCount: L,
+    itemHeight: () => t.rowHeight + t.gap,
+    viewportHeight: () => S() || 1,
+    overscan: t.overscan
+  }), R = _(() => {
+    const r = [];
+    for (let e = d.startIndex(); e < d.endIndex(); e++) r.push(e);
+    return r;
+  }), z = () => ({
+    display: "grid",
+    "grid-template-columns": `repeat(${u()}, minmax(0, 1fr))`,
+    gap: `${t.gap}px`,
+    height: `${t.rowHeight}px`,
+    "margin-bottom": `${t.gap}px`
+  }), $ = () => ({
+    display: "grid",
+    "grid-template-columns": `repeat(auto-fill, minmax(${t.minColumn}px, 1fr))`,
+    gap: `${t.gap}px`,
+    "grid-auto-rows": `${t.rowHeight}px`
+  });
+  return (() => {
+    var r = q();
+    return P(r, "scroll", d.onScroll), E((e) => l = e, r), g(r, o(p, {
+      get when() {
+        return !t.loading;
+      },
+      get fallback() {
+        return (() => {
+          var e = b();
+          return g(e, o(v, {
+            get each() {
+              return Array.from({
+                length: t.loadingCount
+              });
+            },
+            children: () => (() => {
+              var n = B();
+              return m((i) => w(n, "height", `${t.rowHeight}px`)), n;
+            })()
+          })), m((n) => h(e, $(), n)), e;
+        })();
+      },
+      get children() {
+        return o(p, {
+          get when() {
+            return t.items.length > 0;
+          },
+          get fallback() {
+            return (() => {
+              var e = D();
+              return g(e, () => t.emptyLabel), e;
+            })();
+          },
+          get children() {
+            return o(p, {
+              get when() {
+                return M();
+              },
+              get fallback() {
+                return (() => {
+                  var e = b();
+                  return g(e, o(v, {
+                    get each() {
+                      return t.items;
+                    },
+                    children: (n, i) => t.renderItem(n, i())
+                  })), m((n) => h(e, $(), n)), e;
+                })();
+              },
+              get children() {
+                var e = j(), n = e.firstChild;
+                return g(n, o(v, {
+                  get each() {
+                    return R();
+                  },
+                  children: (i) => (() => {
+                    var a = J();
+                    return g(a, o(v, {
+                      get each() {
+                        return Array.from({
+                          length: u()
+                        }, (s, A) => i * u() + A);
+                      },
+                      children: (s) => o(p, {
+                        get when() {
+                          return s < t.items.length;
+                        },
+                        get children() {
+                          return t.renderItem(t.items[s], s);
+                        }
+                      })
+                    })), m((s) => h(a, z(), s)), a;
+                  })()
+                })), m((i) => {
+                  var a = `${d.totalHeight()}px`, s = `translateY(${d.offsetY()}px)`;
+                  return a !== i.e && w(e, "height", i.e = a), s !== i.t && w(n, "transform", i.t = s), i;
+                }, {
+                  e: void 0,
+                  t: void 0
+                }), e;
+              }
+            });
+          }
+        });
+      }
+    })), m((e) => {
+      var n = N("smwb-asset-grid", t.class), i = t.style;
+      return n !== e.e && O(r, e.e = n), e.t = h(r, i, e.t), e;
+    }, {
+      e: void 0,
+      t: void 0
+    }), r;
+  })();
+}
+export {
+  ee as AssetGrid
+};
+//# sourceMappingURL=assetGrid.js.map

package/dist/components/dataDisplay/assetGrid/assetGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assetGrid.js","sources":["../../../../src/components/dataDisplay/assetGrid/assetGrid.tsx"],"sourcesContent":["import { type JSX, For, Show, createMemo, createSignal, mergeProps, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { createVirtualList } from \"../../../primitives/createVirtualList\";\n\nexport interface AssetGridProps<T> {\n  items: T[];\n  /** Render one cell. `index` is the absolute index into `items`. */\n  renderItem: (item: T, index: number) => JSX.Element;\n  /** Minimum column width (px); drives the column count from the measured width. Default 160. */\n  minColumn?: number;\n  /** Fixed cell height (px). */\n  rowHeight: number;\n  /** Gap (px) between cells on both axes. Default 8. */\n  gap?: number;\n  /** Extra rows rendered above/below the viewport. Default 2. */\n  overscan?: number;\n  loading?: boolean;\n  /** Skeleton tile count while loading. Default 12. */\n  loadingCount?: number;\n  emptyLabel?: JSX.Element;\n  class?: string;\n  style?: JSX.CSSProperties | string;\n}\n\n/**\n * A virtualized, data-shape-agnostic asset grid: measures its own width to pick a\n * column count, windows rows via `createVirtualList`, and renders only the visible\n * cells through a `renderItem` slot — with loading skeletons + an empty state. The\n * windowing math every catalog app reimplements, upstreamed. SSR-safe: before it\n * can measure (server + first paint) it renders a plain auto-fill grid of all\n * items, then virtualizes after mount.\n */\nexport function AssetGrid<T>(props: AssetGridProps<T>): JSX.Element {\n  const merged = mergeProps({ minColumn: 160, gap: 8, overscan: 2, loadingCount: 12 }, props);\n  const [local] = splitProps(merged, [\n    \"items\",\n    \"renderItem\",\n    \"minColumn\",\n    \"rowHeight\",\n    \"gap\",\n    \"overscan\",\n    \"loading\",\n    \"loadingCount\",\n    \"emptyLabel\",\n    \"class\",\n    \"style\",\n  ]);\n\n  let viewportEl: HTMLDivElement | undefined;\n  const [width, setWidth] = createSignal(0);\n  const [height, setHeight] = createSignal(0);\n  const [ready, setReady] = createSignal(false);\n\n  onMount(() => {\n    if (!viewportEl || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(() => {\n      if (!viewportEl) return;\n      setWidth(viewportEl.clientWidth);\n      setHeight(viewportEl.clientHeight);\n      setReady(true);\n    });\n    ro.observe(viewportEl);\n    onCleanup(() => ro.disconnect());\n  });\n\n  const cols = createMemo(() => {\n    const w = width();\n    if (w <= 0) return 1;\n    return Math.max(1, Math.floor((w + local.gap) / (local.minColumn + local.gap)));\n  });\n  const rowCount = createMemo(() => Math.ceil(local.items.length / cols()));\n  const rowStride = (): number => local.rowHeight + local.gap;\n\n  const vl = createVirtualList({\n    itemCount: rowCount,\n    itemHeight: rowStride,\n    viewportHeight: () => height() || 1,\n    overscan: local.overscan,\n  });\n\n  const visibleRows = createMemo(() => {\n    const out: number[] = [];\n    for (let row = vl.startIndex(); row < vl.endIndex(); row++) out.push(row);\n    return out;\n  });\n\n  const rowStyle = (): JSX.CSSProperties => ({\n    display: \"grid\",\n    \"grid-template-columns\": `repeat(${cols()}, minmax(0, 1fr))`,\n    gap: `${local.gap}px`,\n    height: `${local.rowHeight}px`,\n    \"margin-bottom\": `${local.gap}px`,\n  });\n\n  const plainStyle = (): JSX.CSSProperties => ({\n    display: \"grid\",\n    \"grid-template-columns\": `repeat(auto-fill, minmax(${local.minColumn}px, 1fr))`,\n    gap: `${local.gap}px`,\n    \"grid-auto-rows\": `${local.rowHeight}px`,\n  });\n\n  return (\n    <div\n      ref={(el) => (viewportEl = el)}\n      class={cn(\"smwb-asset-grid\", local.class)}\n      style={local.style}\n      onScroll={vl.onScroll}\n    >\n      <Show\n        when={!local.loading}\n        fallback={\n          <div class=\"smwb-asset-grid__plain\" style={plainStyle()}>\n            <For each={Array.from({ length: local.loadingCount })}>\n              {() => <div class=\"smwb-asset-grid__skeleton\" style={{ height: `${local.rowHeight}px` }} />}\n            </For>\n          </div>\n        }\n      >\n        <Show\n          when={local.items.length > 0}\n          fallback={<div class=\"smwb-asset-grid__empty\">{local.emptyLabel}</div>}\n        >\n          <Show\n            when={ready()}\n            fallback={\n              <div class=\"smwb-asset-grid__plain\" style={plainStyle()}>\n                <For each={local.items}>{(item, index) => local.renderItem(item, index())}</For>\n              </div>\n            }\n          >\n            <div class=\"smwb-asset-grid__sizer\" style={{ height: `${vl.totalHeight()}px`, position: \"relative\" }}>\n              <div\n                class=\"smwb-asset-grid__band\"\n                style={{ position: \"absolute\", top: \"0\", left: \"0\", right: \"0\", transform: `translateY(${vl.offsetY()}px)` }}\n              >\n                <For each={visibleRows()}>\n                  {(row) => (\n                    <div class=\"smwb-asset-grid__row\" style={rowStyle()}>\n                      <For each={Array.from({ length: cols() }, (_, c) => row * cols() + c)}>\n                        {(index) => (\n                          <Show when={index < local.items.length}>\n                            {local.renderItem(local.items[index] as T, index)}\n                          </Show>\n                        )}\n                      </For>\n                    </div>\n                  )}\n                </For>\n              </div>\n            </div>\n          </Show>\n        </Show>\n      </Show>\n    </div>\n  );\n}\n\nexport default AssetGrid;\n"],"names":["AssetGrid","props","merged","mergeProps","minColumn","gap","overscan","loadingCount","local","splitProps","viewportEl","width","setWidth","createSignal","height","setHeight","ready","setReady","onMount","ResizeObserver","ro","clientWidth","clientHeight","observe","onCleanup","disconnect","cols","createMemo","w","Math","max","floor","rowCount","ceil","items","length","vl","createVirtualList","itemCount","itemHeight","rowStride","rowHeight","viewportHeight","visibleRows","out","row","startIndex","endIndex","push","rowStyle","display","plainStyle","_el$","_tmpl$2","_$addEventListener","onScroll","_$use","el","_$insert","_$createComponent","Show","when","loading","fallback","_el$4","_tmpl$3","For","each","Array","from","children","_el$5","_tmpl$4","_$effect","_$p","_$setStyleProperty","_$style","_el$6","_tmpl$5","emptyLabel","_el$7","item","index","renderItem","_el$2","_tmpl$","_el$3","firstChild","_el$8","_tmpl$6","_","c","_p$","_v$","totalHeight","_v$2","offsetY","e","t","undefined","_v$3","cn","class","_v$4","style","_$className"],"mappings":"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"}

package/dist/components/dataDisplay/assetGrid/index.d.ts

@@ -0,0 +1,2 @@
+export { AssetGrid } from "./assetGrid";
+export type { AssetGridProps } from "./assetGrid";

package/dist/components/dataDisplay/chipGroup/chipGroup.d.ts

@@ -0,0 +1,27 @@
+import { type JSX } from "solid-js";
+import { type ChipColor } from "../chip";
+export interface ChipGroupOption {
+    value: string;
+    label: string;
+    icon?: JSX.Element;
+    disabled?: boolean;
+}
+export interface ChipGroupProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    options: ChipGroupOption[];
+    /** Selected value (single) or values (when `multiple`). */
+    value?: string | string[];
+    /** Allow more than one selected chip (value becomes a string[]). */
+    multiple?: boolean;
+    onChange?: (value: string | string[]) => void;
+    size?: "small" | "medium";
+    color?: ChipColor;
+    disabled?: boolean;
+}
+/**
+ * A multi/single-select toggle group built on `Chip` — the "chip as a toggle"
+ * loop (selected → filled, else outlined; `role=group`) that apps re-hand-roll
+ * for filters / segmented controls. Pass an `options` array and a controlled
+ * `value`; `onChange` returns the next value (string, or string[] when multiple).
+ */
+export declare function ChipGroup(props: ChipGroupProps): JSX.Element;
+export default ChipGroup;

package/dist/components/dataDisplay/chipGroup/chipGroup.js

@@ -0,0 +1,58 @@
+import { spread as p, mergeProps as n, insert as g, createComponent as o, template as f } from "solid-js/web";
+import '../../../assets/styles/less/components/chipGroup/chipGroup.entry.css';/* empty css                                                             */
+import { mergeProps as v, splitProps as h, For as b } from "solid-js";
+import C from "clsx";
+import { Chip as z } from "../chip/chip.js";
+var P = /* @__PURE__ */ f("<div>");
+function k(i) {
+  const a = v({
+    size: "medium",
+    color: "primary"
+  }, i), [e, c] = h(a, ["options", "value", "multiple", "onChange", "size", "color", "disabled", "class"]), l = () => e.value == null ? [] : Array.isArray(e.value) ? e.value : [e.value], s = (t) => l().includes(t), u = (t) => {
+    if (e.multiple) {
+      const r = l(), m = r.includes(t) ? r.filter((d) => d !== t) : [...r, t];
+      e.onChange?.(m);
+    } else
+      e.onChange?.(t);
+  };
+  return (() => {
+    var t = P();
+    return p(t, n(c, {
+      role: "group",
+      get class() {
+        return C("smwb-chip-group", e.class);
+      }
+    }), !1, !0), g(t, o(b, {
+      get each() {
+        return e.options;
+      },
+      children: (r) => o(z, n({
+        get label() {
+          return r.label;
+        },
+        get size() {
+          return e.size;
+        },
+        get color() {
+          return e.color;
+        },
+        get selected() {
+          return s(r.value);
+        },
+        get variant() {
+          return s(r.value) ? "filled" : "outlined";
+        },
+        get disabled() {
+          return !!(e.disabled || r.disabled);
+        },
+        onClick: () => u(r.value)
+      }, () => r.icon ? {
+        icon: r.icon
+      } : {}))
+    })), t;
+  })();
+}
+export {
+  k as ChipGroup
+};
+//# sourceMappingURL=chipGroup.js.map

package/dist/components/dataDisplay/chipGroup/chipGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chipGroup.js","sources":["../../../../src/components/dataDisplay/chipGroup/chipGroup.tsx"],"sourcesContent":["import { type JSX, For, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Chip, type ChipColor } from \"../chip\";\n\nexport interface ChipGroupOption {\n  value: string;\n  label: string;\n  icon?: JSX.Element;\n  disabled?: boolean;\n}\n\nexport interface ChipGroupProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  options: ChipGroupOption[];\n  /** Selected value (single) or values (when `multiple`). */\n  value?: string | string[];\n  /** Allow more than one selected chip (value becomes a string[]). */\n  multiple?: boolean;\n  onChange?: (value: string | string[]) => void;\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  disabled?: boolean;\n}\n\n/**\n * A multi/single-select toggle group built on `Chip` — the \"chip as a toggle\"\n * loop (selected → filled, else outlined; `role=group`) that apps re-hand-roll\n * for filters / segmented controls. Pass an `options` array and a controlled\n * `value`; `onChange` returns the next value (string, or string[] when multiple).\n */\nexport function ChipGroup(props: ChipGroupProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as const, color: \"primary\" as ChipColor }, props);\n  const [local, rest] = splitProps(merged, [\n    \"options\",\n    \"value\",\n    \"multiple\",\n    \"onChange\",\n    \"size\",\n    \"color\",\n    \"disabled\",\n    \"class\",\n  ]);\n\n  const selectedValues = (): string[] => {\n    if (local.value == null) return [];\n    return Array.isArray(local.value) ? local.value : [local.value];\n  };\n  const isSelected = (value: string): boolean => selectedValues().includes(value);\n\n  const toggle = (value: string): void => {\n    if (local.multiple) {\n      const current = selectedValues();\n      const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];\n      local.onChange?.(next);\n    } else {\n      local.onChange?.(value);\n    }\n  };\n\n  return (\n    <div {...rest} role=\"group\" class={cn(\"smwb-chip-group\", local.class)}>\n      <For each={local.options}>\n        {(option) => (\n          <Chip\n            label={option.label}\n            size={local.size}\n            color={local.color}\n            selected={isSelected(option.value)}\n            variant={isSelected(option.value) ? \"filled\" : \"outlined\"}\n            disabled={!!(local.disabled || option.disabled)}\n            onClick={() => toggle(option.value)}\n            {...(option.icon ? { icon: option.icon } : {})}\n          />\n        )}\n      </For>\n    </div>\n  );\n}\n\nexport default ChipGroup;\n"],"names":["ChipGroup","props","merged","mergeProps","size","color","local","rest","splitProps","selectedValues","value","Array","isArray","isSelected","includes","toggle","multiple","current","next","filter","v","onChange","_el$","_tmpl$","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","For","each","options","children","option","Chip","label","selected","variant","disabled","onClick","icon"],"mappings":";;;;;;AA8BO,SAASA,EAAUC,GAAoC;AAC5D,QAAMC,IAASC,EAAW;AAAA,IAAEC,MAAM;AAAA,IAAmBC,OAAO;AAAA,EAAA,GAA0BJ,CAAK,GACrF,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,WACA,SACA,YACA,YACA,QACA,SACA,YACA,OAAO,CACR,GAEKO,IAAiBA,MACjBH,EAAMI,SAAS,OAAa,CAAA,IACzBC,MAAMC,QAAQN,EAAMI,KAAK,IAAIJ,EAAMI,QAAQ,CAACJ,EAAMI,KAAK,GAE1DG,IAAaA,CAACH,MAA2BD,EAAAA,EAAiBK,SAASJ,CAAK,GAExEK,IAASA,CAACL,MAAwB;AACtC,QAAIJ,EAAMU,UAAU;AAClB,YAAMC,IAAUR,EAAAA,GACVS,IAAOD,EAAQH,SAASJ,CAAK,IAAIO,EAAQE,OAAQC,CAAAA,MAAMA,MAAMV,CAAK,IAAI,CAAC,GAAGO,GAASP,CAAK;AAC9FJ,MAAAA,EAAMe,WAAWH,CAAI;AAAA,IACvB;AACEZ,MAAAA,EAAMe,WAAWX,CAAK;AAAA,EAE1B;AAEA,UAAA,MAAA;AAAA,QAAAY,IAAAC,EAAAA;AAAAC,WAAAA,EAAAF,GAAAG,EACWlB,GAAI;AAAA,MAAA,MAAO;AAAA,MAAO,IAAA,QAAA;AAAA,eAAQmB,EAAG,mBAAmBpB,EAAMqB,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAN,GAAAO,EAClEC,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEzB,EAAM0B;AAAAA,MAAO;AAAA,MAAAC,UACpBC,CAAAA,MAAML,EACLM,GAAIV,EAAA;AAAA,QAAA,IACHW,QAAK;AAAA,iBAAEF,EAAOE;AAAAA,QAAK;AAAA,QAAA,IACnBhC,OAAI;AAAA,iBAAEE,EAAMF;AAAAA,QAAI;AAAA,QAAA,IAChBC,QAAK;AAAA,iBAAEC,EAAMD;AAAAA,QAAK;AAAA,QAAA,IAClBgC,WAAQ;AAAA,iBAAExB,EAAWqB,EAAOxB,KAAK;AAAA,QAAC;AAAA,QAAA,IAClC4B,UAAO;AAAA,iBAAEzB,EAAWqB,EAAOxB,KAAK,IAAI,WAAW;AAAA,QAAU;AAAA,QAAA,IACzD6B,WAAQ;AAAA,iBAAE,CAAC,EAAEjC,EAAMiC,YAAYL,EAAOK;AAAAA,QAAS;AAAA,QAC/CC,SAASA,MAAMzB,EAAOmB,EAAOxB,KAAK;AAAA,MAAA,GAAC,MAC9BwB,EAAOO,OAAO;AAAA,QAAEA,MAAMP,EAAOO;AAAAA,MAAAA,IAAS,EAAE,CAAA;AAAA,IAAA,CAEhD,CAAA,GAAAnB;AAAAA,EAAA,GAAA;AAIT;"}

package/dist/components/dataDisplay/chipGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { ChipGroup } from "./chipGroup";
+export type { ChipGroupProps, ChipGroupOption } from "./chipGroup";

package/dist/components/dataDisplay/lazyImage/index.d.ts

@@ -0,0 +1,2 @@
+export { LazyImage } from "./lazyImage";
+export type { LazyImageProps } from "./lazyImage";

package/dist/components/dataDisplay/lazyImage/lazyImage.d.ts

@@ -0,0 +1,24 @@
+import { type JSX } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+export interface LazyImageProps extends Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "onError"> {
+    /** Image URL. When absent (or after a load error) the `fallback` is shown. */
+    src?: string | undefined;
+    alt?: string | undefined;
+    /** Rendered in place of the image when it is missing or fails to load. */
+    fallback?: JSX.Element | undefined;
+    /** Defer loading until the image scrolls into view (IntersectionObserver). Default true. */
+    lazy?: boolean;
+    /** CSS `aspect-ratio` for the wrapper (e.g. `1`, `"4 / 3"`) to reserve space before load. */
+    aspectRatio?: string | number;
+    /** Fires on a load error (after the fallback is swapped in). */
+    onError?: (event: Event) => void;
+    ref?: Ref<HTMLImageElement>;
+}
+/**
+ * An `<img>` with a built-in `onError` fallback and optional in-viewport lazy
+ * loading — the `<img decoding=async onError=…>` + `<Show>` dance hand-rolled in
+ * every gallery, in one primitive. SSR-safe: renders the image markup on the
+ * server; the IntersectionObserver only runs after mount on the client.
+ */
+export declare function LazyImage(props: LazyImageProps): JSX.Element;
+export default LazyImage;

package/dist/components/dataDisplay/lazyImage/lazyImage.js

@@ -0,0 +1,73 @@
+import { insert as o, createComponent as u, memo as $, use as h, spread as k, mergeProps as E, effect as I, className as P, style as R, template as i } from "solid-js/web";
+import '../../../assets/styles/less/components/lazyImage/lazyImage.entry.css';/* empty css                                                             */
+import { mergeProps as S, splitProps as C, createSignal as g, onMount as F, Show as p, onCleanup as O } from "solid-js";
+import x from "clsx";
+import { mergeRefs as L } from "../../../primitives/mergeRefs.js";
+var M = /* @__PURE__ */ i("<span class=smwb-lazy-image__fallback>"), N = /* @__PURE__ */ i("<img>", !0, !1, !1), V = /* @__PURE__ */ i("<span>");
+function G(d) {
+  const c = S({
+    lazy: !0
+  }, d), [r, v] = C(c, ["src", "alt", "fallback", "lazy", "aspectRatio", "class", "onError", "ref"]), [y, b] = g(!1), [m, f] = g(!c.lazy);
+  let s;
+  F(() => {
+    if (!r.lazy || m() || !s) return;
+    if (typeof IntersectionObserver > "u") {
+      f(!0);
+      return;
+    }
+    const t = new IntersectionObserver((e) => {
+      e.some((a) => a.isIntersecting) && (f(!0), t.disconnect());
+    });
+    t.observe(s), O(() => t.disconnect());
+  });
+  const z = (t) => {
+    b(!0), r.onError?.(t);
+  }, n = () => y() || !r.src, w = () => m() ? r.src : void 0, _ = () => r.aspectRatio != null ? {
+    "aspect-ratio": String(r.aspectRatio)
+  } : void 0;
+  return (() => {
+    var t = V();
+    return o(t, u(p, {
+      get when() {
+        return $(() => !!n())() && r.fallback;
+      },
+      get children() {
+        var e = M();
+        return o(e, () => r.fallback), e;
+      }
+    }), null), o(t, u(p, {
+      get when() {
+        return !n();
+      },
+      get children() {
+        var e = N(), a = L(r.ref, (l) => s = l);
+        return typeof a == "function" && h(a, e), k(e, E(v, {
+          class: "smwb-lazy-image__img",
+          get src() {
+            return w();
+          },
+          get alt() {
+            return r.alt ?? "";
+          },
+          get loading() {
+            return r.lazy ? "lazy" : void 0;
+          },
+          decoding: "async",
+          onError: z
+        }), !1, !1), e;
+      }
+    }), null), I((e) => {
+      var a = x("smwb-lazy-image", r.class, {
+        "smwb-lazy-image--empty": n()
+      }), l = _();
+      return a !== e.e && P(t, e.e = a), e.t = R(t, l, e.t), e;
+    }, {
+      e: void 0,
+      t: void 0
+    }), t;
+  })();
+}
+export {
+  G as LazyImage
+};
+//# sourceMappingURL=lazyImage.js.map

package/dist/components/dataDisplay/lazyImage/lazyImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazyImage.js","sources":["../../../../src/components/dataDisplay/lazyImage/lazyImage.tsx"],"sourcesContent":["import { type JSX, Show, createSignal, mergeProps, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface LazyImageProps extends Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, \"onError\"> {\n  /** Image URL. When absent (or after a load error) the `fallback` is shown. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Rendered in place of the image when it is missing or fails to load. */\n  fallback?: JSX.Element | undefined;\n  /** Defer loading until the image scrolls into view (IntersectionObserver). Default true. */\n  lazy?: boolean;\n  /** CSS `aspect-ratio` for the wrapper (e.g. `1`, `\"4 / 3\"`) to reserve space before load. */\n  aspectRatio?: string | number;\n  /** Fires on a load error (after the fallback is swapped in). */\n  onError?: (event: Event) => void;\n  ref?: Ref<HTMLImageElement>;\n}\n\n/**\n * An `<img>` with a built-in `onError` fallback and optional in-viewport lazy\n * loading — the `<img decoding=async onError=…>` + `<Show>` dance hand-rolled in\n * every gallery, in one primitive. SSR-safe: renders the image markup on the\n * server; the IntersectionObserver only runs after mount on the client.\n */\nexport function LazyImage(props: LazyImageProps): JSX.Element {\n  const merged = mergeProps({ lazy: true }, props);\n  const [local, rest] = splitProps(merged, [\n    \"src\",\n    \"alt\",\n    \"fallback\",\n    \"lazy\",\n    \"aspectRatio\",\n    \"class\",\n    \"onError\",\n    \"ref\",\n  ]);\n\n  const [failed, setFailed] = createSignal(false);\n  // When lazy, hold the real src back until the element scrolls into view.\n  const [visible, setVisible] = createSignal(!merged.lazy);\n  let imgEl: HTMLImageElement | undefined;\n\n  onMount(() => {\n    if (!local.lazy || visible() || !imgEl) return;\n    if (typeof IntersectionObserver === \"undefined\") {\n      setVisible(true);\n      return;\n    }\n    const io = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setVisible(true);\n        io.disconnect();\n      }\n    });\n    io.observe(imgEl);\n    onCleanup(() => io.disconnect());\n  });\n\n  const onError = (event: Event): void => {\n    setFailed(true);\n    local.onError?.(event);\n  };\n\n  const showFallback = (): boolean => failed() || !local.src;\n  const resolvedSrc = (): string | undefined => (visible() ? local.src : undefined);\n  const style = (): JSX.CSSProperties | undefined =>\n    local.aspectRatio != null ? { \"aspect-ratio\": String(local.aspectRatio) } : undefined;\n\n  return (\n    <span class={cn(\"smwb-lazy-image\", local.class, { \"smwb-lazy-image--empty\": showFallback() })} style={style()}>\n      <Show when={showFallback() && local.fallback}>\n        <span class=\"smwb-lazy-image__fallback\">{local.fallback}</span>\n      </Show>\n      <Show when={!showFallback()}>\n        <img\n          {...rest}\n          ref={mergeRefs(local.ref, (el) => (imgEl = el as HTMLImageElement))}\n          class=\"smwb-lazy-image__img\"\n          src={resolvedSrc()}\n          alt={local.alt ?? \"\"}\n          loading={local.lazy ? \"lazy\" : undefined}\n          decoding=\"async\"\n          onError={onError}\n        />\n      </Show>\n    </span>\n  );\n}\n\nexport default LazyImage;\n"],"names":["LazyImage","props","merged","mergeProps","lazy","local","rest","splitProps","failed","setFailed","createSignal","visible","setVisible","imgEl","onMount","IntersectionObserver","io","entries","some","entry","isIntersecting","disconnect","observe","onCleanup","onError","event","showFallback","src","resolvedSrc","undefined","style","aspectRatio","String","_el$","_tmpl$3","_$insert","_$createComponent","Show","when","_$memo","fallback","children","_el$2","_tmpl$","_el$3","_tmpl$2","_ref$","mergeRefs","ref","el","_$use","_$spread","_$mergeProps","alt","loading","_$effect","_p$","_v$","cn","class","_v$2","e","_$className","t","_$style"],"mappings":";;;;;;AA0BO,SAASA,EAAUC,GAAoC;AAC5D,QAAMC,IAASC,EAAW;AAAA,IAAEC,MAAM;AAAA,EAAA,GAAQH,CAAK,GACzC,CAACI,GAAOC,CAAI,IAAIC,EAAWL,GAAQ,CACvC,OACA,OACA,YACA,QACA,eACA,SACA,WACA,KAAK,CACN,GAEK,CAACM,GAAQC,CAAS,IAAIC,EAAa,EAAK,GAExC,CAACC,GAASC,CAAU,IAAIF,EAAa,CAACR,EAAOE,IAAI;AACvD,MAAIS;AAEJC,EAAAA,EAAQ,MAAM;AACZ,QAAI,CAACT,EAAMD,QAAQO,EAAAA,KAAa,CAACE,EAAO;AACxC,QAAI,OAAOE,uBAAyB,KAAa;AAC/CH,MAAAA,EAAW,EAAI;AACf;AAAA,IACF;AACA,UAAMI,IAAK,IAAID,qBAAsBE,CAAAA,MAAY;AAC/C,MAAIA,EAAQC,KAAMC,CAAAA,MAAUA,EAAMC,cAAc,MAC9CR,EAAW,EAAI,GACfI,EAAGK,WAAAA;AAAAA,IAEP,CAAC;AACDL,IAAAA,EAAGM,QAAQT,CAAK,GAChBU,EAAU,MAAMP,EAAGK,YAAY;AAAA,EACjC,CAAC;AAED,QAAMG,IAAUA,CAACC,MAAuB;AACtChB,IAAAA,EAAU,EAAI,GACdJ,EAAMmB,UAAUC,CAAK;AAAA,EACvB,GAEMC,IAAeA,MAAelB,OAAY,CAACH,EAAMsB,KACjDC,IAAcA,MAA2BjB,EAAAA,IAAYN,EAAMsB,MAAME,QACjEC,IAAQA,MACZzB,EAAM0B,eAAe,OAAO;AAAA,IAAE,gBAAgBC,OAAO3B,EAAM0B,WAAW;AAAA,EAAA,IAAMF;AAE9E,UAAA,MAAA;AAAA,QAAAI,IAAAC,EAAAA;AAAAC,WAAAA,EAAAF,GAAAG,EAEKC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEC,UAAAb,GAAc,EAAA,KAAIrB,EAAMmC;AAAAA,MAAQ;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,IAAAC,EAAAA;AAAAR,eAAAA,EAAAO,GAAA,MACDrC,EAAMmC,QAAQ,GAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAP,EAAAF,GAAAG,EAExDC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE,CAACZ,EAAAA;AAAAA,MAAc;AAAA,MAAA,IAAAe,WAAA;AAAA,YAAAG,IAAAC,EAAAA,GAAAC,IAGlBC,EAAU1C,EAAM2C,KAAMC,CAAAA,MAAQpC,IAAQoC,CAAuB;AAAC,sBAAAH,KAAA,cAAAI,EAAAJ,GAAAF,CAAA,GAAAO,EAAAP,GAAAQ,EAD/D9C,GAAI;AAAA,UAAA,OAEF;AAAA,UAAsB,IAC5BqB,MAAG;AAAA,mBAAEC,EAAAA;AAAAA,UAAa;AAAA,UAAA,IAClByB,MAAG;AAAA,mBAAEhD,EAAMgD,OAAO;AAAA,UAAE;AAAA,UAAA,IACpBC,UAAO;AAAA,mBAAEjD,EAAMD,OAAO,SAASyB;AAAAA,UAAS;AAAA,UAAA,UAC/B;AAAA,UAAO,SACPL;AAAAA,QAAAA,CAAO,GAAA,IAAA,EAAA,GAAAoB;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAW,EAAAC,CAAAA,MAAA;AAAA,UAAAC,IAbTC,EAAG,mBAAmBrD,EAAMsD,OAAO;AAAA,QAAE,0BAA0BjC,EAAAA;AAAAA,MAAa,CAAG,GAACkC,IAAS9B,EAAAA;AAAO2B,aAAAA,MAAAD,EAAAK,KAAAC,EAAA7B,GAAAuB,EAAAK,IAAAJ,CAAA,GAAAD,EAAAO,IAAAC,EAAA/B,GAAA2B,GAAAJ,EAAAO,CAAA,GAAAP;AAAAA,IAAA,GAAA;AAAA,MAAAK,GAAAhC;AAAAA,MAAAkC,GAAAlC;AAAAA,IAAAA,CAAA,GAAAI;AAAAA,EAAA,GAAA;AAkBjH;"}

package/dist/components/dataDisplay/thumbCard/index.d.ts

@@ -0,0 +1,2 @@
+export { ThumbCard } from "./thumbCard";
+export type { ThumbCardProps } from "./thumbCard";

package/dist/components/dataDisplay/thumbCard/thumbCard.d.ts

@@ -0,0 +1,31 @@
+import { type JSX } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+export interface ThumbCardProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** Thumbnail URL; falls back to `fallback` when missing / failed. */
+    src?: string;
+    caption?: JSX.Element;
+    selected?: boolean;
+    /** Makes the card a selectable button (keyboard + `aria-pressed`). */
+    onSelect?: () => void;
+    /** Shown in place of the image when `src` is missing / fails. */
+    fallback?: JSX.Element;
+    /** A larger preview shown in a floating popup after a hover delay. */
+    hoverPreview?: JSX.Element | string;
+    /** Top-left overlay slot (e.g. a favourite star). */
+    topStart?: JSX.Element;
+    /** Top-right overlay slot (e.g. a kebab menu). */
+    topEnd?: JSX.Element;
+    lazy?: boolean;
+    disabled?: boolean;
+    /** Delay (ms) before the hover preview appears. Default 350. */
+    hoverDelay?: number;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A selectable gallery card: image with an `onError` fallback + optional lazy
+ * load, keyboard/`aria-pressed` selection, corner action slots, and a delayed
+ * floating hover-preview. The generic gallery-card behaviour every app rebuilds
+ * on top of the primitives. SSR-safe — the hover preview is client-only.
+ */
+export declare function ThumbCard(props: ThumbCardProps): JSX.Element;
+export default ThumbCard;

package/dist/components/dataDisplay/thumbCard/thumbCard.js

@@ -0,0 +1,114 @@
+import { use as h, spread as D, mergeProps as E, memo as g, insert as l, createComponent as n, Portal as z, effect as f, setAttribute as C, style as T, isServer as L, template as a } from "solid-js/web";
+import '../../../assets/styles/less/components/thumbCard/thumbCard.entry.css';/* empty css                                                             */
+import { mergeProps as x, splitProps as F, createSignal as K, onCleanup as M, Show as c } from "solid-js";
+import O from "clsx";
+import { createFloating as R } from "../../../primitives/createFloating.js";
+import { mergeRefs as A } from "../../../primitives/mergeRefs.js";
+import { LazyImage as I } from "../lazyImage/lazyImage.js";
+var j = /* @__PURE__ */ a('<div class="smwb-thumb-card__slot smwb-thumb-card__slot--start">'), q = /* @__PURE__ */ a('<div class="smwb-thumb-card__slot smwb-thumb-card__slot--end">'), B = /* @__PURE__ */ a("<div class=smwb-thumb-card__caption>"), G = /* @__PURE__ */ a("<div class=smwb-thumb-card__preview>"), H = /* @__PURE__ */ a("<div><div class=smwb-thumb-card__media>"), J = /* @__PURE__ */ a("<img alt>");
+function Z(_) {
+  const w = x({
+    lazy: !0,
+    hoverDelay: 350
+  }, _), [e, y] = F(w, ["src", "caption", "selected", "onSelect", "fallback", "hoverPreview", "topStart", "topEnd", "lazy", "disabled", "hoverDelay", "class", "ref"]), m = R({
+    placement: () => "right"
+  }), [$, p] = K(!1);
+  let i;
+  const d = () => {
+    i && (clearTimeout(i), i = void 0);
+  }, S = () => {
+    e.hoverPreview == null || e.disabled || (d(), i = setTimeout(() => p(!0), e.hoverDelay));
+  }, P = () => {
+    d(), p(!1);
+  };
+  M(d);
+  const o = () => !!e.onSelect && !e.disabled, k = (r) => {
+    o() && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), e.onSelect?.());
+  };
+  return (() => {
+    var r = H(), u = r.firstChild, v = A(e.ref, (t) => m.setReference(t));
+    return typeof v == "function" && h(v, r), D(r, E(y, {
+      get class() {
+        return O("smwb-thumb-card", e.class, {
+          "smwb-thumb-card--selected": e.selected,
+          "smwb-thumb-card--disabled": e.disabled,
+          "smwb-thumb-card--interactive": o()
+        });
+      },
+      get role() {
+        return o() ? "button" : void 0;
+      },
+      get tabindex() {
+        return o() ? 0 : void 0;
+      },
+      get "aria-pressed"() {
+        return g(() => !!e.onSelect)() ? e.selected ?? !1 : void 0;
+      },
+      get "aria-disabled"() {
+        return e.disabled || void 0;
+      },
+      get onClick() {
+        return o() ? () => e.onSelect?.() : void 0;
+      },
+      onKeyDown: k,
+      onMouseEnter: S,
+      onMouseLeave: P
+    }), !1, !0), l(u, n(I, {
+      get src() {
+        return e.src;
+      },
+      get lazy() {
+        return e.lazy;
+      },
+      get fallback() {
+        return e.fallback;
+      }
+    }), null), l(u, n(c, {
+      get when() {
+        return e.topStart;
+      },
+      get children() {
+        var t = j();
+        return l(t, () => e.topStart), t;
+      }
+    }), null), l(u, n(c, {
+      get when() {
+        return e.topEnd;
+      },
+      get children() {
+        var t = q();
+        return l(t, () => e.topEnd), t;
+      }
+    }), null), l(r, n(c, {
+      get when() {
+        return e.caption;
+      },
+      get children() {
+        var t = B();
+        return l(t, () => e.caption), t;
+      }
+    }), null), l(r, n(c, {
+      get when() {
+        return $() && !L;
+      },
+      get children() {
+        return n(z, {
+          get children() {
+            var t = G();
+            return h((s) => m.setFloating(s), t), l(t, (() => {
+              var s = g(() => typeof e.hoverPreview == "string");
+              return () => s() ? (() => {
+                var b = J();
+                return f(() => C(b, "src", e.hoverPreview)), b;
+              })() : e.hoverPreview;
+            })()), f((s) => T(t, m.floatingStyles(), s)), t;
+          }
+        });
+      }
+    }), null), r;
+  })();
+}
+export {
+  Z as ThumbCard
+};
+//# sourceMappingURL=thumbCard.js.map