@smwb/ui-solid 0.4.0 → 0.5.0

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

@@ -1 +1 @@
-.smwb-appbar{padding:0 16px;display:flex;align-items:center;inset:0 0 auto;min-width:100%;background-color:var(--smui-appBarBg);color:var(--smui-appBarContentColor);font-size:1rem;height:65px}.smwb-appbar.smwb-bottom{bottom:0;top:auto}.smwb-appbar.smwb-relative{position:relative}.smwb-appbar.smwb-static{position:static}.smwb-appbar.smwb-sticky{position:sticky}.smwb-appbar.smwb-fixed{position:fixed}.smwb-appbar.smwb-absolute{position:absolute}.smwb-appbar.smwb-dense{padding:12px;height:48px}.smwb-appbar__inner{display:flex;align-items:center;width:100%;justify-content:space-between;flex-wrap:nowrap}.smwb-appbar__left{display:flex;align-items:center;gap:10px;white-space:nowrap}.smwb-appbar__right{white-space:nowrap}.smwb-appbar__mid{width:100%;display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap}.smwb-appbar__mid.smwb-middle{align-items:center}.smwb-appbar__mid.smwb-right{align-items:flex-end}.smwb-appbar__mid.smwb-left{align-items:flex-start}.smwb-appbar_color-primary{background-color:var(--smui-primaryColor);color:var(--smui-onPrimaryColor)}.smwb-appbar_color-secondary{background-color:var(--smui-secondaryColor);color:var(--smui-onSecondaryColor)}.smwb-appbar_color-error{background-color:var(--smui-errorColor);color:var(--smui-onErrorColor)}.smwb-appbar_color-success{background-color:var(--smui-successColor);color:var(--smui-onSuccessColor)}.smwb-appbar_color-warning{background-color:var(--smui-warningColor);color:var(--smui-onWarningColor)}.smwb-appbar_color-info{background-color:var(--smui-infoColor);color:var(--smui-onInfoColor)}
+.smwb-appbar{box-sizing:border-box;padding:0 16px;display:flex;align-items:center;inset:0 0 auto;min-width:100%;background-color:var(--smui-appBarBg);color:var(--smui-appBarContentColor);font-size:1rem;height:65px}.smwb-appbar.smwb-bottom{bottom:0;top:auto}.smwb-appbar.smwb-relative{position:relative}.smwb-appbar.smwb-static{position:static}.smwb-appbar.smwb-sticky{position:sticky}.smwb-appbar.smwb-fixed{position:fixed}.smwb-appbar.smwb-absolute{position:absolute}.smwb-appbar.smwb-dense{padding:12px;height:48px}.smwb-appbar__inner{display:flex;align-items:center;width:100%;justify-content:space-between;flex-wrap:nowrap}.smwb-appbar__left{display:flex;align-items:center;gap:10px;white-space:nowrap}.smwb-appbar__right{white-space:nowrap}.smwb-appbar__mid{width:100%;display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap}.smwb-appbar__mid.smwb-middle{align-items:center}.smwb-appbar__mid.smwb-right{align-items:flex-end}.smwb-appbar__mid.smwb-left{align-items:flex-start}.smwb-appbar_color-primary{background-color:var(--smui-primaryColor);color:var(--smui-onPrimaryColor)}.smwb-appbar_color-secondary{background-color:var(--smui-secondaryColor);color:var(--smui-onSecondaryColor)}.smwb-appbar_color-error{background-color:var(--smui-errorColor);color:var(--smui-onErrorColor)}.smwb-appbar_color-success{background-color:var(--smui-successColor);color:var(--smui-onSuccessColor)}.smwb-appbar_color-warning{background-color:var(--smui-warningColor);color:var(--smui-onWarningColor)}.smwb-appbar_color-info{background-color:var(--smui-infoColor);color:var(--smui-onInfoColor)}

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":"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"}

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;