@nqlib/nqui 0.3.0 → 0.3.2

package/dist/types/data-grid.d.ts

@@ -0,0 +1,179 @@
+import type { Cell, RowData, TableMeta } from "@tanstack/react-table";
+export type Direction = "ltr" | "rtl";
+export type RowHeightValue = "short" | "medium" | "tall" | "extra-tall";
+export interface CellSelectOption {
+    label: string;
+    value: string;
+    icon?: React.FC<React.SVGProps<SVGSVGElement>>;
+    count?: number;
+}
+export type CellOpts = {
+    variant: "short-text";
+} | {
+    variant: "long-text";
+} | {
+    variant: "number";
+    min?: number;
+    max?: number;
+    step?: number;
+} | {
+    variant: "select";
+    options: CellSelectOption[];
+} | {
+    variant: "multi-select";
+    options: CellSelectOption[];
+} | {
+    variant: "checkbox";
+} | {
+    variant: "date";
+} | {
+    variant: "url";
+} | {
+    variant: "file";
+    maxFileSize?: number;
+    maxFiles?: number;
+    accept?: string;
+    multiple?: boolean;
+} | {
+    variant: "badge-list";
+} | {
+    variant: "avatar-stack";
+} | {
+    variant: "star-rating";
+    maxRating?: number;
+} | {
+    variant: "number-with-unit";
+    unit?: string;
+} | {
+    variant: "progress-bar";
+} | {
+    variant: "colored-pill";
+};
+export interface CellUpdate {
+    rowIndex: number;
+    columnId: string;
+    value: unknown;
+}
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        label?: string;
+        cell?: CellOpts;
+        headerClassName?: string;
+        cellClassName?: string;
+    }
+    interface TableMeta<TData extends RowData> {
+        dataGridRef?: React.RefObject<HTMLElement | null>;
+        cellMapRef?: React.RefObject<Map<string, HTMLDivElement>>;
+        focusedCell?: CellPosition | null;
+        editingCell?: CellPosition | null;
+        selectionState?: SelectionState;
+        searchOpen?: boolean;
+        getIsCellSelected?: (rowIndex: number, columnId: string) => boolean;
+        getIsSearchMatch?: (rowIndex: number, columnId: string) => boolean;
+        getIsActiveSearchMatch?: (rowIndex: number, columnId: string) => boolean;
+        getVisualRowIndex?: (rowId: string) => number | undefined;
+        rowHeight?: RowHeightValue;
+        onRowHeightChange?: (value: RowHeightValue) => void;
+        onRowSelect?: (rowIndex: number, checked: boolean, shiftKey: boolean) => void;
+        onDataUpdate?: (params: CellUpdate | Array<CellUpdate>) => void;
+        onRowsDelete?: (rowIndices: number[]) => void | Promise<void>;
+        onColumnClick?: (columnId: string) => void;
+        onCellClick?: (rowIndex: number, columnId: string, event?: React.MouseEvent) => void;
+        onCellDoubleClick?: (rowIndex: number, columnId: string) => void;
+        onCellMouseDown?: (rowIndex: number, columnId: string, event: React.MouseEvent) => void;
+        onCellMouseEnter?: (rowIndex: number, columnId: string) => void;
+        onCellMouseUp?: () => void;
+        onCellContextMenu?: (rowIndex: number, columnId: string, event: React.MouseEvent) => void;
+        onCellEditingStart?: (rowIndex: number, columnId: string) => void;
+        onCellEditingStop?: (opts?: {
+            direction?: NavigationDirection;
+            moveToNextRow?: boolean;
+        }) => void;
+        onCellsCopy?: () => void;
+        onCellsCut?: () => void;
+        onCellsPaste?: (expand?: boolean) => void;
+        onSelectionClear?: () => void;
+        onFilesUpload?: (params: {
+            files: File[];
+            rowIndex: number;
+            columnId: string;
+        }) => Promise<FileCellData[]>;
+        onFilesDelete?: (params: {
+            fileIds: string[];
+            rowIndex: number;
+            columnId: string;
+        }) => void | Promise<void>;
+        contextMenu?: ContextMenuState;
+        onContextMenuOpenChange?: (open: boolean) => void;
+        pasteDialog?: PasteDialogState;
+        onPasteDialogOpenChange?: (open: boolean) => void;
+        readOnly?: boolean;
+    }
+}
+export interface CellPosition {
+    rowIndex: number;
+    columnId: string;
+}
+export interface CellRange {
+    start: CellPosition;
+    end: CellPosition;
+}
+export interface SelectionState {
+    selectedCells: Set<string>;
+    selectionRange: CellRange | null;
+    isSelecting: boolean;
+}
+export interface ContextMenuState {
+    open: boolean;
+    x: number;
+    y: number;
+}
+export interface PasteDialogState {
+    open: boolean;
+    rowsNeeded: number;
+    clipboardText: string;
+}
+export type NavigationDirection = "up" | "down" | "left" | "right" | "home" | "end" | "ctrl+up" | "ctrl+down" | "ctrl+home" | "ctrl+end" | "pageup" | "pagedown" | "pageleft" | "pageright";
+export interface SearchState {
+    searchMatches: CellPosition[];
+    matchIndex: number;
+    searchOpen: boolean;
+    onSearchOpenChange: (open: boolean) => void;
+    searchQuery: string;
+    onSearchQueryChange: (query: string) => void;
+    onSearch: (query: string) => void;
+    onNavigateToNextMatch: () => void;
+    onNavigateToPrevMatch: () => void;
+}
+export interface DataGridCellProps<TData> {
+    cell: Cell<TData, unknown>;
+    tableMeta: TableMeta<TData>;
+    rowIndex: number;
+    columnId: string;
+    rowHeight: RowHeightValue;
+    isEditing: boolean;
+    isFocused: boolean;
+    isSelected: boolean;
+    isSearchMatch: boolean;
+    isActiveSearchMatch: boolean;
+    readOnly: boolean;
+}
+export interface FileCellData {
+    id: string;
+    name: string;
+    size: number;
+    type: string;
+    url?: string;
+}
+export type TextFilterOperator = "contains" | "notContains" | "equals" | "notEquals" | "startsWith" | "endsWith" | "isEmpty" | "isNotEmpty";
+export type NumberFilterOperator = "equals" | "notEquals" | "lessThan" | "lessThanOrEqual" | "greaterThan" | "greaterThanOrEqual" | "isBetween" | "isEmpty" | "isNotEmpty";
+export type DateFilterOperator = "equals" | "notEquals" | "before" | "after" | "onOrBefore" | "onOrAfter" | "isBetween" | "isEmpty" | "isNotEmpty";
+export type SelectFilterOperator = "is" | "isNot" | "isAnyOf" | "isNoneOf" | "isEmpty" | "isNotEmpty";
+export type BooleanFilterOperator = "isTrue" | "isFalse";
+export type FilterOperator = TextFilterOperator | NumberFilterOperator | DateFilterOperator | SelectFilterOperator | BooleanFilterOperator;
+export interface FilterValue {
+    operator: FilterOperator;
+    value?: string | number | string[];
+    endValue?: string | number;
+}
+//# sourceMappingURL=data-grid.d.ts.map

