@omniviewdev/base-ui 0.8.0 → 0.9.1

package/dist/index.d.ts

@@ -1731,6 +1731,8 @@ declare interface DecoratedContentProps_4 {
     endDecorator?: ReactNode;
 }
 
+export declare const DEFAULT_TAB_DRAG_TYPE: TabDragType;
+
 export declare const DescriptionList: DescriptionListCompound;
 
 export declare type DescriptionListColumns = 1 | 2 | 3;
@@ -1757,11 +1759,18 @@ export declare interface DescriptionListProps extends HTMLAttributes<HTMLDListEl
 
 declare const DescriptionListRoot: ForwardRefExoticComponent<DescriptionListProps & RefAttributes<HTMLDListElement>>;
 
+/**
+ * Release point of a tear-off. Screen coordinates are not global in every
+ * webview (WebKitGTK reports them relative to the native window), so hosts that
+ * place native windows can use the client point with their own window bounds.
+ */
 export declare type DetachCommit = {
     id: TabId;
     payload?: unknown;
     screenX: number;
     screenY: number;
+    clientX: number;
+    clientY: number;
 };
 
 export declare const Dialog: DialogCompound;
@@ -1870,11 +1879,15 @@ export declare interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>
 
 declare const DrawerRoot: ForwardRefExoticComponent<DrawerProps & RefAttributes<HTMLDivElement>>;
 
-declare interface DropZoneRegistration {
+export declare interface DropZoneRegistration {
     instanceId: string;
     getRect: () => DOMRect | null;
     getElement: () => HTMLElement | null;
     onAttach: (commit: AttachCommit) => void;
+    /** Only sessions of the same type can drop here. Defaults to `'editor-tab'`. */
+    dragType?: TabDragType;
+    /** Vertical padding added to the rect for the second hit-test pass. Defaults to 60. */
+    expandY?: number;
 }
 
 export declare const EditableList: EditableListCompound;
@@ -2051,13 +2064,24 @@ export declare interface EditorTabsProps extends Omit<StyledComponentProps, 'var
     allowReorderAcrossGroups?: boolean;
     detachable?: boolean;
     detachThresholdPx?: number;
+    /** Fired when a tab is released outside the strip. In broker mode, only when it lands on no target. */
     onDetachCommit?: (commit: DetachCommit) => void;
     instanceId?: string;
     onAttachTab?: (commit: AttachCommit) => void;
     /** When true and a TabDragBrokerProvider is present, vertical detach starts a
      *  broker session instead of the default Phase 3 flow. */
     detachToBroker?: boolean;
+    /** Strips only exchange tabs with strips of the same type. Defaults to `'editor-tab'`. */
+    dragType?: TabDragType;
+    /**
+     * Broker mode: fired once when a tab dragged from this strip was attached to
+     * another strip (in this document or another one). Remove the tab here.
+     */
+    onTabTransferred?: (commit: TabTransferCommit) => void;
     className?: string;
+    /** Accessible name of the tab list. Give one of these when a page has more than one strip. */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
 }
 
 declare const EditorTabsRoot: ForwardRefExoticComponent<EditorTabsProps & RefAttributes<HTMLDivElement>>;
@@ -3631,6 +3655,31 @@ export declare interface RelationshipValidation {
     diagnostics: readonly InspectorDiagnostic[];
 }
 
