@vireo-ai/trellis-ui 0.1.48 → 0.1.50

package/packages/client/types/runtime/cursor-data-source.d.ts

@@ -0,0 +1,45 @@
+type CursorPage<Content> = {
+    content: Content;
+    startCursor: string | null;
+    endCursor: string | null;
+    hasNext: boolean;
+    hasPrevious: boolean;
+    startIndex?: number;
+};
+type CursorRenderPayload = {
+    html: string;
+    assets: Array<{
+        id: string;
+        src: string;
+        preloads?: string[];
+    }>;
+    totalItems: number | null;
+};
+type SoughtCursorPage<Content> = CursorPage<Content> & {
+    startIndex: number;
+};
+type CursorFirstArgs<Query> = {
+    limit: number;
+    query: Query;
+    signal: AbortSignal;
+};
+type CursorMoveArgs<Query> = CursorFirstArgs<Query> & {
+    cursor: string;
+};
+type CursorSeekArgs<Query> = CursorFirstArgs<Query> & {
+    index: number;
+};
+type CursorDataSource<Query, Content> = {
+    first(args: CursorFirstArgs<Query>): Promise<CursorPage<Content>>;
+    next(args: CursorMoveArgs<Query>): Promise<CursorPage<Content>>;
+    previous(args: CursorMoveArgs<Query>): Promise<CursorPage<Content>>;
+    seek?(args: CursorSeekArgs<Query>): Promise<SoughtCursorPage<Content>>;
+};
+type CursorResponseAdapter<Content> = (content: Content, page: CursorPage<Content>) => CursorRenderPayload | Promise<CursorRenderPayload>;
+type CursorVirtualizerOptions<Query, Content> = {
+    dataSource: CursorDataSource<Query, Content>;
+    query: Query;
+    responseAdapter: CursorResponseAdapter<Content>;
+    seekDebounce?: number;
+};
+export type { CursorDataSource, CursorFirstArgs, CursorMoveArgs, CursorPage, CursorResponseAdapter, CursorRenderPayload, CursorSeekArgs, SoughtCursorPage, CursorVirtualizerOptions, };

package/packages/client/types/runtime/focus-handoff.d.ts

@@ -0,0 +1,12 @@
+type FocusHandoffState = {
+    pointerDown: boolean;
+    pointerFocused: HTMLElement | null;
+    indicatorSuppressed: HTMLElement | null;
+    shortcut: boolean;
+    shortcutReset: number | undefined;
+};
+declare const ensureFocusHandoff: (document: Document) => FocusHandoffState;
+declare const beginShortcutFocusHandoff: (document: Document) => void;
+declare const isShortcutFocusHandoff: (document: Document) => boolean;
+declare const focusWithoutIndicator: (element: HTMLElement) => void;
+export { beginShortcutFocusHandoff, ensureFocusHandoff, focusWithoutIndicator, isShortcutFocusHandoff, };

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

@@ -0,0 +1,29 @@
+import { type SchemaToProps } from './codecs';
+declare const VIRTUALIZER_AXES: readonly ["vertical"];
+type VirtualizerAxis = typeof VIRTUALIZER_AXES[number];
+declare const virtualizerSchema: {
+    fetchUrl: import("./codecs").StringCodec;
+    totalItems: import("./codecs").NumberCodec;
+    itemSize: import("./codecs").NumberCodec;
+    bufferSize: import("./codecs").NumberCodec;
+    overscan: import("./codecs").NumberCodec;
+    axis: import("./codecs").OneOfCodec<"vertical">;
+    initialIndex: import("./codecs").NumberCodec;
+    startParam: import("./codecs").StringCodec;
+    countParam: import("./codecs").StringCodec;
+    totalParam: import("./codecs").StringCodec;
+    windowParam: import("./codecs").StringCodec;
+    totalHeader: import("./codecs").StringCodec;
+    assetsHeader: import("./codecs").StringCodec;
+    metaSelector: import("./codecs").StringCodec;
+    scrollArea: import("./codecs").BoolCodec;
+    fill: import("./codecs").BoolCodec;
+    class: import("./codecs").StringCodec;
+    scrollAreaClass: import("./codecs").StringCodec;
+    viewportClass: import("./codecs").StringCodec;
+    spacerClass: import("./codecs").StringCodec;
+    blockClass: import("./codecs").StringCodec;
+};
+type VirtualizerProps = SchemaToProps<typeof virtualizerSchema>;
+export { VIRTUALIZER_AXES, virtualizerSchema };
+export type { VirtualizerAxis, VirtualizerProps };

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

