avo 4.0.0.beta.2 → 4.0.0.beta.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 19ff8cb45166e5eba8e5f34a5077f598110351433d7617aa0acb0ef16024d503
-  data.tar.gz: f959099635501f862297712d3a67de1cde5e3b2eda3872913deef69a2eea8412
+  metadata.gz: 8bc41072024aca335bb61ad71567c9654a2fa3efaa91cee5fa8ca97630fe352e
+  data.tar.gz: c1ee0a7f198c106a9ad0050698f248ccce32a3e684ab35b5cc9876aecd9fd6f6
 SHA512:
-  metadata.gz: f0483f39c5f03075b9ead52b593d5307e665b5993723ccad3877faa861c96edcd8ee1edf51050b1fc169c357c1781a23c4a794df9a9b599123509e91b4247979
-  data.tar.gz: fd7c1d840794b4a117f0730bb46836f0576de3d4826613da6bcb5b99ba56a80be61be189689a3969726cd8d9ee460507205acf4b739f1d409fff42f5fd065398
+  metadata.gz: 4e80b61da0c33adb3c3ec528e7541fdabf042645912cf87eac10b344061a4dff768120c5ec0845ce465b42824b994bb26763a02ed2b15fc8923d40b42601a37a
+  data.tar.gz: 3e0e5e9acca71e4b43764bf7f9c47ec3f337208ce65bf148be5cc12450ae2e7c19d6031399269416b4fa3dd343ff245dc5c584afbf1077303dbc7a07dda1801b

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (4.0.0.beta.2)
+    avo (4.0.0.beta.4)
       actionview (>= 6.1)
       active_link_to
       activerecord (>= 6.1)

data/app/assets/builds/avo/application.css

@@ -559,9 +559,6 @@
   .start-1 {
     inset-inline-start: calc(var(--spacing) * 1);
   }
-  .start-1\/2 {
-    inset-inline-start: calc(1/2 * 100%);
-  }
   .end {
     inset-inline-end: var(--spacing);
   }
@@ -966,12 +963,6 @@
   .h-40 {
     height: calc(var(--spacing) * 40);
   }
-  .h-52 {
-    height: calc(var(--spacing) * 52);
-  }
-  .h-64 {
-    height: calc(var(--spacing) * 64);
-  }
   .h-\[0\.75rem\] {
     height: 0.75rem;
   }
@@ -1628,10 +1619,6 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
-  .border-b-2 {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 2px;
-  }
   .border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
@@ -1669,9 +1656,6 @@
   .border-blue-600 {
     border-color: var(--color-blue-600);
   }
-  .border-content-secondary {
-    border-color: var(--color-content-secondary);
-  }
   .border-cyan-300 {
     border-color: var(--color-cyan-300);
   }
@@ -2233,9 +2217,6 @@
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
-  .pb-3 {
-    padding-bottom: calc(var(--spacing) * 3);
-  }
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
@@ -2428,9 +2409,6 @@
   .text-fuchsia-700 {
     color: var(--color-fuchsia-700);
   }
-  .text-gray-300 {
-    color: var(--color-gray-300);
-  }
   .text-gray-400 {
     color: var(--color-gray-400);
   }
@@ -7669,13 +7647,34 @@
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
   }
