[6.x] Asset browser UI

package.json

@@ -8,17 +8,17 @@
     "svgo": "svgo -f ./resources/svg/  -r",
     "test": "vitest run",
     "test-watch": "npm run test -- --watch --notify",
-    "frontend-dev": "vite build -c vite-frontend.config.js --watch",
+    "frontend-dev": "vite -c vite-frontend.config.js",
     "frontend-build": "vite build -c vite-frontend.config.js",
     "prettier:format": "prettier --write \"**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,blade.php,antlers.html,css}\"",
     "prettier:check": "prettier --check \"**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,blade.php,antlers.html,css}\"",
     "knip": "knip"
   },
   "dependencies": {
-    "@angelblanco/v-calendar": "^3.1.2",
     "@floating-ui/dom": "^1.2.5",
     "@he-tree/vue": "^2.8.2",
     "@hoppscotch/vue-toasted": "^0.1.0",
+    "@internationalized/date": "^3.7.0",
     "@shopify/draggable": "^1.0.0-beta.12",
     "@tiptap/core": "^2.0.2",
     "@tiptap/extension-blockquote": "^2.0.2",
@@ -57,17 +57,19 @@
     "autosize": "~6.0.1",
     "axios": "^1.8.2",
     "body-scroll-lock": "^4.0.0-beta.0",
+    "clsx": "^2.1.1",
     "codemirror": "5.65.12",
     "cookies-js": "^1.2.2",
+    "cva": "^1.0.0-beta.3",
     "floating-vue": "^5.2.2",
     "fuzzysort": "^3.1.0",
     "highlight.js": "^11.7.0",
-    "imask": "^7.6.1",
     "laravel-echo": "^1.16.0",
     "lodash-es": "^4.17.21",
     "lowlight": "^3.1.0",
     "marked": "^13.0.0",
     "marked-plaintext": "0.0.2",
+    "motion-v": "^1.0.0-beta.0",
     "mousetrap": "~1.6.5",
     "nprogress": "^0.2.0",
     "pdfobject": "^2.2.7",
@@ -77,11 +79,13 @@
     "pusher-js": "^8.4.0-rc2",
     "qs": "^6.9.7",
     "read-time-estimate": "0.0.3",
+    "reka-ui": "^2.2.0",
     "resize-observer-polyfill": "^1.5.1",
     "semver": "^7.7.1",
     "speakingurl": "^14.0.1",
     "striptags": "^3.2.0",
     "svgo": "^3.0.0",
+    "tailwind-merge": "^3.0.2",
     "tiny-emitter": "^2.1.0",
     "uniqid": "^5.2.0",
     "upload": "^1.3.2",
@@ -95,20 +99,19 @@
   },
   "devDependencies": {
     "@rollup/plugin-inject": "^5.0.3",
-    "@tailwindcss/container-queries": "^0.1.0",
     "@tailwindcss/typography": "^0.5.9",
+    "@tailwindcss/vite": "^4.0.6",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/test-utils": "^2.4.6",
-    "autoprefixer": "^10.4.0",
+    "jsdom": "^26.0.0",
     "knip": "^5.43.6",
     "laravel-vite-plugin": "^1.2.0",
-    "postcss": "^8.4.31",
     "prettier": "^3.4.2",
     "prettier-plugin-antlers": "^2.0.5",
     "prettier-plugin-blade": "^2.1.19",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "rollup-plugin-visualizer": "^5.14.0",
-    "tailwindcss": "^3.3.0",
+    "tailwindcss": "^4.0.17",
     "vite": "^6.0",
     "vitest": "^3.0.5"
   }

resources/css/app.css

@@ -0,0 +1,27 @@
+@import 'tailwindcss';
+@import './ui.css';
+@import './cp.css';
+@import './core/utilities.css';
+@import './dark.css';
+@import './tailwind-animate.css';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}

resources/css/components/array.css

