@leanspec/ui 0.2.5-dev.20251119062438 → 0.2.5-dev.20251120022746

package/.next/standalone/packages/ui/.next/static/chunks/c61cbb6a0ba3b6ab.js

@@ -0,0 +1 @@
+(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,22764,e=>{"use strict";let t=(0,e.i(22436).default)("list",[["path",{d:"M3 5h.01",key:"18ugdj"}],["path",{d:"M3 12h.01",key:"nlz23k"}],["path",{d:"M3 19h.01",key:"noohij"}],["path",{d:"M8 5h13",key:"1pao27"}],["path",{d:"M8 12h13",key:"1za7za"}],["path",{d:"M8 19h13",key:"m83p4d"}]]);e.s(["List",()=>t],22764)},30885,35389,e=>{"use strict";var t=e.i(22436);let s=(0,t.default)("git-branch",[["line",{x1:"6",x2:"6",y1:"3",y2:"15",key:"17qcm7"}],["circle",{cx:"18",cy:"6",r:"3",key:"1h7g24"}],["circle",{cx:"6",cy:"18",r:"3",key:"fqmcym"}],["path",{d:"M18 9a9 9 0 0 1-9 9",key:"n2h4wq"}]]);e.s(["GitBranch",()=>s],30885);let a=(0,t.default)("maximize-2",[["path",{d:"M15 3h6v6",key:"1q9fwt"}],["path",{d:"m21 3-7 7",key:"1l2asr"}],["path",{d:"m3 21 7-7",key:"tjx5ai"}],["path",{d:"M9 21H3v-6",key:"wtvkvv"}]]);e.s(["Maximize2",()=>a],35389)},76075,e=>{"use strict";var t=e.i(90022),s=e.i(31231),a=e.i(32137);let r=s.forwardRef(({className:e,...s},r)=>(0,t.jsx)("div",{ref:r,className:(0,a.cn)("rounded-xl border border-gray-200 dark:border-gray-800 bg-card text-card-foreground shadow",e),...s}));r.displayName="Card";let l=s.forwardRef(({className:e,...s},r)=>(0,t.jsx)("div",{ref:r,className:(0,a.cn)("flex flex-col space-y-1.5 p-6",e),...s}));l.displayName="CardHeader";let i=s.forwardRef(({className:e,...s},r)=>(0,t.jsx)("div",{ref:r,className:(0,a.cn)("font-semibold leading-none tracking-tight",e),...s}));i.displayName="CardTitle";let n=s.forwardRef(({className:e,...s},r)=>(0,t.jsx)("div",{ref:r,className:(0,a.cn)("text-sm text-muted-foreground",e),...s}));n.displayName="CardDescription";let d=s.forwardRef(({className:e,...s},r)=>(0,t.jsx)("div",{ref:r,className:(0,a.cn)("p-6 pt-0",e),...s}));d.displayName="CardContent",s.forwardRef(({className:e,...s},r)=>(0,t.jsx)("div",{ref:r,className:(0,a.cn)("flex items-center p-6 pt-0",e),...s})).displayName="CardFooter",e.s(["Card",()=>r,"CardContent",()=>d,"CardDescription",()=>n,"CardHeader",()=>l,"CardTitle",()=>i])},38604,e=>{"use strict";let t=(0,e.i(22436).default)("layout-grid",[["rect",{width:"7",height:"7",x:"3",y:"3",rx:"1",key:"1g98yp"}],["rect",{width:"7",height:"7",x:"14",y:"3",rx:"1",key:"6d4xhi"}],["rect",{width:"7",height:"7",x:"14",y:"14",rx:"1",key:"nxv5o0"}],["rect",{width:"7",height:"7",x:"3",y:"14",rx:"1",key:"1bb6yr"}]]);e.s(["LayoutGrid",()=>t],38604)},10009,e=>{"use strict";var t=e.i(90022),s=e.i(31231),a=e.i(87985),r=e.i(30827),l=e.i(76075),i=e.i(23490),n=e.i(21079),d=e.i(35893),c=e.i(8737),o=e.i(329),m=e.i(96812),x=e.i(75364),u=e.i(40843),h=e.i(90225),p=e.i(38604),g=e.i(22764),f=e.i(20315),b=e.i(30885),j=e.i(35389);let v=(0,e.i(22436).default)("minimize-2",[["path",{d:"m14 10 7-7",key:"oa77jy"}],["path",{d:"M20 10h-6V4",key:"mjg0md"}],["path",{d:"m3 21 7-7",key:"tjx5ai"}],["path",{d:"M4 14h6v6",key:"rmj7iw"}]]);var N=e.i(68497),y=e.i(97705),w=e.i(32137),C=e.i(45878);e.i(93455);var k=e.i(95403);let S={planned:{icon:u.Clock,title:"Planned",colorClass:"text-blue-600 dark:text-blue-400",bgClass:"bg-blue-50 dark:bg-blue-900/20",borderClass:"border-blue-200 dark:border-blue-800"},"in-progress":{icon:x.PlayCircle,title:"In Progress",colorClass:"text-orange-600 dark:text-orange-400",bgClass:"bg-orange-50 dark:bg-orange-900/20",borderClass:"border-orange-200 dark:border-orange-800"},complete:{icon:m.CheckCircle2,title:"Complete",colorClass:"text-green-600 dark:text-green-400",bgClass:"bg-green-50 dark:bg-green-900/20",borderClass:"border-green-200 dark:border-green-800"},archived:{icon:h.Archive,title:"Archived",colorClass:"text-gray-600 dark:text-gray-400",bgClass:"bg-gray-50 dark:bg-gray-900/20",borderClass:"border-gray-200 dark:border-gray-800"}},T=["planned","in-progress","complete","archived"];function I({initialSpecs:e}){let a=(0,r.useSearchParams)(),l=(0,r.useRouter)(),[i,m]=(0,s.useState)(e),[x,u]=(0,s.useState)({}),[h,f]=(0,s.useState)(""),[b,N]=(0,s.useState)("all"),[y,C]=(0,s.useState)("all"),[T,I]=(0,s.useState)("id-desc"),[B,L]=(0,s.useState)(!1),[P,R]=(0,s.useState)(!1),[D,$]=(0,s.useState)(()=>{let e=a.get("view");if("board"===e||"list"===e)return e;{let e=localStorage.getItem("specs-view-mode");if("board"===e||"list"===e)return e}return"list"}),z=(0,s.useRef)(!0);(0,s.useEffect)(()=>{m(e)},[e]);let E=(0,s.useCallback)(async(e,t)=>{if(e.status===t)return;let s=e.status;u(t=>({...t,[e.id]:!0})),m(s=>s.map(s=>s.id===e.id?{...s,status:t}:s));try{let s=await fetch(`/api/specs/${encodeURIComponent(e.specName)}/status`,{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({status:t})});if(!s.ok){let e=await s.text();throw Error(e||"Failed to update spec status")}let a=e.specNumber?`#${e.specNumber}`:e.specName;k.toast.success(`Moved ${a} to ${S[t].title}`)}catch(t){console.error("Failed to update spec status",t),m(t=>t.map(t=>t.id===e.id?{...t,status:s}:t)),k.toast.error("Unable to update status. Please try again.")}finally{u(t=>{let s={...t};return delete s[e.id],s})}},[]);(0,s.useEffect)(()=>{"archived"===b&&"board"===D&&L(!0)},[b,D]),(0,s.useEffect)(()=>{if(z.current){z.current=!1;return}let e=new URLSearchParams(window.location.search);"board"===D?e.set("view","board"):e.delete("view");let t=e.toString(),s=t?`?${t}`:"";l.replace(`/specs${s}`,{scroll:!1}),localStorage.setItem("specs-view-mode",D)},[D,l]);let F=(0,s.useMemo)(()=>{let e=[...i.filter(e=>{let t=!h||e.title?.toLowerCase().includes(h.toLowerCase())||e.specName.toLowerCase().includes(h.toLowerCase())||e.tags?.some(e=>e.toLowerCase().includes(h.toLowerCase())),s="all"===b?"list"!==D||"archived"!==e.status:e.status===b,a="all"===y||e.priority===y;return t&&s&&a})];switch(T){case"id-desc":e.sort((e,t)=>(t.specNumber||0)-(e.specNumber||0));break;case"id-asc":e.sort((e,t)=>(e.specNumber||0)-(t.specNumber||0));break;case"updated-desc":e.sort((e,t)=>e.updatedAt?t.updatedAt?t.updatedAt.getTime()-e.updatedAt.getTime():-1:1);break;case"title-asc":e.sort((e,t)=>{let s=(e.title||e.specName).toLowerCase(),a=(t.title||t.specName).toLowerCase();return s.localeCompare(a)})}return e},[i,h,b,y,T,D]);return(0,t.jsx)("div",{className:"h-[calc(100vh-3.5rem)] flex flex-col overflow-hidden bg-background p-4",children:(0,t.jsxs)("div",{className:(0,w.cn)("flex flex-col h-full mx-auto transition-all duration-300",P?"w-full":"max-w-7xl w-full"),children:[(0,t.jsx)("div",{className:"flex-none mb-4",children:(0,t.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,t.jsxs)("div",{className:"flex items-center justify-between gap-4",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)("h1",{className:"text-2xl font-bold tracking-tight",children:"Specifications"}),(0,t.jsxs)("p",{className:"text-sm text-muted-foreground",children:[F.length," specs"]})]}),(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[(0,t.jsxs)("div",{className:"flex items-center gap-2 bg-muted/50 p-1 rounded-lg",children:[(0,t.jsxs)(d.Button,{variant:"list"===D?"secondary":"ghost",size:"sm",onClick:()=>$("list"),className:"h-8 px-2 lg:px-3",children:[(0,t.jsx)(g.List,{className:"h-4 w-4 lg:mr-2"}),(0,t.jsx)("span",{className:"hidden lg:inline",children:"List"})]}),(0,t.jsxs)(d.Button,{variant:"board"===D?"secondary":"ghost",size:"sm",onClick:()=>$("board"),className:"h-8 px-2 lg:px-3",children:[(0,t.jsx)(p.LayoutGrid,{className:"h-4 w-4 lg:mr-2"}),(0,t.jsx)("span",{className:"hidden lg:inline",children:"Board"})]})]}),(0,t.jsx)(d.Button,{variant:"ghost",size:"icon",onClick:()=>R(!P),className:"h-10 w-10 text-muted-foreground hover:text-foreground",title:P?"Exit wide mode":"Enter wide mode",children:P?(0,t.jsx)(v,{className:"h-4 w-4"}):(0,t.jsx)(j.Maximize2,{className:"h-4 w-4"})})]})]}),(0,t.jsxs)("div",{className:"flex items-center gap-2 overflow-x-auto pb-2",children:[(0,t.jsxs)("div",{className:"relative flex-1 min-w-[200px] max-w-md",children:[(0,t.jsx)(o.Search,{className:"absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"}),(0,t.jsx)(n.Input,{placeholder:"Search specs...",value:h,onChange:e=>f(e.target.value),className:"pl-9 h-9"})]}),(0,t.jsxs)(c.Select,{value:b,onValueChange:e=>N(e),children:[(0,t.jsx)(c.SelectTrigger,{className:"w-[140px] h-9",children:(0,t.jsx)(c.SelectValue,{placeholder:"Status"})}),(0,t.jsxs)(c.SelectContent,{children:[(0,t.jsx)(c.SelectItem,{value:"all",children:"All Status"}),(0,t.jsx)(c.SelectItem,{value:"planned",children:"Planned"}),(0,t.jsx)(c.SelectItem,{value:"in-progress",children:"In Progress"}),(0,t.jsx)(c.SelectItem,{value:"complete",children:"Complete"}),(0,t.jsx)(c.SelectItem,{value:"archived",children:"Archived"})]})]}),(0,t.jsxs)(c.Select,{value:y,onValueChange:C,children:[(0,t.jsx)(c.SelectTrigger,{className:"w-[140px] h-9",children:(0,t.jsx)(c.SelectValue,{placeholder:"Priority"})}),(0,t.jsxs)(c.SelectContent,{children:[(0,t.jsx)(c.SelectItem,{value:"all",children:"All Priority"}),(0,t.jsx)(c.SelectItem,{value:"critical",children:"Critical"}),(0,t.jsx)(c.SelectItem,{value:"high",children:"High"}),(0,t.jsx)(c.SelectItem,{value:"medium",children:"Medium"}),(0,t.jsx)(c.SelectItem,{value:"low",children:"Low"})]})]}),(0,t.jsxs)(c.Select,{value:T,onValueChange:e=>I(e),children:[(0,t.jsx)(c.SelectTrigger,{className:"w-[180px] h-9",children:(0,t.jsx)(c.SelectValue,{placeholder:"Sort by"})}),(0,t.jsxs)(c.SelectContent,{children:[(0,t.jsx)(c.SelectItem,{value:"id-desc",children:"Newest First"}),(0,t.jsx)(c.SelectItem,{value:"id-asc",children:"Oldest First"}),(0,t.jsx)(c.SelectItem,{value:"updated-desc",children:"Recently Updated"}),(0,t.jsx)(c.SelectItem,{value:"title-asc",children:"Title (A-Z)"})]})]})]})]})}),(0,t.jsx)("div",{className:(0,w.cn)("flex-1 min-h-0","board"===D?"overflow-x-auto overflow-y-hidden":"overflow-y-auto"),children:"list"===D?(0,t.jsx)("div",{className:"w-full",children:(0,t.jsx)(A,{specs:F})}):(0,t.jsx)(M,{specs:F,onStatusChange:E,pendingSpecIds:x,showArchived:B,onToggleArchived:()=>L(!B)})})]})})}function A({specs:e}){return(0,t.jsx)("div",{className:"grid grid-cols-1 gap-4 pb-8",children:e.map(e=>{let s={critical:"border-l-red-500",high:"border-l-orange-500",medium:"border-l-blue-500",low:"border-l-gray-400"}[e.priority]||"border-l-gray-300",r=e.relationships&&(e.relationships.dependsOn.length>0||e.relationships.related.length>0),n=!!(e.subSpecsCount&&e.subSpecsCount>0);return(0,t.jsxs)(l.Card,{className:(0,w.cn)("hover:shadow-lg transition-all duration-150 hover:scale-[1.01] border-l-4 cursor-pointer",s),onClick:()=>window.location.href=`/specs/${e.specNumber||e.id}`,children:[(0,t.jsx)(l.CardHeader,{className:"pb-3",children:(0,t.jsxs)("div",{className:"flex items-start justify-between gap-4",children:[(0,t.jsxs)("div",{className:"flex-1 min-w-0",children:[(0,t.jsx)(a.default,{href:`/specs/${e.specNumber||e.id}`,children:(0,t.jsxs)(l.CardTitle,{className:"text-lg font-semibold hover:text-primary transition-colors flex items-center",children:[e.specNumber?(0,t.jsxs)("span",{className:"font-mono text-base font-normal text-muted-foreground mr-3",children:["#",e.specNumber.toString().padStart(3,"0")]}):null,e.title||e.specName]})}),e.title&&e.title!==e.specName&&(0,t.jsx)("p",{className:"text-xs font-mono text-muted-foreground mt-1.5 truncate",children:e.specName})]}),(0,t.jsxs)("div",{className:"flex gap-2 shrink-0",children:[e.status&&(0,t.jsx)(N.StatusBadge,{status:e.status}),e.priority&&(0,t.jsx)(y.PriorityBadge,{priority:e.priority})]})]})}),(0,t.jsxs)(l.CardContent,{className:"flex items-center justify-between gap-4 pt-0",children:[(0,t.jsx)("div",{className:"flex items-center gap-4 text-sm text-muted-foreground flex-wrap",children:e.updatedAt||n||r?(0,t.jsxs)(t.Fragment,{children:[e.updatedAt&&(0,t.jsxs)("div",{className:"flex items-center gap-1.5",children:[(0,t.jsx)(u.Clock,{className:"h-3.5 w-3.5"}),(0,t.jsxs)("span",{children:["Updated ",(0,C.formatRelativeTime)(e.updatedAt)]})]}),n&&(0,t.jsxs)("div",{className:"flex items-center gap-1.5",children:[(0,t.jsx)(f.FileText,{className:"h-3.5 w-3.5"}),(0,t.jsxs)("span",{children:["+",e.subSpecsCount," files"]})]}),r&&(0,t.jsxs)("div",{className:"flex items-center gap-1.5",children:[(0,t.jsx)(b.GitBranch,{className:"h-3.5 w-3.5"}),(0,t.jsxs)("span",{children:[e.relationships.dependsOn.length>0&&`${e.relationships.dependsOn.length} deps`,e.relationships.dependsOn.length>0&&e.relationships.related.length>0&&", ",e.relationships.related.length>0&&`${e.relationships.related.length} related`]})]})]}):(0,t.jsx)("span",{className:"invisible",children:"No metadata"})}),e.tags&&e.tags.length>0&&(0,t.jsx)("div",{className:"flex flex-wrap gap-2 justify-end shrink-0",children:e.tags.map(e=>(0,t.jsx)(i.Badge,{variant:"outline",className:"text-xs font-mono text-muted-foreground hover:text-foreground transition-colors",children:e},e))})]})]},e.id)})})}function M({specs:e,onStatusChange:r,pendingSpecIds:n,showArchived:d,onToggleArchived:c}){let[o,m]=(0,s.useState)(null),[x,u]=(0,s.useState)(null),h=(0,s.useMemo)(()=>T.map(t=>({status:t,config:S[t],specs:e.filter(e=>e.status===t)})),[e]),p=(0,s.useMemo)(()=>{let t=new Map;return e.forEach(e=>t.set(e.id,e)),t},[e]),g=(0,s.useCallback)((e,t)=>{t.dataTransfer.setData("text/plain",e),t.dataTransfer.effectAllowed="move",m(e)},[]),f=(0,s.useCallback)(()=>{m(null),u(null)},[]),b=(0,s.useCallback)((e,t)=>{o&&(t.preventDefault(),t.dataTransfer.dropEffect="move",u(e))},[o]),j=(0,s.useCallback)((e,t)=>{if(!o)return;let s=t.relatedTarget;s&&t.currentTarget.contains(s)||u(t=>t===e?null:t)},[o]),v=(0,s.useCallback)((e,t)=>{t.preventDefault();let s=t.dataTransfer.getData("text/plain")||o;if(!s)return void f();let a=p.get(s);a&&a.status!==e&&r(a,e),f()},[o,f,r,p]);return(0,t.jsx)("div",{className:"flex gap-6 h-full pb-2",children:h.map(e=>{let s=e.config.icon,r="archived"===e.status;return(0,t.jsxs)("div",{className:(0,w.cn)("flex flex-col h-full flex-1 min-w-[280px]",r&&!d&&"w-14 min-w-[3.5rem] flex-none flex-shrink-0"),children:[(0,t.jsx)("div",{className:(0,w.cn)("flex-none mb-4 rounded-lg border-2 bg-background transition-all",e.config.bgClass,e.config.borderClass,r?"cursor-pointer hover:opacity-80":"",r&&!d?"py-6 px-2":"p-3"),onClick:r?c:void 0,children:(0,t.jsxs)("h2",{className:(0,w.cn)("text-lg font-semibold flex items-center gap-2",e.config.colorClass,r&&!d&&"flex-col text-sm gap-3"),children:[(0,t.jsx)(s,{className:"h-5 w-5"}),r&&!d?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("span",{className:"vertical-text text-sm whitespace-nowrap",children:e.config.title}),(0,t.jsx)(i.Badge,{variant:"outline",className:"text-xs",children:e.specs.length})]}):(0,t.jsxs)(t.Fragment,{children:[e.config.title,(0,t.jsx)(i.Badge,{variant:"outline",className:"ml-auto",children:e.specs.length})]})]})}),(!r||d)&&(0,t.jsxs)("div",{className:(0,w.cn)("space-y-3 flex-1 rounded-xl border border-transparent p-1 transition-colors overflow-y-auto min-h-0",o&&"border-dashed border-muted-foreground/40",o&&x===e.status&&"bg-muted/40 border-primary/50"),onDragOver:t=>b(e.status,t),onDragLeave:t=>j(e.status,t),onDrop:t=>v(e.status,t),children:[e.specs.map(e=>{let s={critical:"border-l-red-500",high:"border-l-orange-500",medium:"border-l-blue-500",low:"border-l-gray-400"}[e.priority]||"border-l-gray-300",r=!!n[e.id];return(0,t.jsxs)(l.Card,{draggable:!r,onDragStart:t=>{r?t.preventDefault():g(e.id,t)},onDragEnd:f,"aria-disabled":r,className:(0,w.cn)("relative hover:shadow-lg transition-all duration-150 hover:scale-[1.02] border-l-4 cursor-pointer group flex flex-col",s,r&&"opacity-60 cursor-wait"),onClick:()=>window.location.href=`/specs/${e.specNumber||e.id}`,children:[r&&(0,t.jsx)("div",{className:"absolute inset-0 rounded-lg bg-background/80 flex items-center justify-center text-xs font-medium z-10",children:"Updating..."}),(0,t.jsxs)(l.CardHeader,{className:"p-4 pb-2 space-y-1.5",children:[(0,t.jsx)("div",{className:"flex items-center justify-between",children:(0,t.jsx)("span",{className:"font-mono text-xs text-muted-foreground/70 group-hover:text-primary/60 transition-colors",children:e.specNumber?`#${e.specNumber}`:""})}),(0,t.jsx)(a.default,{href:`/specs/${e.specNumber||e.id}`,className:"block",children:(0,t.jsx)(l.CardTitle,{className:"text-sm font-semibold leading-snug hover:text-primary transition-colors line-clamp-3",children:e.title||e.specName})})]}),(0,t.jsx)(l.CardContent,{className:"p-4 pt-2 flex-1 flex flex-col justify-end",children:(0,t.jsxs)("div",{className:"flex flex-col gap-3",children:[e.title&&e.title!==e.specName&&(0,t.jsx)("p",{className:"text-xs font-mono text-muted-foreground truncate opacity-70",children:e.specName}),(0,t.jsxs)("div",{className:"flex items-center justify-between gap-2 pt-1",children:[e.priority?(0,t.jsx)(y.PriorityBadge,{priority:e.priority}):(0,t.jsx)("div",{}),e.tags&&e.tags.length>0&&(0,t.jsxs)("div",{className:"flex flex-wrap gap-1 justify-end",children:[e.tags.slice(0,2).map(e=>(0,t.jsx)(i.Badge,{variant:"outline",className:"text-[10px] px-1.5 h-5 font-mono text-muted-foreground/80",children:e},e)),e.tags.length>2&&(0,t.jsxs)(i.Badge,{variant:"outline",className:"text-[10px] px-1.5 h-5 font-mono text-muted-foreground/80",children:["+",e.tags.length-2]})]})]})]})})]},e.id)}),0===e.specs.length&&(0,t.jsx)(l.Card,{className:"border-dashed border-gray-300 dark:border-gray-700 bg-transparent",children:(0,t.jsxs)(l.CardContent,{className:"py-8 text-center",children:[(0,t.jsx)(s,{className:(0,w.cn)("mx-auto h-8 w-8 mb-2",e.config.colorClass,"opacity-50")}),(0,t.jsx)("p",{className:"text-sm text-muted-foreground",children:"Drop here to move specs"})]})})]})]},e.status)})})}e.s(["SpecsClient",()=>I],10009)}]);

package/.next/standalone/packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leanspec/ui",
-  "version": "0.2.5-dev.20251119062438",
+  "version": "0.2.5-dev.20251120022746",
   "description": "LeanSpec web UI launcher for visual spec management",
   "type": "module",
   "bin": {

package/.next/standalone/packages/ui/src/app/globals.css

@@ -538,4 +538,31 @@ html.changing-theme * {
     writing-mode: vertical-rl;
     transform: rotate(180deg);
   }
+
+  /* Auto-hiding scrollbar - visible only on hover */
+  .scrollbar-auto-hide {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+  
+  .scrollbar-auto-hide:hover {
+    scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
+  }
+  
+  .scrollbar-auto-hide::-webkit-scrollbar {
+    width: 4px;
+  }
+  
+  .scrollbar-auto-hide::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  .scrollbar-auto-hide::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 20px;
+  }
+  
+  .scrollbar-auto-hide:hover::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--muted-foreground) / 0.3);
+  }
 }