package/dist/types/data-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid.d.ts","sourceRoot":"","sources":["../../src/types/data-grid.ts"],"names":[],"mappings":"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"}

package/dist/utils/chart-colors.d.ts

@@ -0,0 +1,62 @@
+export type ColorUtility = "bg" | "stroke" | "fill" | "text";
+export declare const chartColors: {
+    readonly blue: {
+        readonly bg: "bg-blue-500";
+        readonly stroke: "stroke-blue-500";
+        readonly fill: "fill-blue-500";
+        readonly text: "text-blue-500";
+    };
+    readonly emerald: {
+        readonly bg: "bg-emerald-500";
+        readonly stroke: "stroke-emerald-500";
+        readonly fill: "fill-emerald-500";
+        readonly text: "text-emerald-500";
+    };
+    readonly violet: {
+        readonly bg: "bg-violet-500";
+        readonly stroke: "stroke-violet-500";
+        readonly fill: "fill-violet-500";
+        readonly text: "text-violet-500";
+    };
+    readonly amber: {
+        readonly bg: "bg-amber-500";
+        readonly stroke: "stroke-amber-500";
+        readonly fill: "fill-amber-500";
+        readonly text: "text-amber-500";
+    };
+    readonly gray: {
+        readonly bg: "bg-gray-500";
+        readonly stroke: "stroke-gray-500";
+        readonly fill: "fill-gray-500";
+        readonly text: "text-gray-500";
+    };
+    readonly cyan: {
+        readonly bg: "bg-cyan-500";
+        readonly stroke: "stroke-cyan-500";
+        readonly fill: "fill-cyan-500";
+        readonly text: "text-cyan-500";
+    };
+    readonly pink: {
+        readonly bg: "bg-pink-500";
+        readonly stroke: "stroke-pink-500";
+        readonly fill: "fill-pink-500";
+        readonly text: "text-pink-500";
+    };
+    readonly lime: {
+        readonly bg: "bg-lime-500";
+        readonly stroke: "stroke-lime-500";
+        readonly fill: "fill-lime-500";
+        readonly text: "text-lime-500";
+    };
+    readonly fuchsia: {
+        readonly bg: "bg-fuchsia-500";
+        readonly stroke: "stroke-fuchsia-500";
+        readonly fill: "fill-fuchsia-500";
+        readonly text: "text-fuchsia-500";
+    };
+};
+export type AvailableChartColorsKeys = keyof typeof chartColors;
+export declare const AvailableChartColors: AvailableChartColorsKeys[];
+export declare const constructCategoryColors: (categories: string[], colors: AvailableChartColorsKeys[]) => Map<string, AvailableChartColorsKeys>;
+export declare const getColorClassName: (color: AvailableChartColorsKeys, type: ColorUtility) => string;
+//# sourceMappingURL=chart-colors.d.ts.map