+export declare type RemoteTabDragEvent = {
+    type: 'hover';
+    sessionId: string;
+    payload: TabDragPayload;
+    clientX: number;
+    clientY: number;
+} | {
+    type: 'leave';
+    sessionId: string;
+} | {
+    type: 'drop';
+    sessionId: string;
+    payload: TabDragPayload;
+    clientX: number;
+    clientY: number;
+    respond: (result: RemoteTabDropResult) => void;
+} | {
+    type: 'end';
+    sessionId: string;
+};
+
+export declare type RemoteTabDropResult = {
+    targetInstanceId: string;
+} | null;
+
 export declare type ReorderMeta = {
     id: TabId;
     from: number;
@@ -4676,37 +4725,100 @@ export declare type TabDescriptor = {
     disabled?: boolean;
     closable?: boolean;
     pinned?: boolean;
+    /** Set to false to keep this tab reorder-only even when the strip is detachable. Defaults to true. */
+    detachable?: boolean;
     groupId?: TabGroupId | null;
     payload?: unknown;
 };
 
-export declare function TabDragBrokerProvider({ children, onCancel }: TabDragBrokerProviderProps): JSX.Element;
+export declare function TabDragBrokerProvider({ children, onCancel, transport, }: TabDragBrokerProviderProps): JSX.Element;
 
-declare interface TabDragBrokerProviderProps {
+export declare interface TabDragBrokerProviderProps {
     children: ReactNode;
     onCancel?: (session: TabDragSession) => void;
+    /** Connects this document's broker to brokers in other documents (e.g. other OS windows). */
+    transport?: TabDragTransport;
 }
 
-declare interface TabDragBrokerValue {
+export declare interface TabDragBrokerValue {
     activeSession: TabDragSession | null;
-    beginSession: (session: TabDragSession, clientX: number, clientY: number) => void;
+    beginSession: (session: TabDragSession, pointer: TabDragPointer) => void;
+    /** Ends the session as a cancel: calls `onCancel` and reports a `cancelled` outcome. */
     cancelSession: () => void;
-    /** Clears the session without calling onCancel (used when reverting mid-drag). */
+    /** Ends the session without calling onCancel or reporting an outcome. */
     clearSession: () => void;
     registerDropZone: (reg: DropZoneRegistration) => void;
     unregisterDropZone: (instanceId: string) => void;
+    /** Zone under the pointer, for a local session or a remote session hovering this document. */
     hoverInstanceId: string | null;
+    /** Insertion index within `hoverInstanceId`'s zone. */
     hoverInsertIndex: number | null;
     pointerX: number;
     pointerY: number;
 }
 
-declare interface TabDragSession {
+/** How a broker session ended, reported once to the session's source. */
+export declare type TabDragOutcome = {
+    type: 'transferred';
+    targetInstanceId: string;
+} | ({
+    type: 'torn-off';
+} & TabDragPointer) | {
+    type: 'cancelled';
+};
+
+/** Serializable form of a drag session that can cross documents. `tab.icon` is always undefined. */
+export declare type TabDragPayload = {
+    /** Icon stripped; the payload must be JSON-serializable. */
+    tab: TabDescriptor;
+    sourceInstanceId: string;
+    dragType: TabDragType;
+    ghostStyle?: Record<string, string>;
+};
+
+/** Pointer position in both this document's client space and screen space. */
+export declare type TabDragPointer = TabDragScreenPoint & {
+    clientX: number;
+    clientY: number;
+};
+
+export declare type TabDragScreenPoint = {
+    screenX: number;
+    screenY: number;
+};
+
+export declare interface TabDragSession {
     tab: TabDescriptor;
     sourceInstanceId: string;
+    /** Only drop zones of the same type accept the tab. Defaults to `'editor-tab'`. */
+    dragType?: TabDragType;
     ghostStyle?: React.CSSProperties;
+    /** When true, releasing over no target ends in a `torn-off` outcome; otherwise it is a cancel. */
+    allowTearOff?: boolean;
+    /**
+     * Set by the source strip. Called exactly once with how the session ended,
+     * unless the session is dropped with `clearSession`.
+     */
+    onOutcome?: (outcome: TabDragOutcome) => void;
+}
+
+/**
+ * Connects brokers in separate documents. The source side receives the pointer
+ * in both client and screen space; the host decides which one maps reliably to
+ * its other documents.
+ */
+export declare interface TabDragTransport {
+    begin(sessionId: string, payload: TabDragPayload, pointer: TabDragPointer): void;
+    move(sessionId: string, pointer: TabDragPointer): void;
+    /** Ask other documents to accept the tab at `pointer`. */
+    drop(sessionId: string, pointer: TabDragPointer): Promise<RemoteTabDropResult>;
+    cancel(sessionId: string): void;
+    subscribe(handler: (event: RemoteTabDragEvent) => void): () => void;
 }
 
+/** Identifies which strips can exchange tabs. Strips only accept sessions of their own type. */
+export declare type TabDragType = string;
+
 export declare type TabGroupDescriptor = {
     id: TabGroupId;
     title?: string;
@@ -4845,6 +4957,12 @@ export declare type TabsTabProps = Tabs_2.Tab.Props & {
 
 declare type TabsVariant = 'solid' | 'soft' | 'outline' | 'ghost' | 'flat';
 
+/** Source-side notice that a dragged tab now lives in another strip (local or in another document). */
+export declare type TabTransferCommit = {
+    id: TabId;
+    targetInstanceId: string;
+};
+
 export declare const TagInput: ForwardRefExoticComponent<TagInputProps & RefAttributes<HTMLDivElement>>;
 
 export declare interface TagInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -5050,7 +5168,7 @@ export declare interface ThemeSwitcherProps {
     className?: string;
 }
 
-declare type ThemeTokenKey = 'color.accent.soft' | 'color.accent.strong' | 'color.ansi.black' | 'color.ansi.blue' | 'color.ansi.bright.black' | 'color.ansi.bright.blue' | 'color.ansi.bright.cyan' | 'color.ansi.bright.green' | 'color.ansi.bright.magenta' | 'color.ansi.bright.red' | 'color.ansi.bright.white' | 'color.ansi.bright.yellow' | 'color.ansi.cyan' | 'color.ansi.green' | 'color.ansi.magenta' | 'color.ansi.red' | 'color.ansi.white' | 'color.ansi.yellow' | 'color.bg.base' | 'color.bg.elevated' | 'color.bg.inset' | 'color.bg.surface' | 'color.bg.surface.overlay' | 'color.bg.surface.raised' | 'color.border.control' | 'color.border.default' | 'color.border.focus' | 'color.border.muted' | 'color.border.overlay' | 'color.border.strong' | 'color.brand.300' | 'color.brand.400' | 'color.brand.500' | 'color.danger' | 'color.danger.soft' | 'color.datepicker.cell.bg' | 'color.datepicker.cell.bg.hover' | 'color.datepicker.cell.bg.selected' | 'color.datepicker.cell.bg.today' | 'color.datepicker.cell.fg' | 'color.datepicker.cell.fg.disabled' | 'color.datepicker.cell.fg.other.month' | 'color.datepicker.cell.fg.selected' | 'color.datepicker.cell.fg.today' | 'color.datepicker.header.bg' | 'color.diff.insert.bg' | 'color.diff.remove.bg' | 'color.discovery' | 'color.discovery.soft' | 'color.drawer.handle' | 'color.drawer.handle.hover' | 'color.editor.bg' | 'color.editor.bracket.1' | 'color.editor.bracket.2' | 'color.editor.bracket.3' | 'color.editor.bracket.4' | 'color.editor.bracket.5' | 'color.editor.bracket.6' | 'color.editor.bracket.match.bg' | 'color.editor.bracket.match.border' | 'color.editor.cursor' | 'color.editor.fg' | 'color.editor.find.match.bg' | 'color.editor.find.match.border' | 'color.editor.find.range.bg' | 'color.editor.group.bg' | 'color.editor.group.border' | 'color.editor.group.drop.border' | 'color.editor.group.header.bg' | 'color.editor.indent.guide' | 'color.editor.indent.guide.active' | 'color.editor.line.highlight.bg' | 'color.editor.line.highlight.border' | 'color.editor.line.number' | 'color.editor.line.number.active' | 'color.editor.link' | 'color.editor.ruler' | 'color.editor.selection.bg' | 'color.editor.selection.inactive.bg' | 'color.editor.whitespace' | 'color.fg.default' | 'color.fg.disabled' | 'color.fg.inverse' | 'color.fg.muted' | 'color.fg.subtle' | 'color.gutter.added' | 'color.gutter.bg' | 'color.gutter.deleted' | 'color.gutter.modified' | 'color.info' | 'color.info.soft' | 'color.minimap.bg' | 'color.minimap.error' | 'color.minimap.find.match' | 'color.minimap.selection' | 'color.minimap.warning' | 'color.progress.fill' | 'color.progress.track' | 'color.scrollarea.thumb' | 'color.scrollarea.thumb.hover' | 'color.scrollarea.track' | 'color.secondary' | 'color.secondary.soft' | 'color.state.focus.ring' | 'color.state.hover' | 'color.state.pressed' | 'color.state.selected' | 'color.success' | 'color.success.soft' | 'color.tab.active.bg' | 'color.tab.active.border' | 'color.tab.active.fg' | 'color.tab.bg' | 'color.tab.border' | 'color.tab.fg' | 'color.tab.hover.bg' | 'color.tab.hover.fg' | 'color.tab.inactive.bg' | 'color.tab.inactive.fg' | 'color.tab.modified.border' | 'color.terminal.bg' | 'color.terminal.border' | 'color.terminal.cursor' | 'color.terminal.fg' | 'color.terminal.selection.bg' | 'color.terminal.selection.fg' | 'color.warning' | 'color.warning.soft' | 'syntax.class' | 'syntax.comment' | 'syntax.decorator' | 'syntax.function' | 'syntax.interface' | 'syntax.keyword' | 'syntax.keyword.control' | 'syntax.keyword.operator' | 'syntax.method' | 'syntax.namespace' | 'syntax.number' | 'syntax.operator' | 'syntax.parameter' | 'syntax.property' | 'syntax.punctuation' | 'syntax.regexp' | 'syntax.string' | 'syntax.string.escape' | 'syntax.style.comment' | 'syntax.style.function' | 'syntax.style.keyword' | 'syntax.style.type' | 'syntax.type' | 'syntax.variable';
+declare type ThemeTokenKey = 'color.accent.soft' | 'color.accent.strong' | 'color.ansi.black' | 'color.ansi.blue' | 'color.ansi.bright.black' | 'color.ansi.bright.blue' | 'color.ansi.bright.cyan' | 'color.ansi.bright.green' | 'color.ansi.bright.magenta' | 'color.ansi.bright.red' | 'color.ansi.bright.white' | 'color.ansi.bright.yellow' | 'color.ansi.cyan' | 'color.ansi.green' | 'color.ansi.magenta' | 'color.ansi.red' | 'color.ansi.white' | 'color.ansi.yellow' | 'color.bg.base' | 'color.bg.control' | 'color.bg.control.hover' | 'color.bg.control.pressed' | 'color.bg.elevated' | 'color.bg.inset' | 'color.bg.surface' | 'color.bg.surface.overlay' | 'color.bg.surface.raised' | 'color.border.chrome' | 'color.border.control' | 'color.border.default' | 'color.border.focus' | 'color.border.muted' | 'color.border.overlay' | 'color.border.strong' | 'color.brand.300' | 'color.brand.400' | 'color.brand.500' | 'color.danger' | 'color.danger.soft' | 'color.datepicker.cell.bg' | 'color.datepicker.cell.bg.hover' | 'color.datepicker.cell.bg.selected' | 'color.datepicker.cell.bg.today' | 'color.datepicker.cell.fg' | 'color.datepicker.cell.fg.disabled' | 'color.datepicker.cell.fg.other.month' | 'color.datepicker.cell.fg.selected' | 'color.datepicker.cell.fg.today' | 'color.datepicker.header.bg' | 'color.diff.insert.bg' | 'color.diff.remove.bg' | 'color.discovery' | 'color.discovery.soft' | 'color.drawer.handle' | 'color.drawer.handle.hover' | 'color.editor.bg' | 'color.editor.bracket.1' | 'color.editor.bracket.2' | 'color.editor.bracket.3' | 'color.editor.bracket.4' | 'color.editor.bracket.5' | 'color.editor.bracket.6' | 'color.editor.bracket.match.bg' | 'color.editor.bracket.match.border' | 'color.editor.cursor' | 'color.editor.fg' | 'color.editor.find.match.bg' | 'color.editor.find.match.border' | 'color.editor.find.range.bg' | 'color.editor.group.bg' | 'color.editor.group.border' | 'color.editor.group.drop.border' | 'color.editor.group.header.bg' | 'color.editor.indent.guide' | 'color.editor.indent.guide.active' | 'color.editor.line.highlight.bg' | 'color.editor.line.highlight.border' | 'color.editor.line.number' | 'color.editor.line.number.active' | 'color.editor.link' | 'color.editor.ruler' | 'color.editor.selection.bg' | 'color.editor.selection.inactive.bg' | 'color.editor.whitespace' | 'color.fg.default' | 'color.fg.disabled' | 'color.fg.inverse' | 'color.fg.muted' | 'color.fg.subtle' | 'color.gutter.added' | 'color.gutter.bg' | 'color.gutter.deleted' | 'color.gutter.modified' | 'color.info' | 'color.info.soft' | 'color.minimap.bg' | 'color.minimap.error' | 'color.minimap.find.match' | 'color.minimap.selection' | 'color.minimap.warning' | 'color.progress.fill' | 'color.progress.track' | 'color.scrollarea.thumb' | 'color.scrollarea.thumb.hover' | 'color.scrollarea.track' | 'color.secondary' | 'color.secondary.soft' | 'color.state.focus.ring' | 'color.state.hover' | 'color.state.pressed' | 'color.state.selected' | 'color.success' | 'color.success.soft' | 'color.tab.active.bg' | 'color.tab.active.border' | 'color.tab.active.fg' | 'color.tab.bg' | 'color.tab.border' | 'color.tab.fg' | 'color.tab.hover.bg' | 'color.tab.hover.fg' | 'color.tab.inactive.bg' | 'color.tab.inactive.fg' | 'color.tab.modified.border' | 'color.terminal.bg' | 'color.terminal.border' | 'color.terminal.cursor' | 'color.terminal.fg' | 'color.terminal.selection.bg' | 'color.terminal.selection.fg' | 'color.warning' | 'color.warning.soft' | 'syntax.class' | 'syntax.comment' | 'syntax.decorator' | 'syntax.function' | 'syntax.interface' | 'syntax.keyword' | 'syntax.keyword.control' | 'syntax.keyword.operator' | 'syntax.method' | 'syntax.namespace' | 'syntax.number' | 'syntax.operator' | 'syntax.parameter' | 'syntax.property' | 'syntax.punctuation' | 'syntax.regexp' | 'syntax.string' | 'syntax.string.escape' | 'syntax.style.comment' | 'syntax.style.function' | 'syntax.style.keyword' | 'syntax.style.type' | 'syntax.type' | 'syntax.variable';
 
 export declare class ThemeValidationError extends Error {
     readonly code: ThemeValidationErrorCode;
@@ -5946,7 +6064,7 @@ export declare type WorkspaceActionResult = {
 export { }
 
 
-declare namespace TooltipRoot {
+declare namespace ComboboxRoot {
     var displayName: string;
 }
 
@@ -5961,11 +6079,11 @@ declare namespace SelectRoot {
 }
 
 
-declare namespace ComboboxRoot {
+declare namespace DataTableRoot {
     var displayName: string;
 }
 
 
-declare namespace DataTableRoot {
+declare namespace TooltipRoot {
     var displayName: string;
 }