hamzus-ui 0.0.206 → 0.0.207

package/index.d.ts

@@ -62,6 +62,7 @@ export * as Tooltip from "./src/components/hamzus-ui/AdvancedTooltip";
 
 // layout
 export { default as ScrollArea } from "./src/components/hamzus-ui/ScrollArea/ScrollArea.svelte"
+export { default as Scrollbar } from "./src/components/hamzus-ui/Scrollbar/Scrollbar.svelte"
 export * as Sidebar from "./src/layout/Sidebar"
 export * as SidebarV2 from "./src/components/hamzus-ui/SidebarV2"
 

package/index.js

@@ -59,6 +59,7 @@ export * as Tooltip from "./src/components/hamzus-ui/AdvancedTooltip"
 
 // layout
 export { default as ScrollArea } from "./src/components/hamzus-ui/ScrollArea/ScrollArea.svelte"
+export { default as Scrollbar } from "./src/components/hamzus-ui/Scrollbar/Scrollbar.svelte"
 export * as Sidebar from "./src/layout/Sidebar"
 export * as SidebarV2 from "./src/components/hamzus-ui/SidebarV2"
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "hamzus-ui",
-	"version": "0.0.206",
+	"version": "0.0.207",
 	"type": "module",
 	"main": "index.js",
 	"svelte": "index.js",

package/src/components/hamzus-ui/Scrollbar/Scrollbar.svelte