package/dist/utils/chart-colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-colors.d.ts","sourceRoot":"","sources":["../../src/utils/chart-colors.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AAE5D,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DvB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG,MAAM,OAAO,WAAW,CAAA;AAE/D,eAAO,MAAM,oBAAoB,EAAE,wBAAwB,EAEvB,CAAA;AAEpC,eAAO,MAAM,uBAAuB,GAClC,YAAY,MAAM,EAAE,EACpB,QAAQ,wBAAwB,EAAE,KACjC,GAAG,CAAC,MAAM,EAAE,wBAAwB,CAMtC,CAAA;AAED,eAAO,MAAM,iBAAiB,GAC5B,OAAO,wBAAwB,EAC/B,MAAM,YAAY,KACjB,MAQF,CAAA"}

package/dist/utils/chart-highlight.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Chart Highlight Utilities
+ * Shared utilities for click-to-highlight functionality across all chart types
+ */
+/**
+ * Deep equality check for objects
+ * Used to compare chart data points for highlighting
+ */
+export declare function deepEqual<T>(obj1: T, obj2: T): boolean;
+/**
+ * Calculate opacity for chart elements based on highlight state
+ * @param isActive - Whether this element is the active/clicked one
+ * @param isInactive - Whether another element is active (making this one inactive)
+ * @param isLegendFiltered - Whether this element is filtered by legend
+ * @param baseOpacity - Base opacity when not highlighted (default: 1.0)
+ * @param inactiveOpacity - Opacity when another element is active (default: 0.15)
+ * @param filteredOpacity - Opacity when filtered by legend (default: 0.3)
+ */
+export declare function calculateHighlightOpacity(isActive: boolean, isInactive: boolean, isLegendFiltered: boolean, baseOpacity?: number, inactiveOpacity?: number, filteredOpacity?: number): number;
+/**
+ * Check if a chart data point matches the active highlight
+ * @param activeItem - The currently active/clicked item
+ * @param currentItem - The current item to check
+ * @param valueKey - Optional key to compare values (for charts with value properties)
+ */
+export declare function isActiveItem(activeItem: any | undefined, currentItem: any, valueKey?: string): boolean;
+/**
+ * Check if an item should be inactive (dimmed) when another is active
+ * @param activeItem - The currently active item
+ * @param currentItem - The current item to check
+ * @param valueKey - Optional key to compare values
+ */
+export declare function isInactiveItem(activeItem: any | undefined, currentItem: any, valueKey?: string): boolean;
+//# sourceMappingURL=chart-highlight.d.ts.map

