@qwickapps/cms 0.2.0

package/dist/providers/PayloadDataProvider.js

@@ -0,0 +1,222 @@
+// @ts-nocheck - @qwickapps/schema is a peer dependency resolved at runtime
+/**
+ * Payload CMS Data Provider Implementation
+ *
+ * Integrates Payload CMS with QwickApps React Framework data binding system.
+ * Fetches content from Payload REST API and transforms it to match framework schemas.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+/**
+ * Payload CMS-based data provider for QwickApps Framework
+ *
+ * Fetches data from Payload REST API and provides it to framework components
+ * via the standard IDataProvider interface.
+ *
+ * Usage:
+ * ```tsx
+ * const payloadProvider = new PayloadDataProvider({
+ *   apiUrl: 'http://localhost:3000/api'
+ * });
+ *
+ * <DataProvider dataSource={{ dataProvider: payloadProvider }}>
+ *   <HeroBlock dataSource="hero-blocks" />
+ * </DataProvider>
+ * ```
+ */
+export class PayloadDataProvider {
+    apiUrl;
+    debug;
+    constructor(config = {}) {
+        this.apiUrl = config.apiUrl || '/api';
+        this.debug = config.debug || false;
+    }
+    /**
+     * Get single data item by slug
+     *
+     * For Payload, slug can be:
+     * - Collection name (e.g., "hero-blocks") - returns first item
+     * - Collection with ID (e.g., "hero-blocks/1") - returns specific item
+     * - Nested path (e.g., "pages.home.hero") - navigates nested structure
+     */
+    async get(slug) {
+        try {
+            if (this.debug) {
+                console.log('[PayloadDataProvider] get:', slug);
+            }
+            // Parse slug to determine collection and optional ID
+            const { collection, id, path } = this.parseSlug(slug);
+            // Build API URL
+            let url = `${this.apiUrl}/${collection}`;
+            if (id) {
+                // Fetch specific item by ID
+                url = `${url}/${id}`;
+                const response = await fetch(url, { cache: 'no-store' });
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch ${url}: ${response.statusText}`);
+                }
+                const data = await response.json();
+                return {
+                    data: this.transformPayloadData(data),
+                    cached: false,
+                    meta: {
+                        schema: collection,
+                        version: '1.0.0',
+                        slug
+                    }
+                };
+            }
+            else {
+                // Fetch first item from collection
+                url = `${url}?limit=1`;
+                const response = await fetch(url, { cache: 'no-store' });
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch ${url}: ${response.statusText}`);
+                }
+                const result = await response.json();
+                const firstItem = result.docs?.[0];
+                if (!firstItem) {
+                    return { data: undefined };
+                }
+                // If path specified, navigate into the data
+                const data = path ? this.navigatePath(firstItem, path) : firstItem;
+                return {
+                    data: this.transformPayloadData(data),
+                    cached: false,
+                    meta: {
+                        schema: collection,
+                        version: '1.0.0',
+                        slug
+                    }
+                };
+            }
+        }
+        catch (error) {
+            console.error('[PayloadDataProvider] Error in get:', error);
+            return {
+                data: undefined,
+                error: error instanceof Error ? error : new Error(String(error))
+            };
+        }
+    }
+    /**
+     * Select multiple data items with query options
+     *
+     * Maps framework SelectOptions to Payload API query parameters
+     */
+    async select(schema, options = {}) {
+        try {
+            if (this.debug) {
+                console.log('[PayloadDataProvider] select:', schema, options);
+            }
+            // Build query parameters
+            const params = new URLSearchParams();
+            if (options.limit) {
+                params.append('limit', String(options.limit));
+            }
+            if (options.offset) {
+                params.append('page', String(Math.floor(options.offset / (options.limit || 10)) + 1));
+            }
+            if (options.orderBy && options.sort) {
+                const sortPrefix = options.sort === 'desc' ? '-' : '';
+                params.append('sort', `${sortPrefix}${options.orderBy}`);
+            }
+            // Apply filters as where clause
+            if (options.filters) {
+                params.append('where', JSON.stringify(options.filters));
+            }
+            // Build API URL
+            const url = `${this.apiUrl}/${schema}?${params.toString()}`;
+            const response = await fetch(url, { cache: 'no-store' });
+            if (!response.ok) {
+                throw new Error(`Failed to fetch ${url}: ${response.statusText}`);
+            }
+            const result = await response.json();
+            const items = result.docs || [];
+            return {
+                data: items.map((item) => this.transformPayloadData(item)),
+                cached: false,
+                meta: {
+                    schema,
+                    version: '1.0.0',
+                    total: result.totalDocs || items.length,
+                    offset: options.offset || 0,
+                    limit: options.limit || items.length
+                }
+            };
+        }
+        catch (error) {
+            console.error('[PayloadDataProvider] Error in select:', error);
+            return {
+                data: [],
+                error: error instanceof Error ? error : new Error(String(error))
+            };
+        }
+    }
+    /**
+     * Parse slug into collection, ID, and nested path
+     */
+    parseSlug(slug) {
+        // Remove leading slash if present
+        const cleanSlug = slug.replace(/^\//, '');
+        // Check for dot notation (e.g., "pages.home.hero")
+        if (cleanSlug.includes('.')) {
+            const parts = cleanSlug.split('.');
+            return {
+                collection: parts[0],
+                path: parts.slice(1).join('.')
+            };
+        }
+        // Check for slash notation (e.g., "hero-blocks/1")
+        if (cleanSlug.includes('/')) {
+            const [collection, id] = cleanSlug.split('/');
+            return { collection, id };
+        }
+        // Simple collection name
+        return { collection: cleanSlug };
+    }
+    /**
+     * Navigate nested path in object
+     */
+    navigatePath(obj, path) {
+        const parts = path.split('.');
+        let current = obj;
+        for (const part of parts) {
+            if (current && typeof current === 'object') {
+                current = current[part];
+            }
+            else {
+                return undefined;
+            }
+        }
+        return current;
+    }
+    /**
+     * Transform Payload data to match framework expectations
+     *
+     * Payload returns data with metadata (id, createdAt, updatedAt, etc.)
+     * This method can transform it to match framework component props
+     */
+    transformPayloadData(data) {
+        if (!data)
+            return data;
+        // For HeroBlock, map Payload fields to framework props
+        if (data.title && data.backgroundGradient) {
+            return {
+                ...data,
+                // Map Payload's 'height' to framework's 'blockHeight'
+                blockHeight: data.height || 'medium',
+                // Map Payload's 'ctaButtons' to framework's 'actions'
+                actions: data.ctaButtons?.map((btn) => ({
+                    label: btn.text,
+                    href: btn.link,
+                    variant: btn.variant === 'contained' ? 'primary' : 'outlined',
+                    buttonSize: 'large'
+                })) || []
+            };
+        }
+        // Return data as-is for other collections
+        return data;
+    }
+}
+//# sourceMappingURL=PayloadDataProvider.js.map

