@cherrystudio/file-preview 0.2.3 → 0.2.5

package/dist/styles.css

@@ -38,9 +38,9 @@
       --fp-tw-ring-offset-color: #fff;
       --fp-tw-ring-offset-shadow: 0 0 #0000;
       --fp-tw-outline-style: solid;
+      --fp-tw-duration: initial;
       --fp-tw-content: "";
       --fp-tw-ease: initial;
-      --fp-tw-duration: initial;
       --fp-tw-animation-delay: 0s;
       --fp-tw-animation-direction: normal;
       --fp-tw-animation-duration: initial;
@@ -392,6 +392,10 @@
     display: none;
   }
 
+  :where(.file-preview-root):is(.hidden\!), :where(.file-preview-root) .hidden\! {
+    display: none !important;
+  }
+
   :where(.file-preview-root):is(.inline), :where(.file-preview-root) .inline {
     display: inline;
   }
@@ -457,6 +461,10 @@
     height: var(--file-preview-toolbar-button-size, 1.75rem);
   }
 
+  :where(.file-preview-root):is(.h-3), :where(.file-preview-root) .h-3 {
+    height: calc(var(--spacing) * 3);
+  }
+
   :where(.file-preview-root):is(.h-4), :where(.file-preview-root) .h-4 {
     height: calc(var(--spacing) * 4);
   }
@@ -541,6 +549,10 @@
     min-height: 100%;
   }
 
+  :where(.file-preview-root):is(.w-3), :where(.file-preview-root) .w-3 {
+    width: calc(var(--spacing) * 3);
+  }
+
   :where(.file-preview-root):is(.w-10), :where(.file-preview-root) .w-10 {
     width: calc(var(--spacing) * 10);
   }
@@ -734,16 +746,16 @@
     resize: both;
   }
 
-  :where(.file-preview-root):is(.\[scrollbar-color\:transparent_transparent\]), :where(.file-preview-root) .\[scrollbar-color\:transparent_transparent\] {
-    scrollbar-color: transparent transparent;
+  :where(.file-preview-root):is(.\[scrollbar-gutter\:auto\]\!), :where(.file-preview-root) .\[scrollbar-gutter\:auto\]\! {
+    scrollbar-gutter: auto !important;
   }
 
-  :where(.file-preview-root):is(.\[scrollbar-gutter\:auto\]), :where(.file-preview-root) .\[scrollbar-gutter\:auto\] {
-    scrollbar-gutter: auto;
+  :where(.file-preview-root):is(.grid-cols-\[minmax\(0\,1fr\)\]), :where(.file-preview-root) .grid-cols-\[minmax\(0\,1fr\)\] {
+    grid-template-columns: minmax(0, 1fr);
   }
 
-  :where(.file-preview-root):is(.\[scrollbar-gutter\:stable\]), :where(.file-preview-root) .\[scrollbar-gutter\:stable\] {
-    scrollbar-gutter: stable;
+  :where(.file-preview-root):is(.grid-rows-\[minmax\(0\,1fr\)\]), :where(.file-preview-root) .grid-rows-\[minmax\(0\,1fr\)\] {
+    grid-template-rows: minmax(0, 1fr);
   }
 
   :where(.file-preview-root):is(.flex-col), :where(.file-preview-root) .flex-col {
@@ -872,6 +884,11 @@
     border-width: 0;
   }
 
+  :where(.file-preview-root):is(.border-\[1\.5px\]), :where(.file-preview-root) .border-\[1\.5px\] {
+    border-style: var(--fp-tw-border-style);
+    border-width: 1.5px;
+  }
+
   :where(.file-preview-root):is(.border-t), :where(.file-preview-root) .border-t {
     border-top-style: var(--fp-tw-border-style);
     border-top-width: 1px;
@@ -907,6 +924,11 @@
     border-style: dashed;
   }
 
+  :where(.file-preview-root):is(.border-solid), :where(.file-preview-root) .border-solid {
+    --fp-tw-border-style: solid;
+    border-style: solid;
+  }
+
   :where(.file-preview-root):is(.border-border), :where(.file-preview-root) .border-border {
     border-color: var(--border);
   }
@@ -923,6 +945,16 @@
     border-color: #0000;
   }
 
+  :where(.file-preview-root):is(.bg-\[var\(--scrollbar-thumb\,color-mix\(in_srgb\,var\(--foreground\)_15\%\,transparent\)\)\]), :where(.file-preview-root) .bg-\[var\(--scrollbar-thumb\,color-mix\(in_srgb\,var\(--foreground\)_15\%\,transparent\)\)\] {
+    background-color: var(--scrollbar-thumb, var(--foreground));
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.file-preview-root):is(.bg-\[var\(--scrollbar-thumb\,color-mix\(in_srgb\,var\(--foreground\)_15\%\,transparent\)\)\]), :where(.file-preview-root) .bg-\[var\(--scrollbar-thumb\,color-mix\(in_srgb\,var\(--foreground\)_15\%\,transparent\)\)\] {
+      background-color: var(--scrollbar-thumb, color-mix(in srgb,var(--foreground) 15%,transparent));
+    }
+  }
+
   :where(.file-preview-root):is(.bg-background), :where(.file-preview-root) .bg-background {
     background-color: var(--background);
   }
@@ -971,6 +1003,10 @@
     background-color: var(--muted);
   }
 
