@backmatter/studio 0.0.6 → 0.0.8

package/dist/studio.css

@@ -11,6 +11,10 @@
     inset: 0;
   }
 
+  .x184nht {
+    inset: var(--x1o7ezzp);
+  }
+
   .xkdpibf {
     margin: -1px;
   }
@@ -53,6 +57,14 @@
     border-color: #3f3f46;
   }
 
+  .x1dlxfug {
+    border-color: #ffffff1a;
+  }
+
+  .xe0g8ez {
+    border-color: #ffffffb8;
+  }
+
   .x9r1u3d {
     border-color: #0000;
   }
@@ -73,6 +85,10 @@
     border-color: var(--xz3qvk5);
   }
 
+  .x2u8bby {
+    border-radius: 0;
+  }
+
   .x1q4ynmn {
     border-radius: 10px;
   }
@@ -85,6 +101,10 @@
     border-radius: 14px;
   }
 
+  .xgqmno8 {
+    border-radius: 16px;
+  }
+
   .x12oqio5 {
     border-radius: 4px;
   }
@@ -113,6 +133,14 @@
     border-radius: var(--x83d9l2);
   }
 
+  .xbsl7fq {
+    border-style: dashed;
+  }
+
+  .xng3xce {
+    border-style: none;
+  }
+
   .x1y0btm7 {
     border-style: solid;
   }
@@ -125,6 +153,14 @@
     border-width: 1px;
   }
 
+  .x9r2w2z {
+    border-width: 3px;
+  }
+
+  .x1oeqjk2 {
+    flex: 16rem;
+  }
+
   .x98rzlu {
     flex: 1;
   }
@@ -237,6 +273,10 @@
     padding-block: 0;
   }
 
+  .xp59q4u {
+    padding-block: 10px;
+  }
+
   .xsplgde {
     padding-block: 1px;
   }
@@ -245,6 +285,10 @@
     padding-block: 2px;
   }
 
+  .x62rkhy {
+    padding-block: 48px;
+  }
+
   .x1t0vds8 {
     padding-block: 6px;
   }
@@ -277,10 +321,18 @@
     padding-inline: 0;
   }
 
+  .x3y1lgt {
+    padding-inline: 3px;
+  }
+
   .xfn1xvj {
     padding-inline: 4px;
   }
 
+  .xdqyycr {
+    padding-inline: 8px;
+  }
+
   .x173sf5p {
     padding-inline: var(--x1ft7ks7);
   }
@@ -317,6 +369,12 @@
     text-decoration: none;
   }
 
+  @supports not (backdrop-filter: blur(1px)) {
+    .xc3wmqa.xc3wmqa {
+      border-color: var(--xz3qvk5);
+    }
+  }
+
   .x1cvt1xb:focus-within {
     border-color: color-mix(in srgb,var(--xw4dauw) 45%,var(--xz3qvk5));
   }
@@ -345,6 +403,10 @@
     border-color: var(--x1nzi8h4);
   }
 
+  .x1qk16kk:focus {
+    border-color: var(--xw4dauw);
+  }
+
   .x1uvtmcs:focus {
     outline: none;
   }
@@ -399,6 +461,10 @@
     align-items: flex-start;
   }
 
+  .x7a106z {
+    align-items: start;
+  }
+
   .x1qjc9v5 {
     align-items: stretch;
   }
@@ -411,6 +477,10 @@
     align-self: stretch;
   }
 
+  .x12l1aco {
+    animation-duration: .12s;
+  }
+
   .xw6taxk {
     animation-duration: .22s;
   }
@@ -435,6 +505,10 @@
     animation-iteration-count: infinite;
   }
 
+  .xqcmdr3 {
+    animation-name: x18re5ia-B;
+  }
+
   .xpedhrg {
     animation-name: x1fy8ia8-B;
   }
@@ -463,6 +537,26 @@
     animation-timing-function: linear;
   }
 
