nextworks 0.2.0-alpha.15 → 0.2.0-alpha.16

package/dist/kits/blocks/components/sections/product-demo/DemoStage.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React from "react";
-import { motion } from "motion/react";
 import { cn } from "@/lib/utils";
 import { DemoWindow } from "./DemoWindow";
 import { KnowledgePanel } from "./KnowledgePanel";
@@ -295,6 +294,19 @@ function getWindowShellClass(key: ProductDemoWindowKey) {
   }
 }
 
+function getMobileWindowClass(key: ProductDemoWindowKey) {
+  switch (key) {
+    case "taskList":
+      return "h-[15rem] sm:h-[16rem] lg:h-full";
+    case "workflowStudio":
+      return "h-[18rem] sm:h-[19rem] lg:h-full";
+    case "runConsole":
+      return "h-[18rem] sm:h-[19rem] lg:h-full";
+    default:
+      return "lg:h-full";
+  }
+}
+
 export function DemoStage({
   scenarios = [],
   initialScenarioIndex,
@@ -391,8 +403,8 @@ export function DemoStage({
       )}
       aria-label={ariaLabel}
     >
-      <div className="relative z-10 flex h-[36rem] min-h-[36rem] flex-col gap-0 lg:h-full lg:min-h-0">
-        <div className="grid gap-4 lg:hidden">
+      <div className="relative z-10 flex min-h-[36rem] flex-col gap-4 lg:h-full lg:min-h-0 lg:gap-0">
+        <div className="grid auto-rows-max gap-4 lg:hidden">
           {windows.map((windowData) => {
             if (getWindowShellClass(windowData.key) === "hidden") {
               return null;
@@ -412,6 +424,8 @@ export function DemoStage({
                 showControls={false}
                 showResizeHandle={false}
                 showHeader={false}
+                className={getMobileWindowClass(windowData.key)}
+                bodyClassName="px-0 py-0 sm:px-0 sm:py-0"
               >
                 {windowData.content}
               </DemoWindow>
@@ -472,20 +486,7 @@ export function DemoStage({
                   windowData.key === "workflowStudio");
 
               return (
-                <motion.div
-                  key={windowData.key}
-                  initial={enableMotion ? { opacity: 0 } : false}
-                  animate={{ opacity: 1 }}
-                  transition={
-                    enableMotion
-                      ? {
-                          type: "tween",
-                          duration: 0.24,
-                        }
-                      : { duration: 0 }
-                  }
-                  className={cn("min-h-0", shellClass)}
-                >
+                <div key={windowData.key} className={cn("min-h-0", shellClass)}>
                   <DemoWindow
                     window={windowData.meta}
                     active={activeWindow}
@@ -507,7 +508,7 @@ export function DemoStage({
                   >
                     {windowData.content}
                   </DemoWindow>
-                </motion.div>
+                </div>
               );
             })}
           </div>

package/dist/kits/blocks/components/sections/product-demo/RunConsolePanel.tsx

@@ -7,6 +7,15 @@ export interface RunConsolePanelProps {
 }
 
 export function RunConsolePanel({ state }: RunConsolePanelProps) {
+  const scrollViewportRef = React.useRef<HTMLDivElement | null>(null);
+  const scrollbarTrackRef = React.useRef<HTMLDivElement | null>(null);
+  const dragStateRef = React.useRef<{
+    pointerId: number;
+    startY: number;
+    startScrollTop: number;
+    scrollRatio: number;
+    pointerOffsetY: number;
+  } | null>(null);
   const playbackMs = state.playbackMs ?? 1800;
   const playbackStepEntryIndices = state.playbackStepEntryIndices ?? [];
   const playbackStepVisibleLineCounts =
@@ -74,6 +83,11 @@ export function RunConsolePanel({ state }: RunConsolePanelProps) {
   const [visibleLineCount, setVisibleLineCount] = React.useState(
     Math.max(1, Math.min(2, activeCode.length || 1)),
   );
+  const [scrollMetrics, setScrollMetrics] = React.useState({
+    scrollTop: 0,
+    scrollHeight: 1,
+    clientHeight: 1,
+  });
 
   React.useEffect(() => {
     if (typeof state.playbackStep === "number") {
@@ -124,13 +138,179 @@ export function RunConsolePanel({ state }: RunConsolePanelProps) {
     state.playbackStep,
   ]);
 
+  React.useEffect(() => {
+    const viewport = scrollViewportRef.current;
+
+    if (!viewport) {
+      return;
+    }
+
+    const updateScrollMetrics = () => {
+      setScrollMetrics({
+        scrollTop: viewport.scrollTop,
+        scrollHeight: viewport.scrollHeight,
+        clientHeight: viewport.clientHeight,
+      });
+    };
+
+    updateScrollMetrics();
+
+    viewport.addEventListener("scroll", updateScrollMetrics, {
+      passive: true,
+    });
+
+    const resizeObserver = new ResizeObserver(() => {
+      updateScrollMetrics();
+    });
+
+    resizeObserver.observe(viewport);
+
+    if (viewport.firstElementChild instanceof HTMLElement) {
+      resizeObserver.observe(viewport.firstElementChild);
+    }
+
+    window.addEventListener("resize", updateScrollMetrics);
+
+    return () => {
+      viewport.removeEventListener("scroll", updateScrollMetrics);
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", updateScrollMetrics);
+    };
+  }, [visibleLineCount, activeEntry?.id, activeCode.length]);
+
   const visibleCode = activeCode.slice(0, visibleLineCount);
+  const hasOverflow =
+    scrollMetrics.scrollHeight > scrollMetrics.clientHeight + 1;
+  const thumbHeight = hasOverflow
+    ? Math.max(
+        36,
+        (scrollMetrics.clientHeight / scrollMetrics.scrollHeight) *
+          scrollMetrics.clientHeight,
+      )
+    : 0;
+  const maxThumbOffset = Math.max(scrollMetrics.clientHeight - thumbHeight, 0);
+  const maxScrollTop = Math.max(
+    scrollMetrics.scrollHeight - scrollMetrics.clientHeight,
+    1,
+  );
+  const thumbOffset = hasOverflow
+    ? (scrollMetrics.scrollTop / maxScrollTop) * maxThumbOffset
+    : 0;
+
+  const updateScrollTopFromPointer = React.useCallback(
+    (clientY: number) => {
+      const viewport = scrollViewportRef.current;
+      const track = scrollbarTrackRef.current;
+
+      if (!viewport || !track || !hasOverflow) {
+        return;
+      }
+
+      const trackRect = track.getBoundingClientRect();
+      const nextThumbTop = Math.min(
+        Math.max(
+          clientY - trackRect.top - dragStateRef.current!.pointerOffsetY,
+          0,
+        ),
+        maxThumbOffset,
+      );
+      const nextScrollTop =
+        maxThumbOffset > 0 ? (nextThumbTop / maxThumbOffset) * maxScrollTop : 0;
+
+      viewport.scrollTop = nextScrollTop;
+    },
+    [hasOverflow, maxScrollTop, maxThumbOffset],
+  );
+
+  const handleScrollbarPointerDown = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      const viewport = scrollViewportRef.current;
+      const track = scrollbarTrackRef.current;
+
+      if (!viewport || !track || !hasOverflow) {
+        return;
+      }
+
+      const trackRect = track.getBoundingClientRect();
+      const targetElement = event.target as HTMLElement | null;
+      const clickedThumb = targetElement?.dataset.scrollbarThumb === "true";
+      const pointerOffsetY = clickedThumb
+        ? event.clientY - trackRect.top - thumbOffset
+        : thumbHeight / 2;
+
+      dragStateRef.current = {
+        pointerId: event.pointerId,
+        startY: event.clientY,
+        startScrollTop: viewport.scrollTop,
+        scrollRatio: maxThumbOffset > 0 ? maxScrollTop / maxThumbOffset : 0,
+        pointerOffsetY,
+      };
+
+      if (!clickedThumb) {
+        updateScrollTopFromPointer(event.clientY);
+      }
+
+      (event.currentTarget as HTMLDivElement).setPointerCapture(
+        event.pointerId,
+      );
+      event.preventDefault();
+    },
+    [
+      hasOverflow,
+      maxScrollTop,
+      maxThumbOffset,
+      thumbHeight,
+      thumbOffset,
+      updateScrollTopFromPointer,
+    ],
+  );
+
+  const handleScrollbarPointerMove = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      const dragState = dragStateRef.current;
+
+      if (!dragState || dragState.pointerId !== event.pointerId) {
+        return;
+      }
+
+      const viewport = scrollViewportRef.current;
+      const track = scrollbarTrackRef.current;
+
+      if (!viewport || !track || !hasOverflow) {
+        return;
+      }
+
+      const deltaY = event.clientY - dragState.startY;
+      const nextScrollTop = Math.min(
+        Math.max(dragState.startScrollTop + deltaY * dragState.scrollRatio, 0),
+        maxScrollTop,
+      );
+
+      viewport.scrollTop = nextScrollTop;
+      event.preventDefault();
+    },
+    [hasOverflow, maxScrollTop],
+  );
+
+  const handleScrollbarPointerUp = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      const dragState = dragStateRef.current;
+
+      if (dragState?.pointerId === event.pointerId) {
+        dragStateRef.current = null;
+      }
+    },
+    [],
+  );
 
   return (
     <div className="flex h-full min-h-0 flex-col text-[var(--demo-fg)] [font-synthesis:none] antialiased">
       <div className="flex min-h-0 flex-1 overflow-hidden rounded-none border border-[var(--demo-border)] bg-[var(--demo-code-bg)] shadow-none">
-        <div className="flex min-h-0 min-w-0 flex-1 flex-col">
-          <div className="grid min-h-0 flex-1 grid-cols-[3.5rem_minmax(0,1fr)] bg-[var(--demo-code-bg)]">
+        <div className="relative flex min-h-0 min-w-0 flex-1 flex-col">
+          <div
+            ref={scrollViewportRef}
+            className="grid min-h-0 flex-1 grid-cols-[3.5rem_minmax(0,1fr)] overflow-y-auto bg-[var(--demo-code-bg)] pr-5 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:overflow-hidden lg:pr-0"
+          >
             <div className="border-r border-[var(--demo-border)] bg-[var(--demo-code-gutter-bg)] px-2 py-3 font-mono text-[11px] leading-7 text-[var(--demo-subtle-fg)]">
               {visibleCode.map((line, index) => {
                 const isAdded = line.trimStart().startsWith("+");
@@ -151,7 +331,7 @@ export function RunConsolePanel({ state }: RunConsolePanelProps) {
               })}
             </div>
 
-            <div className="relative flex h-full min-h-0 flex-col overflow-hidden bg-[var(--demo-code-bg)] px-3 py-3 font-mono text-[12px] leading-7 text-[var(--demo-fg)]">
+            <div className="relative min-h-full bg-[var(--demo-code-bg)] px-3 py-3 font-mono text-[12px] leading-7 text-[var(--demo-fg)]">
               <div>
                 {visibleCode.map((line, index) => {
                   const isAdded = line.trimStart().startsWith("+");
@@ -202,10 +382,29 @@ export function RunConsolePanel({ state }: RunConsolePanelProps) {
                   </div>
                 ) : null}
               </div>
-
-              <div className="flex-1" />
             </div>
           </div>
+
+          {hasOverflow ? (
+            <div
+              ref={scrollbarTrackRef}
+              aria-hidden="true"
+              onPointerDown={handleScrollbarPointerDown}
+              onPointerMove={handleScrollbarPointerMove}
+              onPointerUp={handleScrollbarPointerUp}
+              onPointerCancel={handleScrollbarPointerUp}
+              className="absolute inset-y-3 right-1.5 w-[10px] cursor-pointer overflow-hidden rounded-full bg-[var(--demo-scroll-track)] lg:hidden"
+            >
+              <div
+                data-scrollbar-thumb="true"
+                className="absolute inset-x-1 rounded-full bg-[var(--demo-scroll-thumb)] shadow-[inset_0_1px_0_rgba(255,255,255,0.35)] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] will-change-transform"
+                style={{
+                  height: `${thumbHeight}px`,
+                  transform: `translateY(${thumbOffset}px)`,
+                }}
+              />
+            </div>
+          ) : null}
         </div>
 
         {state.metrics?.length ? (

package/dist/kits/blocks/components/sections/product-demo/TaskListPanel.tsx

@@ -9,6 +9,185 @@ export interface TaskListPanelProps {
 }
 
 export function TaskListPanel({ state, onSelect }: TaskListPanelProps) {
+  const scrollViewportRef = React.useRef<HTMLDivElement | null>(null);
+  const scrollbarTrackRef = React.useRef<HTMLDivElement | null>(null);
+  const dragStateRef = React.useRef<{
+    pointerId: number;
+    startY: number;
+    startScrollTop: number;
+    scrollRatio: number;
+    pointerOffsetY: number;
+  } | null>(null);
+  const [scrollMetrics, setScrollMetrics] = React.useState({
+    scrollTop: 0,
+    scrollHeight: 1,
+    clientHeight: 1,
+  });
+
+  React.useEffect(() => {
+    const viewport = scrollViewportRef.current;
+
+    if (!viewport) {
+      return;
+    }
+
+    const updateScrollMetrics = () => {
+      setScrollMetrics({
+        scrollTop: viewport.scrollTop,
+        scrollHeight: viewport.scrollHeight,
+        clientHeight: viewport.clientHeight,
+      });
+    };
+
+    updateScrollMetrics();
+
+    viewport.addEventListener("scroll", updateScrollMetrics, {
+      passive: true,
+    });
+
+    const resizeObserver = new ResizeObserver(() => {
+      updateScrollMetrics();
+    });
+
+    resizeObserver.observe(viewport);
+
+    if (viewport.firstElementChild instanceof HTMLElement) {
+      resizeObserver.observe(viewport.firstElementChild);
+    }
+
+    window.addEventListener("resize", updateScrollMetrics);
+
+    return () => {
+      viewport.removeEventListener("scroll", updateScrollMetrics);
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", updateScrollMetrics);
+    };
+  }, [state.items.length, state.activeItemId]);
+
+  const hasOverflow =
+    scrollMetrics.scrollHeight > scrollMetrics.clientHeight + 1;
+  const thumbHeight = hasOverflow
+    ? Math.max(
+        36,
+        (scrollMetrics.clientHeight / scrollMetrics.scrollHeight) *
+          scrollMetrics.clientHeight,
+      )
+    : 0;
+  const maxThumbOffset = Math.max(scrollMetrics.clientHeight - thumbHeight, 0);
+  const maxScrollTop = Math.max(
+    scrollMetrics.scrollHeight - scrollMetrics.clientHeight,
+    1,
+  );
+  const thumbOffset = hasOverflow
+    ? (scrollMetrics.scrollTop / maxScrollTop) * maxThumbOffset
+    : 0;
+
+  const updateScrollTopFromPointer = React.useCallback(
+    (clientY: number) => {
+      const viewport = scrollViewportRef.current;
+      const track = scrollbarTrackRef.current;
+
+      if (!viewport || !track || !hasOverflow) {
+        return;
+      }
+
+      const trackRect = track.getBoundingClientRect();
+      const nextThumbTop = Math.min(
+        Math.max(
+          clientY - trackRect.top - dragStateRef.current!.pointerOffsetY,
+          0,
+        ),
+        maxThumbOffset,
+      );
+      const nextScrollTop =
+        maxThumbOffset > 0 ? (nextThumbTop / maxThumbOffset) * maxScrollTop : 0;
+
+      viewport.scrollTop = nextScrollTop;
+    },
+    [hasOverflow, maxScrollTop, maxThumbOffset],
+  );
+
+  const handleScrollbarPointerDown = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      const viewport = scrollViewportRef.current;
+      const track = scrollbarTrackRef.current;
+
+      if (!viewport || !track || !hasOverflow) {
+        return;
+      }
+
+      const trackRect = track.getBoundingClientRect();
+      const targetElement = event.target as HTMLElement | null;
+      const clickedThumb = targetElement?.dataset.scrollbarThumb === "true";
+      const pointerOffsetY = clickedThumb
+        ? event.clientY - trackRect.top - thumbOffset
+        : thumbHeight / 2;
+
+      dragStateRef.current = {
+        pointerId: event.pointerId,
+        startY: event.clientY,
+        startScrollTop: viewport.scrollTop,
+        scrollRatio: maxThumbOffset > 0 ? maxScrollTop / maxThumbOffset : 0,
+        pointerOffsetY,
+      };
+
+      if (!clickedThumb) {
+        updateScrollTopFromPointer(event.clientY);
+      }
+
+      (event.currentTarget as HTMLDivElement).setPointerCapture(
+        event.pointerId,
+      );
+      event.preventDefault();
+    },
+    [
+      hasOverflow,
+      maxScrollTop,
+      maxThumbOffset,
+      thumbHeight,
+      thumbOffset,
+      updateScrollTopFromPointer,
+    ],
+  );
+
+  const handleScrollbarPointerMove = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      const dragState = dragStateRef.current;
+
+      if (!dragState || dragState.pointerId !== event.pointerId) {
+        return;
+      }
+
+      const viewport = scrollViewportRef.current;
+      const track = scrollbarTrackRef.current;
+
+      if (!viewport || !track || !hasOverflow) {
+        return;
+      }
+
+      const deltaY = event.clientY - dragState.startY;
+      const nextScrollTop = Math.min(
+        Math.max(dragState.startScrollTop + deltaY * dragState.scrollRatio, 0),
+        maxScrollTop,
+      );
+
+      viewport.scrollTop = nextScrollTop;
+      event.preventDefault();
+    },
+    [hasOverflow, maxScrollTop],
+  );
+
+  const handleScrollbarPointerUp = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      const dragState = dragStateRef.current;
+
+      if (dragState?.pointerId === event.pointerId) {
+        dragStateRef.current = null;
+      }
+    },
+    [],
+  );
+
   return (
     <div className="flex h-full min-h-0 flex-col bg-[var(--demo-panel-muted-bg)] text-[var(--demo-fg)]">
       <div className="border-b border-[var(--demo-border)] px-3 py-2.5">
@@ -20,75 +199,103 @@ export function TaskListPanel({ state, onSelect }: TaskListPanelProps) {
         </div>
       </div>
 
-      <div className="space-y-0 overflow-hidden">
-        {state.items.map((item, index) => {
-          const isActive = item.id === state.activeItemId;
-
-          return (
-            <button
-              key={item.id}
-              type="button"
-              onClick={() => onSelect?.(item.id)}
-              className={cn(
-                "relative isolate w-full overflow-hidden rounded-none border-x-0 border-y border-b-0 px-3 py-3 text-left transition-colors duration-200 first:border-t-0",
-                "border-[var(--demo-border)] bg-[var(--demo-panel-bg)] hover:border-[var(--demo-border-strong)] hover:bg-[var(--demo-shell-strong-bg)]",
-                isActive &&
-                  "border-[var(--demo-border-strong)] bg-[var(--demo-shell-strong-bg)]",
-              )}
-            >
-              {isActive ? (
-                <span
-                  aria-hidden="true"
-                  className="pointer-events-none absolute inset-y-0 left-0 w-px bg-[var(--demo-accent)]"
-                />
-              ) : null}
-
-              <div className="relative z-10 flex items-start gap-3">
-                <span
+      <div className="relative min-h-0 flex-1">
+        <div
+          ref={scrollViewportRef}
+          className="h-full overflow-y-auto pr-5 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        >
+          <div className="space-y-0">
+            {state.items.map((item, index) => {
+              const isActive = item.id === state.activeItemId;
+
+              return (
+                <button
+                  key={item.id}
+                  type="button"
+                  onClick={() => onSelect?.(item.id)}
                   className={cn(
-                    "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border text-[10px] font-semibold",
-                    isActive
-                      ? "border-[var(--demo-border-strong)] bg-[var(--demo-shell-strong-bg)] text-[var(--demo-fg)]"
-                      : "border-[var(--demo-border)] bg-[var(--demo-panel-subtle-bg)] text-[var(--demo-muted-fg)]",
+                    "relative isolate w-full overflow-hidden rounded-none border-x-0 border-y border-b-0 px-3 py-3 text-left transition-colors duration-200 first:border-t-0",
+                    "border-[var(--demo-border)] bg-[var(--demo-panel-bg)] hover:border-[var(--demo-border-strong)] hover:bg-[var(--demo-shell-strong-bg)]",
+                    isActive &&
+                      "border-[var(--demo-border-strong)] bg-[var(--demo-shell-strong-bg)]",
                   )}
                 >
-                  {index + 1}
-                </span>
-
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="min-w-0">
-                      <div className="text-sm font-semibold text-[var(--demo-fg)]">
-                        {item.title}
-                      </div>
-                    </div>
-                    <div
+                  {isActive ? (
+                    <span
+                      aria-hidden="true"
+                      className="pointer-events-none absolute inset-y-0 left-0 w-px bg-[var(--demo-accent)]"
+                    />
+                  ) : null}
+
+                  <div className="relative z-10 flex items-start gap-3">
+                    <span
                       className={cn(
-                        "flex h-5 w-[4.5rem] shrink-0 items-center justify-end text-[9px] uppercase tracking-[0.14em]",
+                        "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border text-[10px] font-semibold",
                         isActive
-                          ? "text-[var(--demo-muted-fg)]"
-                          : "text-[var(--demo-subtle-fg)]",
+                          ? "border-[var(--demo-border-strong)] bg-[var(--demo-shell-strong-bg)] text-[var(--demo-fg)]"
+                          : "border-[var(--demo-border)] bg-[var(--demo-panel-subtle-bg)] text-[var(--demo-muted-fg)]",
                       )}
                     >
-                      {isActive ? "Open" : "Queued"}
+                      {index + 1}
+                    </span>
+
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-start justify-between gap-3">
+                        <div className="min-w-0">
+                          <div className="text-sm font-semibold text-[var(--demo-fg)]">
+                            {item.title}
+                          </div>
+                        </div>
+                        <div
+                          className={cn(
+                            "flex h-5 w-[4.5rem] shrink-0 items-center justify-end text-[9px] uppercase tracking-[0.14em]",
+                            isActive
+                              ? "text-[var(--demo-muted-fg)]"
+                              : "text-[var(--demo-subtle-fg)]",
+                          )}
+                        >
+                          {isActive ? "Open" : "Queued"}
+                        </div>
+                      </div>
+                      {item.description && (
+                        <p className="mt-1.5 max-w-[22ch] text-xs leading-relaxed text-[var(--demo-muted-fg)]">
+                          {item.description}
+                        </p>
+                      )}
+                      {item.meta && (
+                        <div className="mt-2.5 flex items-center gap-2 text-[11px] text-[var(--demo-muted-fg)]">
+                          <span className="h-1 w-1 rounded-full bg-[var(--demo-border-strong)]" />
+                          <span>{item.meta}</span>
+                        </div>
+                      )}
                     </div>
                   </div>
-                  {item.description && (
-                    <p className="mt-1.5 max-w-[22ch] text-xs leading-relaxed text-[var(--demo-muted-fg)]">
-                      {item.description}
-                    </p>
-                  )}
-                  {item.meta && (
-                    <div className="mt-2.5 flex items-center gap-2 text-[11px] text-[var(--demo-muted-fg)]">
-                      <span className="h-1 w-1 rounded-full bg-[var(--demo-border-strong)]" />
-                      <span>{item.meta}</span>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </button>
-          );
-        })}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        {hasOverflow ? (
+          <div
+            ref={scrollbarTrackRef}
+            aria-hidden="true"
+            onPointerDown={handleScrollbarPointerDown}
+            onPointerMove={handleScrollbarPointerMove}
+            onPointerUp={handleScrollbarPointerUp}
+            onPointerCancel={handleScrollbarPointerUp}
+            className="absolute inset-y-3 right-1.5 w-[10px] cursor-pointer overflow-hidden rounded-full bg-[var(--demo-scroll-track)]"
+          >
+            <div
+              data-scrollbar-thumb="true"
+              className="absolute inset-x-1 rounded-full bg-[var(--demo-scroll-thumb)] shadow-[inset_0_1px_0_rgba(255,255,255,0.35)] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] will-change-transform"
+              style={{
+                height: `${thumbHeight}px`,
+                transform: `translateY(${thumbOffset}px)`,
+              }}
+            />
+          </div>
+        ) : null}
       </div>
     </div>
   );

package/dist/kits/blocks/package-deps.json

@@ -13,9 +13,9 @@
     "next-themes": "^0.4.6",
     "motion": "^12.24.10",
     "sonner": "^2.0.7",
-    "@nextworks/blocks-core": "0.2.0-alpha.15",
-    "@nextworks/blocks-sections": "0.2.0-alpha.15",
-    "@nextworks/blocks-templates": "0.2.0-alpha.15"
+    "@nextworks/blocks-core": "0.2.0-alpha.16",
+    "@nextworks/blocks-sections": "0.2.0-alpha.16",
+    "@nextworks/blocks-templates": "0.2.0-alpha.16"
   },
   "devDependencies": {
     "tailwindcss": "^4.1.12"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextworks",
-  "version": "0.2.0-alpha.15",
+  "version": "0.2.0-alpha.16",
   "description": "Nextworks CLI",
   "main": "dist/index.js",
   "bin": {