@smwb/ui-solid 0.4.1 → 0.6.0

package/dist/source/components/dataDisplay/assetGrid/assetGrid.jsx

@@ -0,0 +1,116 @@
+import "@smwb/ui-styles/less/components/assetGrid/assetGrid.entry.less";
+import { For, Show, createMemo, createSignal, mergeProps, onCleanup, onMount, splitProps } from "solid-js";
+import cn from "clsx";
+import { createVirtualList } from "../../../primitives/createVirtualList";
+function AssetGrid(props) {
+  const merged = mergeProps({ minColumn: 160, gap: 8, overscan: 2, loadingCount: 12 }, props);
+  const [local] = splitProps(merged, [
+    "items",
+    "renderItem",
+    "minColumn",
+    "rowHeight",
+    "gap",
+    "overscan",
+    "loading",
+    "loadingCount",
+    "emptyLabel",
+    "class",
+    "style"
+  ]);
+  let viewportEl;
+  const [width, setWidth] = createSignal(0);
+  const [height, setHeight] = createSignal(0);
+  const [ready, setReady] = createSignal(false);
+  onMount(() => {
+    if (!viewportEl || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => {
+      if (!viewportEl) return;
+      setWidth(viewportEl.clientWidth);
+      setHeight(viewportEl.clientHeight);
+      setReady(true);
+    });
+    ro.observe(viewportEl);
+    onCleanup(() => ro.disconnect());
+  });
+  const cols = createMemo(() => {
+    const w = width();
+    if (w <= 0) return 1;
+    return Math.max(1, Math.floor((w + local.gap) / (local.minColumn + local.gap)));
+  });
+  const rowCount = createMemo(() => Math.ceil(local.items.length / cols()));
+  const rowStride = () => local.rowHeight + local.gap;
+  const vl = createVirtualList({
+    itemCount: rowCount,
+    itemHeight: rowStride,
+    viewportHeight: () => height() || 1,
+    overscan: local.overscan
+  });
+  const visibleRows = createMemo(() => {
+    const out = [];
+    for (let row = vl.startIndex(); row < vl.endIndex(); row++) out.push(row);
+    return out;
+  });
+  const rowStyle = () => ({
+    display: "grid",
+    "grid-template-columns": `repeat(${cols()}, minmax(0, 1fr))`,
+    gap: `${local.gap}px`,
+    height: `${local.rowHeight}px`,
+    "margin-bottom": `${local.gap}px`
+  });
+  const plainStyle = () => ({
+    display: "grid",
+    "grid-template-columns": `repeat(auto-fill, minmax(${local.minColumn}px, 1fr))`,
+    gap: `${local.gap}px`,
+    "grid-auto-rows": `${local.rowHeight}px`
+  });
+  return <div
+    ref={(el) => viewportEl = el}
+    class={cn("smwb-asset-grid", local.class)}
+    style={local.style}
+    onScroll={vl.onScroll}
+  >
+      <Show
+    when={!local.loading}
+    fallback={<div class="smwb-asset-grid__plain" style={plainStyle()}>
+            <For each={Array.from({ length: local.loadingCount })}>
+              {() => <div class="smwb-asset-grid__skeleton" style={{ height: `${local.rowHeight}px` }} />}
+            </For>
+          </div>}
+  >
+        <Show
+    when={local.items.length > 0}
+    fallback={<div class="smwb-asset-grid__empty">{local.emptyLabel}</div>}
+  >
+          <Show
+    when={ready()}
+    fallback={<div class="smwb-asset-grid__plain" style={plainStyle()}>
+                <For each={local.items}>{(item, index) => local.renderItem(item, index())}</For>
+              </div>}
+  >
+            <div class="smwb-asset-grid__sizer" style={{ height: `${vl.totalHeight()}px`, position: "relative" }}>
+              <div
+    class="smwb-asset-grid__band"
+    style={{ position: "absolute", top: "0", left: "0", right: "0", transform: `translateY(${vl.offsetY()}px)` }}
+  >
+                <For each={visibleRows()}>
+                  {(row) => <div class="smwb-asset-grid__row" style={rowStyle()}>
+                      <For each={Array.from({ length: cols() }, (_, c) => row * cols() + c)}>
+                        {(index) => <Show when={index < local.items.length}>
+                            {local.renderItem(local.items[index], index)}
+                          </Show>}
+                      </For>
+                    </div>}
+                </For>
+              </div>
+            </div>
+          </Show>
+        </Show>
+      </Show>
+    </div>;
+}
+var assetGrid_default = AssetGrid;
+export {
+  AssetGrid,
+  assetGrid_default as default
+};
+//# sourceMappingURL=assetGrid.jsx.map

package/dist/source/components/dataDisplay/assetGrid/assetGrid.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/dataDisplay/assetGrid/assetGrid.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/assetGrid/assetGrid.entry.less\";\nimport { 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"],"mappings":"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","names":[],"file":"assetGrid.jsx"}

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

