@jacshuo/onyx 2.1.0 → 2.3.0

package/dist/styles.css

@@ -107,6 +107,8 @@
     --text-2xl--line-height: calc(2 / 1.5);
     --text-3xl: 1.875rem;
     --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
@@ -127,6 +129,7 @@
     --ease-in: cubic-bezier(0.4, 0, 1, 1);
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --animate-spin: spin 1s linear infinite;
     --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --blur-sm: 8px;
@@ -555,6 +558,9 @@
   .z-\[9999\] {
     z-index: 9999;
   }
+  .row-0 {
+    grid-row: 0;
+  }
   .row-span-2 {
     grid-row: span 2 / span 2;
   }
@@ -585,6 +591,9 @@
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
+  .mx-3 {
+    margin-inline: calc(var(--spacing) * 3);
+  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -600,6 +609,9 @@
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
+  .mt-1\.5 {
+    margin-top: calc(var(--spacing) * 1.5);
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -802,6 +814,12 @@
   .h-52 {
     height: calc(var(--spacing) * 52);
   }
+  .h-56 {
+    height: calc(var(--spacing) * 56);
+  }
+  .h-60 {
+    height: calc(var(--spacing) * 60);
+  }
   .h-64 {
     height: calc(var(--spacing) * 64);
   }
@@ -838,6 +856,12 @@
   .max-h-0 {
     max-height: calc(var(--spacing) * 0);
   }
+  .max-h-28 {
+    max-height: calc(var(--spacing) * 28);
+  }
+  .max-h-48 {
+    max-height: calc(var(--spacing) * 48);
+  }
   .max-h-52 {
     max-height: calc(var(--spacing) * 52);
   }
@@ -880,6 +904,9 @@
   .min-h-\[100px\] {
     min-height: 100px;
   }
+  .min-h-\[120px\] {
+    min-height: 120px;
+  }
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
@@ -949,6 +976,9 @@
   .w-28 {
     width: calc(var(--spacing) * 28);
   }
+  .w-32 {
+    width: calc(var(--spacing) * 32);
+  }
   .w-44 {
     width: calc(var(--spacing) * 44);
   }
@@ -1042,6 +1072,9 @@
   .min-w-7 {
     min-width: calc(var(--spacing) * 7);
   }
+  .min-w-8 {
+    min-width: calc(var(--spacing) * 8);
+  }
   .min-w-9 {
     min-width: calc(var(--spacing) * 9);
   }
@@ -1075,12 +1108,21 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-none {
+    flex: none;
+  }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
   .grow {
     flex-grow: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1105,6 +1147,10 @@
     --tw-translate-x: calc(var(--spacing) * 6);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-full {
+    --tw-translate-x: 100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-x-px {
     --tw-translate-x: 1px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1220,12 +1266,18 @@
   .animate-slide-in-top {
     animation: var(--animate-slide-in-top);
   }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
   .animate-spin-dash {
     animation: var(--animate-spin-dash);
   }
   .animate-spin-rotate {
     animation: var(--animate-spin-rotate);
   }
+  .cursor-col-resize {
+    cursor: col-resize;
+  }
   .cursor-context-menu {
     cursor: context-menu;
   }
@@ -1238,6 +1290,9 @@
   .cursor-grab {
     cursor: grab;
   }
+  .cursor-grabbing {
+    cursor: grabbing;
+  }
   .cursor-nesw-resize {
     cursor: nesw-resize;
   }
@@ -1253,6 +1308,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .cursor-row-resize {
+    cursor: row-resize;
+  }
   .cursor-text {
     cursor: text;
   }
@@ -1268,6 +1326,12 @@
   .resize-y {
     resize: vertical;
   }
+  .list-inside {
+    list-style-position: inside;
+  }
+  .list-disc {
+    list-style-type: disc;
+  }
   .appearance-none {
     appearance: none;
   }
@@ -1328,6 +1392,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .justify-start {
+    justify-content: flex-start;
+  }
   .gap-\(--form-footer-gap\) {
     gap: var(--form-footer-gap);
   }
@@ -1606,6 +1673,10 @@
     border-top-left-radius: var(--radius-lg);
     border-bottom-left-radius: var(--radius-lg);
   }
+  .rounded-l-xl {
+    border-top-left-radius: var(--radius-xl);
+    border-bottom-left-radius: var(--radius-xl);
+  }
   .rounded-tl-sm {
     border-top-left-radius: var(--radius-sm);
   }
@@ -1636,6 +1707,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -1697,6 +1772,9 @@
   .border-blue-400 {
     border-color: var(--color-blue-400);
   }
+  .border-current {
+    border-color: currentcolor;
+  }
   .border-danger-200 {
     border-color: var(--color-danger-200);
   }
@@ -1823,6 +1901,12 @@
       border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
     }
   }
+  .border-t-primary-500 {
+    border-top-color: var(--color-primary-500);
+  }
+  .border-t-transparent {
+    border-top-color: transparent;
+  }
   .bg-\(--accent\) {
     background-color: var(--accent);
   }
@@ -1952,6 +2036,9 @@
   .bg-primary-300 {
     background-color: var(--color-primary-300);
   }
+  .bg-primary-400 {
+    background-color: var(--color-primary-400);
+  }
   .bg-primary-500 {
     background-color: var(--color-primary-500);
   }
@@ -2042,6 +2129,18 @@
       background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
     }
   }
