hamzus-ui 0.0.205 → 0.0.207

package/index.d.ts

@@ -62,7 +62,9 @@ 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"
 
 // special
 export { default as Portal } from "./src/components/hamzus-ui/Portal/Portal.svelte"

package/index.js

@@ -59,7 +59,9 @@ 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"
 
 // special
 export { default as Portal } from "./src/components/hamzus-ui/Portal/Portal.svelte"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "hamzus-ui",
-	"version": "0.0.205",
+	"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>

package/src/components/hamzus-ui/SidebarV2/Button.svelte

@@ -0,0 +1,67 @@
+<script>
+	import Button from '../Button/Button.svelte';
+	import IconButton from '../IconButton/IconButton.svelte';
+	import { onMount } from 'svelte';
+
+    export let goTo = false
+    export let goBack = false
+
+    let isMount = false 
+
+    onMount(()=>{
+        isMount = true
+    })
+</script>
+
+<Button
+	{...$$restProps}
+	style="width:100%;padding:var(--pad-m);justify-content:space-between;"
+	variant="ghost"
+>
+    {#if goBack && isMount}
+        <IconButton size="24px" variant="secondary">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.9993 20.67C14.8093 20.67 14.6193 20.6 14.4693 20.45L7.9493 13.93C6.8893 12.87 6.8893 11.13 7.9493 10.07L14.4693 3.55002C14.7593 3.26002 15.2393 3.26002 15.5293 3.55002C15.8193 3.84002 15.8193 4.32002 15.5293 4.61002L9.0093 11.13C8.5293 11.61 8.5293 12.39 9.0093 12.87L15.5293 19.39C15.8193 19.68 15.8193 20.16 15.5293 20.45C15.3793 20.59 15.1893 20.67 14.9993 20.67Z" fill="#292D32"/>
+</svg>
+
+        </IconButton>
+    {/if}
+	<div class="content">
+        <slot />
+    </div>
+	{#if goTo && isMount}
+		<IconButton size="24px" variant="secondary">
+			<svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M8.90961 20.67C8.71961 20.67 8.52961 20.6 8.37961 20.45C8.08961 20.16 8.08961 19.68 8.37961 19.39L14.8996 12.87C15.3796 12.39 15.3796 11.61 14.8996 11.13L8.37961 4.61002C8.08961 4.32002 8.08961 3.84002 8.37961 3.55002C8.66961 3.26002 9.14961 3.26002 9.43961 3.55002L15.9596 10.07C16.4696 10.58 16.7596 11.27 16.7596 12C16.7596 12.73 16.4796 13.42 15.9596 13.93L9.43961 20.45C9.28961 20.59 9.09961 20.67 8.90961 20.67Z"
+					fill="#292D32"
+				/>
+			</svg>
+		</IconButton>
+	{/if}
+</Button>
+
+
+<style>
+    .content {
+        display: flex;
+        align-items: center;
+        column-gap: var(--pad-m);
+    }
+
+    .content > :global(svg) {
+        width: 24px;
+        height: auto;
+    }
+
+    .content > :global(svg path) {
+        fill: var(--font-2);
+    }
+
+</style>

package/src/components/hamzus-ui/SidebarV2/Menu.svelte

@@ -0,0 +1,23 @@
+<script>
+    export let openMenu = 'default'
+    export let menu = 'default'
+</script>
+
+{#if openMenu === menu}
+    <div class="menu">
+        <slot/>
+    </div>
+{/if}
+
+<style>
+    .menu {
+        max-height: 100%;
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+        flex: 1;
+        row-gap: var(--pad-m);
+        overflow-y: auto;
+        padding: var(--pad-m);
+    }
+</style>

package/src/components/hamzus-ui/SidebarV2/MenuCtx.svelte

@@ -0,0 +1,7 @@
+<script>
+    export let openMenu = 'default'
+    export const goTo = (val)=>{
+        openMenu = val
+    }
+</script>
+<slot {openMenu} {goTo}/>

package/src/components/hamzus-ui/SidebarV2/Root.svelte

@@ -0,0 +1,197 @@
+<script>
+	import IconButton from '../IconButton/IconButton.svelte';
+	import { onDestroy, onMount } from 'svelte';
+
+	export let isOpen = false;
+	export let width = 0;
+	export let localStorageName = 'hamzus-sidebar-storage';
+
+    const defaultWidth = 250
+	const widthToHide = 249;
+	const maxWidth = 350;
+	const timeToClose = 500;
+
+	let startWidth = null;
+	let startX = null;
+	let endX = null;
+
+    $: lastWidth = width === 0 ? (lastWidth ?? defaultWidth) : width
+$: console.log(lastWidth);
+
+	onMount(() => {
+        const newWidth = localStorage.getItem(localStorageName)
+        if (newWidth) width = parseInt(newWidth)
+        else width = defaultWidth
+        isOpen = true
+		return handleDestroy;
+	});
+
+	function handleMouseDown(event) {
+		startWidth = width;
+		startX = event.clientX;
+
+		document.addEventListener('mousemove', handleMouseMove);
+		document.addEventListener('mouseup', handleMouseUp);
+	}
+
+	function handleMouseMove(event) {
+		endX = event.clientX;
+		calcWidth();
+	}
+	function handleMouseUp(event) {
+		endX = event.clientX;
+		calcWidth();
+
+		startWidth = null;
+		startX = null;
+		endX = null;
+
+		handleDestroy();
+	}
+
+	function calcWidth() {
+		let newWidth = startWidth + endX - startX;
+
+		if (newWidth > maxWidth) {
+			newWidth = maxWidth;
+		}
+
+		if (newWidth < widthToHide) {
+			handleClose();
+			return;
+		}
+
+
+        
+        localStorage.setItem(localStorageName, width);
+
+		isOpen = true;
+		width = newWidth;
+	}
+
+	function handleClose() {
+		isOpen = false;
+		width = 0;
+	}
+
+	function handleDestroy() {
+		document.removeEventListener('mousemove', handleMouseMove);
+		document.removeEventListener('mouseup', handleMouseUp);
+	}
+
+	function handleToggle() {
+		isOpen = !isOpen;
+		if (!isOpen) {
+			width = 0;
+			return;
+		}
+
+		width = lastWidth;
+	}
+</script>
+
+<section
+	class="sidebar"
+	class:is-changing={startWidth !== null}
+	class:open={isOpen}
+	style="--sidebar-width:{width}px;--sidebar-min-width:{widthToHide}px;"
+>
+	<div class="sidebar-container">
+		<slot />
+	</div>
+</section>
+<div
+	class="trigger"
+	class:open={isOpen}
+	style="--sidebar-width:{width}px;"
+	on:mousedown={handleMouseDown}
+>
+	<div class="trigger-btn">
+		<IconButton variant="secondary" size="20px" onClick={handleToggle}>
+			<svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M14.9993 20.67C14.8093 20.67 14.6193 20.6 14.4693 20.45L7.9493 13.93C6.8893 12.87 6.8893 11.13 7.9493 10.07L14.4693 3.55002C14.7593 3.26002 15.2393 3.26002 15.5293 3.55002C15.8193 3.84002 15.8193 4.32002 15.5293 4.61002L9.0093 11.13C8.5293 11.61 8.5293 12.39 9.0093 12.87L15.5293 19.39C15.8193 19.68 15.8193 20.16 15.5293 20.45C15.3793 20.59 15.1893 20.67 14.9993 20.67Z"
+					fill="#292D32"
+				/>
+			</svg>
+		</IconButton>
+	</div>
+</div>
+
+<style>
+	.sidebar {
+		position: fixed;
+		top: 0px;
+		left: 0px;
+		width: min(100%, var(--sidebar-width));
+		height: 100dvh;
+		background-color: var(--bg-1);
+		border-right: 1px solid var(--stroke);
+		z-index: 10000;
+		transition: width 0.1s ease-out;
+		overflow: clip;
+	}
+
+	.sidebar:not(.open) {
+		width: 0px;
+	}
+
+	:global(:root:has(.sidebar.is-changing)) {
+		--default-cursor: col-resize;
+	}
+
+	.sidebar-container {
+		height: 100%;
+		min-width: var(--sidebar-min-width);
+		display: flex;
+		flex-direction: column;
+		flex-shrink: 0;
+	}
+
+	.trigger {
+		cursor: col-resize;
+		position: fixed;
+		top: 0px;
+		left: var(--sidebar-width);
+		height: 100dvh;
+		z-index: 100000;
+		transition: left 0.1s ease-out;
+	}
+
+	.trigger::after {
+		content: '';
+		position: absolute;
+		top: 0px;
+		left: 100%;
+		width: 25px;
+		height: 100%;
+	}
+
+	.trigger-btn {
+		position: absolute;
+		top: 50%;
+		left: 0px;
+		z-index: 10;
+		transform: translate(-50%, -50%);
+		transition: left 0.2s ease-out;
+	}
+
+	.trigger:not(.open) .trigger-btn {
+		transform: translate(-50%, -50%) rotate(180deg);
+	}
+	.trigger:not(.open):hover .trigger-btn {
+		left: 15px;
+	}
+
+	@media (max-width: 768px) {
+		.trigger {
+			display: none;
+		}
+	}
+</style>

package/src/components/hamzus-ui/SidebarV2/index.js

@@ -0,0 +1,4 @@
+export { default as Root } from './Root.svelte';
+export { default as Menu } from './Menu.svelte';
+export { default as MenuCtx } from './MenuCtx.svelte';
+export { default as Button } from './Button.svelte';