@@ -0,0 +1,5 @@
+import { AssetGrid } from "./assetGrid";
+export {
+  AssetGrid
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/dataDisplay/assetGrid/index.ts"],
+  "sourcesContent": ["export { AssetGrid } from \"./assetGrid\";\nexport type { AssetGridProps } from \"./assetGrid\";\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;",
+  "names": []
+}

package/dist/source/components/dataDisplay/chipGroup/chipGroup.jsx

@@ -0,0 +1,51 @@
+import "@smwb/ui-styles/less/components/chipGroup/chipGroup.entry.less";
+import { For, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { Chip } from "../chip";
+function ChipGroup(props) {
+  const merged = mergeProps({ size: "medium", color: "primary" }, props);
+  const [local, rest] = splitProps(merged, [
+    "options",
+    "value",
+    "multiple",
+    "onChange",
+    "size",
+    "color",
+    "disabled",
+    "class"
+  ]);
+  const selectedValues = () => {
+    if (local.value == null) return [];
+    return Array.isArray(local.value) ? local.value : [local.value];
+  };
+  const isSelected = (value) => selectedValues().includes(value);
+  const toggle = (value) => {
+    if (local.multiple) {
+      const current = selectedValues();
+      const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+      local.onChange?.(next);
+    } else {
+      local.onChange?.(value);
+    }
+  };
+  return <div {...rest} role="group" class={cn("smwb-chip-group", local.class)}>
+      <For each={local.options}>
+        {(option) => <Chip
+    label={option.label}
+    size={local.size}
+    color={local.color}
+    selected={isSelected(option.value)}
+    variant={isSelected(option.value) ? "filled" : "outlined"}
+    disabled={!!(local.disabled || option.disabled)}
+    onClick={() => toggle(option.value)}
+    {...option.icon ? { icon: option.icon } : {}}
+  />}
+      </For>
+    </div>;
+}
+var chipGroup_default = ChipGroup;
+export {
+  ChipGroup,
+  chipGroup_default as default
+};
+//# sourceMappingURL=chipGroup.jsx.map

package/dist/source/components/dataDisplay/chipGroup/chipGroup.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/dataDisplay/chipGroup/chipGroup.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/chipGroup/chipGroup.entry.less\";\nimport { 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"],"mappings":"AAAA,OAAO;AACP,SAAmB,KAAK,YAAY,kBAAkB;AACtD,OAAO,QAAQ;AACf,SAAS,YAA4B;AA2B9B,SAAS,UAAU,OAAoC;AAC5D,QAAM,SAAS,WAAW,EAAE,MAAM,UAAmB,OAAO,UAAuB,GAAG,KAAK;AAC3F,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB,MAAgB;AACrC,QAAI,MAAM,SAAS,KAAM,QAAO,CAAC;AACjC,WAAO,MAAM,QAAQ,MAAM,KAAK,IAAI,MAAM,QAAQ,CAAC,MAAM,KAAK;AAAA,EAChE;AACA,QAAM,aAAa,CAAC,UAA2B,eAAe,EAAE,SAAS,KAAK;AAE9E,QAAM,SAAS,CAAC,UAAwB;AACtC,QAAI,MAAM,UAAU;AAClB,YAAM,UAAU,eAAe;AAC/B,YAAM,OAAO,QAAQ,SAAS,KAAK,IAAI,QAAQ,OAAO,CAAC,MAAM,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,KAAK;AAC9F,YAAM,WAAW,IAAI;AAAA,IACvB,OAAO;AACL,YAAM,WAAW,KAAK;AAAA,IACxB;AAAA,EACF;AAEA,SACE,CAAC,QAAQ,MAAM,KAAK,QAAQ,OAAO,GAAG,mBAAmB,MAAM,KAAK,GAAG;AAAA,MACrE,CAAC,IAAI,MAAM,MAAM,SAAS;AAAA,SACvB,CAAC,WACA,CAAC;AAAA,IACC,OAAO,OAAO;AAAA,IACd,MAAM,MAAM;AAAA,IACZ,OAAO,MAAM;AAAA,IACb,UAAU,WAAW,OAAO,KAAK;AAAA,IACjC,SAAS,WAAW,OAAO,KAAK,IAAI,WAAW;AAAA,IAC/C,UAAU,CAAC,EAAE,MAAM,YAAY,OAAO;AAAA,IACtC,SAAS,MAAM,OAAO,OAAO,KAAK;AAAA,QAC7B,OAAO,OAAO,EAAE,MAAM,OAAO,KAAK,IAAI,CAAC;AAAA,EAC9C,GACA;AAAA,MACJ,EAbC,IAaK;AAAA,IACR,EAfC;AAiBL;AAEA,IAAO,oBAAQ;","names":[],"file":"chipGroup.jsx"}

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