+  .bg-white\/70 {
+    background-color: color-mix(in srgb, #fff 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
+    }
+  }
+  .bg-white\/90 {
+    background-color: color-mix(in srgb, #fff 90%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
+    }
+  }
   .bg-linear-to-b {
     --tw-gradient-position: to bottom;
     @supports (background-image: linear-gradient(in lab, red, red)) {
@@ -2227,6 +2326,9 @@
   .p-12 {
     padding: calc(var(--spacing) * 12);
   }
+  .px-0 {
+    padding-inline: calc(var(--spacing) * 0);
+  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
@@ -2412,6 +2514,10 @@
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
+  .text-4xl {
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -2462,6 +2568,10 @@
   .text-\[11px\] {
     font-size: 11px;
   }
+  .leading-7 {
+    --tw-leading: calc(var(--spacing) * 7);
+    line-height: calc(var(--spacing) * 7);
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -2667,6 +2777,9 @@
   .text-secondary-700 {
     color: var(--color-secondary-700);
   }
+  .text-secondary-800 {
+    color: var(--color-secondary-800);
+  }
   .text-secondary-900 {
     color: var(--color-secondary-900);
   }
@@ -2697,6 +2810,9 @@
   .text-warning-100 {
     color: var(--color-warning-100);
   }
+  .text-warning-400 {
+    color: var(--color-warning-400);
+  }
   .text-warning-500 {
     color: var(--color-warning-500);
   }
@@ -2751,6 +2867,9 @@
   .capitalize {
     text-transform: capitalize;
   }
+  .lowercase {
+    text-transform: lowercase;
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -2835,6 +2954,10 @@
     --tw-shadow: 0 0 0 4px var(--tw-shadow-color, var(--color-emerald-100));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_2px_0_0_var\(--color-secondary-300\)\] {
+    --tw-shadow: 0 2px 0 0 var(--tw-shadow-color, var(--color-secondary-300));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-inner {
     --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2931,6 +3054,10 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .blur-2xl {
     --tw-blur: blur(var(--blur-2xl));
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -2947,6 +3074,11 @@
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .backdrop-blur {
+    --tw-backdrop-blur: blur(8px);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .backdrop-blur-\[2px\] {
     --tw-backdrop-blur: blur(2px);
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -3124,6 +3256,13 @@
       }
     }
   }
+  .group-hover\:bg-primary-400 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: var(--color-primary-400);
+      }
+    }
+  }
   .group-hover\:opacity-50 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -3167,6 +3306,11 @@
       }
     }
   }
+  .group-focus-visible\:bg-primary-400 {
+    &:is(:where(.group):focus-visible *) {
+      background-color: var(--color-primary-400);
+    }
+  }
   .placeholder\:text-\(--fe-text-muted\) {
     &::placeholder {
       color: var(--fe-text-muted);
@@ -3200,6 +3344,14 @@
       margin-bottom: calc(var(--spacing) * 0);
     }
   }
+  .even\:bg-primary-50\/50 {
+    &:nth-child(even) {
+      background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-primary-50) 50%, transparent);
+      }
+    }
+  }
   .focus-within\:border-danger-500 {
     &:focus-within {
       border-color: var(--color-danger-500);
@@ -3445,6 +3597,13 @@
       }
     }
   }
+  .hover\:bg-secondary-300 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-secondary-300);
+      }
+    }
+  }
   .hover\:bg-secondary-600 {
     &:hover {
       @media (hover: hover) {
@@ -3466,6 +3625,13 @@
       }
     }
   }