@@ -6,15 +6,15 @@
 }
 
 .array-table-wrapper {
-    @apply overflow-hidden rounded border dark:border-dark-900;
+    @apply overflow-hidden rounded-sm border dark:border-dark-900;
     &:focus-within {
         @apply ring-2 ring-blue-300 dark:ring-dark-blue-100;
     }
 }
 .array-table {
-    @apply w-full rounded text-sm ltr:text-left rtl:text-right;
+    @apply w-full rounded-sm text-sm ltr:text-left rtl:text-right;
     &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
     }
 
     tr:not(:last-child) {

resources/css/components/assets.css

@@ -4,7 +4,7 @@
 
 .asset-modal {
     .saving {
-        @apply absolute inset-0 flex items-center rounded-sm bg-white/90;
+        @apply absolute inset-0 flex items-center rounded-xs bg-white/90;
         z-index: 200;
 
         .inner {
@@ -26,29 +26,29 @@
 }
 
 .drag-notification {
-    @apply absolute inset-0 flex items-center justify-center rounded p-1 text-center text-xs leading-tight @sm:text-lg;
-    border: 1px dashed theme('colors.gray.600');
+    @apply absolute inset-0 flex items-center justify-center rounded-sm p-1 text-center text-xs leading-tight @sm:text-lg;
+    border: 1px dashed var(--color-gray-600);
     pointer-events: none;
     z-index: 1049;
     background: rgba(255, 255, 255, 0.9);
 
     .dark & {
         @apply bg-dark-900/90;
-        border-color: theme('colors.dark.600');
+        border-color: var(--color-dark-600);
     }
 }
 
 /* Table Listing
    ========================================================================== */
 
 .asset-table-listing {
-    @apply relative overflow-hidden rounded border dark:border-dark-900;
+    @apply relative overflow-hidden rounded-sm border dark:border-dark-900;
 
     table {
         @apply m-0 w-full select-none rounded-b border-none;
     }
     tbody tr {
-        @apply outline-none;
+        @apply outline-hidden;
     }
 
     tbody tr:not(:last-child) {
@@ -105,58 +105,51 @@
   ========================================================================== */
 
 .asset-grid-listing {
-    @apply relative grid gap-4 bg-white p-4 dark:bg-dark-800;
-    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
+    @apply relative grid gap-6 xl:gap-10;
+}
+
+.folder-grid-listing {
+    @apply relative grid gap-8;
+    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
 }
 
 /* Asset Tile
    ========================================================================== */
 
 .asset-tile {
-    @apply relative flex min-w-0 cursor-pointer flex-col items-center justify-between rounded border bg-white dark:border-dark-300 dark:bg-dark-600;
+    @apply relative flex min-w-0 cursor-pointer flex-col items-center justify-between rounded-lg outline outline-gray-300 dark:outline-gray-700;
+
+    .selected & {
+        @apply outline-3 outline-blue-500;
+    }
 
     .asset-thumb {
-        @apply flex h-full w-full items-center justify-center rounded;
+        @apply flex items-center justify-center size-full;
         > img,
         > svg,
         > .svg-img {
             @apply absolute max-h-full max-w-full;
         }
     }
 
-    .asset-thumb-container {
-        @apply relative flex w-full flex-1 items-center justify-center;
-        aspect-ratio: 1 / 1;
-    }
-
     .asset-thumb-container:hover .asset-controls {
         @apply block;
     }
 
-    .asset-meta {
-        @apply w-full border-t text-2xs text-gray-700 dark:border-dark-200 dark:text-dark-100;
-    }
-
     .asset-meta-btn {
         @apply px-2 py-1 text-blue hover:bg-gray-200 dark:border-dark-300 dark:hover:bg-dark-800 ltr:border-l rtl:border-r;
     }
 
-    .asset-filename {
-        @apply truncate;
-    }
-
     .asset-controls {
         @apply absolute hidden;
     }
 }
 
-.asset-tile.selected {
-    @apply border-blue dark:border-dark-blue-100;
-    box-shadow: 0 0 0 1px theme('colors.blue.DEFAULT');
-}
-
-.asset-thumbnail {
-    @apply border border-white dark:border-dark-950;
+.asset-filename {
+    @apply font-mono text-xs text-gray-500 mt-2 whitespace-nowrap text-center;
+    .selected & {
+        @apply text-blue-500;
+    }
 }
 
 /* The Asset Editor
@@ -190,7 +183,7 @@
     }
 
     .loading {
-        @apply absolute inset-0 z-10 flex items-center justify-center rounded bg-white/70;
+        @apply absolute inset-0 z-10 flex items-center justify-center rounded-sm bg-white/70;
     }
 }
 

resources/css/components/blueprints.css

@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .blueprint-section {
-    @apply min-h-40 w-full p-2 outline-none;
+    @apply min-h-40 w-full p-2 outline-hidden;
 
     &.draggable-source--is-dragging {
         opacity: 0.5;
@@ -21,11 +21,11 @@
 }
 
 .blueprint-section-field {
-    @apply relative z-10 mb-2 px-1 text-sm outline-none;
+    @apply relative z-10 mb-2 px-1 text-sm outline-hidden;
 
     .blueprint-section-field-inner {
-        @apply relative z-10 flex rounded border bg-gray-200 shadow-sm outline-none;
-        @apply dark:border-none dark:bg-dark-600 dark:shadow-dark;
+        @apply relative z-10 flex rounded-sm border bg-gray-200 shadow-sm outline-hidden;
+        @apply dark:border-none dark:bg-dark-600 dark:shadow-lg;
     }
 
     &.draggable-source--is-dragging {
@@ -40,7 +40,7 @@
 .blueprint-section-import {
     &:before {
         content: '';
-        @apply absolute rounded border bg-gray-200 shadow-sm;
+        @apply absolute rounded-sm border bg-gray-200 shadow-sm;
         top: -3px;
         left: 6px;
         right: 0;

resources/css/components/cards.css

@@ -4,10 +4,10 @@
 
 .card {
     @apply rounded-md bg-white p-2 shadow;
-    @apply dark:bg-dark-600 dark:shadow-dark;
+    @apply dark:bg-gray-800 dark:shadow-lg;
 }
 
-@screen md {
+@media (width >= theme(--breakpoint-md)) {
     .card {
         @apply p-4;
     }
@@ -18,5 +18,5 @@
 }
 
 .card-lg header {
-    @apply rounded-t-lg border-b px-8 py-6 dark:border-dark-800 dark:bg-dark-650;
+    @apply rounded-t-lg border-b px-8 py-6 dark:border-gray-800 dark:bg-gray-700;
 }

resources/css/components/column-picker.css

@@ -1,8 +1,8 @@
 .column-picker-item {
-    @apply flex select-none items-center text-sm outline-none;
+    @apply flex select-none items-center text-sm outline-hidden;
 
     &.sortable {
-        @apply rounded border bg-white;
+        @apply rounded-sm border bg-white;
         &:hover {
             @apply bg-gray-200;
         }

resources/css/components/configure.css

@@ -15,7 +15,7 @@
             @apply mb-0;
         }
         .field-inner {
-            @apply ltr:pr-8 rtl:pl-8;
+            @apply pe-8;
         }
     }
 }

resources/css/components/fieldtypes/assets.css

@@ -7,7 +7,7 @@
 }
 
 .assets-fieldtype .assets-fieldtype-picker {
-    @apply flex flex-wrap items-center rounded border bg-gray-200 px-4 py-2 dark:border-dark-900 dark:bg-dark-650;
+    @apply flex flex-wrap items-center rounded-sm border bg-gray-200 px-4 py-2 dark:border-dark-900 dark:bg-dark-650;
 
     &.is-expanded {
         @apply rounded-b-none border-b-0;