@vireo-ai/trellis-ui 0.1.39 → 0.1.41

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

@@ -34,6 +34,15 @@ declare const selectSchema: {
     mode: import("../../runtime/codecs").OneOfCodec<"native" | "listbox" | "combobox" | "pillbox">;
     multiple: import("../../runtime/codecs").BoolCodec;
     searchable: import("../../runtime/codecs").BoolCodec;
+    virtualized: import("../../runtime/codecs").BoolCodec;
+    optionsFetchUrl: import("../../runtime/codecs").StringCodec;
+    optionsTotalItems: import("../../runtime/codecs").NumberCodec;
+    optionItemSize: import("../../runtime/codecs").NumberCodec;
+    optionBufferSize: import("../../runtime/codecs").NumberCodec;
+    optionOverscan: import("../../runtime/codecs").NumberCodec;
+    optionSearchParam: import("../../runtime/codecs").StringCodec;
+    optionSearchDebounce: import("../../runtime/codecs").NumberCodec;
+    selectedLabelMap: import("../../runtime/codecs").JsonCodec<Record<string, string>>;
     creatable: import("../../runtime/codecs").BoolCodec;
     filter: import("../../runtime/codecs").BoolCodec;
     clearable: import("../../runtime/codecs").BoolCodec;
@@ -66,7 +75,7 @@ declare const selectSchema: {
     listboxClass: import("../../runtime/codecs").StringCodec;
     optionClass: import("../../runtime/codecs").StringCodec;
     chipVariant: import("../../runtime/codecs").OneOfCodec<"outline" | "solid" | "soft" | "surface">;
-    chipColor: import("../../runtime/codecs").OneOfCodec<"accent" | "danger" | "neutral" | "success" | "warning">;
+    chipColor: import("../../runtime/codecs").OneOfCodec<"neutral" | "accent" | "danger" | "success" | "warning">;
     chipClass: import("../../runtime/codecs").StringCodec;
     class: import("../../runtime/codecs").StringCodec;
 };

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

@@ -71,6 +71,15 @@ declare const selectHooks: readonly [{
             mode: import("../../runtime/codecs").OneOfCodec<"native" | "listbox" | "combobox" | "pillbox">;
             multiple: import("../../runtime/codecs").BoolCodec;
             searchable: import("../../runtime/codecs").BoolCodec;
+            virtualized: import("../../runtime/codecs").BoolCodec;
+            optionsFetchUrl: import("../../runtime/codecs").StringCodec;
+            optionsTotalItems: import("../../runtime/codecs").NumberCodec;
+            optionItemSize: import("../../runtime/codecs").NumberCodec;
+            optionBufferSize: import("../../runtime/codecs").NumberCodec;
+            optionOverscan: import("../../runtime/codecs").NumberCodec;
+            optionSearchParam: import("../../runtime/codecs").StringCodec;
+            optionSearchDebounce: import("../../runtime/codecs").NumberCodec;
+            selectedLabelMap: import("../../runtime/codecs").JsonCodec<Record<string, string>>;
             creatable: import("../../runtime/codecs").BoolCodec;
             filter: import("../../runtime/codecs").BoolCodec;
             clearable: import("../../runtime/codecs").BoolCodec;
@@ -103,7 +112,7 @@ declare const selectHooks: readonly [{
             listboxClass: import("../../runtime/codecs").StringCodec;
             optionClass: import("../../runtime/codecs").StringCodec;
             chipVariant: import("../../runtime/codecs").OneOfCodec<"outline" | "solid" | "soft" | "surface">;
-            chipColor: import("../../runtime/codecs").OneOfCodec<"accent" | "danger" | "neutral" | "success" | "warning">;
+            chipColor: import("../../runtime/codecs").OneOfCodec<"neutral" | "accent" | "danger" | "success" | "warning">;
             chipClass: import("../../runtime/codecs").StringCodec;
             class: import("../../runtime/codecs").StringCodec;
         }>>;
@@ -139,6 +148,15 @@ declare const selectHooks: readonly [{
             mode: import("../../runtime/codecs").OneOfCodec<"native" | "listbox" | "combobox" | "pillbox">;
             multiple: import("../../runtime/codecs").BoolCodec;
             searchable: import("../../runtime/codecs").BoolCodec;
+            virtualized: import("../../runtime/codecs").BoolCodec;
+            optionsFetchUrl: import("../../runtime/codecs").StringCodec;
+            optionsTotalItems: import("../../runtime/codecs").NumberCodec;
+            optionItemSize: import("../../runtime/codecs").NumberCodec;
+            optionBufferSize: import("../../runtime/codecs").NumberCodec;
+            optionOverscan: import("../../runtime/codecs").NumberCodec;
+            optionSearchParam: import("../../runtime/codecs").StringCodec;
+            optionSearchDebounce: import("../../runtime/codecs").NumberCodec;
+            selectedLabelMap: import("../../runtime/codecs").JsonCodec<Record<string, string>>;
             creatable: import("../../runtime/codecs").BoolCodec;
             filter: import("../../runtime/codecs").BoolCodec;
             clearable: import("../../runtime/codecs").BoolCodec;
@@ -171,7 +189,7 @@ declare const selectHooks: readonly [{
             listboxClass: import("../../runtime/codecs").StringCodec;
             optionClass: import("../../runtime/codecs").StringCodec;
             chipVariant: import("../../runtime/codecs").OneOfCodec<"outline" | "solid" | "soft" | "surface">;
-            chipColor: import("../../runtime/codecs").OneOfCodec<"accent" | "danger" | "neutral" | "success" | "warning">;
+            chipColor: import("../../runtime/codecs").OneOfCodec<"neutral" | "accent" | "danger" | "success" | "warning">;
             chipClass: import("../../runtime/codecs").StringCodec;
             class: import("../../runtime/codecs").StringCodec;
         }>>;

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

@@ -29,7 +29,7 @@ declare const sidebarSchema: {
 declare const sidebarItemSchema: {
     as: import("../../runtime/codecs").OneOfCodec<"a" | "button">;
     variant: import("../../runtime/codecs").OneOfCodec<"ghost" | "surface">;
-    color: import("../../runtime/codecs").OneOfCodec<"accent" | "neutral">;
+    color: import("../../runtime/codecs").OneOfCodec<"neutral" | "accent">;
     href: import("../../runtime/codecs").StringCodec;
     current: import("../../runtime/codecs").BoolCodec;
     disabled: import("../../runtime/codecs").BoolCodec;

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

@@ -40,7 +40,7 @@ declare const tableRowSchema: {
 };
 declare const tableColumnSchema: {
     align: import("../../runtime/codecs").OneOfCodec<"end" | "center" | "start">;
-    valign: import("../../runtime/codecs").OneOfCodec<"bottom" | "top" | "middle" | "baseline">;
+    valign: import("../../runtime/codecs").OneOfCodec<"bottom" | "top" | "baseline" | "middle">;
     key: import("../../runtime/codecs").StringCodec;
     target: import("../../runtime/codecs").StringCodec;
     width: import("../../runtime/codecs").StringCodec;
@@ -62,13 +62,13 @@ declare const tableColumnFilterSchema: {
 };
 declare const tableRowHeaderSchema: {
     align: import("../../runtime/codecs").OneOfCodec<"end" | "center" | "start">;
-    valign: import("../../runtime/codecs").OneOfCodec<"bottom" | "top" | "middle" | "baseline">;
+    valign: import("../../runtime/codecs").OneOfCodec<"bottom" | "top" | "baseline" | "middle">;
     scope: import("../../runtime/codecs").OneOfCodec<"row" | "rowgroup">;
     class: import("../../runtime/codecs").StringCodec;
 };
 declare const tableCellSchema: {
     align: import("../../runtime/codecs").OneOfCodec<"end" | "center" | "start">;
-    valign: import("../../runtime/codecs").OneOfCodec<"bottom" | "top" | "middle" | "baseline">;
+    valign: import("../../runtime/codecs").OneOfCodec<"bottom" | "top" | "baseline" | "middle">;
     class: import("../../runtime/codecs").StringCodec;
 };
 declare const tableEmptySchema: {

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

@@ -6,7 +6,7 @@ declare const TOAST_VARIANTS: readonly ["default", "soft", "surface", "solid", "
 declare const TOAST_POSITIONS: readonly ["top-right", "top-left", "top-center", "bottom-right", "bottom-left", "bottom-center"];
 declare const toastSchema: {
     level: import("../../runtime/codecs").OneOfCodec<"danger" | "success" | "warning" | "info" | "debug">;
-    color: import("../../runtime/codecs").OneOfCodec<"auto" | "accent" | "danger" | "neutral" | "success" | "warning">;
+    color: import("../../runtime/codecs").OneOfCodec<"auto" | "neutral" | "accent" | "danger" | "success" | "warning">;
     variant: import("../../runtime/codecs").OneOfCodec<"outline" | "default" | "solid" | "soft" | "surface">;
     title: import("../../runtime/codecs").StringCodec;
     description: import("../../runtime/codecs").StringCodec;

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

@@ -34,7 +34,7 @@ declare const toastHooks: readonly [{
         context: Readonly<ToastContext>;
         props: Readonly<import("../..").SchemaToProps<{
             level: import("../../runtime/codecs").OneOfCodec<"danger" | "success" | "warning" | "info" | "debug">;
-            color: import("../../runtime/codecs").OneOfCodec<"auto" | "accent" | "danger" | "neutral" | "success" | "warning">;
+            color: import("../../runtime/codecs").OneOfCodec<"auto" | "neutral" | "accent" | "danger" | "success" | "warning">;
             variant: import("../../runtime/codecs").OneOfCodec<"outline" | "default" | "solid" | "soft" | "surface">;
             title: import("../../runtime/codecs").StringCodec;
             description: import("../../runtime/codecs").StringCodec;

package/packages/client/types/directives/sortable.d.ts

@@ -11,6 +11,9 @@ declare const groupSchema: {
     sourceOpacity: import("../runtime/codecs").NumberCodec;
     ghostOpacity: import("../runtime/codecs").NumberCodec;
     dragCursor: import("../runtime/codecs").StringCodec;
+    previewPosition: import("../runtime/codecs").StringCodec;
+    color: import("../runtime/codecs").OneOfCodec<"neutral" | "accent">;
+    interaction: import("../runtime/codecs").OneOfCodec<"tonal" | "edge" | "combined">;
     label: import("../runtime/codecs").StringCodec;
     sortableData: import("../runtime/codecs").JsonCodec<Record<string, unknown>>;
 };
@@ -24,6 +27,9 @@ declare const sourceSchema: {
     sourceOpacity: import("../runtime/codecs").NumberCodec;
     ghostOpacity: import("../runtime/codecs").NumberCodec;
     dragCursor: import("../runtime/codecs").StringCodec;
+    previewPosition: import("../runtime/codecs").StringCodec;
+    color: import("../runtime/codecs").OneOfCodec<"neutral" | "accent">;
+    interaction: import("../runtime/codecs").OneOfCodec<"tonal" | "edge" | "combined">;
 };
 declare const registerSortableDirective: (AlpineInstance: Alpine.Alpine) => void;
 export { groupSchema, registerSortableDirective, sourceSchema };

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

@@ -2,6 +2,8 @@ type SortableOperation = 'insert' | 'move';
 type SortableCancelReason = 'escape' | 'outside' | 'disabled' | 'removed';
 type SortableOrientation = 'vertical' | 'horizontal' | 'grid';
 type SortableFeedback = 'indicator' | 'reorder';
+type SortableColor = 'neutral' | 'accent';
+type SortableInteraction = 'tonal' | 'edge' | 'combined';
 type SortableEdge = 'before' | 'after';
 type SortableDirection = 'ltr' | 'rtl';
 type SortableFrame = Readonly<{
@@ -74,6 +76,9 @@ type SortableGroup = Readonly<{
     sourceOpacity: number;
     ghostOpacity: number;
     dragCursor: string;
+    previewPosition: string;
+    color: SortableColor;
+    interaction: SortableInteraction;
     data?: Readonly<Record<string, unknown>>;
     label?: string;
 }>;
@@ -129,5 +134,5 @@ type ResolveSortablePlacementOptions = Readonly<{
     items: readonly SortableItemGeometry[];
     input: SortableInput;
 }>;
-export type { ResolveSortablePlacementOptions, SortableAnchor, SortableCancelReason, SortableCanDropContext, SortableDirection, SortableDragDetail, SortableEdge, SortableFeedback, SortableFrame, SortableGroup, SortableDropDetail, SortableInput, SortableInsertSource, SortableItemGeometry, SortableOperation, SortableOrientation, SortablePlacement, SortableMoveSource, SortableSource, SortableMoveOptions, SortableMoveRelativeOptions, UiSortableService, };
+export type { ResolveSortablePlacementOptions, SortableAnchor, SortableCancelReason, SortableColor, SortableCanDropContext, SortableDirection, SortableDragDetail, SortableEdge, SortableFeedback, SortableFrame, SortableGroup, SortableDropDetail, SortableInput, SortableInteraction, SortableInsertSource, SortableItemGeometry, SortableOperation, SortableOrientation, SortablePlacement, SortableMoveSource, SortableSource, SortableMoveOptions, SortableMoveRelativeOptions, UiSortableService, };
 export { isValidGridColumns };

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

@@ -1,4 +1,4 @@
-import type { SortableInput } from './contract';
+import type { SortableColor, SortableInput, SortableInteraction } from './contract';
 type ManagedGhostFrame = Readonly<{
     x: number;
     y: number;
@@ -27,18 +27,21 @@ type SortableGhost = Readonly<{
     visual: HTMLElement;
     frame(): ManagedGhostFrame;
     projectedFrame(input: SortableInput): ManagedGhostFrame;
+    projectedSourceFrame(input: SortableInput): ManagedGhostFrame;
     move(input: SortableInput): void;
     finish(to: ManagedGhostFrame | null): Promise<void>;
     remove(): void;
 }>;
 declare const sanitizeClone: (root: HTMLElement) => void;
 declare const frameFromRect: (rect: DOMRect | DOMRectReadOnly) => ManagedGhostFrame;
-declare const createSortableGhost: ({ source, input, preview, previewPosition, opacity }: {
+declare const createSortableGhost: ({ source, input, preview, previewPosition, opacity, color, interaction, }: {
     source: HTMLElement;
     input: SortableInput;
     preview?: HTMLTemplateElement | null;
     previewPosition?: string;
     opacity?: number;
+    color?: SortableColor;
+    interaction?: SortableInteraction;
 }) => SortableGhost;
 export { createSortableGhost, frameFromRect, resolveSortablePreviewPosition, sanitizeClone };
 export type { ManagedGhostFrame, SortableGhost, SortablePreviewPositionOptions };

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

@@ -15,6 +15,7 @@ export { dispatchNativeControlChange, syncControlPresence, syncNativeControl, sy
 export { FOCUSABLE_SELECTOR, closestFocusable, focusFirst, focusableElements, isFocusable, trapFocus } from './focus-scope';
 export { getPathValue, normalizeOptionText, parseItemData, splitControlValues } from './option-data';
 export { observeSemanticChanges, type SemanticObserverOptions } from './semantic-observer';
+export { parseVirtualizerFragmentResponse, type VirtualizerFragmentOptions, type VirtualizerFragmentPayload, } from './virtualizer-fragment';
 export { createResizable, createSortableRegistry, registerResizable, sortable, type ResizableOptions, type ResizeAxis, type ResizeDirection, type ResizeEvent, type ResizeMode, type ResizePhase, type SortableAnchor, type SortableCancelReason, type SortableCanDropContext, type SortableDirection, type SortableDragDetail, type SortableDropDetail, type SortableEdge, type SortableFeedback, type SortableGroup, type SortableIndicatorFrame, type SortableInsertSource, type SortableMoveSource, type SortableOperation, type SortableOrientation, type SortablePlacement, type SortableReorderOffset, type SortableSource, type UiSortableService, } from './drag-and-drop';
 export { defineManifest, propsFromSchema, type ComponentManifest, type DefineManifestOptions, type ManifestPart, type ManifestProp, type ManifestPropDetails, type ManifestToken, type PropsFromSchemaOptions, type SchemaPropDetails, } from './manifest';
 export { defineStyles, resolveStyle, type DefineStylesOptions, type ResolveStyleOptions, type StyleDefinition, type StylePart, type StyleProps, } from './styles';

package/packages/client/types/runtime/virtualizer-fragment.d.ts

@@ -0,0 +1,14 @@
+import type { AssetDescriptor } from '../assets/bridge';
+type VirtualizerFragmentOptions = {
+    totalHeader: string;
+    assetsHeader: string;
+    metaSelector: string;
+};
+type VirtualizerFragmentPayload = {
+    html: string;
+    assets: AssetDescriptor[];
+    totalItems: number | null;
+};
+declare const parseVirtualizerFragmentResponse: (response: Response, options: VirtualizerFragmentOptions) => Promise<VirtualizerFragmentPayload>;
+export { parseVirtualizerFragmentResponse };
+export type { VirtualizerFragmentOptions, VirtualizerFragmentPayload };

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

@@ -1590,6 +1590,9 @@
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
+  .max-w-56 {
+    max-width: calc(var(--spacing) * 56);
+  }
   .max-w-64 {
     max-width: calc(var(--spacing) * 64);
   }
@@ -1653,6 +1656,9 @@
   .min-w-full {
     min-width: 100%;
   }
+  .min-w-max {
+    min-width: max-content;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -3434,6 +3440,9 @@
   .px-menu-item-padding-inline {
     padding-inline: var(--spacing-menu-item-padding-inline);
   }
+  .px-popover-padding {
+    padding-inline: var(--spacing-popover-padding);
+  }
   .px-sidebar-content-padding-inline {
     padding-inline: var(--spacing-sidebar-content-padding-inline);
   }
@@ -4534,6 +4543,12 @@
       background-color: var(--color-intent-neutral-edge-hover);
     }
   }
+  .focus-visible\:ring-2 {
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .focus-visible\:ui-focus-ring {
     &:focus-visible {
       box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
@@ -4656,6 +4671,11 @@
       background-color: var(--color-intent-neutral-edge-hover);
     }
   }
+  .data-selected\:bg-interaction-selected {
+    &[data-selected] {
+      background-color: var(--color-interaction-selected);
+    }
+  }
   .data-selected\:opacity-100 {
     &[data-selected] {
       opacity: 100%;
@@ -8898,10 +8918,68 @@
     width: calc(100% - (var(--ui-scrollbar-inset) * 2));
   }
 }
+@layer components {
+  [data-ui-data-grid-header-row], [data-ui-data-grid-row] {
+    grid-template-columns: var(--ui-data-grid-template);
+    height: var(--ui-data-grid-row-height);
+  }
+  [data-ui-data-grid-body] {
+    min-height: var(--ui-data-grid-total-height);
+  }
+  [data-ui-data-grid] [data-ui-data-grid-scroll-area] > [data-ui-scroll-area-scrollbar][data-orientation="vertical"] {
+    top: calc(var(--ui-data-grid-row-height) + var(--ui-scrollbar-inset)) !important;
+    height: calc(100% - var(--ui-data-grid-row-height) - (var(--ui-scrollbar-inset) * 2)) !important;
+  }
+  [data-ui-data-grid-column-indicator] {
+    background: var(--ui-data-grid-feedback-color, var(--ui-interaction-selected-edge-strong));
+  }
+  [data-ui-data-grid][data-interaction="tonal"] {
+    --ui-data-grid-feedback-color: var(--ui-interaction-selected-fill);
+  }
+  [data-ui-data-grid-column-indicator][data-index="0"] {
+    translate: 6px 0;
+  }
+  [data-ui-data-grid-column-indicator][data-index="0"]:dir(rtl) {
+    translate: -6px 0;
+  }
+  [data-ui-data-grid-resize-handle]::after {
+    position: absolute;
+    inset-block: 0;
+    right: 0;
+    width: 1px;
+    background: var(--ui-data-grid-feedback-color, var(--ui-interaction-selected-edge-strong));
+    content: "";
+    opacity: 0;
+  }
+  [data-ui-data-grid-resize-handle]:hover::after, [data-ui-data-grid-resize-handle]:focus-visible::after, [data-ui-data-grid-resize-handle][data-resizing]::after {
+    opacity: 1;
+  }
+  [data-ui-data-grid-column-header][data-pinned], [data-ui-data-grid-cell][data-pinned] {
+    background: var(--ui-surface-color);
+  }
+  [data-ui-data-grid][data-border="row"] [data-ui-data-grid-column-header], [data-ui-data-grid][data-border="row"] [data-ui-data-grid-cell], [data-ui-data-grid][data-border="grid"] [data-ui-data-grid-column-header], [data-ui-data-grid][data-border="grid"] [data-ui-data-grid-cell] {
+    border-bottom: 1px solid var(--color-separator);
+  }
+  [data-ui-data-grid][data-border="grid"] [data-ui-data-grid-column-header]:not(:first-child), [data-ui-data-grid][data-border="grid"] [data-ui-data-grid-cell]:not(:first-child) {
+    border-inline-start: 1px solid var(--color-separator);
+  }
+  [data-ui-data-grid][data-empty] [data-ui-data-grid-scroll-area] {
+    display: none;
+  }
+  [data-ui-data-grid]:not([data-empty]) [data-ui-data-grid-empty] {
+    display: none;
+  }
+}
 @layer components {
   [data-ui-select-viewport] {
     max-height: var(--ui-select-listbox-max-height, var(--spacing-select-listbox));
   }
+  [data-ui-select-virtualizer] > [data-ui-scroll-area] {
+    max-height: var(--ui-select-listbox-max-height, var(--spacing-select-listbox));
+  }
+  [data-ui-select-virtualizer] > [data-ui-scroll-area] > [data-ui-scroll-area-viewport] > [data-ui-scroll-area-content] {
+    padding-block: var(--spacing-popover-padding);
+  }
   [data-ui-select-sheet-heading] {
     display: none;
   }
@@ -8959,6 +9037,10 @@
     height: 100%;
     max-height: none;
   }
+  [data-ui-select-popover][data-presentation="dialog"] [data-ui-select-virtualizer] > [data-ui-scroll-area], [data-ui-select-popover][data-presentation="fullscreen"] [data-ui-select-virtualizer] > [data-ui-scroll-area] {
+    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;
   }