+  :where(.file-preview-root):is(.bg-neutral-100), :where(.file-preview-root) .bg-neutral-100 {
+    background-color: var(--cs-neutral-100);
+  }
+
   :where(.file-preview-root):is(.bg-neutral-900), :where(.file-preview-root) .bg-neutral-900 {
     background-color: var(--cs-neutral-900);
   }
@@ -1015,16 +1051,20 @@
     background-color: var(--cs-white);
   }
 
+  :where(.file-preview-root):is(.bg-clip-padding), :where(.file-preview-root) .bg-clip-padding {
+    background-clip: padding-box;
+  }
+
   :where(.file-preview-root):is(.fill-current), :where(.file-preview-root) .fill-current {
     fill: currentColor;
   }
 
-  :where(.file-preview-root):is(.fill-neutral-900), :where(.file-preview-root) .fill-neutral-900 {
-    fill: var(--cs-neutral-900);
+  :where(.file-preview-root):is(.fill-neutral-100), :where(.file-preview-root) .fill-neutral-100 {
+    fill: var(--cs-neutral-100);
   }
 
-  :where(.file-preview-root):is(.stroke-neutral-900), :where(.file-preview-root) .stroke-neutral-900 {
-    stroke: var(--cs-neutral-900);
+  :where(.file-preview-root):is(.stroke-neutral-100), :where(.file-preview-root) .stroke-neutral-100 {
+    stroke: var(--cs-neutral-100);
   }
 
   :where(.file-preview-root):is(.stroke-2), :where(.file-preview-root) .stroke-2 {
@@ -1055,6 +1095,10 @@
     padding: 3px;
   }
 
+  :where(.file-preview-root):is(.px-0\.5), :where(.file-preview-root) .px-0\.5 {
+    padding-inline: calc(var(--spacing) * .5);
+  }
+
   :where(.file-preview-root):is(.px-1), :where(.file-preview-root) .px-1 {
     padding-inline: var(--spacing);
   }
@@ -1079,6 +1123,10 @@
     padding-inline: calc(var(--spacing) * 6);
   }
 
+  :where(.file-preview-root):is(.py-0\.5), :where(.file-preview-root) .py-0\.5 {
+    padding-block: calc(var(--spacing) * .5);
+  }
+
   :where(.file-preview-root):is(.py-1), :where(.file-preview-root) .py-1 {
     padding-block: var(--spacing);
   }
@@ -1103,6 +1151,10 @@
     padding-top: calc(var(--spacing) * 14);
   }
 
+  :where(.file-preview-root):is(.pr-0\.5), :where(.file-preview-root) .pr-0\.5 {
+    padding-right: calc(var(--spacing) * .5);
+  }
+
   :where(.file-preview-root):is(.pr-2), :where(.file-preview-root) .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
@@ -1111,6 +1163,10 @@
     padding-bottom: 0;
   }
 
+  :where(.file-preview-root):is(.pb-0\.5), :where(.file-preview-root) .pb-0\.5 {
+    padding-bottom: calc(var(--spacing) * .5);
+  }
+
   :where(.file-preview-root):is(.pb-20), :where(.file-preview-root) .pb-20 {
     padding-bottom: calc(var(--spacing) * 20);
   }
@@ -1229,10 +1285,6 @@
     color: var(--muted-foreground);
   }
 
-  :where(.file-preview-root):is(.text-neutral-50), :where(.file-preview-root) .text-neutral-50 {
-    color: var(--cs-neutral-50);
-  }
-
   :where(.file-preview-root):is(.text-neutral-900), :where(.file-preview-root) .text-neutral-900 {
     color: var(--cs-neutral-900);
   }
@@ -1349,6 +1401,12 @@
     }
   }
 
