@vireo-ai/trellis-ui 0.1.12 → 0.1.17

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

@@ -0,0 +1,133 @@
+type SortableOperation = 'insert' | 'move';
+type SortableCancelReason = 'escape' | 'outside' | 'disabled' | 'removed';
+type SortableOrientation = 'vertical' | 'horizontal' | 'grid';
+type SortableFeedback = 'indicator' | 'reorder';
+type SortableEdge = 'before' | 'after';
+type SortableDirection = 'ltr' | 'rtl';
+type SortableFrame = Readonly<{
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}>;
+type SortableInput = Readonly<{
+    clientX: number;
+    clientY: number;
+}>;
+type SortableDragDetail = Readonly<{
+    source: SortableSource;
+    input: SortableInput;
+    previousInput: SortableInput;
+    delta: Readonly<{
+        x: number;
+        y: number;
+    }>;
+    velocity: Readonly<{
+        x: number;
+        y: number;
+    }>;
+    ghostFrame: Readonly<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>;
+}>;
+type SortableSourceFields = Readonly<{
+    scopeId: string;
+    id: string;
+    type: string;
+    label?: string;
+    data?: Readonly<Record<string, unknown>>;
+}>;
+type SortableInsertSource = SortableSourceFields & Readonly<{
+    operation: 'insert';
+    groupId: null;
+}>;
+type SortableMoveSource = SortableSourceFields & Readonly<{
+    operation: 'move';
+    groupId: string;
+}>;
+type SortableSource = SortableInsertSource | SortableMoveSource;
+type SortableAnchor = Readonly<{
+    id: string;
+    edge: SortableEdge;
+}>;
+type SortablePlacement = Readonly<{
+    destination: Readonly<{
+        groupId: string;
+    }>;
+    anchor: SortableAnchor | null;
+    index?: number;
+}>;
+type SortableGroup = Readonly<{
+    scopeId: string;
+    id: string;
+    orientation: SortableOrientation;
+    columns: number | null;
+    accepts: readonly string[];
+    disabled: boolean;
+    readOnly: boolean;
+    feedback: SortableFeedback;
+    sourceOpacity: number;
+    ghostOpacity: number;
+    dragCursor: string;
+    data?: Readonly<Record<string, unknown>>;
+    label?: string;
+}>;
+type SortableCanDropContext = Readonly<{
+    source: SortableSource;
+    destination: SortableGroup;
+    itemIds: readonly string[];
+    input: SortableInput | null;
+}>;
+type SortableDropPlacement = Readonly<{
+    destination: Readonly<{
+        groupId: string;
+    }>;
+    anchor: SortableAnchor | null;
+    index?: number;
+}>;
+type SortableDropDetail = (SortableDropPlacement & Readonly<{
+    operation: 'insert';
+    source: SortableInsertSource;
+}>) | (SortableDropPlacement & Readonly<{
+    operation: 'move';
+    source: SortableMoveSource;
+}>);
+type SortableMoveOptions = Readonly<{
+    scope: string;
+    sourceId: string;
+    destinationGroupId?: string;
+}>;
+type SortableMoveRelativeOptions = SortableMoveOptions & Readonly<{
+    anchorId: string;
+}>;
+interface UiSortableService {
+    moveBefore(options: SortableMoveRelativeOptions): boolean;
+    moveAfter(options: SortableMoveRelativeOptions): boolean;
+    moveToStart(options: SortableMoveOptions & {
+        destinationGroupId: string;
+    }): boolean;
+    moveToEnd(options: SortableMoveOptions & {
+        destinationGroupId: string;
+    }): boolean;
+}
+declare const isValidGridColumns: (columns: number | null) => columns is number;
+type SortableItemGeometry = Readonly<{
+    id: string;
+    rect: SortableFrame;
+}>;
+type ResolveSortablePlacementOptions = Readonly<{
+    groupId: string;
+    orientation: SortableOrientation;
+    direction: SortableDirection;
+    columns: number | null;
+    groupRect: SortableFrame;
+    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 { isValidGridColumns };

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

@@ -0,0 +1,2 @@
+declare const activateSortableCursor: (cursor: string) => (() => void);
+export { activateSortableCursor };

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

@@ -0,0 +1,36 @@
+import type { SortableDirection, SortableFrame, SortableItemGeometry, SortableOrientation, SortablePlacement } from './contract';
+type SortableReorderLayout = Readonly<{
+    groupId: string;
+    orientation: SortableOrientation;
+    direction: SortableDirection;
+    columns: number | null;
+    groupRect: SortableFrame;
+    items: readonly SortableItemGeometry[];
+}>;
+type SortableReorderOffset = Readonly<{
+    groupId: string;
+    id: string;
+    x: number;
+    y: number;
+}>;
+declare const projectSortableReorderLayout: (layout: SortableReorderLayout, offsets: readonly SortableReorderOffset[]) => SortableReorderLayout;
+declare const resolveSortableDropFrame: ({ source, placement, sourceLayout, destinationLayout, }: {
+    source: Readonly<{
+        id: string;
+        groupId: string | null;
+    }>;
+    placement: SortablePlacement;
+    sourceLayout: SortableReorderLayout | null;
+    destinationLayout?: SortableReorderLayout | null;
+}) => SortableFrame | null;
+declare const resolveSortableReorderOffsets: ({ source, placement, sourceLayout, destinationLayout, }: {
+    source: Readonly<{
+        id: string;
+        groupId: string | null;
+    }>;
+    placement: SortablePlacement;
+    sourceLayout: SortableReorderLayout | null;
+    destinationLayout?: SortableReorderLayout | null;
+}) => readonly SortableReorderOffset[];
+export { projectSortableReorderLayout, resolveSortableDropFrame, resolveSortableReorderOffsets };
+export type { SortableReorderLayout, SortableReorderOffset };

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

@@ -0,0 +1,26 @@
+import type { SortableInput } from './contract';
+type ManagedGhostFrame = Readonly<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}>;
+type SortableGhost = Readonly<{
+    positioner: HTMLElement;
+    visual: HTMLElement;
+    frame(): ManagedGhostFrame;
+    projectedFrame(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, opacity }: {
+    source: HTMLElement;
+    input: SortableInput;
+    preview?: HTMLTemplateElement | null;
+    opacity?: number;
+}) => SortableGhost;
+export { createSortableGhost, frameFromRect, sanitizeClone };
+export type { ManagedGhostFrame, SortableGhost };

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