package/dist/providers/PayloadDataProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PayloadDataProvider.js","sourceRoot":"","sources":["../../src/providers/PayloadDataProvider.ts"],"names":[],"mappings":"AAAA,2EAA2E;AAC3E;;;;;;;GAOG;AAeH;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,OAAO,mBAAmB;IACtB,MAAM,CAAS;IACf,KAAK,CAAU;IAEvB,YAAY,SAAoC,EAAE;QAChD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC;QACtC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC;IACrC,CAAC;IAED;;;;;;;OAOG;IACH,KAAK,CAAC,GAAG,CAAkB,IAAY;QACrC,IAAI,CAAC;YACH,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,GAAG,CAAC,4BAA4B,EAAE,IAAI,CAAC,CAAC;YAClD,CAAC;YAED,qDAAqD;YACrD,MAAM,EAAE,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YAEtD,gBAAgB;YAChB,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,UAAU,EAAE,CAAC;YAEzC,IAAI,EAAE,EAAE,CAAC;gBACP,4BAA4B;gBAC5B,GAAG,GAAG,GAAG,GAAG,IAAI,EAAE,EAAE,CAAC;gBACrB,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;gBAEzD,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;oBACjB,MAAM,IAAI,KAAK,CAAC,mBAAmB,GAAG,KAAK,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;gBACpE,CAAC;gBAED,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;gBAEnC,OAAO;oBACL,IAAI,EAAE,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAM;oBAC1C,MAAM,EAAE,KAAK;oBACb,IAAI,EAAE;wBACJ,MAAM,EAAE,UAAU;wBAClB,OAAO,EAAE,OAAO;wBAChB,IAAI;qBACL;iBACF,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,mCAAmC;gBACnC,GAAG,GAAG,GAAG,GAAG,UAAU,CAAC;gBACvB,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;gBAEzD,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;oBACjB,MAAM,IAAI,KAAK,CAAC,mBAAmB,GAAG,KAAK,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;gBACpE,CAAC;gBAED,MAAM,MAAM,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;gBACrC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;gBAEnC,IAAI,CAAC,SAAS,EAAE,CAAC;oBACf,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gBAC7B,CAAC;gBAED,4CAA4C;gBAC5C,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;gBAEnE,OAAO;oBACL,IAAI,EAAE,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAM;oBAC1C,MAAM,EAAE,KAAK;oBACb,IAAI,EAAE;wBACJ,MAAM,EAAE,UAAU;wBAClB,OAAO,EAAE,OAAO;wBAChB,IAAI;qBACL;iBACF,CAAC;YACJ,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,qCAAqC,EAAE,KAAK,CAAC,CAAC;YAC5D,OAAO;gBACL,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;aACjE,CAAC;QACJ,CAAC;IACH,CAAC;IAED;;;;OAIG;IACH,KAAK,CAAC,MAAM,CACV,MAAc,EACd,UAAyB,EAAE;QAE3B,IAAI,CAAC;YACH,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,GAAG,CAAC,+BAA+B,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;YAChE,CAAC;YAED,yBAAyB;YACzB,MAAM,MAAM,GAAG,IAAI,eAAe,EAAE,CAAC;YAErC,IAAI,OAAO,CAAC,KAAK,EAAE,CAAC;gBAClB,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;YAChD,CAAC;YAED,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;gBACnB,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YACxF,CAAC;YAED,IAAI,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,IAAI,EAAE,CAAC;gBACpC,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;gBACtD,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,UAAU,GAAG,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC;YAC3D,CAAC;YAED,gCAAgC;YAChC,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;gBACpB,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;YAC1D,CAAC;YAED,gBAAgB;YAChB,MAAM,GAAG,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,MAAM,IAAI,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAC;YAC5D,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;YAEzD,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;gBACjB,MAAM,IAAI,KAAK,CAAC,mBAAmB,GAAG,KAAK,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;YACpE,CAAC;YAED,MAAM,MAAM,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;YACrC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC;YAEhC,OAAO;gBACL,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAS,EAAE,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAQ;gBACtE,MAAM,EAAE,KAAK;gBACb,IAAI,EAAE;oBACJ,MAAM;oBACN,OAAO,EAAE,OAAO;oBAChB,KAAK,EAAE,MAAM,CAAC,SAAS,IAAI,KAAK,CAAC,MAAM;oBACvC,MAAM,EAAE,OAAO,CAAC,MAAM,IAAI,CAAC;oBAC3B,KAAK,EAAE,OAAO,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM;iBACrC;aACF,CAAC;QACJ,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,wCAAwC,EAAE,KAAK,CAAC,CAAC;YAC/D,OAAO;gBACL,IAAI,EAAE,EAAE;gBACR,KAAK,EAAE,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;aACjE,CAAC;QACJ,CAAC;IACH,CAAC;IAED;;OAEG;IACK,SAAS,CAAC,IAAY;QAC5B,kCAAkC;QAClC,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAE1C,mDAAmD;QACnD,IAAI,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC5B,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YACnC,OAAO;gBACL,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;gBACpB,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;aAC/B,CAAC;QACJ,CAAC;QAED,mDAAmD;QACnD,IAAI,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC5B,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAC9C,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC;QAC5B,CAAC;QAED,yBAAyB;QACzB,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC;IACnC,CAAC;IAED;;OAEG;IACK,YAAY,CAAC,GAAQ,EAAE,IAAY;QACzC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC9B,IAAI,OAAO,GAAG,GAAG,CAAC;QAElB,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YACzB,IAAI,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;gBAC3C,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC;iBAAM,CAAC;gBACN,OAAO,SAAS,CAAC;YACnB,CAAC;QACH,CAAC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;IAED;;;;;OAKG;IACK,oBAAoB,CAAC,IAAS;QACpC,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC;QAEvB,uDAAuD;QACvD,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC1C,OAAO;gBACL,GAAG,IAAI;gBACP,sDAAsD;gBACtD,WAAW,EAAE,IAAI,CAAC,MAAM,IAAI,QAAQ;gBACpC,sDAAsD;gBACtD,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,GAAQ,EAAE,EAAE,CAAC,CAAC;oBAC3C,KAAK,EAAE,GAAG,CAAC,IAAI;oBACf,IAAI,EAAE,GAAG,CAAC,IAAI;oBACd,OAAO,EAAE,GAAG,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU;oBAC7D,UAAU,EAAE,OAAO;iBACpB,CAAC,CAAC,IAAI,EAAE;aACV,CAAC;QACJ,CAAC;QAED,0CAA0C;QAC1C,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}

