@vireo-ai/trellis-ui 0.1.18 → 0.1.19

package/packages/server/trellis_ui/static/trellis_ui/assets/css/trellis.css

@@ -351,6 +351,7 @@
     --spacing-scrollbar-inset: 2px;
     --spacing-menu-item: var(--spacing-control-lg);
     --spacing-select-listbox: 256px;
+    --spacing-panel-collapsed: 48px;
     --spacing-panel-resize-handle: 8px;
     --spacing-panel-resize-handle-coarse: 24px;
     --spacing-sidebar-width: 256px;
@@ -359,6 +360,24 @@
     --container-modal-md: 512px;
     --container-modal-lg: 672px;
     --container-modal-xl: 896px;
+    --spacing-panel-1-min: 160px;
+    --spacing-panel-1: 192px;
+    --spacing-panel-1-max: 240px;
+    --spacing-panel-2-min: 192px;
+    --spacing-panel-2: 240px;
+    --spacing-panel-2-max: 288px;
+    --spacing-panel-3-min: 240px;
+    --spacing-panel-3: 320px;
+    --spacing-panel-3-max: 384px;
+    --spacing-panel-4-min: 288px;
+    --spacing-panel-4: 384px;
+    --spacing-panel-4-max: 480px;
+    --spacing-panel-5-min: 320px;
+    --spacing-panel-5: 480px;
+    --spacing-panel-5-max: 640px;
+    --spacing-panel-6-min: 384px;
+    --spacing-panel-6: 640px;
+    --spacing-panel-6-max: 768px;
     --spacing-icon: var(--spacing-icon-md);
     --color-separator: transparent;
     --color-separator-muted: transparent;
@@ -9812,8 +9831,10 @@
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 }
-:where(:root, .light, .dark) [data-ui-app] {
+:where(:root, .light, .dark) {
   --ui-shell-sidebar-breakpoint: 1024px;
+}
+:where(:root, .light, .dark) [data-ui-app] {
   grid-template-areas: "header" "main" "footer";
 }
 :where(:root, .light, .dark) [data-ui-app]:has(> [data-ui-sidebar][data-responsive-mode="mobile"]) {
@@ -9916,6 +9937,46 @@
     grid-template-columns: minmax(0, 1fr);
   }
 }