@@ -0,0 +1,13 @@
+export { distanceToSegment, isSameSortablePlacement, projectSortablePlacement, resolveSortableIndicatorFrame, resolveSortablePlacement, resolveSortableReorderPlacement, } from './placement';
+export { isValidGridColumns } from './contract';
+export { projectSortableReorderLayout, resolveSortableDropFrame, resolveSortableReorderOffsets, } from './feedback';
+export type { SortableReorderLayout, SortableReorderOffset } from './feedback';
+export type { SortableIndicatorFrame } from './placement';
+export { createSortableGhost, frameFromRect, sanitizeClone } from './ghost';
+export type { ManagedGhostFrame, SortableGhost } from './ghost';
+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 { 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/placement.d.ts

@@ -0,0 +1,34 @@
+import type { ResolveSortablePlacementOptions, SortablePlacement } from './contract';
+type SortableIndicatorFrame = Readonly<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    kind: 'inline-boundary' | 'block-boundary';
+}>;
+declare const isSameSortablePlacement: (left: SortablePlacement | null, right: SortablePlacement | null) => boolean;
+declare const distanceToSegment: ({ point, start, end, }: {
+    point: {
+        x: number;
+        y: number;
+    };
+    start: {
+        x: number;
+        y: number;
+    };
+    end: {
+        x: number;
+        y: number;
+    };
+}) => number;
+declare const resolveSortablePlacement: (options: ResolveSortablePlacementOptions) => SortablePlacement;
+declare const resolveSortableReorderPlacement: (options: ResolveSortablePlacementOptions) => SortablePlacement;
+declare const projectSortablePlacement: ({ placement, sourceId, sourceGroupId, itemIds, }: {
+    placement: SortablePlacement;
+    sourceId: string;
+    sourceGroupId: string | null;
+    itemIds: readonly string[];
+}) => SortablePlacement;
+declare const resolveSortableIndicatorFrame: (options: Omit<ResolveSortablePlacementOptions, "input">, placement: SortablePlacement) => SortableIndicatorFrame;
+export { distanceToSegment, isSameSortablePlacement, projectSortablePlacement, resolveSortableIndicatorFrame, resolveSortablePlacement, resolveSortableReorderPlacement, };
+export type { SortableIndicatorFrame };

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