@@ -0,0 +1,5 @@
+import { ChipGroup } from "./chipGroup";
+export {
+  ChipGroup
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/dataDisplay/chipGroup/index.ts"],
+  "sourcesContent": ["export { ChipGroup } from \"./chipGroup\";\nexport type { ChipGroupProps, ChipGroupOption } from \"./chipGroup\";\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;",
+  "names": []
+}

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

@@ -0,0 +1,5 @@
+import { LazyImage } from "./lazyImage";
+export {
+  LazyImage
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/dataDisplay/lazyImage/index.ts"],
+  "sourcesContent": ["export { LazyImage } from \"./lazyImage\";\nexport type { LazyImageProps } from \"./lazyImage\";\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;",
+  "names": []
+}

package/dist/source/components/dataDisplay/lazyImage/lazyImage.jsx

@@ -0,0 +1,65 @@
+import "@smwb/ui-styles/less/components/lazyImage/lazyImage.entry.less";
+import { Show, createSignal, mergeProps, onCleanup, onMount, splitProps } from "solid-js";
+import cn from "clsx";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function LazyImage(props) {
+  const merged = mergeProps({ lazy: true }, props);
+  const [local, rest] = splitProps(merged, [
+    "src",
+    "alt",
+    "fallback",
+    "lazy",
+    "aspectRatio",
+    "class",
+    "onError",
+    "ref"
+  ]);
+  const [failed, setFailed] = createSignal(false);
+  const [visible, setVisible] = createSignal(!merged.lazy);
+  let imgEl;
+  onMount(() => {
+    if (!local.lazy || visible() || !imgEl) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setVisible(true);
+      return;
+    }
+    const io = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        setVisible(true);
+        io.disconnect();
+      }
+    });
+    io.observe(imgEl);
+    onCleanup(() => io.disconnect());
+  });
+  const onError = (event) => {
+    setFailed(true);
+    local.onError?.(event);
+  };
+  const showFallback = () => failed() || !local.src;
+  const resolvedSrc = () => visible() ? local.src : void 0;
+  const style = () => local.aspectRatio != null ? { "aspect-ratio": String(local.aspectRatio) } : void 0;
+  return <span class={cn("smwb-lazy-image", local.class, { "smwb-lazy-image--empty": showFallback() })} style={style()}>
+      <Show when={showFallback() && local.fallback}>
+        <span class="smwb-lazy-image__fallback">{local.fallback}</span>
+      </Show>
+      <Show when={!showFallback()}>
+        <img
+    {...rest}
+    ref={mergeRefs(local.ref, (el) => imgEl = el)}
+    class="smwb-lazy-image__img"
+    src={resolvedSrc()}
+    alt={local.alt ?? ""}
+    loading={local.lazy ? "lazy" : void 0}
+    decoding="async"
+    onError={onError}
+  />
+      </Show>
+    </span>;
+}
+var lazyImage_default = LazyImage;
+export {
+  LazyImage,
+  lazyImage_default as default
+};
+//# sourceMappingURL=lazyImage.jsx.map

package/dist/source/components/dataDisplay/lazyImage/lazyImage.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/dataDisplay/lazyImage/lazyImage.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/lazyImage/lazyImage.entry.less\";\nimport { 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"],"mappings":"AAAA,OAAO;AACP,SAAmB,MAAM,cAAc,YAAY,WAAW,SAAS,kBAAkB;AACzF,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAuB7B,SAAS,UAAU,OAAoC;AAC5D,QAAM,SAAS,WAAW,EAAE,MAAM,KAAK,GAAG,KAAK;AAC/C,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAa,KAAK;AAE9C,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,CAAC,OAAO,IAAI;AACvD,MAAI;AAEJ,UAAQ,MAAM;AACZ,QAAI,CAAC,MAAM,QAAQ,QAAQ,KAAK,CAAC,MAAO;AACxC,QAAI,OAAO,yBAAyB,aAAa;AAC/C,iBAAW,IAAI;AACf;AAAA,IACF;AACA,UAAM,KAAK,IAAI,qBAAqB,CAAC,YAAY;AAC/C,UAAI,QAAQ,KAAK,CAAC,UAAU,MAAM,cAAc,GAAG;AACjD,mBAAW,IAAI;AACf,WAAG,WAAW;AAAA,MAChB;AAAA,IACF,CAAC;AACD,OAAG,QAAQ,KAAK;AAChB,cAAU,MAAM,GAAG,WAAW,CAAC;AAAA,EACjC,CAAC;AAED,QAAM,UAAU,CAAC,UAAuB;AACtC,cAAU,IAAI;AACd,UAAM,UAAU,KAAK;AAAA,EACvB;AAEA,QAAM,eAAe,MAAe,OAAO,KAAK,CAAC,MAAM;AACvD,QAAM,cAAc,MAA2B,QAAQ,IAAI,MAAM,MAAM;AACvE,QAAM,QAAQ,MACZ,MAAM,eAAe,OAAO,EAAE,gBAAgB,OAAO,MAAM,WAAW,EAAE,IAAI;AAE9E,SACE,CAAC,KAAK,OAAO,GAAG,mBAAmB,MAAM,OAAO,EAAE,0BAA0B,aAAa,EAAE,CAAC,GAAG,OAAO,MAAM,GAAG;AAAA,MAC7G,CAAC,KAAK,MAAM,aAAa,KAAK,MAAM,UAAU;AAAA,QAC5C,CAAC,KAAK,MAAM,6BAA6B,MAAM,SAAS,EAAvD,KAA8D;AAAA,MACjE,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,CAAC,aAAa,GAAG;AAAA,QAC3B,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,KAAK,CAAC,OAAQ,QAAQ,EAAuB;AAAA,IAClE,MAAM;AAAA,IACN,KAAK,YAAY;AAAA,IACjB,KAAK,MAAM,OAAO;AAAA,IAClB,SAAS,MAAM,OAAO,SAAS;AAAA,IAC/B,SAAS;AAAA,IACT,SAAS;AAAA,EACX,EAAE;AAAA,MACJ,EAXC,KAWM;AAAA,IACT,EAhBC;AAkBL;AAEA,IAAO,oBAAQ;","names":[],"file":"lazyImage.jsx"}

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