+  :where(.file-preview-root):is(.transition-\[border-width\,background-color\]), :where(.file-preview-root) .transition-\[border-width\,background-color\] {
+    transition-property: border-width, background-color;
+    transition-timing-function: var(--fp-tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--fp-tw-duration, var(--default-transition-duration));
+  }
+
   :where(.file-preview-root):is(.transition-\[color\,box-shadow\]), :where(.file-preview-root) .transition-\[color\,box-shadow\] {
     transition-property: color, box-shadow;
     transition-timing-function: var(--fp-tw-ease, var(--default-transition-timing-function));
@@ -1371,6 +1429,16 @@
     transition-property: none;
   }
 
+  :where(.file-preview-root):is(.duration-150), :where(.file-preview-root) .duration-150 {
+    --fp-tw-duration: .15s;
+    transition-duration: .15s;
+  }
+
+  :where(.file-preview-root):is(.duration-200), :where(.file-preview-root) .duration-200 {
+    --fp-tw-duration: .2s;
+    transition-duration: .2s;
+  }
+
   :where(.file-preview-root):is(.fill-mode-both), :where(.file-preview-root) .fill-mode-both {
     --fp-tw-animation-fill-mode: both;
     animation-fill-mode: both;
@@ -1403,6 +1471,23 @@
     animation-play-state: running;
   }
 
+  @media (hover: hover) {
+    :where(.file-preview-root):is(.group-hover\/scrollbar\:border-0:is(:where(.group\/scrollbar):hover *)), :where(.file-preview-root) .group-hover\/scrollbar\:border-0:is(:where(.group\/scrollbar):hover *) {
+      border-style: var(--fp-tw-border-style);
+      border-width: 0;
+    }
+
+    :where(.file-preview-root):is(.group-hover\/scrollbar\:bg-\[var\(--scrollbar-thumb-hover\,color-mix\(in_srgb\,var\(--foreground\)_20\%\,transparent\)\)\]:is(:where(.group\/scrollbar):hover *)), :where(.file-preview-root) .group-hover\/scrollbar\:bg-\[var\(--scrollbar-thumb-hover\,color-mix\(in_srgb\,var\(--foreground\)_20\%\,transparent\)\)\]:is(:where(.group\/scrollbar):hover *) {
+      background-color: var(--scrollbar-thumb-hover, var(--foreground));
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.file-preview-root):is(.group-hover\/scrollbar\:bg-\[var\(--scrollbar-thumb-hover\,color-mix\(in_srgb\,var\(--foreground\)_20\%\,transparent\)\)\]:is(:where(.group\/scrollbar):hover *)), :where(.file-preview-root) .group-hover\/scrollbar\:bg-\[var\(--scrollbar-thumb-hover\,color-mix\(in_srgb\,var\(--foreground\)_20\%\,transparent\)\)\]:is(:where(.group\/scrollbar):hover *) {
+        background-color: var(--scrollbar-thumb-hover, color-mix(in srgb,var(--foreground) 20%,transparent));
+      }
+    }
+  }
+
   :where(.file-preview-root):is(.selection\:bg-primary ::selection), :where(.file-preview-root) .selection\:bg-primary ::selection {
     background-color: var(--primary);
   }
@@ -1536,10 +1621,6 @@
   }
 
   @media (hover: hover) {
-    :where(.file-preview-root):is(.hover\:\[scrollbar-color\:var\(--scrollbar-thumb-hover\)_transparent\]:hover), :where(.file-preview-root) .hover\:\[scrollbar-color\:var\(--scrollbar-thumb-hover\)_transparent\]:hover {
-      scrollbar-color: var(--scrollbar-thumb-hover) transparent;
-    }
-
     :where(.file-preview-root):is(.hover\:bg-accent:hover), :where(.file-preview-root) .hover\:bg-accent:hover {
       background-color: var(--accent);
     }
@@ -1756,10 +1837,6 @@
     opacity: .4;
   }
 
-  :where(.file-preview-root):is(.data-\[scrolling\=true\]\:\[scrollbar-color\:var\(--scrollbar-thumb\)_transparent\][data-scrolling="true"]), :where(.file-preview-root) .data-\[scrolling\=true\]\:\[scrollbar-color\:var\(--scrollbar-thumb\)_transparent\][data-scrolling="true"] {
-    scrollbar-color: var(--scrollbar-thumb) transparent;
-  }
-
   :where(.file-preview-root):is(.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"]), :where(.file-preview-root) .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
     --fp-tw-enter-translate-y: calc(2*var(--spacing)*-1);
   }
@@ -1862,8 +1939,12 @@
     --fp-tw-exit-translate-y: calc(4*var(--spacing));
   }
 