@@ -0,0 +1,25 @@
+import type { SortableCanDropContext, SortableGroup, SortablePlacement, SortableSource, SortableInput, UiSortableService } from './contract';
+type GroupRecord = Readonly<{
+    element: HTMLElement;
+    getGroup(): SortableGroup;
+    getItemIds(): readonly string[];
+    canDrop?(context: SortableCanDropContext): boolean;
+}>;
+type SourceRecord = Readonly<{
+    element: HTMLElement;
+    getSource(): SortableSource;
+    isDisabled(): boolean;
+}>;
+type SortableRegistry = UiSortableService & Readonly<{
+    registerGroup(record: GroupRecord): () => void;
+    registerSource(record: SourceRecord): () => void;
+    group(scopeId: string, groupId: string): GroupRecord | null;
+    source(scopeId: string, sourceId: string): SourceRecord | null;
+    canDrop(source: SortableSource, destinationGroupId: string, input?: SortableInput | null): boolean;
+    isNoop(source: SortableSource, placement: SortablePlacement): boolean;
+    emitDrop(source: SortableSource, placement: SortablePlacement, input?: SortableInput | null): boolean;
+}>;
+declare const createSortableRegistry: () => SortableRegistry;
+declare const sortable: SortableRegistry;
+export { createSortableRegistry, sortable };
+export type { GroupRecord, SortableRegistry, SourceRecord };

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

@@ -0,0 +1,23 @@
+import { type Machine, type MachineScope } from '../../state-machine';
+type SortablePointerSnapshot = Readonly<{
+    destinationId: string | null;
+    input: Readonly<{
+        clientX: number;
+        clientY: number;
+    }>;
+}>;
+type SortableSourceMachineContext = {
+    data: Record<string, unknown>;
+    pointer: SortablePointerSnapshot | null;
+};
+type SortableSourceMachineEffects<TProps> = Readonly<{
+    resolvePlacement(scope: MachineScope<SortableSourceMachineContext, TProps>): void;
+    synced(scope: MachineScope<SortableSourceMachineContext, TProps>): void;
+    complete(scope: MachineScope<SortableSourceMachineContext, TProps>): void;
+}>;
+declare const createSortableSourceMachine: <TProps>({ props, effects }: {
+    props: TProps;
+    effects: SortableSourceMachineEffects<TProps>;
+}) => Machine<SortableSourceMachineContext, TProps>;
+export { createSortableSourceMachine };
+export type { SortablePointerSnapshot, SortableSourceMachineContext, SortableSourceMachineEffects };

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

@@ -12,7 +12,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 { createResizable, registerResizable, type ResizableOptions, type ResizeAxis, type ResizeDirection, type ResizeEvent, type ResizeMode, type ResizePhase, } from './drag-and-drop';
+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';
 export { del as deleteRequest, get, post, put, registerRequestRuntime, type RequestLifecycleDetail, type RequestMethod, type RequestOptions, type RequestResult, } from './engine/request';

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

@@ -1,6 +1,7 @@
 import type Alpine from 'alpinejs';
 import { motion } from '../motion';
 import { del, get, post, put } from './engine/request';
