lupine.components 1.1.52 → 1.1.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.1.52",
+  "version": "1.1.54",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",

package/src/component-pool/range/range.tsx

@@ -18,8 +18,12 @@ export type RangeProps = {
   tickStep?: number;
   vertical?: boolean;
   range?: boolean;
+  snapThresholdPercent?: number; // threshold in % to snap to tick, <=0 disables snapping (default 5%)
   onChange?: (val: number | [number, number]) => void;
   hook?: RangeHookProps;
+  trackColor?: string;
+  fillColor?: string;
+  showButtons?: boolean;
 };
 
 // 1. Define Static CSS completely decoupled from Reactivity (isVertical)
@@ -35,7 +39,6 @@ const rangeCss: CssProps = {
     padding: 'var(--space-m, 8px) 0',
     width: '100%',
     height: 'auto',
-    minWidth: '100%',
     minHeight: '40px',
   },
   '&.vertical': {
@@ -61,15 +64,17 @@ const rangeCss: CssProps = {
   '&.horizontal .&-wrapper': {
     width: '100%',
     height: '20px',
+    flex: 1,
   },
   '&.vertical .&-wrapper': {
     width: '20px',
     height: '100%',
+    flex: 1,
   },
 
   '.&-track': {
     position: 'relative',
-    backgroundColor: 'var(--secondary-bg-color, #eee)',
+    backgroundColor: 'var(--range-track-color, var(--scrollbar-bg, #eee))',
     borderRadius: '999px',
   },
   '&.horizontal .&-track': {
@@ -83,7 +88,7 @@ const rangeCss: CssProps = {
 
   '.&-fill': {
     position: 'absolute',
-    backgroundColor: 'var(--primary-accent-color, #0a74c9)',
+    backgroundColor: 'var(--range-fill-color, var(--primary-accent-color, #0a74c9))',
     borderRadius: '999px',
   },
   '&.horizontal .&-fill': {
@@ -132,7 +137,7 @@ const rangeCss: CssProps = {
     width: '20px',
     height: '20px',
     backgroundColor: '#fff',
-    border: '2px solid var(--primary-accent-color, #0a74c9)',
+    border: '2px solid var(--range-fill-color, var(--primary-accent-color, #0a74c9))',
     borderRadius: '50%',
     cursor: 'pointer',
     boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
@@ -149,7 +154,7 @@ const rangeCss: CssProps = {
     width: '20px',
     height: '20px',
     backgroundColor: '#fff',
-    border: '2px solid var(--primary-accent-color, #0a74c9)',
+    border: '2px solid var(--range-fill-color, var(--primary-accent-color, #0a74c9))',
     borderRadius: '50%',
     cursor: 'pointer',
     boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
@@ -158,30 +163,24 @@ const rangeCss: CssProps = {
 
   '.&-ticks': {
     position: 'absolute',
-    display: 'flex',
-    justifyContent: 'space-between',
     pointerEvents: 'none',
     fontSize: '12px',
     color: 'var(--secondary-color, #818181)',
   },
   '&.horizontal .&-ticks': {
-    top: '50%',
+    top: 'calc(50% + 4px)',
     bottom: 'auto',
     left: 0,
     right: 0,
-    marginTop: '4px',
-    marginLeft: '4px',
-    flexDirection: 'row',
+    marginTop: 0,
     height: 'auto',
   },
   '&.vertical .&-ticks': {
     top: 0,
     bottom: 0,
-    left: '20%',
+    left: 'calc(50% + 4px)',
     right: 'auto',
-    marginLeft: '8px',
-    marginTop: 0,
-    flexDirection: 'column-reverse',
+    marginLeft: 0,
     height: '100%',
   },
 
@@ -211,6 +210,64 @@ const rangeCss: CssProps = {
     marginBottom: 0,
     marginRight: '4px',
   },
+
+  '.&-inner-container': {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+  },
+  '&.horizontal .&-inner-container': {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  '&.vertical .&-inner-container': {
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+
+  '&.horizontal .&-buttons': {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: '6px',
+    marginLeft: '10px',
+  },
+  '&.vertical .&-buttons': {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: '6px',
+    marginTop: '10px',
+  },
+  '.&-btn': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '24px',
+    height: '24px',
+    borderRadius: '50%',
+    border: '2px solid var(--range-fill-color, var(--primary-accent-color, #0a74c9))',
+    backgroundColor: 'var(--secondary-bg-color, #1c1c1c)',
+    color: 'var(--primary-color, #fff)',
+    fontSize: '16px',
+    fontFamily: 'monospace',
+    fontWeight: 'bold',
+    cursor: 'pointer',
+    padding: 0,
+    margin: 0,
+    userSelect: 'none',
+    transition: 'background-color 0.2s, transform 0.1s',
+    lineHeight: '1',
+    pointerEvents: 'auto',
+  },
+  '.&-btn:hover': {
+    backgroundColor: 'var(--range-fill-color, var(--primary-accent-color, #0a74c9))',
+    color: '#fff',
+    transform: 'scale(1.1)',
+  },
+  '.&-btn:active': {
+    transform: 'scale(0.95)',
+  },
 };
 
 export const Range = (props: RangeProps) => {
@@ -220,6 +277,10 @@ export const Range = (props: RangeProps) => {
   const isRangeMode = !!props.range;
   const isVertical = !!props.vertical;
 
+  const customStyle: any = { ...props.style };
+  if (props.trackColor) customStyle['--range-track-color'] = props.trackColor;
+  if (props.fillColor) customStyle['--range-fill-color'] = props.fillColor;
+
   // Evaluate the immutable hash exact ONCE for all range implementations.
   const globalCssId = getGlobalStylesId(rangeCss);
   // Bind the global style ID ensuring it's in the CSS tree across instances
@@ -247,6 +308,25 @@ export const Range = (props: RangeProps) => {
   let currentVal1 = val1;
   let currentVal2 = val2;
 
+  const adjustByStep = (direction: -1 | 1) => {
+    if (props.disabled) return;
+    if (isRangeMode) {
+      let newVal = currentVal1 + direction * step;
+      newVal = Math.max(min, Math.min(currentVal2, newVal));
+      currentVal1 = newVal;
+      const inputMin = ref.$('.input-min') as HTMLInputElement;
+      if (inputMin) inputMin.value = currentVal1.toString();
+    } else {
+      let newVal = currentVal1 + direction * step;
+      newVal = Math.max(min, Math.min(max, newVal));
+      currentVal1 = newVal;
+      const inputSingle = ref.$('.input-single') as HTMLInputElement;
+      if (inputSingle) inputSingle.value = currentVal1.toString();
+    }
+    updateVisuals();
+    handleChange();
+  };
+
   const updateVisuals = () => {
     const fill = ref.$('.&-fill') as HTMLElement;
     if (!fill) return;
@@ -276,8 +356,124 @@ export const Range = (props: RangeProps) => {
     }
   };
 
+  let snapThresholdPercent = props.snapThresholdPercent;
+  if (snapThresholdPercent === undefined) {
+    const tStep = props.tickStep || max - min;
+    const tStepPercent = (tStep / (max - min)) * 100;
+    snapThresholdPercent = Math.min(5, tStepPercent * 0.1);
+  }
+
+  let animRef = 0;
+  const animateToValue = (targetVal: number) => {
+    cancelAnimationFrame(animRef);
+
+    let isThumb2 = false;
+    let startVal = currentVal1;
+    if (isRangeMode) {
+      if (Math.abs(targetVal - currentVal2) < Math.abs(targetVal - currentVal1)) {
+        isThumb2 = true;
+        startVal = currentVal2;
+      }
+    }
+
+    const startTime = performance.now();
+    const duration = 200; // 200ms animation
+
+    const stepAnim = (time: number) => {
+      const elapsed = time - startTime;
+      let progress = elapsed / duration;
+      if (progress > 1) progress = 1;
+
+      // easeOutQuad
+      const eased = progress * (2 - progress);
+      const current = startVal + (targetVal - startVal) * eased;
+
+      if (isRangeMode) {
+        if (isThumb2) {
+          currentVal2 = current;
+          const inputMax = ref.$('.input-max') as HTMLInputElement;
+          if (inputMax) inputMax.value = currentVal2.toString();
+        } else {
+          currentVal1 = current;
+          const inputMin = ref.$('.input-min') as HTMLInputElement;
+          if (inputMin) inputMin.value = currentVal1.toString();
+        }
+      } else {
+        currentVal1 = current;
+        const inputSingle = ref.$('.input-single') as HTMLInputElement;
+        if (inputSingle) inputSingle.value = currentVal1.toString();
+      }
+
+      updateVisuals();
+
+      if (progress < 1) {
+        animRef = requestAnimationFrame(stepAnim);
+      } else {
+        handleChange();
+      }
+    };
+
+    animRef = requestAnimationFrame(stepAnim);
+  };
+
+  const handleContainerClick = (e: any) => {
+    if (props.disabled) return;
+    if (e.target && e.target.tagName === 'INPUT') return;
+
+    const wrapper = ref.$('.&-wrapper') as HTMLElement;
+    if (!wrapper) return;
+    const rect = wrapper.getBoundingClientRect();
+
+    let clientX = e.clientX;
+    let clientY = e.clientY;
+    if (e.type === 'touchstart') {
+      const touch = (e as unknown as TouchEvent).touches[0];
+      if (touch) {
+        clientX = touch.clientX;
+        clientY = touch.clientY;
+      }
+    }
+
+    let percent = 0;
+    if (isVertical) {
+      const y = clientY - rect.top;
+      percent = 1 - y / rect.height;
+    } else {
+      const x = clientX - rect.left;
+      percent = x / rect.width;
+    }
+    percent = Math.max(0, Math.min(1, percent));
+
+    let targetVal = min + (max - min) * percent;
+    targetVal = Math.round((targetVal - min) / step) * step + min;
+
+    if (snapThresholdPercent > 0 && (props.showTicks || props.showTickLabels)) {
+      const tStep = props.tickStep || max - min;
+      const nearestTick = Math.round((targetVal - min) / tStep) * tStep + min;
+      const threshold = (max - min) * (snapThresholdPercent / 100);
+      if (Math.abs(targetVal - nearestTick) <= threshold) {
+        targetVal = nearestTick;
+      }
+    }
+
+    targetVal = Math.max(min, Math.min(max, targetVal));
+    animateToValue(targetVal);
+  };
+
   const handleInput = (e: Event, isThumb2: boolean) => {
-    const val = parseFloat((e.target as HTMLInputElement).value);
+    let val = parseFloat((e.target as HTMLInputElement).value);
+
+    // Magnetic snapping
+    if (snapThresholdPercent > 0 && (props.showTicks || props.showTickLabels)) {
+      const tStep = props.tickStep || max - min;
+      const nearestTick = Math.round((val - min) / tStep) * tStep + min;
+      const threshold = (max - min) * (snapThresholdPercent / 100);
+      if (Math.abs(val - nearestTick) <= threshold) {
+        val = nearestTick;
+        (e.target as HTMLInputElement).value = val.toString();
+      }
+    }
+
     if (isRangeMode) {
       if (isThumb2) {
         currentVal2 = Math.max(val, currentVal1);
@@ -296,6 +492,7 @@ export const Range = (props: RangeProps) => {
       currentVal1 = val;
     }
     updateVisuals();
+    handleChange(); // Ensure parent receives continuous updates during drag
   };
 
   const handleChange = () => {
@@ -370,18 +567,45 @@ export const Range = (props: RangeProps) => {
         .join(' ')
         .trim()}
       ref={ref}
-      css={props.style}
+      css={customStyle}
+      onPointerDown={handleContainerClick}
+      onTouchStart={handleContainerClick}
     >
-      <div class='&-wrapper'>
-        <div class='&-track'>
-          <div class='&-fill'></div>
-        </div>
+      <div class='&-inner-container'>
+        <div class='&-wrapper'>
+          <div class='&-track'>
+            <div class='&-fill'></div>
+          </div>
 
-        {isRangeMode ? (
-          <>
+          {isRangeMode ? (
+            <>
+              <input
+                type='range'
+                class='&-input input-min'
+                min={min}
+                max={max}
+                step={step}
+                value={val1}
+                onInput={(e) => handleInput(e, false)}
+                onChange={handleChange}
+                disabled={props.disabled}
+              />
+              <input
+                type='range'
+                class='&-input input-max'
+                min={min}
+                max={max}
+                step={step}
+                value={val2}
+                onInput={(e) => handleInput(e, true)}
+                onChange={handleChange}
+                disabled={props.disabled}
+              />
+            </>
+          ) : (
             <input
               type='range'
-              class='&-input input-min'
+              class='&-input input-single'
               min={min}
               max={max}
               step={step}
@@ -390,43 +614,79 @@ export const Range = (props: RangeProps) => {
               onChange={handleChange}
               disabled={props.disabled}
             />
-            <input
-              type='range'
-              class='&-input input-max'
-              min={min}
-              max={max}
-              step={step}
-              value={val2}
-              onInput={(e) => handleInput(e, true)}
-              onChange={handleChange}
-              disabled={props.disabled}
-            />
-          </>
-        ) : (
-          <input
-            type='range'
-            class='&-input input-single'
-            min={min}
-            max={max}
-            step={step}
-            value={val1}
-            onInput={(e) => handleInput(e, false)}
-            onChange={handleChange}
-            disabled={props.disabled}
-          />
-        )}
-      </div>
+          )}
+
+          {(props.showTicks || props.showTickLabels) && (
+            <div class='&-ticks'>
+              {ticks.map((t) => {
+                const percent = ((t - min) / (max - min)) * 100;
+                const offsetPx = 10 - (percent / 100) * 20;
+                const style = isVertical
+                  ? { position: 'absolute' as any, bottom: `calc(${percent}% + ${offsetPx}px)`, transform: 'translateY(50%)' }
+                  : { position: 'absolute' as any, left: `calc(${percent}% + ${offsetPx}px)`, top: '0', transform: 'translateX(-50%)' };
 
-      {(props.showTicks || props.showTickLabels) && (
-        <div class='&-ticks'>
-          {ticks.map((t) => (
-            <div class='&-tick'>
-              {props.showTicks && <div class='&-tick-mark'></div>}
-              {props.showTickLabels && <span>{t}</span>}
+                return (
+                  <div class='&-tick' style={style}>
+                    {props.showTicks && <div class='&-tick-mark'></div>}
+                    {props.showTickLabels && (
+                      <span
+                        style={{ pointerEvents: 'auto', cursor: 'pointer' }}
+                        onPointerDown={(e: any) => {
+                          e.stopPropagation();
+                          animateToValue(t);
+                        }}
+                        onTouchStart={(e: any) => {
+                          e.stopPropagation();
+                          animateToValue(t);
+                        }}
+                      >
+                        {t}
+                      </span>
+                    )}
+                  </div>
+                );
+              })}
             </div>
-          ))}
+          )}
         </div>
-      )}
+
+        {props.showButtons && (
+          <div class='&-buttons'>
+            <button
+              class='&-btn &-btn-minus'
+              onPointerDown={(e: any) => {
+                e.stopPropagation();
+                adjustByStep(-1);
+              }}
+              onTouchStart={(e: any) => {
+                e.stopPropagation();
+                adjustByStep(-1);
+              }}
+              onClick={(e: any) => {
+                e.stopPropagation();
+              }}
+            >
+              -
+            </button>
+            <button
+              class='&-btn &-btn-plus'
+              onPointerDown={(e: any) => {
+                e.stopPropagation();
+                adjustByStep(1);
+              }}
+              onTouchStart={(e: any) => {
+                e.stopPropagation();
+                adjustByStep(1);
+              }}
+              onClick={(e: any) => {
+                e.stopPropagation();
+              }}
+            >
+              +
+            </button>
+          </div>
+        )}
+      </div>
     </div>
   );
 };

package/src/components/redirect.tsx

@@ -1,4 +1,4 @@
-import { RefProps } from 'lupine.web';
+import { RefProps, refreshPage } from 'lupine.web';
 
 export type RedirectProps = {
   title?: string;
@@ -10,8 +10,8 @@ export const Redirect = ({ title = 'redirect...', url, delaySeconds = 0 }: Redir
   // MetaData({ httpEquiv: 'refresh', content: delaySeconds + ';URL=' + url });
   const ref: RefProps = {
     onLoad: async (el: Element) => {
-      setTimeout(() => {
-        window.location.href = url;
+      setTimeout(async () => {
+        await refreshPage(url);
       }, delaySeconds * 1000);
     },
   };

package/src/demo/demo-render-page.tsx

@@ -75,7 +75,7 @@ export const DemoRenderPage = async (props: PageProps) => {
     maxWidth: MediaQueryMaxWidth.DesktopMax,
     borderRight: '1px solid var(--primary-border-color)',
     borderLeft: '1px solid var(--primary-border-color)',
-    '>fragment>div': {
+    '>div': {
       flex: 1,
       alignSelf: 'stretch', // overwrite parent's align-items: center
       width: '100%',

package/src/lib/button-async-lock.tsx

@@ -0,0 +1,43 @@
+// async button lock (protected against double click during async processing)
+/*
+const onToggle = buttonAsyncLock(
+  async (checked: boolean) => {
+    ... async code ...
+  },
+  hook,
+  500,
+  (checked) => hook.setChecked?.(!checked)
+);
+*/
+export function buttonAsyncLock<T extends (...args: any[]) => Promise<any>>(
+  fn: T,
+  hook?: { setEnabled?: (enabled: boolean) => void },
+  minDelayMs: number = 500,
+  onDrop?: (...args: Parameters<T>) => void
+): (...args: Parameters<T>) => Promise<ReturnType<T> | undefined> {
+  let isLocked = false;
+  return async (...args: Parameters<T>): Promise<ReturnType<T> | undefined> => {
+    if (isLocked) {
+      if (onDrop) onDrop(...args);
+      return undefined;
+    }
+    isLocked = true;
+    if (hook && hook.setEnabled) {
+      hook.setEnabled(false);
+    }
+    const startTime = Date.now();
+    try {
+      return await fn(...args);
+    } finally {
+      const elapsed = Date.now() - startTime;
+      const remainingDelay = minDelayMs - elapsed;
+      if (remainingDelay > 0) {
+        await new Promise((resolve) => setTimeout(resolve, remainingDelay));
+      }
+      isLocked = false;
+      if (hook && hook.setEnabled) {
+        hook.setEnabled(true);
+      }
+    }
+  };
+}

package/src/lib/index.ts

@@ -1,6 +1,7 @@
 export * from './back-action-helper';
 export * from './base62';
 export * from './blob-utils';
+export * from './button-async-lock';
 export * from './calculate-text-width';
 export * from './canvas';
 export * from './date-utils';

package/src/styles/dark-themes.ts

@@ -5,8 +5,8 @@ export const darkThemes: ThemeProps = {
   ...sharedThemes,
   '--theme-name': 'dark',
 
-  '--scrollbar-bg': '#1c1c1c',
-  '--scrollbar-thumb-bg': '#373636',
+  '--scrollbar-bg': '#373737',
+  '--scrollbar-thumb-bg': '#505050',
   '--scrollbar-active-thumb-bg': '#5b5b5b',
 
   '--primary-color': '#d8d8d8',