+  .x1plog1 {
+    aspect-ratio: 1;
+  }
+
+  .x1fx9mx7 {
+    backdrop-filter: blur(28px) saturate(1.15);
+  }
+
+  .x1cibs4p {
+    backdrop-filter: blur(28px) saturate(1.25);
+  }
+
+  .x1ydx4q1 {
+    backdrop-filter: blur(6px);
+  }
+
+  .x1dmgsgi {
+    backdrop-filter: blur(8px);
+  }
+
   .x1ta4xzc {
     -webkit-background-clip: text;
     background-clip: text;
@@ -472,6 +566,10 @@
     background-color: #0a0a0b;
   }
 
+  .xa7prz7 {
+    background-color: #0c0c0e;
+  }
+
   .xf6xdpg {
     background-color: #18181b;
   }
@@ -500,6 +598,10 @@
     background-color: #e8c547;
   }
 
+  .xemidvz {
+    background-color: #ea580c;
+  }
+
   .x1xcu8hf {
     background-color: #f2a65a;
   }
@@ -516,6 +618,14 @@
     background-color: currentColor;
   }
 
+  .x12oendf {
+    background-color: #0000006b;
+  }
+
+  .xa44r0r {
+    background-color: #00000073;
+  }
+
   .x8dftg {
     background-color: #dc262614;
   }
@@ -524,6 +634,30 @@
     background-color: #dc26261a;
   }
 
+  .x1vhaovx {
+    background-color: #18181b0f;
+  }
+
+  .xjwcffa {
+    background-color: #18181b47;
+  }
+
+  .x1iprpvx {
+    background-color: #ffffff17;
+  }
+
+  .x3tctdg {
+    background-color: #ffffff1f;
+  }
+
+  .x171ar3i {
+    background-color: #ffffffc7;
+  }
+
+  .xw7rek0 {
+    background-color: #242428b8;
+  }
+
   .x13t09jf {
     background-color: #0596691f;
   }
@@ -572,6 +706,10 @@
     background-color: var(--x5y0tk9);
   }
 
+  .xoor36a {
+    background-color: var(--xadaimi);
+  }
+
   .x69djma {
     background-color: var(--xbtbsdh);
   }
@@ -632,6 +770,14 @@
     box-shadow: 0 1px 2px #18181b33;
   }
 
+  .xzlluq {
+    box-shadow: 0 28px 80px #18181b29, inset 0 0 0 1px #ffffff8c;
+  }
+
+  .x1jbtln9 {
+    box-shadow: 0 28px 90px #0000008c, inset 0 0 0 1px #ffffff12;
+  }
+
   .x1eqnfcb {
     box-shadow: 0 4px 12px #18181b29;
   }
@@ -640,6 +786,10 @@
     box-shadow: 0 8px 24px #18181b1f, 0 1px 2px #18181b0f;
   }
 
+  .x1gnnqk1 {
+    box-shadow: none;
+  }
+
   .x9f619 {
     box-sizing: border-box;
   }
@@ -660,6 +810,10 @@
     color: #d4d4d8;
   }
 
+  .x18jtpyt {
+    color: #dc2626;
+  }
+
   .x17ia0ru {
     color: #fafafa;
   }
@@ -756,6 +910,10 @@
     flex-direction: column;
   }
 
+  .x1q0g3np {
+    flex-direction: row;
+  }
+
   .x1c4vz4f {
     flex-grow: 0;
   }
@@ -868,6 +1026,10 @@
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   }
 
+  .x10vl0y4 {
+    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
+  }
+
   .xl56j7k {
     justify-content: center;
   }
@@ -892,18 +1054,22 @@
     letter-spacing: -.04em;
   }
 
-  .x16q24ku {
-    letter-spacing: .02em;
-  }
-
   .x1vyo3qp {
     letter-spacing: .04em;
   }
 
+  .x1dgsrnt {
+    letter-spacing: .06em;
+  }
+
   .x9pfba7 {
     letter-spacing: .08em;
   }
 
