@knymbus/voxel-ui 1.0.15 → 1.0.19

package/dist/components/search/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../chunks/search-COxH7vvi.js";
-export { t as SearchInput, e as searchTokens };
+import { t as e } from "../../chunks/search-DSDSn6PK.js";
+export { e as SearchInput };

package/dist/components/search/types.d.ts

@@ -20,23 +20,3 @@ export interface SearchInputProps {
     showFloatPeek?: boolean;
     peekContent?: React.ReactNode;
 }
-export declare const searchTokens: {
-    colors: {
-        bgInput: string;
-        border: string;
-        borderAccent: string;
-        borderAccentHover: string;
-        text: string;
-        muted: string;
-        sidebarBg: string;
-        hoverBg: string;
-        accentBgLight: string;
-    };
-    typography: {
-        sans: string;
-        mono: string;
-    };
-    transitions: {
-        smooth: string;
-    };
-};

package/dist/components/tabs/index.js

@@ -1,2 +1,2 @@
-import { i as e, n as t, r as n, t as r } from "../../chunks/tabs-MaVN00hJ.js";
+import { i as e, n as t, r as n, t as r } from "../../chunks/tabs-DkmFedCI.js";
 export { r as TabButton, t as TabPanel, n as TabPanelList, e as useTab };

package/dist/components/types.d.ts

@@ -0,0 +1,20 @@
+export declare const searchTokens: {
+    colors: {
+        bgInput: string;
+        border: string;
+        borderAccent: string;
+        borderAccentHover: string;
+        text: string;
+        muted: string;
+        sidebarBg: string;
+        hoverBg: string;
+        accentBgLight: string;
+    };
+    typography: {
+        sans: string;
+        mono: string;
+    };
+    transitions: {
+        smooth: string;
+    };
+};

package/dist/index.js

@@ -1,7 +1,7 @@
 import { t as e } from "./chunks/resizable-ImB8dfG_.js";
-import { i as t, n, r, t as i } from "./chunks/tabs-MaVN00hJ.js";
+import { i as t, n, r, t as i } from "./chunks/tabs-DkmFedCI.js";
 import { t as a } from "./chunks/Button-BgQwvn3C.js";
 import { n as o, t as s } from "./chunks/button-dHcpTNIG.js";
 import { C as c, E as l, S as u, T as d, _ as f, a as p, b as m, c as h, d as g, f as _, g as v, h as y, i as b, l as x, m as S, n as C, o as w, p as T, r as E, s as D, t as O, u as k, v as A, w as j, x as M, y as N } from "./chunks/icons-BpfDVwCQ.js";
-import { n as P, t as F } from "./chunks/search-COxH7vvi.js";
-export { A as Add, S as BlankDoc, a as Button, o as ButtonGroup, _ as Chat, N as ChevronDown, l as Close, x as Comment, k as DeleteChat, j as Document, v as Expand, c as Folder, C as Group, y as Minimize, f as Minus, w as More, D as OpenFolder, b as Person, g as PlusChat, h as PlusComment, T as PlusDoc, O as PlusDocBadge, E as PlusPerson, M as Refresh, e as ResizablePanel, u as Search, F as SearchInput, s as SplitActionButton, i as TabButton, n as TabPanel, r as TabPanelList, d as Terminal, m as Trash, p as Truck, P as searchTokens, t as useTab };
+import { t as P } from "./chunks/search-DSDSn6PK.js";
+export { A as Add, S as BlankDoc, a as Button, o as ButtonGroup, _ as Chat, N as ChevronDown, l as Close, x as Comment, k as DeleteChat, j as Document, v as Expand, c as Folder, C as Group, y as Minimize, f as Minus, w as More, D as OpenFolder, b as Person, g as PlusChat, h as PlusComment, T as PlusDoc, O as PlusDocBadge, E as PlusPerson, M as Refresh, e as ResizablePanel, u as Search, P as SearchInput, s as SplitActionButton, i as TabButton, n as TabPanel, r as TabPanelList, d as Terminal, m as Trash, p as Truck, t as useTab };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knymbus/voxel-ui",
-  "version": "1.0.15",
+  "version": "1.0.19",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/search/SearchInput.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import SearchInput from './SearchInput';
 import { SearchResultItem } from './types';