@@ -0,0 +1,5 @@
+import { ThumbCard } from "./thumbCard";
+export {
+  ThumbCard
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/dataDisplay/thumbCard/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/dataDisplay/thumbCard/index.ts"],
+  "sourcesContent": ["export { ThumbCard } from \"./thumbCard\";\nexport type { ThumbCardProps } from \"./thumbCard\";\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;",
+  "names": []
+}

package/dist/source/components/dataDisplay/thumbCard/thumbCard.jsx

@@ -0,0 +1,94 @@
+import "@smwb/ui-styles/less/components/thumbCard/thumbCard.entry.less";
+import { Show, createSignal, mergeProps, onCleanup, splitProps } from "solid-js";
+import { Portal, isServer } from "solid-js/web";
+import cn from "clsx";
+import { createFloating } from "../../../primitives/createFloating";
+import { LazyImage } from "../lazyImage";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function ThumbCard(props) {
+  const merged = mergeProps({ lazy: true, hoverDelay: 350 }, props);
+  const [local, rest] = splitProps(merged, [
+    "src",
+    "caption",
+    "selected",
+    "onSelect",
+    "fallback",
+    "hoverPreview",
+    "topStart",
+    "topEnd",
+    "lazy",
+    "disabled",
+    "hoverDelay",
+    "class",
+    "ref"
+  ]);
+  const floating = createFloating({ placement: () => "right" });
+  const [previewOpen, setPreviewOpen] = createSignal(false);
+  let hoverTimer;
+  const clearTimer = () => {
+    if (hoverTimer) {
+      clearTimeout(hoverTimer);
+      hoverTimer = void 0;
+    }
+  };
+  const onEnter = () => {
+    if (local.hoverPreview == null || local.disabled) return;
+    clearTimer();
+    hoverTimer = setTimeout(() => setPreviewOpen(true), local.hoverDelay);
+  };
+  const onLeave = () => {
+    clearTimer();
+    setPreviewOpen(false);
+  };
+  onCleanup(clearTimer);
+  const interactive = () => !!local.onSelect && !local.disabled;
+  const onKeyDown = (event) => {
+    if (interactive() && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      local.onSelect?.();
+    }
+  };
+  return <div
+    {...rest}
+    ref={mergeRefs(local.ref, (el) => floating.setReference(el))}
+    class={cn("smwb-thumb-card", local.class, {
+      "smwb-thumb-card--selected": local.selected,
+      "smwb-thumb-card--disabled": local.disabled,
+      "smwb-thumb-card--interactive": interactive()
+    })}
+    role={interactive() ? "button" : void 0}
+    tabindex={interactive() ? 0 : void 0}
+    aria-pressed={local.onSelect ? local.selected ?? false : void 0}
+    aria-disabled={local.disabled || void 0}
+    onClick={interactive() ? () => local.onSelect?.() : void 0}
+    onKeyDown={onKeyDown}
+    onMouseEnter={onEnter}
+    onMouseLeave={onLeave}
+  >
+      <div class="smwb-thumb-card__media">
+        <LazyImage src={local.src} lazy={local.lazy} fallback={local.fallback} />
+        <Show when={local.topStart}>
+          <div class="smwb-thumb-card__slot smwb-thumb-card__slot--start">{local.topStart}</div>
+        </Show>
+        <Show when={local.topEnd}>
+          <div class="smwb-thumb-card__slot smwb-thumb-card__slot--end">{local.topEnd}</div>
+        </Show>
+      </div>
+      <Show when={local.caption}>
+        <div class="smwb-thumb-card__caption">{local.caption}</div>
+      </Show>
+      <Show when={previewOpen() && !isServer}>
+        <Portal>
+          <div class="smwb-thumb-card__preview" ref={(el) => floating.setFloating(el)} style={floating.floatingStyles()}>
+            {typeof local.hoverPreview === "string" ? <img src={local.hoverPreview} alt="" /> : local.hoverPreview}
+          </div>
+        </Portal>
+      </Show>
+    </div>;
+}
+var thumbCard_default = ThumbCard;
+export {
+  ThumbCard,
+  thumbCard_default as default
+};
+//# sourceMappingURL=thumbCard.jsx.map

package/dist/source/components/dataDisplay/thumbCard/thumbCard.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/dataDisplay/thumbCard/thumbCard.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/thumbCard/thumbCard.entry.less\";\nimport { type JSX, Show, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { LazyImage } from \"../lazyImage\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ThumbCardProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Thumbnail URL; falls back to `fallback` when missing / failed. */\n  src?: string;\n  caption?: JSX.Element;\n  selected?: boolean;\n  /** Makes the card a selectable button (keyboard + `aria-pressed`). */\n  onSelect?: () => void;\n  /** Shown in place of the image when `src` is missing / fails. */\n  fallback?: JSX.Element;\n  /** A larger preview shown in a floating popup after a hover delay. */\n  hoverPreview?: JSX.Element | string;\n  /** Top-left overlay slot (e.g. a favourite star). */\n  topStart?: JSX.Element;\n  /** Top-right overlay slot (e.g. a kebab menu). */\n  topEnd?: JSX.Element;\n  lazy?: boolean;\n  disabled?: boolean;\n  /** Delay (ms) before the hover preview appears. Default 350. */\n  hoverDelay?: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A selectable gallery card: image with an `onError` fallback + optional lazy\n * load, keyboard/`aria-pressed` selection, corner action slots, and a delayed\n * floating hover-preview. The generic gallery-card behaviour every app rebuilds\n * on top of the primitives. SSR-safe — the hover preview is client-only.\n */\nexport function ThumbCard(props: ThumbCardProps): JSX.Element {\n  const merged = mergeProps({ lazy: true, hoverDelay: 350 }, props);\n  const [local, rest] = splitProps(merged, [\n    \"src\",\n    \"caption\",\n    \"selected\",\n    \"onSelect\",\n    \"fallback\",\n    \"hoverPreview\",\n    \"topStart\",\n    \"topEnd\",\n    \"lazy\",\n    \"disabled\",\n    \"hoverDelay\",\n    \"class\",\n    \"ref\",\n  ]);\n\n  const floating = createFloating({ placement: () => \"right\" });\n  const [previewOpen, setPreviewOpen] = createSignal(false);\n  let hoverTimer: ReturnType<typeof setTimeout> | undefined;\n\n  const clearTimer = (): void => {\n    if (hoverTimer) {\n      clearTimeout(hoverTimer);\n      hoverTimer = undefined;\n    }\n  };\n  const onEnter = (): void => {\n    if (local.hoverPreview == null || local.disabled) return;\n    clearTimer();\n    hoverTimer = setTimeout(() => setPreviewOpen(true), local.hoverDelay);\n  };\n  const onLeave = (): void => {\n    clearTimer();\n    setPreviewOpen(false);\n  };\n  onCleanup(clearTimer);\n\n  const interactive = (): boolean => !!local.onSelect && !local.disabled;\n  const onKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSelect?.();\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => floating.setReference(el))}\n      class={cn(\"smwb-thumb-card\", local.class, {\n        \"smwb-thumb-card--selected\": local.selected,\n        \"smwb-thumb-card--disabled\": local.disabled,\n        \"smwb-thumb-card--interactive\": interactive(),\n      })}\n      role={interactive() ? \"button\" : undefined}\n      tabindex={interactive() ? 0 : undefined}\n      aria-pressed={local.onSelect ? (local.selected ?? false) : undefined}\n      aria-disabled={local.disabled || undefined}\n      onClick={interactive() ? () => local.onSelect?.() : undefined}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n    >\n      <div class=\"smwb-thumb-card__media\">\n        <LazyImage src={local.src} lazy={local.lazy} fallback={local.fallback} />\n        <Show when={local.topStart}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--start\">{local.topStart}</div>\n        </Show>\n        <Show when={local.topEnd}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--end\">{local.topEnd}</div>\n        </Show>\n      </div>\n      <Show when={local.caption}>\n        <div class=\"smwb-thumb-card__caption\">{local.caption}</div>\n      </Show>\n      <Show when={previewOpen() && !isServer}>\n        <Portal>\n          <div class=\"smwb-thumb-card__preview\" ref={(el) => floating.setFloating(el)} style={floating.floatingStyles()}>\n            {typeof local.hoverPreview === \"string\" ? (\n              <img src={local.hoverPreview} alt=\"\" />\n            ) : (\n              (local.hoverPreview as JSX.Element)\n            )}\n          </div>\n        </Portal>\n      </Show>\n    </div>\n  );\n}\n\nexport default ThumbCard;\n"],"mappings":"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","names":[],"file":"thumbCard.jsx"}