+  .x1dor1uw {
+    letter-spacing: .1em;
+  }
+
   .x1u7k74 {
     line-height: 1.2;
   }
@@ -932,6 +1098,10 @@
     line-height: 1;
   }
 
+  .x1xxsxie {
+    line-height: 14px;
+  }
+
   .x15bjb6t {
     line-height: inherit;
   }
@@ -940,10 +1110,22 @@
     margin-inline-end: var(--x1uiwg42);
   }
 
+  .x19kjcj4 {
+    object-fit: contain;
+  }
+
   .xl1xv1r {
     object-fit: cover;
   }
 
+  .x3onkmb {
+    opacity: .35;
+  }
+
+  .xyd83as {
+    opacity: .45;
+  }
+
   .xbyyjgo {
     opacity: .5;
   }
@@ -972,10 +1154,34 @@
     opacity: 0;
   }
 
+  .x1hc1fzr {
+    opacity: 1;
+  }
+
+  .x1ljc5jn {
+    outline-color: var(--x1nzi8h4);
+  }
+
+  .x1ewu8gn {
+    outline-offset: 3px;
+  }
+
+  .xaatb59 {
+    outline-style: solid;
+  }
+
   .x1k57tk5 {
     outline-width: 0;
   }
 
+  .x1de99jn {
+    outline-width: 2px;
+  }
+
+  .xj0a0fe {
+    overflow-wrap: anywhere;
+  }
+
   .x1wnygum {
     padding-inline-end: var(--x1lzhbes);
   }
@@ -1012,10 +1218,6 @@
     resize: vertical;
   }
 
-  .x140o2bo {
-    table-layout: fixed;
-  }
-
   .x2b8uid {
     text-align: center;
   }
@@ -1104,6 +1306,10 @@
     transform: translate(-50%, -50%);
   }
 
+  .xgryjkp {
+    transform: translateX(-.5px);
+  }
+
   .xuuh30 {
     transform: translateX(-50%);
   }
@@ -1116,6 +1322,10 @@
     transform: translateX(16px);
   }
 
+  .x1cb1t30 {
+    transform: translateY(-50%);
+  }
+
   .xgdialr {
     transition-duration: .12s;
   }
@@ -1124,6 +1334,10 @@
     transition-duration: .15s;
   }
 
+  .x9i6iqp {
+    transition-duration: .16s;
+  }
+
   .x1g2r6go {
     transition-duration: .1s;
   }
@@ -1156,6 +1370,10 @@
     transition-property: transform;
   }
 
+  .xxrbq2n {
+    transition-property: width;
+  }
+
   .x1ys8gui {
     transition-timing-function: cubic-bezier(.215, .61, .355, 1);
   }
@@ -1168,15 +1386,15 @@
     transition-timing-function: ease;
   }
 
+  .xcj1dhv {
+    transition-timing-function: linear;
+  }
+
   .x87ps6o {
     -webkit-user-select: none;
     user-select: none;
   }
 
-  .xxymvpz {
-    vertical-align: middle;
-  }
-
   .xuxw1ft {
     white-space: nowrap;
   }
@@ -1189,6 +1407,10 @@
     white-space: pre;
   }
 
+  .x1yn0g08 {
+    word-break: break-all;
+  }
+
   .x13faqbe {
     word-break: break-word;
   }
@@ -1225,11 +1447,25 @@
     z-index: var(--xywwi7m);
   }
 
+  @supports not (backdrop-filter: blur(1px)) {
+    .x12ghxi3.x12ghxi3 {
+      background-color: var(--x1dudhym);
+    }
+
+    .x1wk1ibz.x1wk1ibz {
+      box-shadow: 0 16px 48px #00000073;
+    }
+
+    .x7gv546.x7gv546 {
+      box-shadow: 0 16px 48px #18181b33;
+    }
+  }
+
   .x1xh3kk4:focus-visible {
     color: var(--x11n7hvk);
   }
 