+import { type UiSortableService } from './drag-and-drop/sortable';
 type UiRuntime = {
     readonly delete: typeof del;
     readonly get: typeof get;
@@ -8,6 +9,7 @@ type UiRuntime = {
     readonly put: typeof put;
     readonly isFetching: boolean;
     readonly motion: typeof motion;
+    readonly sortable: UiSortableService;
 };
 declare const ui: UiRuntime;
 declare const registerUiMagic: (AlpineInstance: Alpine.Alpine) => void;

package/packages/client/types/utils/dom.d.ts

@@ -3,6 +3,7 @@ type DispatchOptions<T> = {
     el: HTMLElement;
     name: string;
     detail?: T;
+    composed?: boolean;
 };
 type AddListenerOptions = {
     target: EventTarget;
@@ -29,7 +30,7 @@ type BoolOptions = {
     value: string | undefined;
 };
 declare const asBool: ({ value }: BoolOptions) => boolean;
-declare const dispatch: <T = unknown>({ el, name, detail }: DispatchOptions<T>) => void;
+declare const dispatch: <T = unknown>({ el, name, detail, composed }: DispatchOptions<T>) => void;
 declare const addListener: ({ target, event, handler, cleanup, options, }: AddListenerOptions) => (() => void);
 declare const setPresence: ({ el, attr, present, value }: PresenceOptions) => void;
 declare const setAttribute: ({ el, attr, value }: AttributeOptions) => void;

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

@@ -23,6 +23,8 @@
     --text-xs--line-height: var(--text-1--line-height);
     --text-sm: var(--text-2);
     --text-sm--line-height: var(--text-2--line-height);
+    --text-base: var(--text-3);
+    --text-base--line-height: var(--text-3--line-height);
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
@@ -169,6 +171,7 @@
     --text-3: 16px;
     --text-3--line-height: 24px;
     --text-3--letter-spacing: 0em;
+    --text-base--letter-spacing: var(--text-3--letter-spacing);
     --text-4: 18px;
     --text-4--line-height: 26px;
     --text-4--letter-spacing: 0em;
@@ -3453,6 +3456,9 @@
   .pt-2 {
     padding-top: var(--spacing-2);
   }
+  .pt-4 {
+    padding-top: var(--spacing-4);
+  }
   .pr-2 {
     padding-right: var(--spacing-2);
   }
@@ -3612,6 +3618,11 @@
     line-height: var(--tw-leading, var(--text-badge-xs--line-height));
     letter-spacing: var(--tw-tracking, var(--text-badge-xs--letter-spacing));
   }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    letter-spacing: var(--tw-tracking, var(--text-base--letter-spacing));
+  }
   .text-body {
     font-size: var(--text-body);
     line-height: var(--tw-leading, var(--text-body--line-height));
@@ -9933,6 +9944,18 @@
   }
 }
 @layer components {
+  [data-ui-select-sheet-heading] {
+    display: none;
+  }
+  [data-ui-select-sheet-header] {
+    display: contents;
+  }
+  [data-ui-select-popover][data-presentation="anchored"] {
+    max-height: var(--ui-popover-available-height, none);
+  }
+  [data-ui-select][data-mode="combobox"] [data-ui-select-popover][data-presentation="anchored"] [data-ui-select-search] {
+    display: none;
+  }
   [data-ui-select-popover]:has([data-ui-select-search]) {
     grid-template-rows: auto minmax(0, 1fr);
   }
@@ -9940,6 +9963,45 @@
     min-height: 0;
     overflow: hidden;
   }
+  [data-ui-select-popover][data-presentation="dialog"], [data-ui-select-popover][data-presentation="fullscreen"] {
+    grid-template-rows: auto minmax(0, 1fr);
+    border: 0;
+    padding-top: env(safe-area-inset-top);
+    padding-right: env(safe-area-inset-right);
+    padding-bottom: env(safe-area-inset-bottom);
+    padding-left: env(safe-area-inset-left);
+  }
+  [data-ui-select-popover][data-presentation="dialog"] {
+    border-radius: var(--radius-overlay-md);
+  }
+  [data-ui-select-popover][data-presentation="fullscreen"] {
+    border-radius: 0;
+  }
+  [data-ui-select-popover][data-presentation="dialog"]::backdrop, [data-ui-select-popover][data-presentation="fullscreen"]::backdrop {
+    background: var(--color-scrim);
+  }
+  [data-ui-select-popover][data-presentation="dialog"] [data-ui-select-sheet-header], [data-ui-select-popover][data-presentation="fullscreen"] [data-ui-select-sheet-header] {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    display: grid;
+    background: inherit;
+  }
+  [data-ui-select-popover][data-presentation="dialog"] [data-ui-select-sheet-heading], [data-ui-select-popover][data-presentation="fullscreen"] [data-ui-select-sheet-heading] {
+    display: flex;
+  }
+  [data-ui-select-popover][data-presentation="dialog"] [data-ui-select-listbox], [data-ui-select-popover][data-presentation="fullscreen"] [data-ui-select-listbox] {
+    display: grid;
+    height: 100%;
+    min-height: 0;
+    grid-template-rows: minmax(0, 1fr) auto auto;
+    overflow: hidden;
+  }
+  [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;
+    overscroll-behavior: contain;
+  }
   [data-ui-select-option-label]:has(>*+*) {
     display: grid;
     gap: var(--spacing-1);
@@ -10763,6 +10825,9 @@
     }
   }
 }
+:root[data-ui-sortable-dragging], :root[data-ui-sortable-dragging] * {
+  cursor: var(--ui-sortable-drag-cursor, default) !important;
+}
 @media (hover: hover) {
   [data-ui-elevation][data-ui-interactive="surface"]:hover {
     --ui-state-shadow-layers: 0 0 0 var(--border-width-edge-perimeter) var(--color-intent-neutral-edge-hover);