@@ -0,0 +1,41 @@
+import type Alpine from 'alpinejs';
+import { type PropState } from './codecs';
+import type { TrellisAlpineComponent } from './index';
+import { type VirtualScrollAlign } from './virtual-window';
+import { virtualizerSchema } from './virtualizer-schema';
+import type { CursorVirtualizerOptions } from './cursor-data-source';
+type ResetOptions = {
+    scrollTop?: number;
+};
+type SetUrlOptions = {
+    reset?: boolean;
+};
+/** Public Alpine API for `ui.virtualizer`. @public */
+interface UiVirtualizerApi<Query = unknown> {
+    /** Whether the configured cursor data source supports arbitrary index seeks. */
+    readonly supportsSeek: boolean;
+    /** Scrolls a logical item into the requested vertical alignment. */
+    scrollToIndex(index: number, align?: VirtualScrollAlign): void;
+    /** Replaces the known logical item count and reloads mounted ranges. */
+    setTotalItems(count: number): void;
+    /** Replaces the fragment endpoint and optionally resets to the top. */
+    setUrl(url: string, options?: SetUrlOptions): void;
+    /** Replaces cursor-mode query state and resets to the first cursor. */
+    setQuery(query: Query): void;
+    /** Invalidates all blocks and reloads them around a scroll position. */
+    reset(options?: ResetOptions): void;
+    /** Reloads all blocks without changing the fragment endpoint. */
+    reload(options?: ResetOptions): void;
+}
+type VirtualizerData<Query = unknown> = UiVirtualizerApi<Query> & {
+    props: PropState<typeof virtualizerSchema>;
+    init(): void;
+    destroy(): void;
+};
+type VirtualizerOptions<Query, Content> = {
+    cursor?: CursorVirtualizerOptions<Query, Content>;
+};
+declare const UiVirtualizer: <Query = unknown, Content = unknown>(AlpineInstance: Alpine.Alpine, options?: VirtualizerOptions<Query, Content>) => TrellisAlpineComponent<VirtualizerData<Query>>;
+export { UiVirtualizer };
+export type { CursorDataSource, CursorFirstArgs, CursorMoveArgs, CursorPage, CursorResponseAdapter, CursorRenderPayload, CursorSeekArgs, SoughtCursorPage, CursorVirtualizerOptions, } from './cursor-data-source';
+export type { ResetOptions, SetUrlOptions, UiVirtualizerApi, VirtualizerOptions, VirtualizerData, VirtualScrollAlign, };

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

@@ -85,6 +85,11 @@
     --color-neutral-a11: transparent;
     --color-neutral-12: transparent;
     --color-neutral-a12: transparent;
+    --interaction-disclosure-expanded-emphasis-mix: 0%;
+    --interaction-disclosure-expanded-emphasis-edge-width: 0px;
+    --interaction-disclosure-expanded-focus-edge-width: 0px;
+    --interaction-disclosure-expanded-accent-focus-width: 0px;
+    --interaction-disclosure-expanded-danger-focus-width: 0px;
     --border-width-0: 0px;
     --border-width-1: 1px;
     --border-width-2: 2px;
@@ -5492,6 +5497,37 @@
       padding-block: var(--spacing-2);
     }
   }