-  .x1yxvn1h:focus-visible, .xh5016t:focus-within {
+  .x1yxvn1h:focus-visible {
     outline-color: var(--x1nzi8h4);
   }
 
@@ -1237,7 +1473,7 @@
     outline-offset: -1px;
   }
 
-  .x1bqaal:focus-visible, .xv19q9a:focus-within {
+  .x1bqaal:focus-visible {
     outline-offset: -2px;
   }
 
@@ -1249,15 +1485,11 @@
     outline-offset: 2px;
   }
 
-  .x14xc8xn:focus-within, .x9v5kkp:focus-visible {
+  .x9v5kkp:focus-visible {
     outline-style: solid;
   }
 
-  .x1x65lqo:focus-visible {
-    outline-width: 0;
-  }
-
-  .x16gxa91:focus-within, .x784prv:focus-visible {
+  .x784prv:focus-visible {
     outline-width: 2px;
   }
 
@@ -1341,12 +1573,26 @@
     .x1wecdhn.x1wecdhn {
       cursor: col-resize;
     }
+  }
+
+  @media (width <= 800px) {
+    .x1ruhwu5.x1ruhwu5 {
+      flex-direction: column;
+    }
+  }
 
+  @media (width >= 1024px) {
     .x1p892re.x1p892re {
       flex-direction: row;
     }
   }
 
+  @media (hover: hover) {
+    .x1kp7a9n.x1kp7a9n {
+      opacity: 0;
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .x12w9bfk.x12w9bfk {
       transition-duration: 0s;
@@ -1354,10 +1600,18 @@
   }
 
   @media (hover: hover) {
+    .x1e7vmwq.x1e7vmwq:hover [data-folder-action] {
+      opacity: 1;
+    }
+
     .xq3txz7.xq3txz7:hover {
       background-color: #e4e4e7;
     }
 
+    .x1h6wuyy.x1h6wuyy:hover {
+      background-color: #0000;
+    }
+
     .x2q2s9b.x2q2s9b:hover {
       background-color: var(--x1vnpaut);
     }
@@ -1386,6 +1640,10 @@
       color: var(--x5y0tk9);
     }
 
+    .xu7p28h.xu7p28h:hover {
+      color: var(--xw4dauw);
+    }
+
     .x5tu6sr.x5tu6sr:hover {
       opacity: .9;
     }
@@ -1403,6 +1661,14 @@
     border-bottom-color: var(--xz3qvk5);
   }
 
+  .x1sjlhjy {
+    border-bottom-left-radius: var(--x83d9l2);
+  }
+
+  .x11eqygd {
+    border-bottom-right-radius: var(--x83d9l2);
+  }
+
   .x1q0q8m5 {
     border-bottom-style: solid;
   }
@@ -1419,6 +1685,10 @@
     border-left-style: solid;
   }
 
+  .xe0pwq {
+    border-left-width: 1px;
+  }
+
   .x19sr0n1 {
     border-left-width: 2px;
   }
@@ -1463,6 +1733,10 @@
     bottom: calc(48px + env(safe-area-inset-bottom, 0px));
   }
 
+  .x179bw4w {
+    bottom: var(--x1o7ezzp);
+  }
+
   .x1sf7pbd {
     bottom: var(--xvc7yhn);
   }
@@ -1479,6 +1753,10 @@
     height: 12px;
   }
 
+  .x1v9usgg {
+    height: 14px;
+  }
+
   .xlup9mm {
     height: 16px;
   }
@@ -1515,10 +1793,18 @@
     height: 30px;
   }
 
+  .x10w6t97 {
+    height: 32px;
+  }
+
   .xc9qbxq {
     height: 36px;
   }
 
+  .x1q7yecz {
+    height: 4.5rem;
+  }
+
   .x1vqgdyp {
     height: 40px;
   }
@@ -1531,6 +1817,14 @@
     height: 48px;
   }
 
+  .xnnlda6 {
+    height: 56px;
+  }
+
+  .xols6we {
+    height: 6px;
+  }
+
   .xdaezf2 {
     height: 7rem;
   }