-  :where(.file-preview-root):is(.data-\[state\=closed\]\:zoom-out-99[data-state="closed"]), :where(.file-preview-root) .data-\[state\=closed\]\:zoom-out-99[data-state="closed"] {
-    --fp-tw-exit-scale: calc(99*1%);
+  :where(.file-preview-root):is(.data-\[state\=hidden\]\:animate-out[data-state="hidden"]), :where(.file-preview-root) .data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
+    animation: fp-exit var(--fp-tw-animation-duration, var(--fp-tw-duration, .15s))var(--fp-tw-ease, ease)var(--fp-tw-animation-delay, 0s)var(--fp-tw-animation-iteration-count, 1)var(--fp-tw-animation-direction, normal)var(--fp-tw-animation-fill-mode, none);
+  }
+
+  :where(.file-preview-root):is(.data-\[state\=hidden\]\:fade-out-0[data-state="hidden"]), :where(.file-preview-root) .data-\[state\=hidden\]\:fade-out-0[data-state="hidden"] {
+    --fp-tw-exit-opacity: 0;
   }
 
   :where(.file-preview-root):is(.data-\[state\=open\]\:animate-in[data-state="open"]), :where(.file-preview-root) .data-\[state\=open\]\:animate-in[data-state="open"] {
@@ -1913,14 +1994,14 @@
     --fp-tw-enter-translate-y: calc(4*var(--spacing));
   }
 
-  :where(.file-preview-root):is(.data-\[state\=open\]\:zoom-in-99[data-state="open"]), :where(.file-preview-root) .data-\[state\=open\]\:zoom-in-99[data-state="open"] {
-    --fp-tw-enter-scale: calc(99*1%);
-  }
-
   @media (prefers-reduced-motion: reduce) {
     :where(.file-preview-root):is(.motion-reduce\:animate-none), :where(.file-preview-root) .motion-reduce\:animate-none {
       animation: none;
     }
+
+    :where(.file-preview-root):is(.motion-reduce\:transition-none), :where(.file-preview-root) .motion-reduce\:transition-none {
+      transition-property: none;
+    }
   }
 
   @media (min-width: 40rem) {
@@ -1998,18 +2079,26 @@
     background-color: var(--cs-neutral-100);
   }
 