package/dist/source/components/feedBack/saveAssetDialog/index.js

@@ -0,0 +1,5 @@
+import { SaveAssetDialog } from "./saveAssetDialog";
+export {
+  SaveAssetDialog
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/feedBack/saveAssetDialog/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/feedBack/saveAssetDialog/index.ts"],
+  "sourcesContent": ["export { SaveAssetDialog } from \"./saveAssetDialog\";\nexport type { SaveAssetDialogProps } from \"./saveAssetDialog\";\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;",
+  "names": []
+}

package/dist/source/components/feedBack/saveAssetDialog/saveAssetDialog.jsx

@@ -0,0 +1,66 @@
+import "@smwb/ui-styles/less/components/saveAssetDialog/saveAssetDialog.entry.less";
+import { Show, splitProps } from "solid-js";
+import cn from "clsx";
+import { Modal } from "../modal";
+import { Button } from "../../inputs/button";
+import { TextField } from "../../inputs/textField";
+function SaveAssetDialog(props) {
+  const [local] = splitProps(props, [
+    "open",
+    "title",
+    "nameLabel",
+    "name",
+    "onNameChange",
+    "previewSrc",
+    "onCapture",
+    "captureLabel",
+    "busy",
+    "confirmLabel",
+    "cancelLabel",
+    "onConfirm",
+    "onClose",
+    "children",
+    "class"
+  ]);
+  const showNameField = () => local.onNameChange !== void 0 || local.name !== void 0;
+  return <Modal open={local.open} onClose={local.onClose} size="small">
+      <Modal.Header>{local.title ?? "Save"}</Modal.Header>
+      <Modal.Content>
+        <div class={cn("smwb-save-asset-dialog__body", local.class)}>
+          <Show when={showNameField()}>
+            <TextField
+    label={local.nameLabel ?? "Name"}
+    value={local.name ?? ""}
+    disabled={!!local.busy}
+    onChange={(event) => local.onNameChange?.(event.currentTarget.value)}
+  />
+          </Show>
+          <Show when={local.previewSrc}>
+            <div class="smwb-save-asset-dialog__preview">
+              <img src={local.previewSrc} alt="" />
+            </div>
+          </Show>
+          <Show when={local.onCapture}>
+            <Button
+    variant="outlined"
+    size="small"
+    disabled={!!local.busy}
+    onClick={() => local.onCapture?.()}
+    label={local.captureLabel ?? "Capture preview"}
+  />
+          </Show>
+          {local.children}
+        </div>
+      </Modal.Content>
+      <Modal.Footer>
+        <Button variant="text" disabled={!!local.busy} onClick={() => local.onClose()} label={local.cancelLabel ?? "Cancel"} />
+        <Button variant="contained" disabled={!!local.busy} onClick={() => local.onConfirm()} label={local.confirmLabel ?? "Save"} />
+      </Modal.Footer>
+    </Modal>;
+}
+var saveAssetDialog_default = SaveAssetDialog;
+export {
+  SaveAssetDialog,
+  saveAssetDialog_default as default
+};
+//# sourceMappingURL=saveAssetDialog.jsx.map

package/dist/source/components/feedBack/saveAssetDialog/saveAssetDialog.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/feedBack/saveAssetDialog/saveAssetDialog.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/saveAssetDialog/saveAssetDialog.entry.less\";\nimport { type JSX, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { TextField } from \"../../inputs/textField\";\n\nexport interface SaveAssetDialogProps {\n  open: boolean;\n  title?: string;\n  /** Label for the name field. Omit `onNameChange` AND `name` to hide the field. */\n  nameLabel?: string;\n  name?: string;\n  onNameChange?: (name: string) => void;\n  /** Preview image URL (e.g. a freshly captured thumbnail). */\n  previewSrc?: string;\n  /** Shows a Capture button when provided. */\n  onCapture?: () => void;\n  captureLabel?: string;\n  /** Disables the actions + name field while a save/capture is in flight. */\n  busy?: boolean;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  onConfirm: () => void;\n  onClose: () => void;\n  /** Extra content between the name field/preview and the actions. */\n  children?: JSX.Element;\n  class?: string;\n}\n\n/**\n * A \"name it / preview a thumbnail / confirm-cancel\" dialog on `Modal` — the\n * save/capture flow apps hand-build for every asset. Pairs with srv-solid's\n * asset store: `onConfirm` uploads the captured `previewSrc`.\n */\nexport function SaveAssetDialog(props: SaveAssetDialogProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"open\",\n    \"title\",\n    \"nameLabel\",\n    \"name\",\n    \"onNameChange\",\n    \"previewSrc\",\n    \"onCapture\",\n    \"captureLabel\",\n    \"busy\",\n    \"confirmLabel\",\n    \"cancelLabel\",\n    \"onConfirm\",\n    \"onClose\",\n    \"children\",\n    \"class\",\n  ]);\n\n  const showNameField = (): boolean => local.onNameChange !== undefined || local.name !== undefined;\n\n  return (\n    <Modal open={local.open} onClose={local.onClose} size=\"small\">\n      <Modal.Header>{local.title ?? \"Save\"}</Modal.Header>\n      <Modal.Content>\n        <div class={cn(\"smwb-save-asset-dialog__body\", local.class)}>\n          <Show when={showNameField()}>\n            <TextField\n              label={local.nameLabel ?? \"Name\"}\n              value={local.name ?? \"\"}\n              disabled={!!local.busy}\n              onChange={(event) => local.onNameChange?.((event.currentTarget as HTMLInputElement).value)}\n            />\n          </Show>\n          <Show when={local.previewSrc}>\n            <div class=\"smwb-save-asset-dialog__preview\">\n              <img src={local.previewSrc} alt=\"\" />\n            </div>\n          </Show>\n          <Show when={local.onCapture}>\n            <Button\n              variant=\"outlined\"\n              size=\"small\"\n              disabled={!!local.busy}\n              onClick={() => local.onCapture?.()}\n              label={local.captureLabel ?? \"Capture preview\"}\n            />\n          </Show>\n          {local.children}\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button variant=\"text\" disabled={!!local.busy} onClick={() => local.onClose()} label={local.cancelLabel ?? \"Cancel\"} />\n        <Button variant=\"contained\" disabled={!!local.busy} onClick={() => local.onConfirm()} label={local.confirmLabel ?? \"Save\"} />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default SaveAssetDialog;\n"],"mappings":"AAAA,OAAO;AACP,SAAmB,MAAM,kBAAkB;AAC3C,OAAO,QAAQ;AACf,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,iBAAiB;AA8BnB,SAAS,gBAAgB,OAA0C;AACxE,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,MAAe,MAAM,iBAAiB,UAAa,MAAM,SAAS;AAExF,SACE,CAAC,MAAM,MAAM,MAAM,MAAM,SAAS,MAAM,SAAS,KAAK,QAAQ;AAAA,MAC5D,CAAC,MAAM,QAAQ,MAAM,SAAS,OAAO,EAApC,MAAM,OAA6C;AAAA,MACpD,CAAC,MAAM,QAAQ;AAAA,QACb,CAAC,IAAI,OAAO,GAAG,gCAAgC,MAAM,KAAK,GAAG;AAAA,UAC3D,CAAC,KAAK,MAAM,cAAc,GAAG;AAAA,YAC3B,CAAC;AAAA,IACC,OAAO,MAAM,aAAa;AAAA,IAC1B,OAAO,MAAM,QAAQ;AAAA,IACrB,UAAU,CAAC,CAAC,MAAM;AAAA,IAClB,UAAU,CAAC,UAAU,MAAM,eAAgB,MAAM,cAAmC,KAAK;AAAA,EAC3F,EAAE;AAAA,UACJ,EAPC,KAOM;AAAA,UACP,CAAC,KAAK,MAAM,MAAM,YAAY;AAAA,YAC5B,CAAC,IAAI,MAAM,kCAAkC;AAAA,cAC3C,CAAC,IAAI,KAAK,MAAM,YAAY,IAAI,GAAG,EAAE;AAAA,YACvC,EAFC,IAEK;AAAA,UACR,EAJC,KAIM;AAAA,UACP,CAAC,KAAK,MAAM,MAAM,WAAW;AAAA,YAC3B,CAAC;AAAA,IACC,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,UAAU,CAAC,CAAC,MAAM;AAAA,IAClB,SAAS,MAAM,MAAM,YAAY;AAAA,IACjC,OAAO,MAAM,gBAAgB;AAAA,EAC/B,EAAE;AAAA,UACJ,EARC,KAQM;AAAA,WACN,MAAM,SAAS;AAAA,QAClB,EAxBC,IAwBK;AAAA,MACR,EA1BC,MAAM,QA0BS;AAAA,MAChB,CAAC,MAAM,OAAO;AAAA,QACZ,CAAC,OAAO,QAAQ,OAAO,UAAU,CAAC,CAAC,MAAM,MAAM,SAAS,MAAM,MAAM,QAAQ,GAAG,OAAO,MAAM,eAAe,UAAU,EAAE;AAAA,QACvH,CAAC,OAAO,QAAQ,YAAY,UAAU,CAAC,CAAC,MAAM,MAAM,SAAS,MAAM,MAAM,UAAU,GAAG,OAAO,MAAM,gBAAgB,QAAQ,EAAE;AAAA,MAC/H,EAHC,MAAM,OAGQ;AAAA,IACjB,EAjCC;AAmCL;AAEA,IAAO,0BAAQ;","names":[],"file":"saveAssetDialog.jsx"}