+  kbd {
+    display: inline-flex;
+    min-width: calc(var(--spacing) * 5);
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-sm);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-secondary);
+    background-color: var(--color-secondary);
+    padding-inline: calc(var(--spacing) * 1);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-content-secondary);
+    box-shadow: var(--box-shadow-search-input-shortcut);
+  }
+  kbd.kbd--called {
+    opacity: 0.4;
+  }
   @layer base {
     a {
       color: var(--color-info-content);
       &:active, &:hover {
-        color: color-mix(in srgb, oklch(54.6% 0.245 262.881), oklch(20.46% 0.0000 89.88) 30%);
+        color: color-mix( in oklab, oklch(54.6% 0.245 262.881), oklch(20.46% 0.0000 89.88) 30% );
         @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, var(--color-info-content), var(--color-content) 30%);
+          color: color-mix( in oklab, var(--color-info-content), var(--color-content) 30% );
         }
       }
       &:focus-visible {
@@ -7927,6 +7926,9 @@
     @media (width >= 40rem) {
       flex-direction: row;
     }
+    @media (width >= 40rem) {
+      flex-wrap: wrap;
+    }
     @media (width >= 40rem) {
       align-items: flex-end;
     }
@@ -7937,6 +7939,7 @@
   .pagination__per-page {
     --pagination-per-page-width: 10rem;
     display: flex;
+    flex-shrink: 0;
     align-items: center;
   }
   .pagination__per-page-input {
@@ -7995,14 +7998,32 @@
     --tw-font-weight: var(--font-weight-normal);
     font-weight: var(--font-weight-normal);
   }
+  .pagination__controls-wrap {
+    display: flex;
+    width: 100%;
+    min-width: calc(var(--spacing) * 0);
+    @media (width >= 40rem) {
+      min-width: 22rem;
+    }
+    @media (width >= 40rem) {
+      flex: 1 1 28rem;
+    }
+    @media (width >= 40rem) {
+      justify-content: flex-end;
+    }
+  }
   .pagination__controls {
     display: flex;
-    width: fit-content;
-    flex-shrink: 0;
+    width: 100%;
+    max-width: 100%;
+    min-width: calc(var(--spacing) * 0);
+    --tw-pan-x: pan-x;
+    touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,);
     align-items: center;
     gap: calc(var(--spacing) * 3);
-    overflow: hidden;
-    overflow: visible;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-x: contain;
     border-radius: var(--radius-lg);
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -8010,11 +8031,16 @@
     background-color: var(--color-primary);
     padding-inline-start: calc(var(--spacing) * 3);
     padding-inline-end: calc(var(--spacing) * 2);
+    @media (width >= 40rem) {
+      width: fit-content;
+    }
+    -webkit-overflow-scrolling: touch;
+    scrollbar-gutter: stable;
   }
   .pagination__info {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
-    overflow: hidden;
     border-inline-end-style: var(--tw-border-style);
     border-inline-end-width: 1px;
     border-color: var(--color-tertiary);
@@ -8026,7 +8052,6 @@
     line-height: calc(var(--spacing) * 5);
     --tw-font-weight: var(--font-weight-normal);
     font-weight: var(--font-weight-normal);
-    text-overflow: ellipsis;
     white-space: nowrap;
     color: var(--color-content);
     &:last-child {
@@ -8041,12 +8066,15 @@
   }
   .pagination__nav {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
   }
   .pagy.series-nav {
     display: flex;
+    min-width: max-content;
     align-items: center;
     gap: calc(var(--spacing) * 0.5);
+    white-space: nowrap;
     a[role="separator"] {
       padding-inline: calc(var(--spacing) * 2);
       font-size: var(--text-sm);
@@ -8473,10 +8501,10 @@
   .sidebar-toggle-icon--closed {
     display: none;
   }
-  button[data-sidebar-state='closed'] .sidebar-toggle-icon--open {
+  button[data-sidebar-state="closed"] .sidebar-toggle-icon--open {
     display: none;
   }
-  button[data-sidebar-state='closed'] .sidebar-toggle-icon--closed {
+  button[data-sidebar-state="closed"] .sidebar-toggle-icon--closed {
     display: inline-flex;
   }
   .avo-sidebar {
@@ -10775,6 +10803,203 @@
     --badge-bg: var(--color-rose-400);
     --badge-text: var(--color-rose-600);
   }
+  .state {
+    margin-inline: auto;
+    display: flex;
+    width: 100%;
+    max-width: calc(var(--spacing) * 72);
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing) * 3);
+    border-radius: var(--radius-lg);
+    background-color: var(--color-background);
+    padding: calc(var(--spacing) * 6);
+    text-align: center;
+  }
+  .state__illustration {
+    position: relative;
+    display: flex;
+    height: calc(var(--spacing) * 36);
+    width: calc(var(--spacing) * 60);
+    align-items: center;
+    justify-content: center;
+  }
+  .state__card {
+    position: absolute;
+    display: flex;
+    height: calc(var(--spacing) * 11);
+    width: calc(var(--spacing) * 44);
+    align-items: center;
+    gap: calc(var(--spacing) * 1.5);
+    border-radius: var(--radius-lg);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-secondary);
+    padding: calc(var(--spacing) * 2.5);
+    background: linear-gradient(194deg, var(--color-primary) 27%, var(--color-background) 65%);
+    box-shadow: var(--box-shadow-card);
+  }
+  .state__card--top {
+    inset-inline-start: calc(var(--spacing) * 0);
+    top: calc(var(--spacing) * 0);
+  }
+  .state__card--middle {
+    inset-inline-start: calc(var(--spacing) * 14);
+    top: calc(var(--spacing) * 8);
+  }
+  .state__card--bottom {
+    inset-inline-start: calc(var(--spacing) * 5);
+    top: calc(var(--spacing) * 20);
+  }
+  .state__badge {
+    display: flex;
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: calc(infinity * 1px);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-leading: 1;
+    line-height: 1;
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-content);
+    background: color-mix(in srgb, oklch(92.80% 0.0000 89.88) 88%, #fff);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in oklab, var(--color-tertiary) 88%, var(--color-primary));
+    }
+  }
+  .state__body {
+    display: flex;
+    min-width: calc(var(--spacing) * 0);
+    flex: 1;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 1);
+  }
+  .state__line {
+    display: block;
+    height: calc(var(--spacing) * 1.5);
+    border-radius: calc(infinity * 1px);
+    background: color-mix(in srgb, oklch(92.80% 0.0000 89.88) 78%, #fff);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in oklab, var(--color-tertiary) 78%, var(--color-primary));
+    }
+  }
+  .state__line--title {
+    opacity: 75%;
+  }
+  .state__line--large {
+    width: calc(var(--spacing) * 14);
+  }
+  .state__line--medium {
+    width: calc(var(--spacing) * 12);
+  }
+  .state__line--small {
+    width: calc(var(--spacing) * 11);
+  }
+  .state__line--content {
+    width: 100%;
+  }
+  .state__message {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-leading: calc(var(--spacing) * 6);
+    line-height: calc(var(--spacing) * 6);
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+    color: var(--color-content-secondary);
+  }
+  .state--frame-load-failed {
+    max-width: calc(var(--spacing) * 96);
+    gap: calc(var(--spacing) * 1);
+  }
+  .state__document {
+    position: absolute;
+    display: flex;
+    height: calc(var(--spacing) * 28);
+    width: calc(var(--spacing) * 20);
+    flex-direction: column;
+    border-radius: var(--radius-lg);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-secondary);
+    padding: calc(var(--spacing) * 0.5);
+    background: linear-gradient(235deg, var(--color-primary) 27%, var(--color-background) 65%);
+  }
+  .state__document--start {
+    inset-inline-start: calc(var(--spacing) * 4);
+    rotate: -21deg;
+  }
+  .state__document--center {
+    inset-inline-start: calc(var(--spacing) * 16);
+    z-index: 10;
+  }
+  .state__document--end {
+    inset-inline-start: calc(var(--spacing) * 24);
+    z-index: 0;
+    rotate: 21deg;
+  }
+  .state__document-body {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    border-radius: var(--radius-lg);
+    padding: calc(var(--spacing) * 2.5);
+    box-shadow: var(--box-shadow-card);
+  }
+  .state__document-lines {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .state__document-line {
+    display: block;
+    height: calc(var(--spacing) * 1);
+    width: 100%;
+    border-radius: calc(infinity * 1px);
+    background: color-mix(in srgb, oklch(92.80% 0.0000 89.88) 78%, #fff);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in oklab, var(--color-tertiary) 78%, var(--color-primary));
+    }
+  }
+  .state__document-line--short {
+    width: calc(var(--spacing) * 10);
+  }
+  .state__magnifier {
+    position: absolute;
+    inset-inline-start: 30%;
+    top: 30%;
+    z-index: 20;
+    background-image: none;
+  }
+  .state__magnifier-icon {
+    width: calc(var(--spacing) * 24);
+    height: calc(var(--spacing) * 24);
+    color: var(--color-content-secondary);
+    opacity: 20%;
+  }
+  .state__note {
+    text-align: center;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+    color: var(--color-content);
+  }
+  .state__link {
+    color: color-mix(in srgb, oklch(54.6% 0.245 262.881), oklch(20.46% 0.0000 89.88) 10%);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-info-content), var(--color-content) 10%);
+    }
+  }
   .file-upload-input {
     position: relative;
     display: flex;
@@ -11327,25 +11552,6 @@
       color: var(--color-content-secondary);
       padding-inline-end: var(--input-icon-offset);
     }
