@almadar/ui 5.147.0 → 5.148.0

package/dist/avl/index.cjs

@@ -15328,7 +15328,10 @@ var init_LearningCanvas = __esm({
           ctx.fillRect(0, 0, width, height);
         }
         for (const shape of shapes) {
-          drawShape(ctx, shape, width, height);
+          if (shape.type !== "text") drawShape(ctx, shape, width, height);
+        }
+        for (const shape of shapes) {
+          if (shape.type === "text") drawShape(ctx, shape, width, height);
         }
       }, [width, height, backgroundColor, shapes]);
       React94.useEffect(() => {
@@ -16891,7 +16894,7 @@ var init_AlgorithmCanvas = __esm({
     DEFAULT_CELL_COLOR = "#e5e7eb";
     DEFAULT_POINTER_COLOR = "#dc2626";
     POINTER_BAND = 34;
-    TOP_PAD = 12;
+    TOP_PAD = 26;
     AlgorithmCanvas = ({
       className,
       width = 600,
@@ -27670,6 +27673,7 @@ var init_FilterGroup = __esm({
     init_Badge();
     init_Stack();
     init_Icon();
+    init_RangeSlider();
     init_useEventBus();
     init_useQuerySingleton();
     resolveFilterType = (filter) => filter.filterType ?? filter.type;
@@ -27864,6 +27868,35 @@ var init_FilterGroup = __esm({
                   onClear: () => handleFilterSelect(`${filter.field}_to`, null)
                 }
               )
+            ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                RangeSlider,
+                {
+                  min: filter.min ?? 0,
+                  max: filter.max ?? 100,
+                  step: filter.step ?? 1,
+                  value: Number(
+                    selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                  ),
+                  onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                  showTooltip: true,
+                  "aria-label": t("filterGroup.from")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                RangeSlider,
+                {
+                  min: filter.min ?? 0,
+                  max: filter.max ?? 100,
+                  step: filter.step ?? 1,
+                  value: Number(
+                    selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                  ),
+                  onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                  showTooltip: true,
+                  "aria-label": t("filterGroup.to")
+                }
+              )
             ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
               Input,
               {
@@ -27946,6 +27979,36 @@ var init_FilterGroup = __esm({
                     className: "text-sm min-w-[100px]"
                   }
                 )
+              ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                    className: "min-w-[100px]",
+                    "aria-label": t("filterGroup.from")
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "-" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                    className: "min-w-[100px]",
+                    "aria-label": t("filterGroup.to")
+                  }
+                )
               ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
                 Input,
                 {
@@ -28064,6 +28127,38 @@ var init_FilterGroup = __esm({
                     className: "min-w-[130px]"
                   }
                 )
+              ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                    showTooltip: true,
+                    className: "min-w-[130px]",
+                    "aria-label": t("filterGroup.from")
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "-" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                    showTooltip: true,
+                    className: "min-w-[130px]",
+                    "aria-label": t("filterGroup.to")
+                  }
+                )
               ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
                 Input,
                 {

package/dist/avl/index.js

@@ -15252,7 +15252,10 @@ var init_LearningCanvas = __esm({
           ctx.fillRect(0, 0, width, height);
         }
         for (const shape of shapes) {
-          drawShape(ctx, shape, width, height);
+          if (shape.type !== "text") drawShape(ctx, shape, width, height);
+        }
+        for (const shape of shapes) {
+          if (shape.type === "text") drawShape(ctx, shape, width, height);
         }
       }, [width, height, backgroundColor, shapes]);
       useEffect(() => {
@@ -16815,7 +16818,7 @@ var init_AlgorithmCanvas = __esm({
     DEFAULT_CELL_COLOR = "#e5e7eb";
     DEFAULT_POINTER_COLOR = "#dc2626";
     POINTER_BAND = 34;
-    TOP_PAD = 12;
+    TOP_PAD = 26;
     AlgorithmCanvas = ({
       className,
       width = 600,
@@ -27594,6 +27597,7 @@ var init_FilterGroup = __esm({
     init_Badge();
     init_Stack();
     init_Icon();
+    init_RangeSlider();
     init_useEventBus();
     init_useQuerySingleton();
     resolveFilterType = (filter) => filter.filterType ?? filter.type;
@@ -27788,6 +27792,35 @@ var init_FilterGroup = __esm({
                   onClear: () => handleFilterSelect(`${filter.field}_to`, null)
                 }
               )
+            ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx(
+                RangeSlider,
+                {
+                  min: filter.min ?? 0,
+                  max: filter.max ?? 100,
+                  step: filter.step ?? 1,
+                  value: Number(
+                    selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                  ),
+                  onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                  showTooltip: true,
+                  "aria-label": t("filterGroup.from")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                RangeSlider,
+                {
+                  min: filter.min ?? 0,
+                  max: filter.max ?? 100,
+                  step: filter.step ?? 1,
+                  value: Number(
+                    selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                  ),
+                  onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                  showTooltip: true,
+                  "aria-label": t("filterGroup.to")
+                }
+              )
             ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsx(
               Input,
               {
@@ -27870,6 +27903,36 @@ var init_FilterGroup = __esm({
                     className: "text-sm min-w-[100px]"
                   }
                 )
+              ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                    className: "min-w-[100px]",
+                    "aria-label": t("filterGroup.from")
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "-" }),
+                /* @__PURE__ */ jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                    className: "min-w-[100px]",
+                    "aria-label": t("filterGroup.to")
+                  }
+                )
               ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsx(
                 Input,
                 {
@@ -27988,6 +28051,38 @@ var init_FilterGroup = __esm({
                     className: "min-w-[130px]"
                   }
                 )
+              ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                    showTooltip: true,
+                    className: "min-w-[130px]",
+                    "aria-label": t("filterGroup.from")
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "-" }),
+                /* @__PURE__ */ jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                    showTooltip: true,
+                    className: "min-w-[130px]",
+                    "aria-label": t("filterGroup.to")
+                  }
+                )
               ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsx(
                 Input,
                 {

package/dist/components/index.cjs

@@ -8690,7 +8690,10 @@ var init_LearningCanvas = __esm({
           ctx.fillRect(0, 0, width, height);
         }
         for (const shape of shapes) {
-          drawShape(ctx, shape, width, height);
+          if (shape.type !== "text") drawShape(ctx, shape, width, height);
+        }
+        for (const shape of shapes) {
+          if (shape.type === "text") drawShape(ctx, shape, width, height);
         }
       }, [width, height, backgroundColor, shapes]);
       React77.useEffect(() => {
@@ -8771,7 +8774,7 @@ var init_AlgorithmCanvas = __esm({
     DEFAULT_CELL_COLOR = "#e5e7eb";
     DEFAULT_POINTER_COLOR = "#dc2626";
     POINTER_BAND = 34;
-    TOP_PAD = 12;
+    TOP_PAD = 26;
     exports.AlgorithmCanvas = ({
       className,
       width = 600,
@@ -23756,6 +23759,7 @@ var init_FilterGroup = __esm({
     init_Badge();
     init_Stack();
     init_Icon();
+    init_RangeSlider();
     init_useEventBus();
     init_useQuerySingleton();
     resolveFilterType = (filter) => filter.filterType ?? filter.type;
@@ -23950,6 +23954,35 @@ var init_FilterGroup = __esm({
                   onClear: () => handleFilterSelect(`${filter.field}_to`, null)
                 }
               )
+            ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                exports.RangeSlider,
+                {
+                  min: filter.min ?? 0,
+                  max: filter.max ?? 100,
+                  step: filter.step ?? 1,
+                  value: Number(
+                    selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                  ),
+                  onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                  showTooltip: true,
+                  "aria-label": t("filterGroup.from")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                exports.RangeSlider,
+                {
+                  min: filter.min ?? 0,
+                  max: filter.max ?? 100,
+                  step: filter.step ?? 1,
+                  value: Number(
+                    selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                  ),
+                  onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                  showTooltip: true,
+                  "aria-label": t("filterGroup.to")
+                }
+              )
             ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
               exports.Input,
               {
@@ -24032,6 +24065,36 @@ var init_FilterGroup = __esm({
                     className: "text-sm min-w-[100px]"
                   }
                 )
+              ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  exports.RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                    className: "min-w-[100px]",
+                    "aria-label": t("filterGroup.from")
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "-" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  exports.RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                    className: "min-w-[100px]",
+                    "aria-label": t("filterGroup.to")
+                  }
+                )
               ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
                 exports.Input,
                 {
@@ -24150,6 +24213,38 @@ var init_FilterGroup = __esm({
                     className: "min-w-[130px]"
                   }
                 )
+              ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  exports.RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                    showTooltip: true,
+                    className: "min-w-[130px]",
+                    "aria-label": t("filterGroup.from")
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "-" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  exports.RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                    showTooltip: true,
+                    className: "min-w-[130px]",
+                    "aria-label": t("filterGroup.to")
+                  }
+                )
               ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
                 exports.Input,
                 {

package/dist/components/index.d.cts

@@ -3934,12 +3934,18 @@ type FilterGroupLook = "toolbar" | "chips" | "pills" | "popover-trigger" | "inli
 interface FilterDefinition {
     field: string;
     label: string;
-    /** Filter type - 'text' free-text input, 'date' renders a date picker, 'date-range'/'daterange' renders two date pickers */
-    filterType?: "text" | "select" | "toggle" | "checkbox" | "date" | "daterange" | "date-range";
+    /** Filter type - 'text' free-text input, 'date' renders a date picker, 'date-range'/'daterange' renders two date pickers, 'number-range'/'numberrange' renders two range sliders */
+    filterType?: "text" | "select" | "toggle" | "checkbox" | "date" | "daterange" | "date-range" | "numberrange" | "number-range";
     /** Alias for filterType (schema compatibility) */
-    type?: "text" | "select" | "toggle" | "checkbox" | "date" | "daterange" | "date-range";
+    type?: "text" | "select" | "toggle" | "checkbox" | "date" | "daterange" | "date-range" | "numberrange" | "number-range";
     /** Options for select/toggle filters */
     options?: readonly string[];
+    /** Lower bound for numberrange filters */
+    min?: number;
+    /** Upper bound for numberrange filters */
+    max?: number;
+    /** Step increment for numberrange filters */
+    step?: number;
 }
 /**
  * FilterGroup — a panel of filter controls that narrows a collection by field

package/dist/components/index.d.ts

@@ -3934,12 +3934,18 @@ type FilterGroupLook = "toolbar" | "chips" | "pills" | "popover-trigger" | "inli
 interface FilterDefinition {
     field: string;
     label: string;
-    /** Filter type - 'text' free-text input, 'date' renders a date picker, 'date-range'/'daterange' renders two date pickers */
-    filterType?: "text" | "select" | "toggle" | "checkbox" | "date" | "daterange" | "date-range";
+    /** Filter type - 'text' free-text input, 'date' renders a date picker, 'date-range'/'daterange' renders two date pickers, 'number-range'/'numberrange' renders two range sliders */
+    filterType?: "text" | "select" | "toggle" | "checkbox" | "date" | "daterange" | "date-range" | "numberrange" | "number-range";
     /** Alias for filterType (schema compatibility) */
-    type?: "text" | "select" | "toggle" | "checkbox" | "date" | "daterange" | "date-range";
+    type?: "text" | "select" | "toggle" | "checkbox" | "date" | "daterange" | "date-range" | "numberrange" | "number-range";
     /** Options for select/toggle filters */
     options?: readonly string[];
+    /** Lower bound for numberrange filters */
+    min?: number;
+    /** Upper bound for numberrange filters */
+    max?: number;
+    /** Step increment for numberrange filters */
+    step?: number;
 }
 /**
  * FilterGroup — a panel of filter controls that narrows a collection by field

package/dist/components/index.js

@@ -8615,7 +8615,10 @@ var init_LearningCanvas = __esm({
           ctx.fillRect(0, 0, width, height);
         }
         for (const shape of shapes) {
-          drawShape(ctx, shape, width, height);
+          if (shape.type !== "text") drawShape(ctx, shape, width, height);
+        }
+        for (const shape of shapes) {
+          if (shape.type === "text") drawShape(ctx, shape, width, height);
         }
       }, [width, height, backgroundColor, shapes]);
       useEffect(() => {
@@ -8696,7 +8699,7 @@ var init_AlgorithmCanvas = __esm({
     DEFAULT_CELL_COLOR = "#e5e7eb";
     DEFAULT_POINTER_COLOR = "#dc2626";
     POINTER_BAND = 34;
-    TOP_PAD = 12;
+    TOP_PAD = 26;
     AlgorithmCanvas = ({
       className,
       width = 600,
@@ -23681,6 +23684,7 @@ var init_FilterGroup = __esm({
     init_Badge();
     init_Stack();
     init_Icon();
+    init_RangeSlider();
     init_useEventBus();
     init_useQuerySingleton();
     resolveFilterType = (filter) => filter.filterType ?? filter.type;
@@ -23875,6 +23879,35 @@ var init_FilterGroup = __esm({
                   onClear: () => handleFilterSelect(`${filter.field}_to`, null)
                 }
               )
+            ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx(
+                RangeSlider,
+                {
+                  min: filter.min ?? 0,
+                  max: filter.max ?? 100,
+                  step: filter.step ?? 1,
+                  value: Number(
+                    selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                  ),
+                  onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                  showTooltip: true,
+                  "aria-label": t("filterGroup.from")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                RangeSlider,
+                {
+                  min: filter.min ?? 0,
+                  max: filter.max ?? 100,
+                  step: filter.step ?? 1,
+                  value: Number(
+                    selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                  ),
+                  onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                  showTooltip: true,
+                  "aria-label": t("filterGroup.to")
+                }
+              )
             ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsx(
               Input,
               {
@@ -23957,6 +23990,36 @@ var init_FilterGroup = __esm({
                     className: "text-sm min-w-[100px]"
                   }
                 )
+              ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                    className: "min-w-[100px]",
+                    "aria-label": t("filterGroup.from")
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "-" }),
+                /* @__PURE__ */ jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                    className: "min-w-[100px]",
+                    "aria-label": t("filterGroup.to")
+                  }
+                )
               ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsx(
                 Input,
                 {
@@ -24075,6 +24138,38 @@ var init_FilterGroup = __esm({
                     className: "min-w-[130px]"
                   }
                 )
+              ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                    showTooltip: true,
+                    className: "min-w-[130px]",
+                    "aria-label": t("filterGroup.from")
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "-" }),
+                /* @__PURE__ */ jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                    showTooltip: true,
+                    className: "min-w-[130px]",
+                    "aria-label": t("filterGroup.to")
+                  }
+                )
               ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsx(
                 Input,
                 {

package/dist/providers/index.cjs

@@ -11853,7 +11853,10 @@ var init_LearningCanvas = __esm({
           ctx.fillRect(0, 0, width, height);
         }
         for (const shape of shapes) {
-          drawShape(ctx, shape, width, height);
+          if (shape.type !== "text") drawShape(ctx, shape, width, height);
+        }
+        for (const shape of shapes) {
+          if (shape.type === "text") drawShape(ctx, shape, width, height);
         }
       }, [width, height, backgroundColor, shapes]);
       React87.useEffect(() => {
@@ -13799,7 +13802,7 @@ var init_AlgorithmCanvas = __esm({
     DEFAULT_CELL_COLOR = "#e5e7eb";
     DEFAULT_POINTER_COLOR = "#dc2626";
     POINTER_BAND = 34;
-    TOP_PAD = 12;
+    TOP_PAD = 26;
     AlgorithmCanvas = ({
       className,
       width = 600,
@@ -25405,6 +25408,7 @@ var init_FilterGroup = __esm({
     init_Badge();
     init_Stack();
     init_Icon();
+    init_RangeSlider();
     init_useEventBus();
     init_useQuerySingleton();
     resolveFilterType = (filter) => filter.filterType ?? filter.type;
@@ -25599,6 +25603,35 @@ var init_FilterGroup = __esm({
                   onClear: () => handleFilterSelect(`${filter.field}_to`, null)
                 }
               )
+            ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                RangeSlider,
+                {
+                  min: filter.min ?? 0,
+                  max: filter.max ?? 100,
+                  step: filter.step ?? 1,
+                  value: Number(
+                    selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                  ),
+                  onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                  showTooltip: true,
+                  "aria-label": t("filterGroup.from")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                RangeSlider,
+                {
+                  min: filter.min ?? 0,
+                  max: filter.max ?? 100,
+                  step: filter.step ?? 1,
+                  value: Number(
+                    selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                  ),
+                  onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                  showTooltip: true,
+                  "aria-label": t("filterGroup.to")
+                }
+              )
             ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
               Input,
               {
@@ -25681,6 +25714,36 @@ var init_FilterGroup = __esm({
                     className: "text-sm min-w-[100px]"
                   }
                 )
+              ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                    className: "min-w-[100px]",
+                    "aria-label": t("filterGroup.from")
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "-" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                    className: "min-w-[100px]",
+                    "aria-label": t("filterGroup.to")
+                  }
+                )
               ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
                 Input,
                 {
@@ -25799,6 +25862,38 @@ var init_FilterGroup = __esm({
                     className: "min-w-[130px]"
                   }
                 )
+              ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                    showTooltip: true,
+                    className: "min-w-[130px]",
+                    "aria-label": t("filterGroup.from")
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "-" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                    showTooltip: true,
+                    className: "min-w-[130px]",
+                    "aria-label": t("filterGroup.to")
+                  }
+                )
               ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
                 Input,
                 {

package/dist/providers/index.js

@@ -11779,7 +11779,10 @@ var init_LearningCanvas = __esm({
           ctx.fillRect(0, 0, width, height);
         }
         for (const shape of shapes) {
-          drawShape(ctx, shape, width, height);
+          if (shape.type !== "text") drawShape(ctx, shape, width, height);
+        }
+        for (const shape of shapes) {
+          if (shape.type === "text") drawShape(ctx, shape, width, height);
         }
       }, [width, height, backgroundColor, shapes]);
       useEffect(() => {
@@ -13725,7 +13728,7 @@ var init_AlgorithmCanvas = __esm({
     DEFAULT_CELL_COLOR = "#e5e7eb";
     DEFAULT_POINTER_COLOR = "#dc2626";
     POINTER_BAND = 34;
-    TOP_PAD = 12;
+    TOP_PAD = 26;
     AlgorithmCanvas = ({
       className,
       width = 600,
@@ -25331,6 +25334,7 @@ var init_FilterGroup = __esm({
     init_Badge();
     init_Stack();
     init_Icon();
+    init_RangeSlider();
     init_useEventBus();
     init_useQuerySingleton();
     resolveFilterType = (filter) => filter.filterType ?? filter.type;
@@ -25525,6 +25529,35 @@ var init_FilterGroup = __esm({
                   onClear: () => handleFilterSelect(`${filter.field}_to`, null)
                 }
               )
+            ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx(
+                RangeSlider,
+                {
+                  min: filter.min ?? 0,
+                  max: filter.max ?? 100,
+                  step: filter.step ?? 1,
+                  value: Number(
+                    selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                  ),
+                  onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                  showTooltip: true,
+                  "aria-label": t("filterGroup.from")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                RangeSlider,
+                {
+                  min: filter.min ?? 0,
+                  max: filter.max ?? 100,
+                  step: filter.step ?? 1,
+                  value: Number(
+                    selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                  ),
+                  onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                  showTooltip: true,
+                  "aria-label": t("filterGroup.to")
+                }
+              )
             ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsx(
               Input,
               {
@@ -25607,6 +25640,36 @@ var init_FilterGroup = __esm({
                     className: "text-sm min-w-[100px]"
                   }
                 )
+              ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                    className: "min-w-[100px]",
+                    "aria-label": t("filterGroup.from")
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "-" }),
+                /* @__PURE__ */ jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                    className: "min-w-[100px]",
+                    "aria-label": t("filterGroup.to")
+                  }
+                )
               ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsx(
                 Input,
                 {
@@ -25725,6 +25788,38 @@ var init_FilterGroup = __esm({
                     className: "min-w-[130px]"
                   }
                 )
+              ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                    showTooltip: true,
+                    className: "min-w-[130px]",
+                    "aria-label": t("filterGroup.from")
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "-" }),
+                /* @__PURE__ */ jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                    showTooltip: true,
+                    className: "min-w-[130px]",
+                    "aria-label": t("filterGroup.to")
+                  }
+                )
               ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsx(
                 Input,
                 {

package/dist/runtime/index.cjs

@@ -11940,7 +11940,10 @@ var init_LearningCanvas = __esm({
           ctx.fillRect(0, 0, width, height);
         }
         for (const shape of shapes) {
-          drawShape(ctx, shape, width, height);
+          if (shape.type !== "text") drawShape(ctx, shape, width, height);
+        }
+        for (const shape of shapes) {
+          if (shape.type === "text") drawShape(ctx, shape, width, height);
         }
       }, [width, height, backgroundColor, shapes]);
       React85.useEffect(() => {
@@ -13503,7 +13506,7 @@ var init_AlgorithmCanvas = __esm({
     DEFAULT_CELL_COLOR = "#e5e7eb";
     DEFAULT_POINTER_COLOR = "#dc2626";
     POINTER_BAND = 34;
-    TOP_PAD = 12;
+    TOP_PAD = 26;
     AlgorithmCanvas = ({
       className,
       width = 600,
@@ -24914,6 +24917,7 @@ var init_FilterGroup = __esm({
     init_Badge();
     init_Stack();
     init_Icon();
+    init_RangeSlider();
     init_useEventBus();
     init_useQuerySingleton();
     resolveFilterType = (filter) => filter.filterType ?? filter.type;
@@ -25108,6 +25112,35 @@ var init_FilterGroup = __esm({
                   onClear: () => handleFilterSelect(`${filter.field}_to`, null)
                 }
               )
+            ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                RangeSlider,
+                {
+                  min: filter.min ?? 0,
+                  max: filter.max ?? 100,
+                  step: filter.step ?? 1,
+                  value: Number(
+                    selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                  ),
+                  onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                  showTooltip: true,
+                  "aria-label": t("filterGroup.from")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                RangeSlider,
+                {
+                  min: filter.min ?? 0,
+                  max: filter.max ?? 100,
+                  step: filter.step ?? 1,
+                  value: Number(
+                    selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                  ),
+                  onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                  showTooltip: true,
+                  "aria-label": t("filterGroup.to")
+                }
+              )
             ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
               Input,
               {
@@ -25190,6 +25223,36 @@ var init_FilterGroup = __esm({
                     className: "text-sm min-w-[100px]"
                   }
                 )
+              ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                    className: "min-w-[100px]",
+                    "aria-label": t("filterGroup.from")
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "-" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                    className: "min-w-[100px]",
+                    "aria-label": t("filterGroup.to")
+                  }
+                )
               ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
                 Input,
                 {
@@ -25308,6 +25371,38 @@ var init_FilterGroup = __esm({
                     className: "min-w-[130px]"
                   }
                 )
+              ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                    showTooltip: true,
+                    className: "min-w-[130px]",
+                    "aria-label": t("filterGroup.from")
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "-" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                    showTooltip: true,
+                    className: "min-w-[130px]",
+                    "aria-label": t("filterGroup.to")
+                  }
+                )
               ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
                 Input,
                 {

package/dist/runtime/index.js

@@ -11866,7 +11866,10 @@ var init_LearningCanvas = __esm({
           ctx.fillRect(0, 0, width, height);
         }
         for (const shape of shapes) {
-          drawShape(ctx, shape, width, height);
+          if (shape.type !== "text") drawShape(ctx, shape, width, height);
+        }
+        for (const shape of shapes) {
+          if (shape.type === "text") drawShape(ctx, shape, width, height);
         }
       }, [width, height, backgroundColor, shapes]);
       useEffect(() => {
@@ -13429,7 +13432,7 @@ var init_AlgorithmCanvas = __esm({
     DEFAULT_CELL_COLOR = "#e5e7eb";
     DEFAULT_POINTER_COLOR = "#dc2626";
     POINTER_BAND = 34;
-    TOP_PAD = 12;
+    TOP_PAD = 26;
     AlgorithmCanvas = ({
       className,
       width = 600,
@@ -24840,6 +24843,7 @@ var init_FilterGroup = __esm({
     init_Badge();
     init_Stack();
     init_Icon();
+    init_RangeSlider();
     init_useEventBus();
     init_useQuerySingleton();
     resolveFilterType = (filter) => filter.filterType ?? filter.type;
@@ -25034,6 +25038,35 @@ var init_FilterGroup = __esm({
                   onClear: () => handleFilterSelect(`${filter.field}_to`, null)
                 }
               )
+            ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx(
+                RangeSlider,
+                {
+                  min: filter.min ?? 0,
+                  max: filter.max ?? 100,
+                  step: filter.step ?? 1,
+                  value: Number(
+                    selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                  ),
+                  onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                  showTooltip: true,
+                  "aria-label": t("filterGroup.from")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                RangeSlider,
+                {
+                  min: filter.min ?? 0,
+                  max: filter.max ?? 100,
+                  step: filter.step ?? 1,
+                  value: Number(
+                    selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                  ),
+                  onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                  showTooltip: true,
+                  "aria-label": t("filterGroup.to")
+                }
+              )
             ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsx(
               Input,
               {
@@ -25116,6 +25149,36 @@ var init_FilterGroup = __esm({
                     className: "text-sm min-w-[100px]"
                   }
                 )
+              ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                    className: "min-w-[100px]",
+                    "aria-label": t("filterGroup.from")
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "-" }),
+                /* @__PURE__ */ jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                    className: "min-w-[100px]",
+                    "aria-label": t("filterGroup.to")
+                  }
+                )
               ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsx(
                 Input,
                 {
@@ -25234,6 +25297,38 @@ var init_FilterGroup = __esm({
                     className: "min-w-[130px]"
                   }
                 )
+              ] }) : resolveFilterType(filter) === "numberrange" || resolveFilterType(filter) === "number-range" ? /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_min`] ?? filter.min ?? 0
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_min`, String(v)),
+                    showTooltip: true,
+                    className: "min-w-[130px]",
+                    "aria-label": t("filterGroup.from")
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "-" }),
+                /* @__PURE__ */ jsx(
+                  RangeSlider,
+                  {
+                    min: filter.min ?? 0,
+                    max: filter.max ?? 100,
+                    step: filter.step ?? 1,
+                    value: Number(
+                      selectedValues[`${filter.field}_max`] ?? filter.max ?? 100
+                    ),
+                    onChange: (v) => handleFilterSelect(`${filter.field}_max`, String(v)),
+                    showTooltip: true,
+                    className: "min-w-[130px]",
+                    "aria-label": t("filterGroup.to")
+                  }
+                )
               ] }) : resolveFilterType(filter) === "text" ? /* @__PURE__ */ jsx(
                 Input,
                 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.147.0",
+  "version": "5.148.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -118,11 +118,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@almadar/core": "^10.57.0",
-    "@almadar/evaluator": "^2.40.0",
+    "@almadar/core": "^10.58.0",
+    "@almadar/evaluator": "^2.41.0",
     "@almadar/logger": "^1.11.0",
     "@almadar/runtime": "^6.53.0",
-    "@almadar/std": "^16.170.0",
+    "@almadar/std": "^16.172.0",
     "@almadar/syntax": "^1.15.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",