package/dist/source/components/inputs/valueSlider/index.js

@@ -0,0 +1,5 @@
+import { ValueSlider } from "./valueSlider";
+export {
+  ValueSlider
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/inputs/valueSlider/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/inputs/valueSlider/index.ts"],
+  "sourcesContent": ["export { ValueSlider } from \"./valueSlider\";\nexport type { ValueSliderProps } from \"./valueSlider\";\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;",
+  "names": []
+}

package/dist/source/components/inputs/valueSlider/valueSlider.jsx

@@ -0,0 +1,55 @@
+import "@smwb/ui-styles/less/components/valueSlider/valueSlider.entry.less";
+import { Show, splitProps } from "solid-js";
+import cn from "clsx";
+import { Slider } from "../slider";
+const formatReadout = (readout, value) => {
+  if (typeof readout === "function") return readout(value);
+  if (Array.isArray(value)) return `${value[0]} \u2013 ${value[1]}`;
+  return value == null ? "" : String(value);
+};
+function ValueSlider(props) {
+  const [local, sliderProps] = splitProps(props, [
+    "readout",
+    "endAdornment",
+    "onReset",
+    "resetLabel",
+    "label",
+    "class"
+  ]);
+  const hasReadout = () => local.readout !== void 0 && local.readout !== false;
+  const showHeader = () => local.label != null || hasReadout() || local.endAdornment != null || local.onReset != null;
+  return <div class={cn("smwb-value-slider", local.class)}>
+      <Show when={showHeader()}>
+        <div class="smwb-value-slider__header">
+          <Show when={local.label != null}>
+            <span class="smwb-value-slider__label">{local.label}</span>
+          </Show>
+          <span class="smwb-value-slider__spacer" />
+          <Show when={hasReadout()}>
+            <span class="smwb-value-slider__readout">{formatReadout(local.readout, sliderProps.value)}</span>
+          </Show>
+          {local.endAdornment}
+          <Show when={local.onReset != null}>
+            <button
+    type="button"
+    class="smwb-value-slider__reset"
+    aria-label={local.resetLabel ?? "Reset"}
+    disabled={sliderProps.disabled}
+    onClick={() => local.onReset?.()}
+  >
+              <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M3 12a9 9 0 1 0 3-6.7M3 4v4h4" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+            </button>
+          </Show>
+        </div>
+      </Show>
+      <Slider {...sliderProps} />
+    </div>;
+}
+var valueSlider_default = ValueSlider;
+export {
+  ValueSlider,
+  valueSlider_default as default
+};
+//# sourceMappingURL=valueSlider.jsx.map

package/dist/source/components/inputs/valueSlider/valueSlider.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/inputs/valueSlider/valueSlider.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/valueSlider/valueSlider.entry.less\";\nimport { type JSX, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Slider, type SliderProps, type SliderValue } from \"../slider\";\n\nexport interface ValueSliderProps extends SliderProps {\n  /**\n   * Read-only value readout beside the label. `true` shows the raw value; pass a\n   * formatter for units/precision (e.g. `(v) => `${v}%``). Reflects `props.value`.\n   */\n  readout?: boolean | ((value: SliderValue | undefined) => string);\n  /** Content at the end of the header row — a reset button, a favourite star, etc. */\n  endAdornment?: JSX.Element;\n  /** Renders a built-in reset control in the header; called on click. */\n  onReset?: () => void;\n  /** Accessible label for the reset control. */\n  resetLabel?: string;\n}\n\nconst formatReadout = (\n  readout: ValueSliderProps[\"readout\"],\n  value: SliderValue | undefined,\n): string => {\n  if (typeof readout === \"function\") return readout(value);\n  if (Array.isArray(value)) return `${value[0]} – ${value[1]}`;\n  return value == null ? \"\" : String(value);\n};\n\n/**\n * `Slider` plus the value-readout + adornment header row every app rebuilds: a\n * read-only formatted value next to the label, an optional reset \"eraser\", and an\n * `endAdornment` slot (favourite star, etc.). A drop-in preset — all `Slider`\n * props pass through; the label is rendered in the header instead of inside Slider.\n */\nexport function ValueSlider(props: ValueSliderProps): JSX.Element {\n  const [local, sliderProps] = splitProps(props, [\n    \"readout\",\n    \"endAdornment\",\n    \"onReset\",\n    \"resetLabel\",\n    \"label\",\n    \"class\",\n  ]);\n\n  const hasReadout = (): boolean => local.readout !== undefined && local.readout !== false;\n  const showHeader = (): boolean =>\n    local.label != null || hasReadout() || local.endAdornment != null || local.onReset != null;\n\n  return (\n    <div class={cn(\"smwb-value-slider\", local.class)}>\n      <Show when={showHeader()}>\n        <div class=\"smwb-value-slider__header\">\n          <Show when={local.label != null}>\n            <span class=\"smwb-value-slider__label\">{local.label}</span>\n          </Show>\n          <span class=\"smwb-value-slider__spacer\" />\n          <Show when={hasReadout()}>\n            <span class=\"smwb-value-slider__readout\">{formatReadout(local.readout, sliderProps.value)}</span>\n          </Show>\n          {local.endAdornment}\n          <Show when={local.onReset != null}>\n            <button\n              type=\"button\"\n              class=\"smwb-value-slider__reset\"\n              aria-label={local.resetLabel ?? \"Reset\"}\n              disabled={sliderProps.disabled}\n              onClick={() => local.onReset?.()}\n            >\n              <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v4h4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </svg>\n            </button>\n          </Show>\n        </div>\n      </Show>\n      <Slider {...sliderProps} />\n    </div>\n  );\n}\n\nexport default ValueSlider;\n"],"mappings":"AAAA,OAAO;AACP,SAAmB,MAAM,kBAAkB;AAC3C,OAAO,QAAQ;AACf,SAAS,cAAkD;AAgB3D,MAAM,gBAAgB,CACpB,SACA,UACW;AACX,MAAI,OAAO,YAAY,WAAY,QAAO,QAAQ,KAAK;AACvD,MAAI,MAAM,QAAQ,KAAK,EAAG,QAAO,GAAG,MAAM,CAAC,CAAC,WAAM,MAAM,CAAC,CAAC;AAC1D,SAAO,SAAS,OAAO,KAAK,OAAO,KAAK;AAC1C;AAQO,SAAS,YAAY,OAAsC;AAChE,QAAM,CAAC,OAAO,WAAW,IAAI,WAAW,OAAO;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa,MAAe,MAAM,YAAY,UAAa,MAAM,YAAY;AACnF,QAAM,aAAa,MACjB,MAAM,SAAS,QAAQ,WAAW,KAAK,MAAM,gBAAgB,QAAQ,MAAM,WAAW;AAExF,SACE,CAAC,IAAI,OAAO,GAAG,qBAAqB,MAAM,KAAK,GAAG;AAAA,MAChD,CAAC,KAAK,MAAM,WAAW,GAAG;AAAA,QACxB,CAAC,IAAI,MAAM,4BAA4B;AAAA,UACrC,CAAC,KAAK,MAAM,MAAM,SAAS,MAAM;AAAA,YAC/B,CAAC,KAAK,MAAM,4BAA4B,MAAM,MAAM,EAAnD,KAA0D;AAAA,UAC7D,EAFC,KAEM;AAAA,UACP,CAAC,KAAK,MAAM,4BAA4B,EAAE;AAAA,UAC1C,CAAC,KAAK,MAAM,WAAW,GAAG;AAAA,YACxB,CAAC,KAAK,MAAM,8BAA8B,cAAc,MAAM,SAAS,YAAY,KAAK,EAAE,EAAzF,KAAgG;AAAA,UACnG,EAFC,KAEM;AAAA,WACN,MAAM,aAAa;AAAA,UACpB,CAAC,KAAK,MAAM,MAAM,WAAW,MAAM;AAAA,YACjC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,YAAY,MAAM,cAAc;AAAA,IAChC,UAAU,YAAY;AAAA,IACtB,SAAS,MAAM,MAAM,UAAU;AAAA,GAChC;AAAA,cACC,CAAC,IAAI,QAAQ,YAAY,MAAM,KAAK,OAAO,KAAK,YAAY,OAAO,KAAK,OAAO,OAAO,eAAe,aAAa,IAAI;AAAA,gBACpH,CAAC,KAAK,EAAE,gCAAgC,eAAe,QAAQ,gBAAgB,QAAQ,EAAE;AAAA,cAC3F,EAFC,IAEK;AAAA,YACR,EAVC,OAUQ;AAAA,UACX,EAZC,KAYM;AAAA,QACT,EAtBC,IAsBK;AAAA,MACR,EAxBC,KAwBM;AAAA,MACP,CAAC,WAAW,aAAa,EAAE;AAAA,IAC7B,EA3BC;AA6BL;AAEA,IAAO,sBAAQ;","names":[],"file":"valueSlider.jsx"}