+  .\[\&\:not\(\[data-responsive-mode\=desktop\]\)\]\:inset-0 {
+    &:not([data-responsive-mode=desktop]) {
+      inset: var(--spacing-0);
+    }
+  }
+  .\[\&\:not\(\[data-responsive-mode\=desktop\]\)\]\:h-dvh {
+    &:not([data-responsive-mode=desktop]) {
+      height: 100dvh;
+    }
+  }
+  .\[\&\:not\(\[data-responsive-mode\=desktop\]\)\]\:w-full {
+    &:not([data-responsive-mode=desktop]) {
+      width: 100%;
+    }
+  }
+  .\[\&\:not\(\[data-responsive-mode\=desktop\]\)\]\:max-w-none {
+    &:not([data-responsive-mode=desktop]) {
+      max-width: none;
+    }
+  }
+  .\[\&\:not\(\[data-responsive-mode\=desktop\]\)\]\:rounded-none {
+    &:not([data-responsive-mode=desktop]) {
+      border-radius: var(--radius-none);
+    }
+  }
+  .\[\&\:not\(\[data-responsive-mode\=desktop\]\)\]\:border-0 {
+    &:not([data-responsive-mode=desktop]) {
+      border-style: var(--tw-border-style);
+      border-width: var(--border-width-0);
+    }
+  }
   .\[\&\>\*\]\:bg-interaction-selected {
     &>* {
       background-color: var(--color-interaction-selected);
@@ -6399,12 +6435,12 @@
   --color-surface-8: oklch(100% 0 none / 1);
   --color-surface-8-ink: oklch(22.74366% 0 none / 1);
   --color-surface-8-ink-muted: oklch(56.808564% 0 none / 1);
-  --color-intent-accent-focus-width: 2px;
-  --color-intent-danger-focus-width: 3px;
-  --color-intent-information-focus-width: 3px;
-  --color-intent-neutral-focus-width: 3px;
-  --color-intent-success-focus-width: 3px;
-  --color-intent-warning-focus-width: 3px;
+  --color-intent-accent-focus-width: 1px;
+  --color-intent-danger-focus-width: 1px;
+  --color-intent-information-focus-width: 1px;
+  --color-intent-neutral-focus-width: 1px;
+  --color-intent-success-focus-width: 1px;
+  --color-intent-warning-focus-width: 1px;
   --background-interaction-selection-accent: oklch(50.756307% 0.185449 257.696372 / 0.118811);
   --background-interaction-selection-accent-hover: oklch(50.756307% 0.185449 257.696372 / 0.167052);
   --background-interaction-selection-danger: oklch(50.734487% 0.20819 29.23388 / 0.120444);
@@ -6698,12 +6734,12 @@
   --color-surface-8: oklch(45.262653% 0.002896 251.779887 / 1);
   --color-surface-8-ink: oklch(99.80618% 0.000579 251.779887 / 1);
   --color-surface-8-ink-muted: oklch(85.441382% 0.000579 251.779887 / 1);
-  --color-intent-accent-focus-width: 2px;
-  --color-intent-danger-focus-width: 3px;
-  --color-intent-information-focus-width: 3px;
-  --color-intent-neutral-focus-width: 3px;
-  --color-intent-success-focus-width: 3px;
-  --color-intent-warning-focus-width: 3px;
+  --color-intent-accent-focus-width: 1px;
+  --color-intent-danger-focus-width: 1px;
+  --color-intent-information-focus-width: 1px;
+  --color-intent-neutral-focus-width: 1px;
+  --color-intent-success-focus-width: 1px;
+  --color-intent-warning-focus-width: 1px;
   --background-interaction-selection-accent: oklch(77.631661% 0.121666 245.605952 / 0.058873);
   --background-interaction-selection-accent-hover: oklch(77.631661% 0.121666 245.605952 / 0.087255);
   --background-interaction-selection-danger: oklch(78.425088% 0.125337 22.763785 / 0.056177);
@@ -9251,7 +9287,22 @@
   [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] {
+  [data-ui-data-grid-cell][data-align="start"] {
+    justify-content: flex-start;
+    text-align: left;
+  }
+  [data-ui-data-grid-cell][data-align="center"] {
+    justify-content: center;
+    text-align: center;
+  }
+  [data-ui-data-grid-cell][data-align="end"] {
+    justify-content: flex-end;
+    text-align: right;
+  }
+  [data-ui-data-grid][data-border="row"] [data-ui-data-grid-header], [data-ui-data-grid][data-border="grid"] [data-ui-data-grid-header] {
+    box-shadow: inset 0 -1px var(--color-separator);
+  }
+  [data-ui-data-grid][data-border="row"] [data-ui-data-grid-cell], [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) {
@@ -10473,7 +10524,7 @@
     width: var(--ui-tabs-line-indicator-width);
     height: var(--ui-tabs-line-indicator-height);
     border-radius: 0;
-    background-color: var(--color-intent-accent-solid);
+    background-color: var(--ui-selection-solid);
   }
   [data-ui-tabs-list][data-variant="segmented"]:not([data-ui-tabs-ready]) > [data-ui-tabs-tab][data-selected]::before {
     inset: var(--border-width-edge-control);
@@ -10604,6 +10655,9 @@
     color: var(--ui-option-text);
     background-color: var(--ui-option-active);
   }
+  [data-ui-sortable][data-ui-menu] [data-ui-menu-item]:not([data-active="true"]):not([data-disabled]) {
+    background-color: transparent;
+  }
   [data-ui-option-recipe]:is([data-selected], [data-current], [aria-current]:not([aria-current="false"])):not([data-ui-option-selection="mark"]):not([data-disabled]), [data-ui-select][data-mark="none"] [data-ui-option-recipe][data-ui-option-selection="mark"][data-selected]:not([data-disabled]) {
     color: var(--ui-option-selected-ink);
     background: var(--ui-option-selected-background);
@@ -10675,24 +10729,36 @@
     background-color: var(--color-interaction-hover);
     box-shadow: none;
   }
-  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"]:is(:hover, :active, :focus-within, [data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"]:is(:hover, :active, :focus-within):not([data-ui-control-interaction="disclosure"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]), [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"][data-ui-control-interaction="disclosure"]:is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"]))):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
     background-color: var(--color-interaction-pressed);
   }
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"][data-ui-control-interaction="disclosure"][data-state="open"]:not(:is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"])))):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+    background-color: color-mix( in oklch, transparent, transparent 0% );
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix( in oklch, var(--color-interaction-hover), var(--color-interaction-pressed) var(--interaction-disclosure-expanded-emphasis-mix) );
+    }
+  }
   [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
     box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge-hover);
   }