@@ -1547,6 +1841,10 @@
     height: min(640px, 100vh - 120px);
   }
 
+  .xpojsfq {
+    height: min(720px, 80vh);
+  }
+
   .xu96u03 {
     left: 0;
   }
@@ -1567,6 +1865,10 @@
     left: var(--x1lzhbes);
   }
 
+  .xmbk2e7 {
+    left: var(--x1o7ezzp);
+  }
+
   .x1et7n7c {
     left: var(--xvc7yhn);
   }
@@ -1603,6 +1905,10 @@
     margin-left: auto;
   }
 
+  .x6wemzl {
+    margin-left: var(--x1uiwg42);
+  }
+
   .xack27t {
     margin-right: auto;
   }
@@ -1663,8 +1969,8 @@
     max-height: 280px;
   }
 
-  .x1sslpiy {
-    max-height: 320px;
+  .x10todyo {
+    max-height: min(52vh, 440px);
   }
 
   .x7y413o {
@@ -1743,6 +2049,10 @@
     min-height: 1.5em;
   }
 
+  .x1us19tq {
+    min-height: 100%;
+  }
+
   .x1ov3xa9 {
     min-height: 100dvh;
   }
@@ -1779,6 +2089,10 @@
     min-height: 32px;
   }
 
+  .xu0aao5 {
+    min-height: 36px;
+  }
+
   .x1gg8mnh {
     min-height: 44px;
   }
@@ -1795,6 +2109,10 @@
     min-width: 10rem;
   }
 
+  .xee1316 {
+    min-width: 11rem;
+  }
+
   .xcsk191 {
     min-width: 12px;
   }
@@ -1803,6 +2121,10 @@
     min-width: 12rem;
   }
 
+  .x1wu2mox {
+    min-width: 14px;
+  }
+
   .xfb3i0g {
     min-width: 180px;
   }
@@ -1811,10 +2133,26 @@
     min-width: 200px;
   }
 
+  .x1f4i7yj {
+    min-width: 252px;
+  }
+
+  .x18n5i07 {
+    min-width: 300px;
+  }
+
+  .x900493 {
+    min-width: 48px;
+  }
+
   .x9hgts1 {
     min-width: 52px;
   }
 
+  .xzhy1st {
+    min-width: 8rem;
+  }
+
   .x80t9vs {
     min-width: var(--anchor-width);
   }
@@ -1823,6 +2161,10 @@
     overflow-x: auto;
   }
 
+  .x6ikm8r {
+    overflow-x: hidden;
+  }
+
   .x1odjw0f {
     overflow-y: auto;
   }
@@ -1867,6 +2209,10 @@
     padding-bottom: var(--x1y1rrep);
   }
 
+  .xpu0lho {
+    padding-bottom: var(--xvc7yhn);
+  }
+
   .x5tiur9 {
     padding-left: 20px;
   }
@@ -1887,14 +2233,14 @@
     padding-left: var(--x1o7ezzp);
   }
 
-  .x16ohoeo {
-    padding-left: var(--x1y1rrep);
-  }
-
   .xpf9j6y {
     padding-right: 2px;
   }
 
+  .xy13l1i {
+    padding-right: 8px;
+  }
+
   .xznc5xv {
     padding-right: var(--x1lzhbes);
   }
@@ -1903,10 +2249,6 @@
     padding-right: var(--x1o7ezzp);
   }
 
-  .x1qqq8nk {
-    padding-right: var(--x1y1rrep);
-  }
-
   .xexx8yu {
     padding-top: 0;
   }
@@ -1931,10 +2273,6 @@
     padding-top: var(--x1uiwg42);
   }
 
-  .x10h5q3r {
-    padding-top: var(--x1y1rrep);
-  }
-
   .x3m8u43 {
     right: 0;
   }
@@ -1943,6 +2281,10 @@
     right: 16px;
   }
 
+  .x3lmqil {
+    right: 2px;
+  }
+
   .xjcl65e {
     right: var(--x1ft7ks7);
   }