+  .hover\:bg-white {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-white);
+      }
+    }
+  }
   .hover\:bg-white\/10 {
     &:hover {
       @media (hover: hover) {
@@ -3514,6 +3680,13 @@
       }
     }
   }
+  .hover\:text-danger-500 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-danger-500);
+      }
+    }
+  }
   .hover\:text-danger-600 {
     &:hover {
       @media (hover: hover) {
@@ -3658,6 +3831,12 @@
       background-color: var(--fe-input-bg);
     }
   }
+  .focus\:ring-0 {
+    &:focus {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .focus\:ring-1 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -3745,6 +3924,11 @@
       --tw-ring-color: var(--color-primary-400);
     }
   }
+  .focus-visible\:ring-primary-500 {
+    &:focus-visible {
+      --tw-ring-color: var(--color-primary-500);
+    }
+  }
   .focus-visible\:ring-primary-500\/20 {
     &:focus-visible {
       --tw-ring-color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 20%, transparent);
@@ -3876,6 +4060,11 @@
       cursor: not-allowed;
     }
   }
+  .disabled\:opacity-30 {
+    &:disabled {
+      opacity: 30%;
+    }
+  }
   .disabled\:opacity-40 {
     &:disabled {
       opacity: 40%;
@@ -4363,6 +4552,14 @@
       }
     }
   }
+  .dark\:bg-primary-900\/40 {
+    &:where(.dark, .dark *) {
+      background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-primary-900) 40%, transparent);
+      }
+    }
+  }
   .dark\:bg-primary-900\/50 {
     &:where(.dark, .dark *) {
       background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 50%, transparent);
@@ -4387,6 +4584,14 @@
       }
     }
   }
+  .dark\:bg-primary-900\/90 {
+    &:where(.dark, .dark *) {
+      background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 90%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-primary-900) 90%, transparent);
+      }
+    }
+  }
   .dark\:bg-secondary-500 {
     &:where(.dark, .dark *) {
       background-color: var(--color-secondary-500);
@@ -4449,6 +4654,11 @@
       }
     }
   }
+  .dark\:bg-transparent {
+    &:where(.dark, .dark *) {
+      background-color: transparent;
+    }
+  }
   .dark\:bg-warning-500 {
     &:where(.dark, .dark *) {
       background-color: var(--color-warning-500);
@@ -4693,6 +4903,12 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .dark\:shadow-\[0_2px_0_0_var\(--color-secondary-600\)\] {
+    &:where(.dark, .dark *) {
+      --tw-shadow: 0 2px 0 0 var(--tw-shadow-color, var(--color-secondary-600));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .dark\:shadow-black\/20 {
     &:where(.dark, .dark *) {
       --tw-shadow-color: color-mix(in srgb, #000 20%, transparent);
@@ -4738,6 +4954,22 @@
       --tw-ring-color: var(--color-primary-900);
     }
   }
+  .dark\:group-hover\:bg-primary-500 {
+    &:where(.dark, .dark *) {
+      &:is(:where(.group):hover *) {
+        @media (hover: hover) {
+          background-color: var(--color-primary-500);
+        }
+      }
+    }
+  }
+  .dark\:group-focus-visible\:bg-primary-500 {
+    &:where(.dark, .dark *) {
+      &:is(:where(.group):focus-visible *) {
+        background-color: var(--color-primary-500);
+      }
+    }
+  }
   .dark\:placeholder\:text-secondary-600 {
     &:where(.dark, .dark *) {
       &::placeholder {
@@ -4745,6 +4977,16 @@
       }
     }
   }
+  .dark\:even\:bg-primary-900\/30 {
+    &:where(.dark, .dark *) {
+      &:nth-child(even) {
+        background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 30%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-primary-900) 30%, transparent);
+        }
+      }
+    }
+  }
   .dark\:focus-within\:border-primary-400 {
     &:where(.dark, .dark *) {
       &:focus-within {
@@ -4794,23 +5036,23 @@
       }
     }
   }
-  .dark\:hover\:bg-primary-200 {
+  .dark\:hover\:bg-primary-300\/90 {
     &:where(.dark, .dark *) {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-primary-200);
+          background-color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 90%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-primary-300) 90%, transparent);
+          }
         }
       }
     }
   }
-  .dark\:hover\:bg-primary-300\/90 {
+  .dark\:hover\:bg-primary-400 {
     &:where(.dark, .dark *) {
       &:hover {
         @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 90%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-primary-300) 90%, transparent);
-          }
+          background-color: var(--color-primary-400);
         }
       }
     }