-  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"]:is(:focus-within, [data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"]:focus-within:not([data-ui-control-interaction="disclosure"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]), [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"][data-ui-control-interaction="disclosure"]:is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"]))):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
     box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-accent-edge-strong), 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
   }
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="outline"][data-ui-control-interaction="disclosure"][data-state="open"]:not(:is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"])))):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+    box-shadow: 0 0 0 var(--interaction-disclosure-expanded-focus-edge-width) var(--color-intent-accent-edge-strong), 0 0 0 var(--interaction-disclosure-expanded-emphasis-edge-width) var(--ui-surface-edge-strong), 0 0 0 var(--border-width-edge-control) var(--ui-surface-edge), 0 0 0 var(--interaction-disclosure-expanded-accent-focus-width) var(--color-intent-accent-focus);
+  }
   [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"]) {
     box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge, var(--ui-surface-edge-strong));
   }
   [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"]):is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled) {
     box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge-hover, var(--ui-surface-edge-strong));
   }
-  [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"]):is(:focus-within, [data-state="open"]):not([data-disabled]):not(:disabled) {
+  [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"]):focus-within:not([data-ui-control-interaction="disclosure"]):not([data-disabled]):not(:disabled), [data-ui-control][data-ui-control-recipe="field"][data-ui-control-interaction="disclosure"]:is([data-invalid], [aria-invalid="true"]):is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"]))):not([data-disabled]):not(:disabled) {
     box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge-strong, var(--ui-surface-edge-strong)), 0 0 0 var(--color-intent-danger-focus-width, var(--color-intent-accent-focus-width)) var(--color-intent-danger-focus, var(--color-intent-accent-focus));
   }
+  [data-ui-control][data-ui-control-recipe="field"][data-ui-control-interaction="disclosure"][data-state="open"]:is([data-invalid], [aria-invalid="true"]):not(:is(:focus-visible:not([data-ui-focus-indicator="suppressed"]), :has(:focus-visible:not([data-ui-focus-indicator="suppressed"])))):not([data-disabled]):not(:disabled) {
+    box-shadow: 0 0 0 var(--interaction-disclosure-expanded-emphasis-edge-width) var(--color-intent-danger-edge-strong, var(--ui-surface-edge-strong)), 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge, var(--ui-surface-edge-strong)), 0 0 0 var(--interaction-disclosure-expanded-danger-focus-width, var(--interaction-disclosure-expanded-accent-focus-width)) var(--color-intent-danger-focus, var(--color-intent-accent-focus));
+  }
   [data-ui-control][data-ui-control-recipe="field"] :is(input, textarea)::placeholder {
     color: var(--ui-surface-ink-muted);
     opacity: 1;