+@media (max-width: 1023.98px) {
+  :where(:root, .light, .dark) [data-ui-panels][data-orientation="horizontal"]:not([data-responsive-mode]) {
+    flex-direction: column;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  :where(:root, .light, .dark) [data-ui-panels][data-orientation="horizontal"]:not([data-responsive-mode]) > [data-ui-panel][data-size="fill"] {
+    flex: 1 1 0;
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+    min-height: 100%;
+    max-height: none;
+  }
+  :where(:root, .light, .dark) [data-ui-panels][data-orientation="horizontal"]:not([data-responsive-mode]) > [data-ui-panel]:not([data-size="fill"]) {
+    flex: 0 1 var(--ui-panel-authored-size);
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+    min-height: var(--ui-panel-authored-min);
+    max-height: var(--ui-panel-authored-max);
+  }
+  :where(:root, .light, .dark) [data-ui-panels][data-orientation="horizontal"]:not([data-responsive-mode]) > [data-ui-panel][data-state="collapsed"] {
+    flex: 0 0 0;
+    min-height: 0;
+    max-height: 0;
+  }
+  :where(:root, .light, .dark) [data-ui-panels][data-orientation="horizontal"]:not([data-responsive-mode]) > [data-ui-panel][data-state="collapsed"][data-has-collapsed] {
+    flex-basis: var(--spacing-panel-collapsed);
+    min-height: var(--spacing-panel-collapsed);
+    max-height: var(--spacing-panel-collapsed);
+  }
+  :where(:root, .light, .dark) [data-ui-panels][data-orientation="horizontal"]:not([data-responsive-mode]) > [data-ui-panel][data-divider]:not(:last-child) {
+    border-inline-end: 0;
+    border-block-end: var(--border-width-edge-divider) solid var(--color-separator);
+  }
+  :where(:root, .light, .dark) [data-ui-panels][data-orientation="horizontal"]:not([data-responsive-mode]) > [data-ui-panel] > [data-ui-panel-resize-handle] {
+    display: none;
+  }
+}
 @layer components {
   [data-ui-brand-logo] svg {
     display: block;
@@ -10570,10 +10631,93 @@
   }
 }
 @layer components {
-  [data-ui-panels][data-orientation="horizontal"] > [data-ui-panel][data-divider]:not(:last-child) {
+  [data-ui-panels] {
+    overflow: hidden;
+  }
+  [data-ui-panels][data-responsive-mode="stacked"] {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  [data-ui-panel] {
+    min-height: 0;
+  }
+  [data-ui-panel][data-size="1"] {
+    --ui-panel-authored-min: var(--spacing-panel-1-min);
+    --ui-panel-authored-size: var(--spacing-panel-1);
+    --ui-panel-authored-max: var(--spacing-panel-1-max);
+  }
+  [data-ui-panel][data-size="2"] {
+    --ui-panel-authored-min: var(--spacing-panel-2-min);
+    --ui-panel-authored-size: var(--spacing-panel-2);
+    --ui-panel-authored-max: var(--spacing-panel-2-max);
+  }
+  [data-ui-panel][data-size="3"] {
+    --ui-panel-authored-min: var(--spacing-panel-3-min);
+    --ui-panel-authored-size: var(--spacing-panel-3);
+    --ui-panel-authored-max: var(--spacing-panel-3-max);
+  }
+  [data-ui-panel][data-size="4"] {
+    --ui-panel-authored-min: var(--spacing-panel-4-min);
+    --ui-panel-authored-size: var(--spacing-panel-4);
+    --ui-panel-authored-max: var(--spacing-panel-4-max);
+  }
+  [data-ui-panel][data-size="5"] {
+    --ui-panel-authored-min: var(--spacing-panel-5-min);
+    --ui-panel-authored-size: var(--spacing-panel-5);
+    --ui-panel-authored-max: var(--spacing-panel-5-max);
+  }
+  [data-ui-panel][data-size="6"] {
+    --ui-panel-authored-min: var(--spacing-panel-6-min);
+    --ui-panel-authored-size: var(--spacing-panel-6);
+    --ui-panel-authored-max: var(--spacing-panel-6-max);
+  }
+  [data-ui-panels]:is([data-orientation="horizontal"]:not([data-layout-orientation]), [data-layout-orientation="horizontal"]) > [data-ui-panel][data-size="fill"] {
+    flex: 1 1 0;
+    min-width: 0;
+    max-width: none;
+  }
+  [data-ui-panels]:is([data-orientation="horizontal"]:not([data-layout-orientation]), [data-layout-orientation="horizontal"]) > [data-ui-panel]:not([data-size="fill"]) {
+    flex: 0 1 var(--ui-panel-authored-size);
+    min-width: var(--ui-panel-authored-min);
+    max-width: var(--ui-panel-authored-max);
+  }
+  [data-ui-panels]:is([data-orientation="vertical"]:not([data-layout-orientation]), [data-layout-orientation="vertical"]) > [data-ui-panel][data-size="fill"] {
+    flex: 1 1 0;
+    min-height: 0;
+    max-height: none;
+  }
+  [data-ui-panels]:is([data-orientation="vertical"]:not([data-layout-orientation]), [data-layout-orientation="vertical"]) > [data-ui-panel]:not([data-size="fill"]) {
+    flex: 0 1 var(--ui-panel-authored-size);
+    min-height: var(--ui-panel-authored-min);
+    max-height: var(--ui-panel-authored-max);
+  }
+  [data-ui-panels][data-responsive-mode="stacked"] > [data-ui-panel][data-size="fill"]:not([data-state="collapsed"]) {
+    min-height: 100%;
+  }
+  [data-ui-panels]:is([data-orientation="horizontal"]:not([data-layout-orientation]), [data-layout-orientation="horizontal"]) > [data-ui-panel][data-state="collapsed"] {
+    flex: 0 0 0;
+    min-width: 0;
+    max-width: 0;
+  }
+  [data-ui-panels]:is([data-orientation="horizontal"]:not([data-layout-orientation]), [data-layout-orientation="horizontal"]) > [data-ui-panel][data-state="collapsed"][data-has-collapsed] {
+    flex-basis: var(--spacing-panel-collapsed);
+    min-width: var(--spacing-panel-collapsed);
+    max-width: var(--spacing-panel-collapsed);
+  }
+  [data-ui-panels]:is([data-orientation="vertical"]:not([data-layout-orientation]), [data-layout-orientation="vertical"]) > [data-ui-panel][data-state="collapsed"] {
+    flex: 0 0 0;
+    min-height: 0;
+    max-height: 0;
+  }
+  [data-ui-panels]:is([data-orientation="vertical"]:not([data-layout-orientation]), [data-layout-orientation="vertical"]) > [data-ui-panel][data-state="collapsed"][data-has-collapsed] {
+    flex-basis: var(--spacing-panel-collapsed);
+    min-height: var(--spacing-panel-collapsed);
+    max-height: var(--spacing-panel-collapsed);
+  }
+  [data-ui-panels]:is([data-orientation="horizontal"]:not([data-layout-orientation]), [data-layout-orientation="horizontal"]) > [data-ui-panel][data-divider]:not(:last-child) {
     border-inline-end: var(--border-width-edge-divider) solid var(--color-separator);
   }
-  [data-ui-panels][data-orientation="vertical"] > [data-ui-panel][data-divider]:not(:last-child) {
+  [data-ui-panels]:is([data-orientation="vertical"]:not([data-layout-orientation]), [data-layout-orientation="vertical"]) > [data-ui-panel][data-divider]:not(:last-child) {
     border-block-end: var(--border-width-edge-divider) solid var(--color-separator);
   }
   [data-ui-panel-resize-handle][data-orientation="horizontal"][data-resize-edge="start"] {