@@ -4935,6 +5177,18 @@
       }
     }
   }
+  .dark\:hover\:bg-primary-900\/40 {
+    &:where(.dark, .dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 40%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-primary-900) 40%, transparent);
+          }
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-secondary-700 {
     &:where(.dark, .dark *) {
       &:hover {
@@ -4944,6 +5198,15 @@
       }
     }
   }
+  .dark\:hover\:bg-secondary-800 {
+    &:where(.dark, .dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-secondary-800);
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-white\/20 {
     &:where(.dark, .dark *) {
       &:hover {
@@ -5043,6 +5306,13 @@
       }
     }
   }
+  .dark\:focus\:border-primary-400 {
+    &:where(.dark, .dark *) {
+      &:focus {
+        border-color: var(--color-primary-400);
+      }
+    }
+  }
   .dark\:active\:text-primary-100 {
     &:where(.dark, .dark *) {
       &:active {
@@ -5130,6 +5400,36 @@
       background-color: var(--color-warning-500);
     }
   }
+  .\[\&_\.rating-icon\]\:h-4 {
+    & .rating-icon {
+      height: calc(var(--spacing) * 4);
+    }
+  }
+  .\[\&_\.rating-icon\]\:h-6 {
+    & .rating-icon {
+      height: calc(var(--spacing) * 6);
+    }
+  }
+  .\[\&_\.rating-icon\]\:h-8 {
+    & .rating-icon {
+      height: calc(var(--spacing) * 8);
+    }
+  }
+  .\[\&_\.rating-icon\]\:w-4 {
+    & .rating-icon {
+      width: calc(var(--spacing) * 4);
+    }
+  }
+  .\[\&_\.rating-icon\]\:w-6 {
+    & .rating-icon {
+      width: calc(var(--spacing) * 6);
+    }
+  }
+  .\[\&_\.rating-icon\]\:w-8 {
+    & .rating-icon {
+      width: calc(var(--spacing) * 8);
+    }
+  }
   .\[\&_\.slider-fill\]\:bg-danger-500 {
     & .slider-fill {
       background-color: var(--color-danger-500);
@@ -6320,6 +6620,464 @@
 .dark #cmd-results::-webkit-scrollbar-thumb {
   background: var(--color-primary-700);
 }
+:root {
+  --dtp-panel-bg: rgba(255, 255, 255, 0.9);
+  --dtp-panel-border: var(--color-primary-200);
+  --dtp-blur: 16px;
+  --dtp-accent: var(--color-primary-500);
+  --dtp-accent-bg: var(--color-primary-100);
+  --dtp-text-selected: var(--color-primary-800);
+  --dtp-text-muted: var(--color-secondary-400);
+  --dtp-text-primary: var(--color-primary-700);
+  --dtp-item-h: 40px;
+  --dtp-radius: 16px;
+  --dtp-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
+}
+:root:where(.dark, .dark *), .dark {
+  --dtp-panel-bg: rgba(15, 23, 42, 0.9);
+  --dtp-panel-border: var(--color-primary-700);
+  --dtp-accent-bg: rgba(100, 116, 139, 0.25);
+  --dtp-text-selected: var(--color-primary-100);
+  --dtp-text-muted: var(--color-secondary-500);
+  --dtp-text-primary: var(--color-primary-300);
+  --dtp-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.2);
+}
+.dtp-root {
+  display: inline-flex;
+  align-items: center;
+}
+.dtp-trigger-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.dtp-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-primary-300);
+  background: var(--color-primary-50);
+  color: var(--color-primary-700);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  cursor: pointer;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+  min-width: 180px;
+  text-align: left;
+}
+.dtp-trigger--has-clear {
+  padding-right: 2rem;
+}
+:where(.dark, .dark *) .dtp-trigger {
+  border-color: var(--color-primary-600);
+  background: var(--color-primary-800);
+  color: var(--color-primary-200);
+}
+.dtp-trigger:hover:not(:disabled) {
+  border-color: var(--color-primary-400);
+  box-shadow: 0 0 0 3px var(--color-primary-100);
+}
+:where(.dark, .dark *) .dtp-trigger:hover:not(:disabled) {
+  box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.2);
+}
+.dtp-trigger--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.dtp-trigger-icon {
+  width: 1rem;
+  height: 1rem;
+  color: var(--color-primary-400);
+  flex-shrink: 0;
+}
+.dtp-trigger-text {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dtp-trigger-placeholder {
+  color: var(--color-secondary-400);
+}
+.dtp-trigger-clear {
+  position: absolute;
+  right: 0.375rem;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.125rem;
+  border-radius: 9999px;
+  border: none;
+  background: transparent;
+  color: var(--color-secondary-400);
+  cursor: pointer;
+  transition: background 100ms ease, color 100ms ease;
+}
+.dtp-trigger-clear:hover {
+  background: var(--color-primary-200);
+  color: var(--color-primary-600);
+}
+.dtp-panel {
+  position: fixed;
+  z-index: 9999;
+  width: 340px;
+  max-width: calc(100vw - 32px);
+  border-radius: var(--dtp-radius);
+  border: 1px solid var(--dtp-panel-border);
+  background: var(--dtp-panel-bg);
+  -webkit-backdrop-filter: blur(var(--dtp-blur));
+  backdrop-filter: blur(var(--dtp-blur));
+  box-shadow: var(--dtp-shadow);
+  overflow: hidden;
+  animation: dtp-panel-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  top: 60px;
+  left: 0;
+}
+@keyframes dtp-panel-in {
+  from {
+    opacity: 0;
+    transform: scale(0.97) translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+@media (max-width: 640px) {
+  .dtp-panel {
+    position: fixed !important;
+    top: auto !important;
+    left: 0 !important;
+    bottom: 0;
+    width: 100vw;
+    max-width: 100vw;
+    border-radius: var(--dtp-radius) var(--dtp-radius) 0 0;
+    animation: dtp-panel-slide-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+  @keyframes dtp-panel-slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+.dtp-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.875rem 1rem 0.625rem;
+  border-bottom: 1px solid var(--dtp-panel-border);
+}
+.dtp-panel-preview {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--dtp-text-primary);
+  letter-spacing: -0.01em;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dtp-panel-actions {
+  display: flex;
+  gap: 0.375rem;
+  margin-left: 0.5rem;
+}
+.dtp-view-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.5rem;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--dtp-text-muted);
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
+}
+.dtp-view-btn:hover {
+  background: var(--dtp-accent-bg);
+  color: var(--dtp-text-selected);
+}
+.dtp-view-btn--active {
+  background: var(--dtp-accent-bg);
+  color: var(--dtp-accent);
+  border-color: var(--dtp-panel-border);
+}
+.dtp-panel-body {
+  padding: 0.625rem 0.5rem;
+}
+.dtp-drum {
+  display: flex;
+  align-items: stretch;
+}
+.dtp-drum-date, .dtp-drum-time {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+}
+.dtp-drum-sep {
+  width: 1px;
+  background: var(--dtp-panel-border);
+  margin: 0.5rem 0.25rem;
+}
+.dtp-column {
+  position: relative;
+  flex: 1;
+  height: calc(var(--dtp-item-h) * 5);
+  min-width: 0;
+  overflow: hidden;
+}
+.dtp-column-highlight {
+  position: absolute;
+  left: 4px;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  height: var(--dtp-item-h);
+  background: var(--dtp-accent-bg);
+  border-radius: 8px;
+  pointer-events: none;
+  z-index: 0;
+}
+.dtp-column-list {
+  height: 100%;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  padding-top: calc(var(--dtp-item-h) * 2);
+  padding-bottom: calc(var(--dtp-item-h) * 2);
+}
+.dtp-column-list::-webkit-scrollbar {
+  display: none;
+}
+.dtp-item {
+  position: relative;
+  z-index: 1;
+  height: var(--dtp-item-h);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.875rem;
+  cursor: pointer;
+  color: var(--dtp-text-muted);
+  transition: color 100ms ease;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.dtp-item:hover {
+  color: var(--dtp-text-primary);
+}
+.dtp-item--selected {
+  color: var(--dtp-text-selected);
+  font-weight: 600;
+  font-size: 1rem;
+}
+.dtp-fade-top, .dtp-fade-bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: calc(var(--dtp-item-h) * 2);
+  pointer-events: none;
+  z-index: 2;
+}
+.dtp-fade-top {
+  top: 0;
+  background: linear-gradient(to bottom, var(--dtp-panel-bg) 10%, transparent 100%);
+}
+.dtp-fade-bottom {
+  bottom: 0;
+  background: linear-gradient(to top, var(--dtp-panel-bg) 10%, transparent 100%);
+}
+.dtp-calendar {
+  padding: 0 0.25rem;
+  min-height: 230px;
+}
+.dtp-cal-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+.dtp-cal-nav-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.5rem;
+  border: none;
+  background: transparent;
+  color: var(--dtp-text-muted);
+  cursor: pointer;
+  transition: background 100ms ease, color 100ms ease;
+}
+.dtp-cal-nav-btn:hover {
+  background: var(--dtp-accent-bg);
+  color: var(--dtp-text-selected);
+}
+.dtp-cal-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--dtp-text-primary);
+}
+.dtp-cal-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  margin-bottom: 0.125rem;
+}
+.dtp-cal-weekday {
+  text-align: center;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: var(--dtp-text-muted);
+  padding: 0.25rem 0;
+}
+.dtp-cal-days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+.dtp-cal-day {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  border-radius: 0.375rem;
+  border: none;
+  background: transparent;
+  font-size: 0.8125rem;
+  color: var(--dtp-text-primary);
+  cursor: pointer;
+  transition: background 80ms ease, color 80ms ease;
+  width: 100%;
+}
+.dtp-cal-day:hover:not(:disabled):not(.dtp-cal-day--selected) {
+  background: var(--dtp-accent-bg);
+}
+.dtp-cal-day--other {
+  color: var(--dtp-text-muted);
+  opacity: 0.45;
+}
+.dtp-cal-day--selected {
+  background: var(--dtp-accent) !important;
+  color: #fff !important;
+  font-weight: 600;
+}
+.dtp-cal-day--today:not(.dtp-cal-day--selected) {
+  font-weight: 600;
+  color: var(--dtp-accent);
+  box-shadow: inset 0 0 0 1px var(--dtp-accent);
+}
+.dtp-cal-day--disabled {
+  opacity: 0.28;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.dtp-panel-offset {
+  padding: 0.375rem 0.75rem 0.5rem;
+  border-top: 1px solid var(--dtp-panel-border);
+}
+.dtp-quick-offset {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  flex-wrap: wrap;
+  padding: 0.25rem 0;
+}
+.dtp-offset-input {
+  width: 3.25rem;
+  padding: 0.25rem 0.4rem;
+  border-radius: 0.375rem;
+  border: 1px solid var(--dtp-panel-border);
+  background: transparent;
+  color: var(--dtp-text-primary);
+  font-size: 0.8125rem;
+  text-align: center;
+  outline: none;
+  transition: border-color 100ms ease;
+}
+.dtp-offset-input:focus {
+  border-color: var(--dtp-accent);
+}
+.dtp-offset-select {
+  padding: 0.25rem 0.3rem;
+  border-radius: 0.375rem;
+  border: 1px solid var(--dtp-panel-border);
+  background: transparent;
+  color: var(--dtp-text-primary);
+  font-size: 0.8125rem;
+  outline: none;
+  cursor: pointer;
+  transition: border-color 100ms ease;
+}
+.dtp-offset-select:focus {
+  border-color: var(--dtp-accent);
+}
+.dtp-offset-apply {
+  padding: 0.25rem 0.65rem;
+  border-radius: 0.375rem;
+  border: none;
+  background: var(--dtp-accent);
+  color: #fff;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 120ms ease;
+}
+.dtp-offset-apply:hover {
+  opacity: 0.85;
+}
+.dtp-panel-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0.625rem 0.75rem;
+  border-top: 1px solid var(--dtp-panel-border);
+}
+.dtp-btn-cancel {
+  padding: 0.4375rem 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--dtp-panel-border);
+  background: transparent;
+  color: var(--dtp-text-muted);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background 100ms ease, color 100ms ease;
+}
+.dtp-btn-cancel:hover {
+  background: var(--dtp-accent-bg);
+  color: var(--dtp-text-primary);
+}
+.dtp-btn-confirm {
+  padding: 0.4375rem 1.25rem;
+  border-radius: 0.5rem;
+  border: none;
+  background: var(--dtp-accent);
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 120ms ease, transform 100ms ease;
+}
+.dtp-btn-confirm:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+.dtp-btn-confirm:active {
+  transform: translateY(0);
+}
 .slider-root * {
   user-select: none;
 }
@@ -6910,6 +7668,11 @@ circle.chart-dot:hover, circle.chart-dot.chart-dot--active {
   initial-value: "";
   inherits: false;
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 @keyframes ping {
   75%, 100% {
     transform: scale(2);