@vireo-ai/trellis-ui 0.1.17 → 0.1.19

package/packages/client/types/components/stack/contract.d.ts

@@ -2,13 +2,13 @@ import { type SchemaToProps } from '../../runtime';
 import { type LayoutAlign, type LayoutAs, type LayoutJustify, type LayoutSpace } from '../layout';
 declare const STACK_DISPLAYS: readonly ["grid", "inline-grid", "none"];
 declare const stackSchema: {
-    padding: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
-    paddingX: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
-    paddingY: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
-    margin: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
-    marginX: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
-    marginY: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
-    surface: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "inherit" | "4" | "5" | "6" | "7" | "8" | "+1" | "+2" | "+3" | "+4" | "+5" | "+6" | "+7" | "+8">;
+    padding: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    paddingX: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    paddingY: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    margin: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    marginX: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    marginY: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    surface: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "inherit" | "4" | "5" | "6" | "7" | "8" | "+1" | "+2" | "+3" | "+4" | "+5" | "+6" | "+7" | "+8">;
     radius: import("../../runtime/codecs").OneOfCodec<"none" | "xs" | "sm" | "md" | "lg" | "full">;
     elevation: import("../../runtime/codecs").OneOfCodec<"1" | "match" | "2" | "3" | "none" | "4" | "5" | "6" | "7" | "8">;
     width: import("../../runtime/codecs").OneOfCodec<"xs" | "sm" | "md" | "lg" | "full" | "auto" | "xl" | "prose">;
@@ -16,9 +16,9 @@ declare const stackSchema: {
     class: import("../../runtime/codecs").StringCodec;
     align: import("../../runtime/codecs").OneOfCodec<"start" | "center" | "end" | "baseline" | "stretch">;
     justify: import("../../runtime/codecs").OneOfCodec<"start" | "center" | "end" | "between">;
-    gap: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
-    gapX: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
-    gapY: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    gap: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    gapX: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
+    gapY: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5">;
     as: import("../../runtime/codecs").OneOfCodec<"article" | "aside" | "div" | "footer" | "form" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul">;
     display: import("../../runtime/codecs").OneOfCodec<"none" | "grid" | "inline-grid">;
 };

package/packages/client/types/components/tabs/contract.d.ts

@@ -13,7 +13,7 @@ declare const tabsSchema: {
     value: import("../../runtime/codecs").StringCodec;
     activation: import("../../runtime/codecs").OneOfCodec<"manual" | "automatic">;
     orientation: import("../../runtime/codecs").OneOfCodec<"vertical" | "horizontal">;
-    gap: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5" | "auto">;
+    gap: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5" | "auto">;
     loop: import("../../runtime/codecs").BoolCodec;
     panels: import("../../runtime/codecs").StringCodec;
     class: import("../../runtime/codecs").StringCodec;

package/packages/client/types/components/tabs/machine.d.ts

@@ -46,7 +46,7 @@ declare const tabsHooks: readonly [Readonly<{
             value: import("../../runtime/codecs").StringCodec;
             activation: import("../../runtime/codecs").OneOfCodec<"manual" | "automatic">;
             orientation: import("../../runtime/codecs").OneOfCodec<"vertical" | "horizontal">;
-            gap: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5" | "auto">;
+            gap: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5" | "auto">;
             loop: import("../../runtime/codecs").BoolCodec;
             panels: import("../../runtime/codecs").StringCodec;
             class: import("../../runtime/codecs").StringCodec;
@@ -68,7 +68,7 @@ declare const tabsHooks: readonly [Readonly<{
             value: import("../../runtime/codecs").StringCodec;
             activation: import("../../runtime/codecs").OneOfCodec<"manual" | "automatic">;
             orientation: import("../../runtime/codecs").OneOfCodec<"vertical" | "horizontal">;
-            gap: import("../../runtime/codecs").OneOfCodec<"1" | "0" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5" | "auto">;
+            gap: import("../../runtime/codecs").OneOfCodec<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9.5" | "10.5" | "11.5" | "auto">;
             loop: import("../../runtime/codecs").BoolCodec;
             panels: import("../../runtime/codecs").StringCodec;
             class: import("../../runtime/codecs").StringCodec;

package/packages/client/types/runtime/dom-invalidation.d.ts

@@ -0,0 +1,7 @@
+type DomInvalidationOwner = Readonly<{
+    invalidateDom(): void;
+}>;
+declare const registerDomInvalidationOwner: (element: Element, owner: DomInvalidationOwner) => (() => void);
+declare const findClosestDomInvalidationOwners: (element: Element) => readonly DomInvalidationOwner[];
+export { findClosestDomInvalidationOwners, registerDomInvalidationOwner };
+export type { DomInvalidationOwner };

package/packages/client/types/runtime/drag-and-drop/sortable/index.d.ts

@@ -9,5 +9,5 @@ export { createSortableRegistry, sortable } from './registry';
 export { activateSortableCursor } from './cursor';
 export { createSortableSourceMachine } from './source-machine';
 export type { SortablePointerSnapshot, SortableSourceMachineContext, SortableSourceMachineEffects, } from './source-machine';
-export type { GroupRecord, SortableRegistry, SourceRecord } from './registry';
+export type { GroupRecord, SortableRegistration, SortableRegistry, SourceRecord } from './registry';
 export type { ResolveSortablePlacementOptions, SortableAnchor, SortableCancelReason, SortableCanDropContext, SortableDirection, SortableDragDetail, SortableEdge, SortableFeedback, SortableFrame, SortableGroup, SortableDropDetail, SortableInput, SortableInsertSource, SortableItemGeometry, SortableOperation, SortableOrientation, SortablePlacement, SortableMoveSource, SortableSource, UiSortableService, } from './contract';

package/packages/client/types/runtime/drag-and-drop/sortable/registry.d.ts

@@ -10,9 +10,12 @@ type SourceRecord = Readonly<{
     getSource(): SortableSource;
     isDisabled(): boolean;
 }>;
+type SortableRegistration = (() => void) & Readonly<{
+    refresh(): void;
+}>;
 type SortableRegistry = UiSortableService & Readonly<{
-    registerGroup(record: GroupRecord): () => void;
-    registerSource(record: SourceRecord): () => void;
+    registerGroup(record: GroupRecord): SortableRegistration;
+    registerSource(record: SourceRecord): SortableRegistration;
     group(scopeId: string, groupId: string): GroupRecord | null;
     source(scopeId: string, sourceId: string): SourceRecord | null;
     canDrop(source: SortableSource, destinationGroupId: string, input?: SortableInput | null): boolean;
@@ -22,4 +25,4 @@ type SortableRegistry = UiSortableService & Readonly<{
 declare const createSortableRegistry: () => SortableRegistry;
 declare const sortable: SortableRegistry;
 export { createSortableRegistry, sortable };
-export type { GroupRecord, SortableRegistry, SourceRecord };
+export type { GroupRecord, SortableRegistration, SortableRegistry, SourceRecord };

package/packages/client/types/runtime/drag-and-drop/sortable/source-machine.d.ts

@@ -14,6 +14,7 @@ type SortableSourceMachineEffects<TProps> = Readonly<{
     resolvePlacement(scope: MachineScope<SortableSourceMachineContext, TProps>): void;
     synced(scope: MachineScope<SortableSourceMachineContext, TProps>): void;
     complete(scope: MachineScope<SortableSourceMachineContext, TProps>): void;
+    reconcile(scope: MachineScope<SortableSourceMachineContext, TProps>): void;
 }>;
 declare const createSortableSourceMachine: <TProps>({ props, effects }: {
     props: TProps;

package/packages/client/types/runtime/engine/stream.d.ts

@@ -37,6 +37,7 @@ type StreamLifecycle = {
 };
 type MorphOptions = {
     key?(el: HTMLElement): string | null;
+    updating?(from: Node, to: Node): void;
     updated?(from: Node, to: Node): void;
 };
 type StreamAlpine = Pick<Alpine.Alpine, 'initTree'> & Partial<Pick<Alpine.Alpine, 'findClosest'>> & {

package/packages/client/types/runtime/index.d.ts

@@ -3,6 +3,7 @@ export { createAlpineMachine, findAlpineMachineOwner, type AlpineMachine, type A
 export { createAnchoredPopover, createAnchoredPopoverSurface, type AnchoredPopover, type AnchoredPopoverOptions, type AnchoredPopoverSurface, type PopoverAlign, type PopoverSide, } from './anchored-popover';
 export { createCollectionNavigation, type CollectionElementOptions, type CollectionItemsOptions, type CollectionKeydownOptions, type CollectionNavigation, type CollectionNavigationOptions, } from './collection-navigation';
 export { registerConfirm, unregisterConfirm, type ConfirmEventDetail, type ConfirmRuntimeOptions } from './confirm';
+export { findClosestDomInvalidationOwners, registerDomInvalidationOwner, type DomInvalidationOwner, } from './dom-invalidation';
 export { mergeBindings, type BindingInput, type BindingObject, type MergeBindingsOptions } from './merge-bindings';
 export { attribute, boundNumber, clampNumber, dataAttributeForProp, dataAttributeForSchemaProp, decodeProps, defineProps, snapNumber, string, number, bool, json, oneOf, type CodecFn, type DecodePropsOptions, type PropState, type SchemaToProps, } from './codecs';
 export { createMachine, type Machine, type MachineConfig, type MachineEffect, type MachineEffectList, type MachineEffectRef, type MachineEntry, type MachineEvent, type MachineEventObject, type MachineGuard, type MachineOptions, type MachineReducer, type MachineReducerList, type MachineReducerRef, type MachineScope, type MachineSnapshot, type MachineStateConfig, type MachineStateValue, type MachineTransition, type MachineTransitionDefinition, type MachineUpdate, } from './state-machine';

package/packages/client/types/runtime/morph-engine.d.ts

@@ -0,0 +1,22 @@
+import type Alpine from 'alpinejs';
+type Skip = () => void;
+type ChildrenOnly = () => void;
+type SkipChildren = () => void;
+type SkipUntil = (predicate: (node: Node) => boolean) => void;
+type UpdatingHook = (from: Node, to: Node, childrenOnly: ChildrenOnly, skip: Skip, skipChildren: SkipChildren, skipUntil: SkipUntil) => void;
+type SkippableNodeHook = (node: Node, skip: Skip) => void;
+type MorphOptions = {
+    key?: (element: Element) => unknown;
+    lookahead?: boolean;
+    updating?: UpdatingHook;
+    updated?: (from: Node, to: Node) => void;
+    removing?: SkippableNodeHook;
+    removed?: (node: Node) => void;
+    adding?: SkippableNodeHook;
+    added?: (node: Node) => void;
+};
+declare const morph: (from: Element, toHtml: Element | string, options?: MorphOptions) => Element;
+declare const morphBetween: (startMarker: Comment, endMarker: Comment, toHtml: Element | string, options?: MorphOptions) => void;
+declare const trellisMorph: (AlpineInstance: Alpine.Alpine) => void;
+export { morph, morphBetween };
+export default trellisMorph;

package/packages/client/types/runtime/morph.d.ts

@@ -0,0 +1,4 @@
+declare const PRESERVE_MORPH_ATTRIBUTES = "data-ui-preserve-attr";
+declare const declareMorphAttributes: (element: Element, ...names: string[]) => void;
+declare const preserveDeclaredMorphAttributes: (from: Node, to: Node) => void;
+export { PRESERVE_MORPH_ATTRIBUTES, declareMorphAttributes, preserveDeclaredMorphAttributes, };

package/packages/client/types/runtime/shell-breakpoint.d.ts

@@ -0,0 +1,2 @@
+declare const shellBreakpointPixels: (reference: HTMLElement) => number;
+export { shellBreakpointPixels };

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;
@@ -10000,6 +10061,8 @@
   [data-ui-select-popover][data-presentation="dialog"] [data-ui-select-viewport], [data-ui-select-popover][data-presentation="fullscreen"] [data-ui-select-viewport] {
     height: 100%;
     max-height: none;
+  }
+  [data-ui-select-popover][data-presentation="dialog"] [data-ui-select-viewport] [data-ui-scroll-area-viewport], [data-ui-select-popover][data-presentation="fullscreen"] [data-ui-select-viewport] [data-ui-scroll-area-viewport] {
     overscroll-behavior: contain;
   }
   [data-ui-select-option-label]:has(>*+*) {
@@ -10568,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"] {