-    .search-input__shortcut {
-      display: flex;
-      min-width: calc(var(--spacing) * 5);
-      align-items: center;
-      justify-content: center;
-      border-radius: var(--radius-sm);
-      border-style: var(--tw-border-style);
-      border-width: 1px;
-      border-color: var(--color-secondary);
-      background-color: var(--color-secondary);
-      padding-inline: calc(var(--spacing) * 1);
-      padding-block: 1px;
-      font-size: var(--text-xs);
-      line-height: var(--tw-leading, var(--text-xs--line-height));
-      --tw-font-weight: var(--font-weight-semibold);
-      font-weight: var(--font-weight-semibold);
-      line-height: var(--input-leading);
-      box-shadow: var(--box-shadow-search-input-shortcut);
-    }
     input[type="range"] {
       accent-color: var(--color-accent);
     }
@@ -12711,6 +12917,89 @@
     background-color: var(--color-secondary);
     padding-inline: calc(var(--spacing) * 0.5);
   }
+  .hotkey__grid {
+    padding: calc(var(--spacing) * 6);
+    columns: 1;
+    column-gap: 2rem;
+    @media (min-width: 40rem) {
+      columns: 2;
+    }
+  }
+  .hotkey__section {
+    margin-bottom: calc(var(--spacing) * 10);
+    min-width: calc(var(--spacing) * 0);
+    break-inside: avoid;
+  }
+  .hotkey__section-title {
+    margin-bottom: calc(var(--spacing) * 4);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+    color: var(--color-content-secondary);
+    text-transform: uppercase;
+  }
+  .hotkey__section-body {
+    margin: calc(var(--spacing) * 0);
+    display: flex;
+    width: 100%;
+    list-style-type: none;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 2);
+    padding: calc(var(--spacing) * 0);
+  }
+  .hotkey__row {
+    display: flex;
+    width: 100%;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: calc(var(--spacing) * 4);
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-color: var(--color-tertiary);
+    --tw-leading: calc(var(--spacing) * 6);
+    line-height: calc(var(--spacing) * 6);
+    &:last-child {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0px;
+    }
+  }
+  .hotkey__action {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .hotkey__keys {
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    column-gap: calc(var(--spacing) * 1.5);
+    row-gap: calc(var(--spacing) * 1.5);
+    padding-top: calc(var(--spacing) * 0.5);
+  }
+  .hotkey__or {
+    padding-inline: calc(var(--spacing) * 1);
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-leading: calc(var(--spacing) * 6);
+    line-height: calc(var(--spacing) * 6);
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-content-secondary);
+  }
+  .hotkey__combo {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 1.5);
+  }
+  .hotkey__key-separator {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-content-secondary);
+  }
   .tippy-box[data-theme~='basic'] {
     border-radius: var(--radius-md);
     border-style: var(--tw-border-style);
@@ -13891,6 +14180,18 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-pan-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-pan-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-pinch-zoom {
+  syntax: "*";
+  inherits: false;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -13974,6 +14275,9 @@
       --tw-ease: initial;
       --tw-content: "";
       --tw-outline-style: solid;
+      --tw-pan-x: initial;
+      --tw-pan-y: initial;
+      --tw-pinch-zoom: initial;
     }
   }
 }