package/dist/utils/chart-highlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-highlight.d.ts","sourceRoot":"","sources":["../../src/utils/chart-highlight.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;GAGG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,OAAO,CAsBtD;AAED;;;;;;;;GAQG;AACH,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,OAAO,EACjB,UAAU,EAAE,OAAO,EACnB,gBAAgB,EAAE,OAAO,EACzB,WAAW,GAAE,MAAY,EACzB,eAAe,GAAE,MAAa,EAC9B,eAAe,GAAE,MAAY,GAC5B,MAAM,CAWR;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,UAAU,EAAE,GAAG,GAAG,SAAS,EAC3B,WAAW,EAAE,GAAG,EAChB,QAAQ,CAAC,EAAE,MAAM,GAChB,OAAO,CAaT;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,UAAU,EAAE,GAAG,GAAG,SAAS,EAC3B,WAAW,EAAE,GAAG,EAChB,QAAQ,CAAC,EAAE,MAAM,GAChB,OAAO,CAGT"}

package/dist/utils/chart-utils.d.ts

@@ -0,0 +1,2 @@
+export declare function hasOnlyOneValueForKey(array: any[], keyToCheck: string): boolean;
+//# sourceMappingURL=chart-utils.d.ts.map

package/dist/utils/chart-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-utils.d.ts","sourceRoot":"","sources":["../../src/utils/chart-utils.ts"],"names":[],"mappings":"AAIA,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,GAAG,EAAE,EACZ,UAAU,EAAE,MAAM,GACjB,OAAO,CAaT"}

package/dist/utils/focus-ring.d.ts

@@ -0,0 +1,2 @@
+export declare const focusRing: string[];
+//# sourceMappingURL=focus-ring.d.ts.map

package/dist/utils/focus-ring.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-ring.d.ts","sourceRoot":"","sources":["../../src/utils/focus-ring.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,UAKrB,CAAA"}

package/dist/utils/get-y-axis-domain.d.ts

@@ -0,0 +1,2 @@
+export declare const getYAxisDomain: (autoMinValue: boolean, minValue: number | undefined, maxValue: number | undefined) => (string | number)[];
+//# sourceMappingURL=get-y-axis-domain.d.ts.map

package/dist/utils/get-y-axis-domain.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-y-axis-domain.d.ts","sourceRoot":"","sources":["../../src/utils/get-y-axis-domain.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,GACzB,cAAc,OAAO,EACrB,UAAU,MAAM,GAAG,SAAS,EAC5B,UAAU,MAAM,GAAG,SAAS,wBAK7B,CAAA"}

package/dist/utils/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Chart Utilities Index
+ * Central export point for all chart-related utilities
+ */
+export * from "./chart-colors";
+export * from "./chart-utils";
+export * from "./get-y-axis-domain";
+export * from "./focus-ring";
+export * from "./chart-highlight";
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nqlib/nqui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "A React component library with enhanced UI components and developer tools",
   "type": "module",
   "main": "./dist/nqui.cjs.js",
@@ -55,6 +55,7 @@
     "build:lib": "vite build --mode library && npm run build:types && npm run build:styles && npm run copy:css",
     "build:types": "tsc -p tsconfig.lib.json",
     "build:styles": "node scripts/build-styles.js",
+    "verify:build": "node scripts/verify-build.js",
     "copy:css": "cp src/components/debug/debug.css dist/nqui.css",
     "build:app": "tsc -b && vite build",
     "build:all": "npm run build:lib && npm run build:app",