package/dist/providers/index.d.ts

@@ -0,0 +1,2 @@
+export { PayloadDataProvider } from './PayloadDataProvider.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/providers/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/providers/index.js

@@ -0,0 +1,3 @@
+// QwickApps CMS - Providers
+export { PayloadDataProvider } from './PayloadDataProvider.js';
+//# sourceMappingURL=index.js.map

package/dist/providers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/providers/index.ts"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/styles/admin-theme.css

@@ -0,0 +1,352 @@
+/**
+ * QwickPress Admin Theme - QwickApps Branding
+ *
+ * Customizes Payload CMS colors to match QwickApps brand (Blue #007bff)
+ * Automatically supports both light and dark modes via Payload's color system
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+:root {
+  /* ===================================
+   * QwickApps Brand Blue (#007bff = rgb(0, 123, 255))
+   * Override the success color (primary action color in Payload)
+   * =================================== */
+
+  /* Base blue color scale - QwickApps Blue */
+  --color-success-50: rgb(230, 242, 255);
+  --color-success-100: rgb(204, 229, 255);
+  --color-success-150: rgb(179, 216, 255);
+  --color-success-200: rgb(153, 204, 255);
+  --color-success-250: rgb(128, 191, 255);
+  --color-success-300: rgb(102, 178, 255);
+  --color-success-350: rgb(77, 165, 255);
+  --color-success-400: rgb(51, 153, 255);
+  --color-success-450: rgb(26, 140, 255);
+  --color-success-500: rgb(0, 123, 255);      /* #007bff - QwickApps Primary */
+  --color-success-550: rgb(0, 111, 230);
+  --color-success-600: rgb(0, 98, 204);
+  --color-success-650: rgb(0, 86, 179);
+  --color-success-700: rgb(0, 74, 153);
+  --color-success-750: rgb(0, 62, 128);
+  --color-success-800: rgb(0, 49, 102);
+  --color-success-850: rgb(0, 37, 77);
+  --color-success-900: rgb(0, 25, 51);
+  --color-success-950: rgb(0, 12, 26);
+
+  /* Also make the blue color scale match */
+  --color-blue-50: var(--color-success-50);
+  --color-blue-100: var(--color-success-100);
+  --color-blue-150: var(--color-success-150);
+  --color-blue-200: var(--color-success-200);
+  --color-blue-250: var(--color-success-250);
+  --color-blue-300: var(--color-success-300);
+  --color-blue-350: var(--color-success-350);
+  --color-blue-400: var(--color-success-400);
+  --color-blue-450: var(--color-success-450);
+  --color-blue-500: var(--color-success-500);
+  --color-blue-550: var(--color-success-550);
+  --color-blue-600: var(--color-success-600);
+  --color-blue-650: var(--color-success-650);
+  --color-blue-700: var(--color-success-700);
+  --color-blue-750: var(--color-success-750);
+  --color-blue-800: var(--color-success-800);
+  --color-blue-850: var(--color-success-850);
+  --color-blue-900: var(--color-success-900);
+  --color-blue-950: var(--color-success-950);
+}
+
+/* Dark mode is automatically handled by Payload's color mapping system */
+/* The html[data-theme='dark'] rules in Payload's colors.scss will invert these colors */
+
+/* ===================================
+ * Material Design Enhancements
+ * =================================== */
+
+/* List view improvements */
+.list-controls__wrap {
+  padding: 0 1.5rem 1rem;
+}
+
+/* Hide the broken search icon */
+.list-controls__search .search-icon,
+.list-controls__search > div:first-child {
+  display: none !important;
+}
+
+/* Add proper search icon with CSS */
+.list-controls__search {
+  position: relative;
+}
+
+.list-controls__search input {
+  padding-left: 2.25rem !important;
+  font-size: 0.9375rem !important;
+}
+
+.list-controls__search::before {
+  content: '';
+  position: absolute;
+  left: 0.875rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 14px;
+  height: 14px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  opacity: 0.6;
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* Dark mode search icon */
+html[data-theme='dark'] .list-controls__search::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ccc'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
+}
+
+/* Collection list padding */
+.collection-list {
+  padding: 0 !important;
+}
+
+.collection-list > .list-controls {
+  padding: 0;
+  margin-bottom: 0.5rem;
+}
+
+/* Table container spacing */
+.table-wrapper {
+  margin: 0 1.5rem 1.5rem;
+}
+
+/* Reduce excessive vertical spacing */
+.template-default {
+  padding-top: 0 !important;
+}
+
+/* Improved button styling */
+.btn,
+button[type="button"],
+button[type="submit"],
+.form-submit button {
+  border-radius: 5px !important;
+  font-weight: 500 !important;
+  letter-spacing: 0.01em !important;
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
+  font-size: 0.9375rem !important;
+}
+
+.btn:hover,
+button[type="button"]:hover,
+button[type="submit"]:hover {
+  transform: translateY(-1px) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+}
+
+.btn:active,
+button[type="button"]:active,
+button[type="submit"]:active {
+  transform: translateY(0) !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Enhanced card styling */
+.card,
+.collection-list,
+.render-fields,
+.field-type-group {
+  border-radius: 8px !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
+  transition: box-shadow 0.2s ease !important;
+}
+
+.card:hover,
+.collection-list:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
+}
+
+/* Table enhancements */
+.table-wrapper,
+.payload-table {
+  border-radius: 8px !important;
+  overflow: hidden !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
+}
+
+.table thead {
+  background: var(--theme-elevation-100) !important;
+}
+
+.table tbody tr {
+  transition: background-color 0.15s ease !important;
+}
+
+.table tbody tr:hover {
+  background: var(--theme-elevation-50) !important;
+}
+
+/* Input field improvements */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="url"],
+textarea,
+select {
+  border-radius: 5px !important;
+  border: 1px solid var(--theme-elevation-300) !important;
+  transition: all 0.15s ease !important;
+  font-size: 0.9375rem !important;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  border-color: var(--color-success-500) !important;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
+  outline: none !important;
+}
+
+/* Form groups spacing */
+.field-type-text,
+.field-type-textarea,
+.field-type-select,
+.field-type-number,
+.field-type-email {
+  margin-bottom: 1.25rem !important;
+}
+
+/* Enhanced navigation */
+.nav-group {
+  margin-bottom: 0.5rem !important;
+}
+
+.nav-link {
+  border-radius: 6px !important;
+  margin-bottom: 2px !important;
+  transition: all 0.15s ease !important;
+}
+
+.nav-link:hover {
+  background: var(--theme-elevation-100) !important;
+  transform: translateX(4px) !important;
+}
+
+.nav-link.active {
+  background: linear-gradient(90deg, var(--color-success-500) 0%, var(--color-success-600) 100%) !important;
+  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.25) !important;
+}
+
+/* Modal and drawer improvements */
+.modal,
+.drawer {
+  border-radius: 12px !important;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
+}
+
+.modal-header,
+.drawer-header {
+  border-bottom: 1px solid var(--theme-elevation-200) !important;
+  padding: 1.5rem !important;
+}
+
+/* Badge and pill styling */
+.pill,
+.badge {
+  border-radius: 12px !important;
+  padding: 0.25rem 0.75rem !important;
+  font-size: 0.75rem !important;
+  font-weight: 600 !important;
+  letter-spacing: 0.025em !important;
+}
+
+/* Improved spacing and typography */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 600 !important;
+  letter-spacing: -0.015em !important;
+  margin-bottom: 0.75rem !important;
+}
+
+/* Collection title */
+.collection-list h1,
+.list-view h1 {
+  font-size: 1.75rem !important;
+  margin-bottom: 0.5rem !important;
+}
+
+/* Collection description */
+.view-description {
+  font-size: 0.9375rem !important;
+  margin-bottom: 1.25rem !important;
+  opacity: 0.8;
+}
+
+/* List controls enhancement */
+.list-controls {
+  background: var(--theme-elevation-50) !important;
+  border-radius: 8px !important;
+  padding: 1rem !important;
+  margin-bottom: 1.5rem !important;
+  border: 1px solid var(--theme-elevation-200) !important;
+}
+
+/* Pagination improvements */
+.pagination {
+  gap: 0.5rem !important;
+}
+
+.pagination button {
+  border-radius: 6px !important;
+  min-width: 2.5rem !important;
+  height: 2.5rem !important;
+}
+
+/* Document controls */
+.document-controls {
+  gap: 0.75rem !important;
+  padding: 1rem !important;
+  background: var(--theme-elevation-50) !important;
+  border-radius: 8px !important;
+  margin-bottom: 1.5rem !important;
+}
+
+/* Status indicators */
+.status-published {
+  color: #10b981 !important;
+}
+
+.status-draft {
+  color: #f59e0b !important;
+}
+
+/* Loading states */
+.loading-overlay {
+  backdrop-filter: blur(4px) !important;
+}
+
+/* Dark mode specific enhancements */
+html[data-theme='dark'] .table thead {
+  background: var(--theme-elevation-200) !important;
+}
+
+html[data-theme='dark'] .list-controls {
+  background: var(--theme-elevation-100) !important;
+  border-color: var(--theme-elevation-400) !important;
+}
+
+html[data-theme='dark'] .document-controls {
+  background: var(--theme-elevation-100) !important;
+}
+
+/* Smooth scroll behavior */
+html {
+  scroll-behavior: smooth !important;
+}
+
+/* Focus visible for accessibility */
+*:focus-visible {
+  outline: 2px solid var(--color-success-500) !important;
+  outline-offset: 2px !important;
+}