@@ -0,0 +1,308 @@
+<script>
+  import { onMount, onDestroy } from 'svelte';
+  import { browser } from '$app/environment';
+
+  export let element = null;
+  export let thickness = 15;
+  export let padding = 1;
+
+  let thumbHeight = 0;
+  let thumbTop = 0;
+  let hasScrollY = false;
+
+  let thumbWidth = 0;
+  let thumbLeft = 0;
+  let hasScrollX = false;
+
+  // ── Mesure ──────────────────────────────────────────────────
+
+  function measure(el) {
+    const { clientHeight, scrollHeight, scrollTop,
+            clientWidth,  scrollWidth,  scrollLeft } = el;
+
+    hasScrollY  = scrollHeight > clientHeight;
+    thumbHeight = hasScrollY ? (clientHeight / scrollHeight) * clientHeight : clientHeight;
+    thumbTop    = hasScrollY
+      ? (scrollTop / (scrollHeight - clientHeight)) * (clientHeight - thumbHeight)
+      : 0;
+
+    hasScrollX  = scrollWidth > clientWidth;
+    thumbWidth  = hasScrollX ? (clientWidth / scrollWidth) * clientWidth : clientWidth;
+    thumbLeft   = hasScrollX
+      ? (scrollLeft / (scrollWidth - clientWidth)) * (clientWidth - thumbWidth)
+      : 0;
+  }
+
+  // ── Press & hold sur la track ───────────────────────────────
+
+  let trackPressInterval = null;
+
+  function stopTrackPress() {
+    if (trackPressInterval) {
+      clearInterval(trackPressInterval);
+      trackPressInterval = null;
+    }
+  }
+
+  function onTrackYMouseDown(e) {
+    if (!element || e.target !== e.currentTarget) return;
+    e.preventDefault();
+    const target = e.currentTarget;
+
+    function step() {
+      if (!element) return;
+      const rect = target.getBoundingClientRect();
+      const clickY = e.clientY - rect.top;
+      const direction = clickY < thumbTop ? -1 : 1;
+      element.scrollTop += direction * element.clientHeight * 0.8;
+      measure(element);
+      if (direction === -1 && thumbTop <= clickY) stopTrackPress();
+      if (direction ===  1 && thumbTop + thumbHeight >= clickY) stopTrackPress();
+    }
+
+    step();
+    trackPressInterval = setInterval(step, 120);
+    window.addEventListener('mouseup', stopTrackPress, { once: true });
+  }
+
+  function onTrackXMouseDown(e) {
+    if (!element || e.target !== e.currentTarget) return;
+    e.preventDefault();
+    const target = e.currentTarget;
+
+    function step() {
+      if (!element) return;
+      const rect = target.getBoundingClientRect();
+      const clickX = e.clientX - rect.left;
+      const direction = clickX < thumbLeft ? -1 : 1;
+      element.scrollLeft += direction * element.clientWidth * 0.8;
+      measure(element);
+      if (direction === -1 && thumbLeft <= clickX) stopTrackPress();
+      if (direction ===  1 && thumbLeft + thumbWidth >= clickX) stopTrackPress();
+    }
+
+    step();
+    trackPressInterval = setInterval(step, 120);
+    window.addEventListener('mouseup', stopTrackPress, { once: true });
+  }
+
+  // ── Drag vertical ───────────────────────────────────────────
+
+  let draggingY = false;
+  let dragStartY = 0;
+  let dragStartScrollTop = 0;
+
+  function onThumbYMouseDown(e) {
+    if (!element) return;
+    e.preventDefault();
+    draggingY = true;
+    dragStartY = e.clientY;
+    dragStartScrollTop = element.scrollTop;
+  }
+
+  function onMouseMoveY(e) {
+    if (!draggingY || !element) return;
+    const { clientHeight, scrollHeight } = element;
+    const thumbH = (clientHeight / scrollHeight) * clientHeight;
+    const ratio = (scrollHeight - clientHeight) / (clientHeight - thumbH);
+    element.scrollTop = dragStartScrollTop + (e.clientY - dragStartY) * ratio;
+  }
+
+  function onMouseUpY() { draggingY = false; }
+
+  // ── Drag horizontal ─────────────────────────────────────────
+
+  let draggingX = false;
+  let dragStartX = 0;
+  let dragStartScrollLeft = 0;
+
+  function onThumbXMouseDown(e) {
+    if (!element) return;
+    e.preventDefault();
+    draggingX = true;
+    dragStartX = e.clientX;
+    dragStartScrollLeft = element.scrollLeft;
+  }
+
+  function onMouseMoveX(e) {
+    if (!draggingX || !element) return;
+    const { clientWidth, scrollWidth } = element;
+    const thumbW = (clientWidth / scrollWidth) * clientWidth;
+    const ratio = (scrollWidth - clientWidth) / (clientWidth - thumbW);
+    element.scrollLeft = dragStartScrollLeft + (e.clientX - dragStartX) * ratio;
+  }
+
+  function onMouseUpX() { draggingX = false; }
+
+  // ── Listeners globaux (window) ──────────────────────────────
+
+  function onWindowMouseMove(e) {
+    onMouseMoveY(e);
+    onMouseMoveX(e);
+  }
+
+  function onWindowMouseUp() {
+    onMouseUpY();
+    onMouseUpX();
+  }
+
+  function addWindowListeners() {
+    window.addEventListener('mousemove', onWindowMouseMove);
+    window.addEventListener('mouseup', onWindowMouseUp);
+  }
+
+  function removeWindowListeners() {
+    window.removeEventListener('mousemove', onWindowMouseMove);
+    window.removeEventListener('mouseup', onWindowMouseUp);
+  }
+
+  // ── Observer setup ──────────────────────────────────────────
+
+  let resizeObserver = null;
+
+  function handleScroll() {
+    if (element) measure(element);
+  }
+
+  function setupObserver(el) {
+    cleanupObserver();
+    measure(el);
+
+    resizeObserver = new ResizeObserver(() => measure(el));
+    resizeObserver.observe(el);
+    for (const child of Array.from(el.children)) {
+      resizeObserver.observe(child);
+    }
+    el.addEventListener('scroll', handleScroll);
+  }
+
+  function cleanupObserver() {
+    if (element) element.removeEventListener('scroll', handleScroll);
+    resizeObserver?.disconnect();
+    resizeObserver = null;
+  }
+
+  // $: réactif à `element` — mais uniquement côté client
+  $: if (browser && element) {
+    setupObserver(element);
+  } else if (browser && !element) {
+    cleanupObserver();
+    stopTrackPress();
+    thumbHeight = 0; thumbTop  = 0; hasScrollY = false;
+    thumbWidth  = 0; thumbLeft = 0; hasScrollX = false;
+  }
+
+  // Les listeners window uniquement après le montage (côté client)
+  onMount(() => {
+    addWindowListeners();
+    return () => {
+      removeWindowListeners();
+      cleanupObserver();
+      stopTrackPress();
+    };
+  });
+
+  onDestroy(() => {
+    // onDestroy peut être appelé côté serveur — ne rien faire si pas browser
+    if (!browser) return;
+    removeWindowListeners();
+    cleanupObserver();
+    stopTrackPress();
+  });
+</script>
+
+<div
+  class="scroll-provider"
+  style="--track-padding:{padding}px;--track-thickness:{thickness}px;--thumb-width:{thumbWidth}px;--thumb-height:{thumbHeight}px;--thumb-left:{thumbLeft}px;--thumb-top:{thumbTop}px;"
+>
+  {#if hasScrollX}
+    <div class="track-h" on:mousedown={onTrackXMouseDown}>
+      <span
+        class="thumb"
+        class:dragging={draggingX}
+        on:mousedown={onThumbXMouseDown}
+      />
+    </div>
+  {/if}
+
+  {#if hasScrollY}
+    <div class="track-v" on:mousedown={onTrackYMouseDown}>
+      <span
+        class="thumb"
+        class:dragging={draggingY}
+        on:mousedown={onThumbYMouseDown}
+      />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .scroll-provider {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  .track-h,
+  .track-v {
+    pointer-events: all;
+  }
+
+  .thumb {
+    position: absolute;
+    display: flex;
+    background-color: var(--bg-blur);
+    cursor: grab;
+    transition: background-color 0.15s;
+  }
+
+  .thumb:hover,
+  .thumb.dragging {
+    background-color: var(--accent-b);
+    cursor: grabbing;
+  }
+
+  .track-h {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    height: var(--track-thickness);
+  }
+
+  .track-h .thumb {
+    width: calc(var(--thumb-width) - var(--track-padding) * 2);
+    height: calc(100% - var(--track-padding) * 2);
+    left: calc(var(--thumb-left) + var(--track-padding));
+    top: calc(0px + var(--track-padding));
+    border-radius: var(--radius-s);
+  }
+
+  .track-v {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    height: 100%;
+    width: var(--track-thickness);
+  }
+
+  .track-v .thumb {
+    height: calc(var(--thumb-height) - var(--track-padding) * 2);
+    width: calc(100% - var(--track-padding) * 2);
+    top: calc(var(--thumb-top) + 1px);
+    left: calc(0px + 1px);
+    border-radius: var(--radius-s);
+  }
+
+  @media (max-width:750px) {
+    .track-h {
+        height: 5px;
+    }
+    .track-v {
+        width: 5px;
+    }
+  }
+</style>