@@ -80,6 +81,10 @@
   "dependencies": {
     "@base-ui/react": "^1.0.0",
     "@codesandbox/sandpack-react": "^2.20.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/inter": "^5.2.8",
     "@hugeicons/core-free-icons": "^3.1.1",
     "@hugeicons/react": "^1.1.4",
@@ -87,9 +92,12 @@
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-direction": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
@@ -97,8 +105,12 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@remixicon/react": "^4.8.0",
     "@shikijs/transformers": "^3.21.0",
     "@tailwindcss/vite": "^4.1.17",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.18",
+    "@uidotdev/usehooks": "^2.4.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -106,6 +118,8 @@
     "embla-carousel-react": "^8.6.0",
     "html2canvas-pro": "^1.6.3",
     "input-otp": "^1.4.2",
+    "jotai": "^2.17.0",
+    "lodash.throttle": "^4.1.1",
     "lucide-react": "^0.562.0",
     "minimist": "^1.2.8",
     "motion": "^12.24.10",
@@ -124,6 +138,7 @@
     "shiki": "^3.21.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.1.17",
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2"
@@ -137,6 +152,7 @@
     "@storybook/react-vite": "^10.1.11",
     "@storybook/test-runner": "^0.24.2",
     "@storybook/testing-library": "^0.2.2",
+    "@types/lodash.throttle": "^4.1.9",
     "@types/node": "^24.10.1",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",

package/scripts/build-styles.js

@@ -18,6 +18,7 @@ const __dirname = dirname(__filename);
 const projectRoot = resolve(__dirname, '..');
 const indexCssPath = join(projectRoot, 'src', 'index.css');
 const colorsCssPath = join(projectRoot, 'src', 'styles', 'colors.css');
+const elevationCssPath = join(projectRoot, 'src', 'styles', 'elevation.css');
 const outputPath = join(projectRoot, 'dist', 'styles.css');
 
 function extractStandaloneCSS() {
@@ -31,6 +32,25 @@ function extractStandaloneCSS() {
 
   let indexCss = readFileSync(indexCssPath, 'utf-8');
   let colorsCss = readFileSync(colorsCssPath, 'utf-8');
+  let elevationCss = '';
+
+  // Read elevation.css if it exists
+  if (existsSync(elevationCssPath)) {
+    elevationCss = readFileSync(elevationCssPath, 'utf-8');
+  }
+
+  // Extract :root block from elevation.css (it's wrapped in @layer base)
+  let elevationRootContent = '';
+  if (elevationCss) {
+    const elevationRootMatch = elevationCss.match(/@layer base\s*\{\s*:root\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}\s*\}/s);
+    if (elevationRootMatch) {
+      elevationRootContent = elevationRootMatch[1].trim();
+    } else {
+      // Fallback: try to extract without @layer base wrapper
+      const rootMatch = elevationCss.match(/:root\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
+      if (rootMatch) elevationRootContent = rootMatch[1].trim();
+    }
+  }
 
   // Extract :root and .dark blocks from colors.css (they're wrapped in @layer base)
   const colorsRootMatch = colorsCss.match(/@layer base\s*\{\s*:root\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}\s*\.dark\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}\s*\}/s);
@@ -49,15 +69,53 @@ function extractStandaloneCSS() {
     if (darkMatch) colorsDarkContent = darkMatch[1].trim();
   }
 
+  // Extract @source inline() directives BEFORE removing other directives
+  // These need to be preserved in the final output for zero-config setup
+  // Match pattern: /* comment */ @source inline( ... ); (multiline)
+  // Tailwind v4 requires: @source inline("class1 class2 class3");
+  const sourceInlineRegex = /\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\/\s*@source\s+inline\([\s\S]*?\)\s*;/g;
+  const sourceInlineMatches = indexCss.match(sourceInlineRegex) || [];
+  
+  // Convert multiline format to single-line format required by Tailwind v4
+  // From: @source inline("class1", "class2", "class3");
+  // To:   @source inline("class1 class2 class3");
+  const sourceInlineDirectives = sourceInlineMatches.map(directive => {
+    // Extract comment
+    const commentMatch = directive.match(/(\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\/)/);
+    const comment = commentMatch ? commentMatch[1] : '';
+    
+    // Extract all quoted class names
+    const classRegex = /"([^"]+)"/g;
+    const classes = [];
+    let match;
+    while ((match = classRegex.exec(directive)) !== null) {
+      classes.push(match[1]);
+    }
+    
+    // Format as single-line: @source inline("class1 class2 class3");
+    if (classes.length > 0) {
+      const formatted = `@source inline("${classes.join(' ')}");`;
+      return comment ? `${comment}\n${formatted}` : formatted;
+    }
+    
+    return directive; // Fallback if parsing fails
+  }).join('\n\n');
+
   // Remove imports that require build tools (users should handle these in their own setup)