-  :where(.file-preview-root):is(.dark\:fill-neutral-100:is(.dark *)), :where(.file-preview-root) .dark\:fill-neutral-100:is(.dark *) {
-    fill: var(--cs-neutral-100);
+  :where(.file-preview-root):is(.dark\:bg-neutral-900:is(.dark *)), :where(.file-preview-root) .dark\:bg-neutral-900:is(.dark *) {
+    background-color: var(--cs-neutral-900);
   }
 
-  :where(.file-preview-root):is(.dark\:stroke-neutral-100:is(.dark *)), :where(.file-preview-root) .dark\:stroke-neutral-100:is(.dark *) {
-    stroke: var(--cs-neutral-100);
+  :where(.file-preview-root):is(.dark\:fill-neutral-900:is(.dark *)), :where(.file-preview-root) .dark\:fill-neutral-900:is(.dark *) {
+    fill: var(--cs-neutral-900);
+  }
+
+  :where(.file-preview-root):is(.dark\:stroke-neutral-900:is(.dark *)), :where(.file-preview-root) .dark\:stroke-neutral-900:is(.dark *) {
+    stroke: var(--cs-neutral-900);
   }
 
   :where(.file-preview-root):is(.dark\:text-muted-foreground:is(.dark *)), :where(.file-preview-root) .dark\:text-muted-foreground:is(.dark *) {
     color: var(--muted-foreground);
   }
 
+  :where(.file-preview-root):is(.dark\:text-neutral-50:is(.dark *)), :where(.file-preview-root) .dark\:text-neutral-50:is(.dark *) {
+    color: var(--cs-neutral-50);
+  }
+
   :where(.file-preview-root):is(.dark\:text-neutral-100:is(.dark *)), :where(.file-preview-root) .dark\:text-neutral-100:is(.dark *) {
     color: var(--cs-neutral-100);
   }
@@ -2194,29 +2283,6 @@
     color: var(--destructive) !important;
   }
 
-  .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-\[var\(--scrollbar-thumb\)\]::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar-thumb);
-  }
-
-  .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-transparent::-webkit-scrollbar-thumb {
-    background-color: #0000;
-  }
-
-  .\[\&\:\:-webkit-scrollbar-thumb\]\:transition-\[background\]::-webkit-scrollbar-thumb {
-    transition-property: background;
-    transition-timing-function: var(--fp-tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--fp-tw-duration, var(--default-transition-duration));
-  }
-
-  .\[\&\:\:-webkit-scrollbar-thumb\]\:duration-\[2000ms\]::-webkit-scrollbar-thumb {
-    --fp-tw-duration: 2s;
-    transition-duration: 2s;
-  }
-
-  .\[\&\:\:-webkit-scrollbar-thumb\:hover\]\:bg-\[var\(--scrollbar-thumb-hover\)\]::-webkit-scrollbar-thumb:hover {
-    background-color: var(--scrollbar-thumb-hover);
-  }
-
   .\[\&\:not\(\:first-child\)\]\:before\:mr-3:not(:first-child):before {
     content: var(--fp-tw-content);
     margin-right: calc(var(--spacing) * 3);
@@ -2860,6 +2926,28 @@
   --code-block: #e3e3e3;
   --inline-code: #0000000f;
   --inline-code-foreground: #da615c;
+  --cherry-code-background: transparent;
+  --cherry-code-foreground: var(--foreground);
+  --cherry-code-muted: var(--muted-foreground);
+  --cherry-code-selection: var(--link);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :where(.file-preview-root) {
+    --cherry-code-selection: color-mix(in oklab, var(--link) 20%, transparent);
+  }
+}
+
+:where(.file-preview-root) {
+  --cherry-code-keyword: var(--cs-violet-700);
+  --cherry-code-string: var(--cs-emerald-700);
+  --cherry-code-constant: var(--cs-amber-700);
+  --cherry-code-type: var(--cs-cyan-700);
+  --cherry-code-function: var(--cs-blue-600);
+  --cherry-code-tag: var(--cs-rose-700);
+  --cherry-code-link: var(--link);
+  --cherry-code-inserted: var(--cs-green-700);
+  --cherry-code-deleted: var(--cs-red-600);
   --reference: #cfe1ff;
   --reference-foreground: #000;
   --reference-subtle: #f1f7ff;
@@ -2867,11 +2955,14 @@
   --highlight: var(--cs-amber-200);
   --highlight-accent: var(--cs-orange-400);
   --markdown-important: var(--cs-violet-600);
+  --chat-message-well: var(--cs-background);
+  --chat-message-well-solid: var(--cs-background);
+  --composer-surface: var(--cs-card);
   --chat-user: #0000000b;
-  --resource-list-row-hover: var(--background-subtle);
+  --resource-list-row-hover: var(--resource-list-row-selected);
   --resource-list-row-active: var(--accent);
   --resource-list-row-active-foreground: var(--accent-foreground);
-  --resource-list-row-selected: var(--accent);
+  --resource-list-row-selected: oklch(0% 0 0 / .08);
   --resource-list-row-selected-foreground: var(--accent-foreground);
 }
 
@@ -2879,6 +2970,14 @@
   --link: var(--cs-blue-400);
   --code-block: #323232;
   --inline-code: #323232;
+  --cherry-code-keyword: var(--cs-violet-300);
+  --cherry-code-string: var(--cs-emerald-300);
+  --cherry-code-constant: var(--cs-orange-300);
+  --cherry-code-type: var(--cs-cyan-300);
+  --cherry-code-function: var(--cs-blue-300);
+  --cherry-code-tag: var(--cs-rose-300);
+  --cherry-code-inserted: var(--cs-green-400);
+  --cherry-code-deleted: var(--cs-red-400);
   --reference: #404040;
   --reference-foreground: #fff;
   --reference-subtle: #0b0e12;
@@ -2886,7 +2985,11 @@
   --highlight: var(--cs-amber-900);
   --highlight-accent: var(--cs-orange-800);
   --markdown-important: var(--cs-violet-400);
-  --chat-user: #ffffff14;
+  --chat-message-well: oklch(17.27% 0 0 / .55);
+  --chat-message-well-solid: oklch(19.1% 0 0);
+  --composer-surface: #2f2f2f;
+  --chat-user: oklch(23.93% 0 0);
+  --resource-list-row-selected: oklch(100% 0 0 / .14);
 }
 
 @property --fp-tw-animation-delay {
@@ -3185,6 +3288,11 @@
   initial-value: solid;
 }
 
+@property --fp-tw-duration {
+  syntax: "*";
+  inherits: false
+}
+
 @property --fp-tw-content {
   syntax: "*";
   inherits: false;
@@ -3196,11 +3304,6 @@
   inherits: false
 }
 
-@property --fp-tw-duration {
-  syntax: "*";
-  inherits: false
-}
-
 @keyframes fp-spin {
   to {
     transform: rotate(360deg);