@@ -45,10 +45,10 @@ const MultiSearchWorkspace = () => {
     }
 
     return (
-        <div style={{ fontFamily: 'var(--font-sans)', minWidth: '450px', backgroundColor: 'var(--color-vsc-sidebar)', border: '1px solid var(--color-vsc-border)', borderRadius: '6px', padding: '32px' }}>
+        <div className="p-8 bg-vsc-sidebar border border-vsc-border rounded-md space-y-8 min-w-112.5 text-vsc-text" >
 
             {/* 1. Simple Variant Bracket */}
-            <div className="space-y-1.5" style={{ height: 'auto', width: '350px',}}>
+            <div className="space-y-1.5" >
                 <p className="text-[10px] font-bold text-vsc-muted uppercase tracking-wider">1. Simple Matrix Variant with Count Log</p>
                 <SearchInput
                     variant="simple"
@@ -56,7 +56,7 @@ const MultiSearchWorkspace = () => {
                     onChange={setSimpleQuery}
                     resultsCount={filteredSimpleResults.length}
                     placeholder="Type track ID to evaluate records count..."
-                    // peekContent={<ResultPanel />}
+                    peekContent={<ResultPanel />}
                 />
             </div>
 

package/src/components/search/SearchInput.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { SearchInputProps, searchTokens } from './types';
+import { SearchInputProps } from './types';
 import { Search, Close } from '../icons';
 import { Button } from '../button/Button';
 import SearchMenu from './SearchMenu';
+import { searchTokens } from '../types';
 
 export default function SearchInput({
     variant = 'simple',
@@ -159,13 +160,13 @@ export default function SearchInput({
                         zIndex: 10,
                         // overflow: 'hidden',
                         transition: searchTokens.transitions.smooth,
-                        height: hasResults || hasQuery ? 'auto' : '0px',
-                        opacity: hasResults || hasQuery ? 1 : 0,
-                        transform: hasResults || hasQuery ? 'translateY(0px)' : 'translateY(-4px)',
+                        height: hasQuery ? 'auto' : '0px',
+                        opacity: hasQuery ? 1 : 0,
+                        transform: hasQuery ? 'translateY(4px)' : 'translateY(-4px)',
                         pointerEvents: 'none'
                     }}
                 >
-                    <div style={{ backgroundColor: searchTokens.colors.sidebarBg, border: `0px solid ${searchTokens.colors.border}`, borderTop: 'none', padding: '4px 6px', borderRadius: '0 0 6px 6px', boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1)' }}>
+                    <div style={{ backgroundColor: searchTokens.colors.sidebarBg, border: `0px solid ${searchTokens.colors.border}`, borderTop: 'none', padding: '4px 6px', borderRadius: '6px', boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1)' }}>
                         {renderedPeek()}
                     </div>
                 </div>

package/src/components/search/SearchMenu.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { SearchResultItem, searchTokens } from './types';
+import { SearchResultItem } from './types';
+import { searchTokens } from '../types';
 
 interface SearchMenuProps {
   isOpen: boolean;

package/src/components/search/types.ts

@@ -25,24 +25,3 @@ export interface SearchInputProps {
   peekContent?: React.ReactNode; 
 }
 
-export const searchTokens = {
-  colors: {
-    bgInput: 'var(--color-vsc-bg-input, #f6f8fa)',
-    border: 'var(--color-vsc-border, #e4e4e7)',
-    borderAccent: 'var(--color-vsc-accent, #007acc)',
-    borderAccentHover: 'var(--color-vsc-accent-hover, #0062a3)',
-    text: 'var(--color-vsc-text, #333333)',
-    muted: 'var(--color-vsc-muted, #6a737d)',
-    sidebarBg: 'var(--color-vsc-sidebar, #f3f3f3)',
-    hoverBg: 'var(--color-vsc-hover, #e8e8e8)',
-    accentBgLight: 'rgba(0, 122, 204, 0.1)'
-  },
-  typography: {
-    /* ⚡ Pulls Tailwind's native font configuration maps from your global layout shell App context */
-    sans: 'var(--font-sans, font-sans, ui-sans-serif, system-ui, sans-serif)',
-    mono: 'var(--font-mono, font-mono, ui-monospace, SFMono-Regular, monospace)'
-  },
-  transitions: {
-    smooth: 'all 200ms cubic-bezier(0.34, 1.56, 0.64, 1)'
-  }
-};

package/src/components/tabs/TabButton.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTab } from './useTab';
-import { TabVariant } from './types';
+import { TabVariant } from './types'; // Shares the typography/color tokens mapping schema
+import { searchTokens } from '../types';
 
 interface TabButtonProps {
   id: string;
@@ -20,37 +21,78 @@ export default function TabButton({
   endIcon
 }: TabButtonProps) {
   const { activeTab, changeTab } = useTab(scopeName);
+  const [isHovered, setIsHovered] = useState(false);
   const isCurrent = activeTab === id;
 
-  const baseStyles = "flex items-center justify-center gap-1.5 focus:outline-none border-none outline-none z-10 transition-colors select-none h-full";
+  const baseButtonStyles: React.CSSProperties = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '6px',
+    backgroundColor: 'transparent',
+    border: 'none',
+    outline: 'none',
+    fontFamily: searchTokens.typography.sans,
+    fontSize: '12px',
+    userSelect: 'none',
+    cursor: 'pointer',
+    height: '100%',
+    transition: 'all 150ms ease',
+    boxSizing: 'border-box',
+    position: 'relative',
+    zIndex: 10
+  };
 
-  const variantClasses: Record<TabVariant, string> = {
-    underline: `pb-2 pt-1 px-3 text-xs font-semibold cursor-pointer border-b-2 ${
-      isCurrent ? 'border-vsc-accent text-vsc-text' : 'border-transparent text-vsc-muted hover:text-vsc-text'
-    }`,
-    'sliding-underline': `py-2 px-4 text-xs font-semibold cursor-pointer transition-colors duration-200 ${
-      isCurrent ? 'text-vsc-text font-bold' : 'text-vsc-muted hover:text-vsc-text'
-    }`,
-    pill: `px-3.5 py-1.5 text-xs font-bold rounded-full cursor-pointer scale-100 ${
-      isCurrent ? 'bg-vsc-accent text-vsc-button-text shadow-sm' : 'bg-vsc-hover/40 text-vsc-muted hover:bg-vsc-hover'
-    }`,
-    vscode: `px-4 text-xs font-medium border-r border-vsc-border cursor-pointer ${
-      isCurrent ? 'bg-vsc-bg text-vsc-text border-t-2 border-t-vsc-accent -mt-[1px]' : 'bg-vsc-sidebar text-vsc-muted hover:bg-vsc-hover/50'
-    }`,
-    ghost: `px-3 py-1.5 text-xs font-semibold rounded cursor-pointer ${
-      isCurrent ? 'bg-vsc-hover text-vsc-text font-bold' : 'text-vsc-muted hover:bg-vsc-hover/30'
-    }`
+  const variantStyles: Record<TabVariant, React.CSSProperties> = {
+    underline: {
+      padding: '4px 12px 8px 12px',
+      fontWeight: isCurrent ? 600 : 500,
+      color: isCurrent ? searchTokens.colors.text : (isHovered ? searchTokens.colors.text : searchTokens.colors.muted),
+      borderBottom: `2px solid ${isCurrent ? searchTokens.colors.borderAccent : 'transparent'}`
+    },
+    'sliding-underline': {
+      padding: '8px 16px',
+      fontWeight: isCurrent ? 700 : 500,
+      color: isCurrent ? searchTokens.colors.text : (isHovered ? searchTokens.colors.text : searchTokens.colors.muted)
+    },
+    pill: {
+      padding: '6px 14px',
+      fontWeight: 700,
+      borderRadius: '9999px',
+      backgroundColor: isCurrent ? searchTokens.colors.borderAccent : (isHovered ? searchTokens.colors.hoverBg : 'transparent'),
+      color: isCurrent ? '#ffffff' : (isHovered ? searchTokens.colors.text : searchTokens.colors.muted),
+      transform: isCurrent ? 'scale(1.02)' : 'scale(1)',
+      boxShadow: isCurrent ? '0 1px 3px rgba(0,0,0,0.1)' : 'none'
+    },
+    vscode: {
+      padding: '0 16px',
+      fontWeight: 500,
+      color: isCurrent ? searchTokens.colors.text : (isHovered ? searchTokens.colors.text : searchTokens.colors.muted),
+      backgroundColor: isCurrent ? searchTokens.colors.bgInput : (isHovered ? 'rgba(0,0,0,0.02)' : searchTokens.colors.sidebarBg),
+      borderRight: `1px solid ${searchTokens.colors.border}`,
+      borderTop: isCurrent ? `2px solid ${searchTokens.colors.borderAccent}` : '2px solid transparent',
+      marginTop: isCurrent ? '-1px' : '0'
+    },
+    ghost: {
+      padding: '6px 12px',
+      fontWeight: isCurrent ? 700 : 500,
+      borderRadius: '2px',
+      backgroundColor: isCurrent ? searchTokens.colors.hoverBg : (isHovered ? 'rgba(0,0,0,0.04)' : 'transparent'),
+      color: isCurrent ? searchTokens.colors.text : (isHovered ? searchTokens.colors.text : searchTokens.colors.muted)
+    }
   };
 
   return (
     <button
       data-id={id}
       onClick={() => changeTab(id)}
-      className={`${baseStyles} ${variantClasses[variant]}`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={{ ...baseButtonStyles, ...variantStyles[variant] }}
     >
-      {startIcon && <span className="shrink-0 opacity-80">{startIcon}</span>}
-      <span className="truncate">{children}</span>
-      {endIcon && <span className="shrink-0 opacity-70">{endIcon}</span>}
+      {startIcon && <span style={{ display: 'inline-flex', flexShrink: 0, opacity: isCurrent || isHovered ? 1 : 0.7 }}>{startIcon}</span>}
+      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{children}</span>
+      {endIcon && <span style={{ display: 'inline-flex', flexShrink: 0, opacity: isCurrent || isHovered ? 1 : 0.6 }}>{endIcon}</span>}
     </button>
   );
 }

package/src/components/tabs/TabButtonGroup.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useTab } from './useTab';
 import { TabVariant } from './types';
-import TabButton from './TabButton'; // Imported to execute type-checking audits
+import TabButton from './TabButton';
+import { searchTokens } from '../types';
 
 interface TabButtonGroupProps {
   children: React.ReactNode;
@@ -20,15 +21,10 @@ export default function TabButtonGroup({
   const [lineStyles, setLineStyles] = useState<React.CSSProperties>({ left: 0, width: 0, opacity: 0 });
   const [hoveredId, setHoveredId] = useState<string | null>(null);
 
-  // --- STRICT CHILDREN SUB-COMPONENT VALIDATION ENGINE LOOP ---
   const validatedChildren = React.Children.map(children, (child) => {
     if (!React.isValidElement(child)) return null;
-
-    // Verify if the child component reference maps directly to our TabButton signature
     if (child.type !== TabButton) {
-      console.warn(
-        `[Voxel UI Validation Warning]: TabButtonGroup scope "${scopeName}" only accepts sub-children elements of type <TabButton />. Ignored invalid component node.`
-      );
+      console.warn(`[Voxel UI Warning]: TabButtonGroup only accepts children of type <TabButton />.`);
       return null;
     }
     return child;
@@ -45,18 +41,27 @@ export default function TabButtonGroup({
         left: `${targetElement.offsetLeft}px`,
         width: `${targetElement.offsetWidth}px`,
         opacity: 1,
-        backgroundColor: hoveredId && hoveredId !== activeTab ? 'var(--color-vsc-text)' : 'var(--color-vsc-accent)'
+        backgroundColor: hoveredId && hoveredId !== activeTab ? searchTokens.colors.text : searchTokens.colors.borderAccent
       });
     }
   }, [activeTab, hoveredId, variant]);
 
-  const containerClasses = {
-    underline: 'flex items-center space-x-2 border-b border-vsc-border w-full bg-vsc-bg pb-[1px]',
-    'sliding-underline': 'relative flex items-center border-b border-vsc-border w-full bg-vsc-bg pb-[2px]',
-    pill: 'flex items-center space-x-1.5 p-1 bg-vsc-sidebar rounded-full w-fit',
-    vscode: 'flex items-center h-9 bg-vsc-sidebar border-b border-vsc-border w-full overflow-hidden',
-    ghost: 'flex items-center space-x-1 p-1 bg-vsc-bg-input border border-vsc-border rounded'
-  }[variant];
+  const baseContainerStyles: React.CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    fontFamily: searchTokens.typography.sans,
+    userSelect: 'none',
+    boxSizing: 'border-box',
+    position: 'relative'
+  };
+
+  const variantContainerStyles: Record<TabVariant, React.CSSProperties> = {
+    underline: { width: '100%', borderBottom: `1px solid ${searchTokens.colors.border}`, backgroundColor: searchTokens.colors.bgInput, gap: '8px', paddingBottom: '1px' },
+    'sliding-underline': { width: '100%', borderBottom: `1px solid ${searchTokens.colors.border}`, backgroundColor: searchTokens.colors.bgInput, paddingBottom: '2px' },
+    pill: { width: 'max-content', padding: '4px', backgroundColor: searchTokens.colors.sidebarBg, borderRadius: '9999px', gap: '6px' },
+    vscode: { width: '100%', height: '36px', backgroundColor: searchTokens.colors.sidebarBg, borderBottom: `1px solid ${searchTokens.colors.border}`, overflowX: 'auto', overflowY: 'hidden' },
+    ghost: { width: '100%', padding: '4px', backgroundColor: searchTokens.colors.bgInput, border: `1px solid ${searchTokens.colors.border}`, borderRadius: '4px', gap: '4px' }
+  };
 
   return (
     <div 
@@ -66,15 +71,22 @@ export default function TabButtonGroup({
         if (btn) setHoveredId(btn.getAttribute('data-id'));
       }}
       onMouseLeave={() => setHoveredId(null)}
-      className={`${containerClasses} select-none`}
+      style={{ ...baseContainerStyles, ...variantContainerStyles[variant] }}
     >
-      {/* Render exclusively the type-validated sub-nodes collection array */}
       {validatedChildren}
 
+      {/* Real-time Sliding Underline Track Line Component */}
       {variant === 'sliding-underline' && (
         <div 
-          className="absolute bottom-0 h-0.5 rounded-t transition-all duration-200 ease-out pointer-events-none z-20"
-          style={lineStyles}
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            height: '2px',
+            borderRadius: '2px 2px 0 0',
+            transition: 'all 200ms cubic-bezier(0.34, 1.56, 0.64, 1)',
+            zIndex: 20,
+            ...lineStyles
+          }}
         />
       )}
     </div>

package/src/components/tabs/TabPanel.tsx

@@ -10,7 +10,6 @@ interface TabPanelProps {
 export default function TabPanel({ children, id, persist = false }: TabPanelProps) {
   const { activeTabId } = useTabListContext();
   const isCurrent = activeTabId === id;
-  
   const [hasRenderedOnce, setHasRenderedOnce] = useState<boolean>(false);
 
   useEffect(() => {
@@ -22,21 +21,40 @@ export default function TabPanel({ children, id, persist = false }: TabPanelProp
   if (!hasRenderedOnce) return null;
   if (!persist && !isCurrent) return null;
 
+  // Render the core layout canvas frame absolutely with zero layout shifts
+  const panelInlineStyles: React.CSSProperties = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: '100%',
+    height: '100%',
+    /* 
+      ⚡ FIXED VISIBILITY OVERRIDE: 
+      Bypassed background color fills entirely to prevent canvas z-index clipping traps.
+    */
+    backgroundColor: 'transparent', 
+    transition: 'opacity 250ms ease-out, transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1)',
+    boxSizing: 'border-box',
+    
+    // Smooth opacity fading animation matrices
+    opacity: isCurrent ? 1 : 0,
+    transform: isCurrent ? 'scale(1)' : 'scale(0.995)',
+    zIndex: isCurrent ? 10 : 0,
+    pointerEvents: isCurrent ? 'auto' : 'none',
+    visibility: isCurrent ? 'visible' : 'hidden'
+  };
+
   return (
-    <div
-      className={`absolute inset-0 w-full h-full bg-vsc-bg transition-all duration-300 ease-in-out ${
-        isCurrent
-          ? 'opacity-100 scale-100 z-10 pointer-events-auto visible'
-          : 'opacity-0 scale-[0.99] z-0 pointer-events-none invisible delay-75'
-      }`}
-    >
-      {/* 
-        Inner layout wrapper applies a micro-blur and fine opacity mask cross-fade 
-        to ensure background elements never clip through transparent gaps during transitions.
-      */}
-      <div className={`w-full h-full transition-opacity duration-300 ${
-        isCurrent ? 'opacity-100' : 'opacity-0'
-      }`}>
+    <div style={panelInlineStyles}>
+      <div 
+        style={{ 
+          width: '100%', 
+          height: '100%', 
+          boxSizing: 'border-box'
+        }}
+      >
         {children}
       </div>
     </div>

package/src/components/tabs/TabPanelList.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, createContext, useContext } from 'react';
 import { useTab } from './useTab';
+import { searchTokens } from '../types';
 
 interface TabPanelListProps {
   children: React.ReactNode;
-  targetScopeName: string; // Ties this structural list panel block to a named useTab hook loop
-  defaultValue: string;    // Initial focus viewport tab on render
+  targetScopeName: string; // Ties this list panel block to a named useTab instance
+  defaultValue: string;    // Initial focused tab on mount
 }
 
 const TabListContext = createContext<{ activeTabId: string | undefined }>({ activeTabId: undefined });
@@ -14,16 +15,29 @@ export const useTabListContext = () => useContext(TabListContext);
 export default function TabPanelList({ children, targetScopeName, defaultValue }: TabPanelListProps) {
   const { activeTab, registerDefault } = useTab(targetScopeName);
 
-  // Initialize defaultValue into state if it's the first execution pass
+  // Initialize defaultValue into the global Zustand store on first render execution
   useEffect(() => {
     registerDefault(defaultValue);
   }, [defaultValue, registerDefault]);
 
   const activeTabId = activeTab || defaultValue;
 
+  // Root canvas frame styling object using pure inline layout logic
+  const listContainerInlineStyles: React.CSSProperties = {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    minHeight: 0,
+    flex: '1 1 0%',
+    overflow: 'hidden',
+    backgroundColor: searchTokens.colors.bgInput,
+    fontFamily: searchTokens.typography.sans,
+    boxSizing: 'border-box'
+  };
+
   return (
     <TabListContext.Provider value={{ activeTabId }}>
-      <div className="relative w-full h-full min-h-0 flex-1 overflow-hidden bg-vsc-bg">
+      <div style={listContainerInlineStyles}>
         {children}
       </div>
     </TabListContext.Provider>

package/src/components/types.ts

@@ -0,0 +1,22 @@
+
+export const searchTokens = {
+  colors: {
+    bgInput: 'var(--color-vsc-bg-input, #f6f8fa)',
+    border: 'var(--color-vsc-border, #e4e4e7)',
+    borderAccent: 'var(--color-vsc-accent, #007acc)',
+    borderAccentHover: 'var(--color-vsc-accent-hover, #0062a3)',
+    text: 'var(--color-vsc-text, #333333)',
+    muted: 'var(--color-vsc-muted, #6a737d)',
+    sidebarBg: 'var(--color-vsc-sidebar, #f3f3f3)',
+    hoverBg: 'var(--color-vsc-hover, #e8e8e8)',
+    accentBgLight: 'rgba(0, 122, 204, 0.1)'
+  },
+  typography: {
+    /* ⚡ Pulls Tailwind's native font configuration maps from your global layout shell App context */
+    sans: 'var(--font-sans, font-sans, ui-sans-serif, system-ui, sans-serif)',
+    mono: 'var(--font-mono, font-mono, ui-monospace, SFMono-Regular, monospace)'
+  },
+  transitions: {
+    smooth: 'all 200ms cubic-bezier(0.34, 1.56, 0.64, 1)'
+  }
+};

package/src/index.css

@@ -36,4 +36,12 @@
     --color-vsc-muted: #8b949e;
     --color-vsc-bg-input: #1f1f1f;
   }
+}
+
+.p-8{
+  padding:32px;
+}
+
+.voxel:bg-amber-500{
+  background-color:var(--color-vsc-accent);
 }

package/src/index.ts

@@ -1,4 +1,3 @@
-import './index.css';
 export * from './components/resizable';
 export * from './components/tabs';
 export * from './components/button';

package/vite.config.mts

@@ -8,12 +8,11 @@ import { fileURLToPath } from 'node:url';
 import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
 import { playwright } from '@vitest/browser-playwright';
 const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
-import tailwindcss from '@tailwindcss/vite';
+
 
 // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
   plugins: [
-    tailwindcss(),
     react(),
     // Auto-generates independent TypeScript type declaration files (.d.ts) matching paths
     dts({

package/dist/assets/voxel-ui.css

@@ -1,3 +0,0 @@
-/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
-@layer theme{:root,:host{--voxel-font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--voxel-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--voxel-default-font-family:var(--voxel-font-sans);--voxel-default-mono-font-family:var(--voxel-font-mono)}}@layer base{@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--voxel-default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--voxel-default-font-feature-settings,normal);font-variation-settings:var(--voxel-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--voxel-default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--voxel-default-mono-font-feature-settings,normal);font-variation-settings:var(--voxel-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}.dark{--color-vsc-bg:#1e1e1e;--color-vsc-sidebar:#252526;--color-vsc-border:#3c3c3c;--color-vsc-accent:#007acc;--color-vsc-accent-hover:#0062a3;--color-vsc-hover:#2a2d2e;--color-vsc-text:#ccc;--color-vsc-muted:#8b949e;--color-vsc-bg-input:#1f1f1f}}@layer components,utilities;
-/*$vite$:1*/

package/dist/chunks/tabs-MaVN00hJ.js

@@ -1,86 +0,0 @@
-import { t as e } from "./jsx-runtime-Boo2vksn.js";
-import { createContext as t, useContext as n, useEffect as r, useState as i } from "react";
-import { create as a } from "zustand";
-//#region src/components/tabs/useTab.ts
-var o = a((e) => ({
-	activeTabs: {},
-	setActiveTab: (t, n) => e((e) => ({ activeTabs: {
-		...e.activeTabs,
-		[t]: n
-	} })),
-	initializeTab: (t, n) => e((e) => e.activeTabs[t] ? {} : { activeTabs: {
-		...e.activeTabs,
-		[t]: n
-	} })
-}));
-function s(e) {
-	let t = o((t) => t.activeTabs[e]), n = o((e) => e.setActiveTab), r = o((e) => e.initializeTab);
-	return {
-		activeTab: t,
-		changeTab: (t) => n(e, t),
-		registerDefault: (t) => r(e, t)
-	};
-}
-//#endregion
-//#region src/components/tabs/TabPanelList.tsx
-var c = e(), l = t({ activeTabId: void 0 }), u = () => n(l);
-function d({ children: e, targetScopeName: t, defaultValue: n }) {
-	let { activeTab: i, registerDefault: a } = s(t);
-	r(() => {
-		a(n);
-	}, [n, a]);
-	let o = i || n;
-	return /* @__PURE__ */ (0, c.jsx)(l.Provider, {
-		value: { activeTabId: o },
-		children: /* @__PURE__ */ (0, c.jsx)("div", {
-			className: "relative w-full h-full min-h-0 flex-1 overflow-hidden bg-vsc-bg",
-			children: e
-		})
-	});
-}
-//#endregion
-//#region src/components/tabs/TabPanel.tsx
-function f({ children: e, id: t, persist: n = !1 }) {
-	let { activeTabId: a } = u(), o = a === t, [s, l] = i(!1);
-	return r(() => {
-		o && !s && l(!0);
-	}, [o, s]), !s || !n && !o ? null : /* @__PURE__ */ (0, c.jsx)("div", {
-		className: `absolute inset-0 w-full h-full bg-vsc-bg transition-all duration-300 ease-in-out ${o ? "opacity-100 scale-100 z-10 pointer-events-auto visible" : "opacity-0 scale-[0.99] z-0 pointer-events-none invisible delay-75"}`,
-		children: /* @__PURE__ */ (0, c.jsx)("div", {
-			className: `w-full h-full transition-opacity duration-300 ${o ? "opacity-100" : "opacity-0"}`,
-			children: e
-		})
-	});
-}
-//#endregion
-//#region src/components/tabs/TabButton.tsx
-function p({ id: e, scopeName: t, children: n, variant: r = "underline", startIcon: i, endIcon: a }) {
-	let { activeTab: o, changeTab: l } = s(t), u = o === e;
-	return /* @__PURE__ */ (0, c.jsxs)("button", {
-		"data-id": e,
-		onClick: () => l(e),
-		className: `flex items-center justify-center gap-1.5 focus:outline-none border-none outline-none z-10 transition-colors select-none h-full ${{
-			underline: `pb-2 pt-1 px-3 text-xs font-semibold cursor-pointer border-b-2 ${u ? "border-vsc-accent text-vsc-text" : "border-transparent text-vsc-muted hover:text-vsc-text"}`,
-			"sliding-underline": `py-2 px-4 text-xs font-semibold cursor-pointer transition-colors duration-200 ${u ? "text-vsc-text font-bold" : "text-vsc-muted hover:text-vsc-text"}`,
-			pill: `px-3.5 py-1.5 text-xs font-bold rounded-full cursor-pointer scale-100 ${u ? "bg-vsc-accent text-vsc-button-text shadow-sm" : "bg-vsc-hover/40 text-vsc-muted hover:bg-vsc-hover"}`,
-			vscode: `px-4 text-xs font-medium border-r border-vsc-border cursor-pointer ${u ? "bg-vsc-bg text-vsc-text border-t-2 border-t-vsc-accent -mt-[1px]" : "bg-vsc-sidebar text-vsc-muted hover:bg-vsc-hover/50"}`,
-			ghost: `px-3 py-1.5 text-xs font-semibold rounded cursor-pointer ${u ? "bg-vsc-hover text-vsc-text font-bold" : "text-vsc-muted hover:bg-vsc-hover/30"}`
-		}[r]}`,
-		children: [
-			i && /* @__PURE__ */ (0, c.jsx)("span", {
-				className: "shrink-0 opacity-80",
-				children: i
-			}),
-			/* @__PURE__ */ (0, c.jsx)("span", {
-				className: "truncate",
-				children: n
-			}),
-			a && /* @__PURE__ */ (0, c.jsx)("span", {
-				className: "shrink-0 opacity-70",
-				children: a
-			})
-		]
-	});
-}
-//#endregion
-export { s as i, f as n, d as r, p as t };