+  // Remove @source directives (but NOT @source inline() - they're already extracted above)
   indexCss = indexCss
     .replace(/@import\s+["']tailwindcss["'];?\s*\n/g, '')
     .replace(/@import\s+["']tw-animate-css["'];?\s*\n/g, '')
     .replace(/@import\s+["']shadcn\/tailwind\.css["'];?\s*\n/g, '')
     .replace(/@import\s+["']@fontsource-variable\/inter["'];?\s*\n/g, '')
     .replace(/@import\s+["']\.\/styles\/colors\.css["'];?\s*\n/g, '')
+    .replace(/@import\s+["']\.\/styles\/elevation\.css["'];?\s*\n/g, '')
     .replace(/\/\*\s*Import enhanced color system\s*\*\//g, '')
-    .replace(/@source\s+[^;]+;?\s*\n/g, '')
+    .replace(/\/\*\s*Import elevation system\s*\*\//g, '')
+    // Remove @source inline() directives (already extracted above) - must match multiline
+    .replace(/\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\/\s*@source\s+inline\([\s\S]*?\)\s*;/g, '')
+    // Remove other @source directives (non-inline ones)
+    .replace(/@source\s+(?!inline\()[^;]+;?\s*\n/g, '')
     .replace(/@custom-variant\s+[^;]+;?\s*\n/g, '');
 
   // Extract :root and .dark blocks from index.css
@@ -70,10 +128,21 @@ function extractStandaloneCSS() {
   if (indexRootMatch) indexRootContent = indexRootMatch[1].trim();
   if (indexDarkMatch) indexDarkContent = indexDarkMatch[1].trim();
 
-  // Merge :root blocks (colors.css first, then index.css)
-  const mergedRootContent = colorsRootContent
-    ? colorsRootContent + '\n\n    /* Additional variables from index.css */\n    ' + indexRootContent
-    : indexRootContent;
+  // Merge :root blocks (elevation.css first, then colors.css, then index.css)
+  let mergedRootContent = '';
+  if (elevationRootContent) {
+    mergedRootContent = elevationRootContent;
+  }
+  if (colorsRootContent) {
+    mergedRootContent = mergedRootContent
+      ? mergedRootContent + '\n\n    /* Color system variables from colors.css */\n    ' + colorsRootContent
+      : colorsRootContent;
+  }
+  if (indexRootContent) {
+    mergedRootContent = mergedRootContent
+      ? mergedRootContent + '\n\n    /* Additional variables from index.css */\n    ' + indexRootContent
+      : indexRootContent;
+  }
 
   // Merge .dark blocks (colors.css first, then index.css)
   const mergedDarkContent = colorsDarkContent
@@ -163,6 +232,7 @@ function extractStandaloneCSS() {
  * - Light and dark mode support
  * - Base layer styles
  * - Utility animations
+ * - @source inline() directives for zero-config Tailwind utility generation
  *
  * Generated by: npm run build:lib
  * Do not edit manually
@@ -170,7 +240,16 @@ function extractStandaloneCSS() {
 
 `;
 
-  return header + combinedCss;
+  // Prepend @source inline() directives to the final CSS
+  // These must come before :root and .dark blocks for Tailwind to process them
+  const sourceInlineSection = sourceInlineDirectives
+    ? `/* Tailwind utility declarations - zero-config setup\n` +
+      ` * These @source inline() directives ensure all nqui utilities are generated\n` +
+      ` * without requiring consumers to add @source directives in their CSS.\n` +
+      ` */\n\n${sourceInlineDirectives}\n\n`
+    : '';
+
+  return header + sourceInlineSection + combinedCss;
 }
 
 function main() {