@@ -1963,10 +2305,18 @@
     top: 2px;
   }
 
+  .xndqk7f {
+    top: 4px;
+  }
+
   .xwa60dl {
     top: 50%;
   }
 
+  .x1blgq8 {
+    top: 8vh;
+  }
+
   .x87tjf4 {
     top: var(--x1ft7ks7);
   }
@@ -2011,14 +2361,14 @@
     width: 20px;
   }
 
-  .x16grhtn {
-    width: 220px;
-  }
-
   .x17z2i9w {
     width: 22px;
   }
 
+  .xafpxmx {
+    width: 240px;
+  }
+
   .xvy4d1p {
     width: 24px;
   }
@@ -2043,6 +2393,10 @@
     width: 320px;
   }
 
+  .x1td3qas {
+    width: 32px;
+  }
+
   .x14qfxbe {
     width: 36px;
   }
@@ -2051,6 +2405,10 @@
     width: 380px;
   }
 
+  .x1q22l7i {
+    width: 4.5rem;
+  }
+
   .x187nhsf {
     width: 44px;
   }
@@ -2059,8 +2417,12 @@
     width: 48px;
   }
 
-  .x9a7vwu {
-    width: 7.5rem;
+  .x15yg21f {
+    width: 56px;
+  }
+
+  .x1v4s8kt {
+    width: 6px;
   }
 
   .x1l24a0r {
@@ -2083,6 +2445,14 @@
     width: auto;
   }
 
+  .x12pdk5b {
+    width: calc(min(360px, 38vw) - 48px);
+  }
+
+  .x3bfboh {
+    width: min(360px, 38vw);
+  }
+
   .xbtpsn6 {
     width: min(400px, 100vw - 32px);
   }
@@ -2107,6 +2477,10 @@
     width: min(760px, 100%);
   }
 
+  .xuxp2mc {
+    width: min(960px, 100vw - 32px);
+  }
+
   .x1hhjr3y {
     width: var(--anchor-width);
   }
@@ -2119,41 +2493,49 @@
     margin-bottom: 0;
   }
 
-  @media (width >= 1024px) {
-    .xzu0me4.xzu0me4 {
-      height: auto;
+  @media (width <= 800px) {
+    .xe5dw6p.xe5dw6p {
+      border-left-width: 0;
     }
 
-    .xn3bykl.xn3bykl {
-      width: 1px;
+    .xqcifg4.xqcifg4 {
+      border-top-color: var(--xz3qvk5);
     }
-  }
-}
 
-@layer priority6 {
-  .xarstr8:after {
-    inset: 0;
-  }
-}
+    .x1gk9co0.x1gk9co0 {
+      border-top-style: solid;
+    }
 
-@layer priority7 {
-  .x9ecp23::placeholder {
-    color: var(--xw4dauw);
+    .xn2qot.xn2qot {
+      border-top-width: 1px;
+    }
   }
 
-  .x1s928wv:after {
-    content: "";
+  @media (width >= 1024px) {
+    .xzu0me4.xzu0me4 {
+      height: auto;
+    }
   }
 
-  .x1j6awrg:after {
-    position: absolute;
+  @media (width <= 800px) {
+    .x30uv9f.x30uv9f {
+      min-height: 55vh;
+    }
+
+    .xkf749i.xkf749i {
+      width: 100%;
+    }
   }
 
-  .xitxdhh:after {
-    z-index: 1;
+  @media (width >= 1024px) {
+    .xn3bykl.xn3bykl {
+      width: 1px;
+    }
   }
+}
 
-  .xoucmyh:empty:before {
+@layer priority6 {
+  .x9ecp23::placeholder, .xoucmyh:empty:before {
     color: var(--xw4dauw);
   }
 
@@ -2191,6 +2573,16 @@
   }
 }
 
+@keyframes x18re5ia-B {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
 @keyframes xy94qka-B {
   from {
     opacity: 0;