@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/widget-tree/WidgetTreeWorkbench.tsx

@@ -1,20 +1,25 @@
-import { useState, type ReactNode } from 'react';
+import { useMemo, useState, type KeyboardEvent, type ReactNode } from 'react';
 import type { WidgetAssetCatalogContract, WidgetRegistryContract } from '@workbench-kit/contracts';
 
-import { Panel, PanelBody, PanelHeader } from '../layout/Panel';
-import { Button } from '../primitives/Button';
-import { Toolbar } from '../primitives/Toolbar';
+import { Panel, PanelBody, PanelHeader } from '../layout/panel';
+import { Button } from '../primitives/button';
+import { Toolbar } from '../primitives/toolbar';
+import { JsonConfigValidationBanner } from '../jdw/JsonCodeEditorPane.js';
 import type { WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor.js';
 import { fileNameOfPath } from '../workbench/workspace/path';
+import { WorkspacePathLabel } from '../workbench/workspace/WorkspacePathLabel';
 import { WidgetTreeLab } from './WidgetTreeLab.js';
-import { WidgetTreeModeControls } from './WidgetTreeModeControls.js';
+import { resolveWidgetTreeModeShortcut, WidgetTreeModeControls } from './WidgetTreeModeControls.js';
 import { DEFAULT_WIDGET_TREE_VIEW_MODE, type WidgetTreeViewMode } from './widget-tree-mode.js';
+import { createWidgetTreeEditorState } from './widget-tree-editor-state.js';
 
 export interface WidgetTreeWorkbenchProps {
   readonly path?: string | undefined;
   readonly title?: ReactNode | undefined;
   readonly value: string;
   readonly onChange: (value: string) => void;
+  readonly baselineValue?: string | undefined;
+  readonly onApply?: (() => void) | undefined;
   readonly onSave?: (() => void) | undefined;
   readonly onDiscard?: (() => void) | undefined;
   readonly dirty?: boolean | undefined;
@@ -32,9 +37,11 @@ export function WidgetTreeWorkbench({
   title,
   value,
   onChange,
+  baselineValue,
+  onApply,
   onSave,
   onDiscard,
-  dirty = false,
+  dirty,
   readOnly = false,
   registry,
   assetCatalog,
@@ -55,21 +62,55 @@ export function WidgetTreeWorkbench({
   };
 
   const resolvedTitle = title ?? (path ? fileNameOfPath(path) : 'Widget document');
+  const registeredTypes = useMemo(
+    () => registry?.definitions().map((definition) => definition.type),
+    [registry],
+  );
+  const editorState = useMemo(
+    () =>
+      createWidgetTreeEditorState({
+        baselineValue: baselineValue ?? value,
+        currentValue: value,
+        registeredTypes,
+      }),
+    [baselineValue, registeredTypes, value],
+  );
+  const resolvedDirty = dirty ?? (baselineValue !== undefined && editorState.textDirty);
+  const canApply = Boolean(resolvedDirty && editorState.validationOk);
+  const saveEnabled = Boolean(onSave && canApply && !readOnly);
+  const resolvedOnSave = saveEnabled ? onSave : undefined;
+  const showApply = Boolean(canApply && onApply && !readOnly);
+
+  const handleWorkbenchKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const nextMode = resolveWidgetTreeModeShortcut(event);
+    if (nextMode === null) {
+      return;
+    }
+
+    event.preventDefault();
+    setViewMode(nextMode);
+  };
 
   return (
     <Panel
       className="widget-tree-workbench"
       data-mode={resolvedViewMode}
       data-testid="widget-tree-workbench"
+      onKeyDown={handleWorkbenchKeyDown}
     >
       <PanelHeader
         actions={
           <Toolbar>
-            {dirty && !readOnly ? (
+            {showApply ? (
+              <Button data-testid="widget-tree-workbench-apply" variant="primary" onClick={onApply}>
+                Apply
+              </Button>
+            ) : null}
+            {resolvedDirty && !readOnly ? (
               <>
                 {onDiscard ? <Button onClick={onDiscard}>Discard</Button> : null}
                 {onSave ? (
-                  <Button variant="primary" onClick={onSave}>
+                  <Button disabled={!saveEnabled} variant="primary" onClick={resolvedOnSave}>
                     Save
                   </Button>
                 ) : null}
@@ -81,12 +122,8 @@ export function WidgetTreeWorkbench({
       >
         <span className="widget-tree-workbench__title">
           {resolvedTitle}
-          {path ? (
-            <span className="widget-tree-workbench__path" title={path}>
-              {path}
-            </span>
-          ) : null}
-          {dirty ? (
+          {path ? <WorkspacePathLabel className="widget-tree-workbench__path" path={path} /> : null}
+          {resolvedDirty ? (
             <span className="widget-tree-workbench__dirty-indicator" title="Unsaved changes">
               ●
             </span>
@@ -94,6 +131,13 @@ export function WidgetTreeWorkbench({
         </span>
       </PanelHeader>
       <PanelBody className="widget-tree-workbench__body">
+        {!editorState.validationOk || canApply ? (
+          <JsonConfigValidationBanner
+            canApply={canApply}
+            firstError={editorState.firstError}
+            validationOk={editorState.validationOk}
+          />
+        ) : null}
         <WidgetTreeLab
           assetCatalog={assetCatalog}
           path={path}
@@ -103,7 +147,7 @@ export function WidgetTreeWorkbench({
           value={value}
           viewMode={resolvedViewMode}
           onChange={onChange}
-          onSave={onSave}
+          onSave={resolvedOnSave}
         />
       </PanelBody>
     </Panel>

package/src/widget-tree/WidgetTreeWorkspaceShell.tsx

@@ -3,8 +3,9 @@ import {
   integratedShellWorkspaceFiles,
   integratedShellWorkspaceFolders,
 } from '@workbench-kit/adapters';
+import { validateJsonWidgetData } from '@workbench-kit/jdw';
 
-import { SideBarViewFrame } from '../layout/SideBarViewFrame.js';
+import { SideBarViewFrame } from '../layout/sidebar';
 import { WorkbenchShell } from '../workbench/WorkbenchShell.js';
 import type { StatusBarSectionModel } from '../workbench/StatusBar.js';
 import {
@@ -17,8 +18,9 @@ import {
 } from '../workbench/workspace/index.js';
 import { createWidgetStudioWorkspaceEditorRenderer } from '../widget-studio/create-widget-studio-workspace-editor.js';
 import { WIDGET_TREE_DEMO_REGISTRY, WIDGET_TREE_WELCOME_DOCUMENT } from './demo-registry.js';
+import { isWidgetTreeDocument } from './widget-tree-document.js';
 
-const JDW_WORKSPACE_DEFAULT_WIDGET_PATH = 'src/widgets/home.widget.json';
+const JDW_WORKSPACE_DEFAULT_WIDGET_PATH = 'src/widgets/home.jdw.json';
 
 function withJdwWelcomeDocument(files: readonly WorkspaceFile[]): WorkspaceFile[] {
   return files.map((file) =>
@@ -35,6 +37,19 @@ const statusSections: StatusBarSectionModel[] = [
   },
 ];
 
+const registeredWidgetTypes = WIDGET_TREE_DEMO_REGISTRY.definitions().map(
+  (definition) => definition.type,
+);
+
+export function canSaveWidgetTreeWorkspaceFile(file: WorkspaceFile, content: string): boolean {
+  if (!isWidgetTreeDocument(file)) return true;
+
+  return validateJsonWidgetData(content, {
+    registeredTypes: registeredWidgetTypes,
+    strictKnownTypes: true,
+  }).valid;
+}
+
 export interface WidgetTreeWorkspaceShellProps {
   readonly initialSelectedPath?: string | undefined;
   readonly initialTheme?: WorkspaceEditorTheme | undefined;
@@ -45,7 +60,7 @@ export function WidgetTreeWorkspaceShell({
   initialTheme = 'dark',
 }: WidgetTreeWorkspaceShellProps = {}) {
   const [sidebarVisible, setSidebarVisible] = useState(true);
-  const [sidebarSizePercent, setSidebarSizePercent] = useState(20);
+  const [sidebarSizePx, setSidebarSizePx] = useState(260);
 
   const workspaceFiles = useMemo(() => withJdwWelcomeDocument(integratedShellWorkspaceFiles), []);
 
@@ -99,10 +114,10 @@ export function WidgetTreeWorkspaceShell({
           primarySidebar={{
             className: 'ui-workbench-story-shell-split',
             isVisible: sidebarVisible,
-            maxPrimarySizePercent: 36,
-            minPrimarySizePercent: 16,
+            maxPrimarySizePx: 480,
+            minPrimarySizePx: 200,
             node: (
-              <aside aria-label="Explorer sidebar" className="workbench-primary-side-bar">
+              <aside aria-label="Explorer sidebar" className="workbench-primary-sidebar">
                 <SideBarViewFrame title="Explorer">
                   <WorkspaceExplorer
                     activePath={selectedPath}
@@ -114,14 +129,17 @@ export function WidgetTreeWorkspaceShell({
                 </SideBarViewFrame>
               </aside>
             ),
-            onSizePercentChange: setSidebarSizePercent,
-            primarySizePercent: sidebarSizePercent,
+            onSizePxChange: setSidebarSizePx,
+            primarySizePx: sidebarSizePx,
           }}
           rootClassName="ide-root jdw-workspace-shell"
           rootStyle={{ height: '100%', minHeight: 0 }}
           secondaryArea={
             <main className="workbench-editor-area jdw-workspace-shell__editor">
               <WorkspaceEditorPanel
+                canSaveFile={(_path, content, file) =>
+                  canSaveWidgetTreeWorkspaceFile(file, content)
+                }
                 files={files}
                 openPaths={openPaths}
                 renderEditor={(context) =>

package/src/widget-tree/index.ts

@@ -2,14 +2,27 @@ export { WidgetTreeLab } from './WidgetTreeLab.js';
 export type { WidgetTreeLabProps } from './WidgetTreeLab.js';
 export { WidgetTreeWorkbench } from './WidgetTreeWorkbench.js';
 export type { WidgetTreeWorkbenchProps } from './WidgetTreeWorkbench.js';
+export {
+  createWidgetTreeEditorState,
+  type WidgetTreeEditorState,
+  type WidgetTreeValidationState,
+} from './widget-tree-editor-state.js';
 export { WidgetTreeWorkspaceShell } from './WidgetTreeWorkspaceShell.js';
 export type { WidgetTreeWorkspaceShellProps } from './WidgetTreeWorkspaceShell.js';
 export { WidgetTreeView } from './WidgetTreeView.js';
-export type { WidgetTreeViewProps } from './WidgetTreeView.js';
+export type {
+  WidgetTreeAssetDropOperation,
+  WidgetTreeMoveOperation,
+  WidgetTreeViewProps,
+} from './WidgetTreeView.js';
 export { WidgetInspectorPanel } from './WidgetInspectorPanel.js';
 export type { WidgetInspectorPanelProps } from './WidgetInspectorPanel.js';
 export { WidgetTreeSidePanel } from './WidgetTreeSidePanel.js';
-export type { WidgetTreeSidePanelProps, WidgetTreeSidePanelTab } from './WidgetTreeSidePanel.js';
+export type {
+  WidgetTreeSidePanelProps,
+  WidgetTreeSidePanelDetailTab,
+  WidgetTreeSidePanelTab,
+} from './WidgetTreeSidePanel.js';
 export { WidgetAssetPalette } from './WidgetAssetPalette.js';
 export type { WidgetAssetPaletteProps } from './WidgetAssetPalette.js';
 export {
@@ -19,9 +32,14 @@ export {
 } from './widget-tree-mode.js';
 export { WidgetSourceEditor } from './WidgetSourceEditor.js';
 export type { WidgetSourceEditorProps } from './WidgetSourceEditor.js';
-export { WidgetTreeModeControls } from './WidgetTreeModeControls.js';
+export { resolveWidgetTreeModeShortcut, WidgetTreeModeControls } from './WidgetTreeModeControls.js';
 export type { WidgetTreeModeControlsProps } from './WidgetTreeModeControls.js';
-export { isWidgetTreeDocument, WIDGET_TREE_DOCUMENT_MIME } from './widget-tree-document.js';
+export { isWidgetTreeDocument } from './widget-tree-document.js';
 export type { WidgetTreeDocumentRef } from './widget-tree-document.js';
+export {
+  WIDGET_PLACEMENT_ASSET_DRAG_MIME,
+  readWidgetPlacementAssetDragData,
+  writeWidgetPlacementAssetDragData,
+} from './widget-placement-asset-dnd.js';
 export { WIDGET_TREE_DEMO_REGISTRY, WIDGET_TREE_WELCOME_DOCUMENT } from './demo-registry.js';
 export { WIDGET_TREE_DEMO_ASSET_CATALOG } from './demo-widget-assets.js';

package/src/widget-tree/widget-placement-asset-dnd.ts

@@ -0,0 +1,35 @@
+import type { WidgetPlacementAsset } from '@workbench-kit/contracts';
+
+export const WIDGET_PLACEMENT_ASSET_DRAG_MIME =
+  'application/vnd.workbench-kit.widget-placement-asset+json';
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+export function writeWidgetPlacementAssetDragData(
+  dataTransfer: DataTransfer,
+  asset: WidgetPlacementAsset,
+): void {
+  dataTransfer.setData(WIDGET_PLACEMENT_ASSET_DRAG_MIME, JSON.stringify(asset));
+  dataTransfer.setData('text/plain', asset.label);
+  dataTransfer.effectAllowed = 'copy';
+}
+
+export function readWidgetPlacementAssetDragData(
+  dataTransfer: DataTransfer | null,
+): WidgetPlacementAsset | null {
+  const raw = dataTransfer?.getData(WIDGET_PLACEMENT_ASSET_DRAG_MIME);
+  if (!raw) return null;
+
+  try {
+    const parsed = JSON.parse(raw) as unknown;
+    if (!isRecord(parsed) || !isRecord(parsed.content)) return null;
+    if (typeof parsed.id !== 'string' || typeof parsed.label !== 'string') return null;
+    if (typeof parsed.category !== 'string') return null;
+
+    return parsed as unknown as WidgetPlacementAsset;
+  } catch {
+    return null;
+  }
+}

package/src/widget-tree/widget-tree-document.ts

@@ -1,7 +1,4 @@
-import { JDW_DOCUMENT_MIME, isJdwDocumentPath } from '../jdw/document';
-
-export const WIDGET_TREE_DOCUMENT_MIME = 'application/vnd.workbench-kit.widget+json';
-export const WIDGET_TREE_DOCUMENT_FILE_EXTENSION = '.widget.json';
+import { JDW_WIDGET_DOCUMENT_MIME, isJdwDocumentPath } from '../jdw/document';
 
 export interface WidgetTreeDocumentRef {
   readonly path: string;
@@ -9,12 +6,9 @@ export interface WidgetTreeDocumentRef {
 }
 
 export function isWidgetTreeDocument(file: WidgetTreeDocumentRef): boolean {
-  if (file.mimeType === WIDGET_TREE_DOCUMENT_MIME || file.mimeType === JDW_DOCUMENT_MIME) {
+  if (file.mimeType === JDW_WIDGET_DOCUMENT_MIME) {
     return true;
   }
 
-  const normalizedPath = file.path.toLowerCase();
-  return (
-    normalizedPath.endsWith(WIDGET_TREE_DOCUMENT_FILE_EXTENSION) || isJdwDocumentPath(file.path)
-  );
+  return isJdwDocumentPath(file.path);
 }

package/src/widget-tree/widget-tree-editor-state.ts

@@ -0,0 +1,40 @@
+import { validateJsonWidgetData } from '@workbench-kit/jdw';
+
+export type WidgetTreeValidationState = 'invalid' | 'unchanged' | 'valid-changed';
+
+export interface WidgetTreeEditorState {
+  readonly canApply: boolean;
+  readonly firstError: string | null;
+  readonly textDirty: boolean;
+  readonly validationOk: boolean;
+  readonly validationState: WidgetTreeValidationState;
+}
+
+export function createWidgetTreeEditorState(input: {
+  readonly baselineValue: string;
+  readonly currentValue: string;
+  readonly registeredTypes?: readonly string[] | undefined;
+}): WidgetTreeEditorState {
+  const textDirty = input.currentValue !== input.baselineValue;
+  const validation = validateJsonWidgetData(input.currentValue, {
+    registeredTypes: input.registeredTypes,
+    strictKnownTypes: true,
+  });
+  const validationOk = validation.valid;
+  const firstIssue = validation.issues[0];
+  const firstError = firstIssue === undefined ? null : `${firstIssue.path}: ${firstIssue.message}`;
+  const canApply = textDirty && validationOk;
+  const validationState: WidgetTreeValidationState = !validationOk
+    ? 'invalid'
+    : textDirty
+      ? 'valid-changed'
+      : 'unchanged';
+
+  return {
+    canApply,
+    firstError,
+    textDirty,
+    validationOk,
+    validationState,
+  };
+}

package/src/widget-tree/widget-tree-layout.ts

@@ -1,7 +1,42 @@
-import { isContainerWidget, type GenericWidget } from '@workbench-kit/jdw';
+import {
+  appendBoxChildPath,
+  appendChildrenPath,
+  type GenericWidget,
+  type WidgetPath,
+} from '@workbench-kit/jdw';
+
+const ARRAY_CHILD_CONTAINER_TYPES = new Set(['row', 'column', 'grid', 'stack', 'list-view']);
+const SINGLE_CHILD_CONTAINER_TYPES = new Set([
+  'box',
+  'container',
+  'padding',
+  'align',
+  'center',
+  'sized_box',
+]);
 
 export function canAddChildren(widget: GenericWidget | null): widget is GenericWidget {
-  return widget !== null && isContainerWidget(widget) && widget.type !== 'box';
+  if (widget === null) {
+    return false;
+  }
+
+  if (SINGLE_CHILD_CONTAINER_TYPES.has(widget.type)) {
+    return widget.child === undefined;
+  }
+
+  return ARRAY_CHILD_CONTAINER_TYPES.has(widget.type) || Array.isArray(widget.children);
+}
+
+export function insertedWidgetPathForParent(
+  parent: GenericWidget,
+  parentPath: WidgetPath,
+  index: number,
+): WidgetPath {
+  if (SINGLE_CHILD_CONTAINER_TYPES.has(parent.type) && parent.child === undefined) {
+    return appendBoxChildPath(parentPath);
+  }
+
+  return appendChildrenPath(parentPath, index);
 }
 
 export function formatWidgetPlacementMeta(
@@ -23,8 +58,18 @@ export function formatWidgetPlacementMeta(
 
   if (parentType === 'row' || parentType === 'column') {
     const flex = typeof widget.flex === 'number' ? `flex ${widget.flex}` : null;
+    const flexFit =
+      widget.flexFit === 'tight' || widget.flexFit === 'loose' ? widget.flexFit : null;
     const align = typeof widget.align === 'string' ? widget.align : null;
-    return [flex, align].filter(Boolean).join(' · ') || null;
+    return [flex, flexFit, align].filter(Boolean).join(' · ') || null;
+  }
+
+  if (parentType === 'stack') {
+    const left = typeof widget.left === 'number' ? `l${widget.left}` : null;
+    const top = typeof widget.top === 'number' ? `t${widget.top}` : null;
+    const right = typeof widget.right === 'number' ? `r${widget.right}` : null;
+    const bottom = typeof widget.bottom === 'number' ? `b${widget.bottom}` : null;
+    return [left, top, right, bottom].filter(Boolean).join(' · ') || null;
   }
 
   return null;

package/src/widget-tree/widget-tree-play-helpers.ts

@@ -1,74 +1,85 @@
-import { expect, userEvent, waitFor } from 'storybook/test';
+import { expect, waitFor } from 'storybook/test';
 
-interface MonacoEditorHandle {
-  getDomNode: () => HTMLElement | null;
-  getValue: () => string;
-}
+function resolveWidgetTreeSurface(root: ParentNode | Element | null): Element | null {
+  if (!root || !(root instanceof Element)) {
+    return null;
+  }
 
-interface MonacoGlobal {
-  editor: {
-    getEditors: () => MonacoEditorHandle[];
-  };
-}
+  const testId = root.getAttribute('data-testid');
+  if (
+    testId === 'widget-tree-lab' ||
+    testId === 'widget-tree-workbench' ||
+    testId === 'widget-tree-source'
+  ) {
+    return root;
+  }
 
-export async function waitForWidgetTreeSourcePane(canvasElement: HTMLElement): Promise<void> {
-  await waitFor(
-    () => {
-      const pane =
-        canvasElement.querySelector('.widget-tree-source .ui-json-code-editor-pane') ??
-        canvasElement.querySelector('[data-testid="widget-tree-source"]');
-      expect(pane).toBeTruthy();
-    },
-    { timeout: 15000 },
+  if (root.matches('.widget-tree-source .ui-json-code-editor-pane')) {
+    return root;
+  }
+
+  return (
+    root.querySelector('[data-testid="widget-tree-lab"]') ??
+    root.querySelector('[data-testid="widget-tree-workbench"]') ??
+    root.querySelector('.widget-tree-source .ui-json-code-editor-pane') ??
+    root.querySelector('[data-testid="widget-tree-source"]')
   );
 }
 
-export async function waitForWidgetTreeMonaco(canvasElement: HTMLElement): Promise<void> {
-  await waitForWidgetTreeSourcePane(canvasElement);
+/** Wait until Widget Tree Lab / Workbench chrome is mounted (Form or Code surface). */
+export async function waitForWidgetTreeSourcePane(canvasElement: HTMLElement): Promise<void> {
+  const doc = canvasElement.ownerDocument ?? document;
 
   await waitFor(
     () => {
-      const editorRoot = canvasElement.querySelector('.widget-tree-source .monaco-editor');
-      expect(editorRoot).toBeTruthy();
-      expect(editorRoot?.textContent ?? '').not.toContain('Loading editor');
+      const surface = resolveWidgetTreeSurface(canvasElement) ?? resolveWidgetTreeSurface(doc.body);
+      expect(surface).toBeTruthy();
     },
-    { timeout: 15000 },
+    { timeout: 60_000 },
   );
 }
 
-export async function setWidgetTreeSourceJson(
-  canvasElement: HTMLElement,
-  value: string,
-): Promise<void> {
-  await waitForWidgetTreeMonaco(canvasElement);
-
-  const editorRoot = canvasElement.querySelector('.widget-tree-source .monaco-editor');
-  if (!editorRoot) {
-    throw new Error('Monaco editor root was not found.');
-  }
-
-  const textarea = editorRoot.querySelector('textarea');
-  if (textarea) {
-    await userEvent.click(textarea);
-    await userEvent.clear(textarea);
-    await userEvent.paste(value);
-  } else {
-    await userEvent.click(editorRoot);
-    await userEvent.keyboard('{Control>}a{/Control}');
-    await userEvent.keyboard('{Delete}');
-    await userEvent.paste(value);
-  }
+/**
+ * Match WidgetTreeCanvasPreview unit tests: synthetic pointers have no active
+ * capture target, so setPointerCapture throws NotFoundError (swallowed by canvas).
+ */
+export function mockPointerCapture(handle: HTMLElement): void {
+  Object.defineProperty(handle, 'setPointerCapture', {
+    configurable: true,
+    value: () => {
+      throw new DOMException('No active pointer.', 'NotFoundError');
+    },
+  });
+  Object.defineProperty(handle, 'hasPointerCapture', {
+    configurable: true,
+    value: () => false,
+  });
+}
 
-  await waitFor(
-    () => {
-      const monacoGlobal = (window as Window & { monaco?: MonacoGlobal }).monaco;
-      const editor = monacoGlobal?.editor.getEditors().find((candidate) => {
-        const domNode = candidate.getDomNode();
-        return domNode ? editorRoot.contains(domNode) : false;
-      });
+export function createPointerLikeEvent(
+  type: string,
+  clientX: number,
+  clientY: number,
+  pointerId = 1,
+): PointerEvent {
+  const event = new MouseEvent(type, {
+    bubbles: true,
+    button: 0,
+    buttons: type === 'pointerup' ? 0 : 1,
+    cancelable: true,
+    clientX,
+    clientY,
+  }) as PointerEvent;
+  Object.defineProperty(event, 'pointerId', { configurable: true, value: pointerId });
+  return event;
+}
 
-      expect(editor?.getValue()).toBe(value);
-    },
-    { timeout: 5000 },
-  );
+export function dispatchCanvasPointer(
+  handle: HTMLElement,
+  type: 'pointerdown' | 'pointermove' | 'pointerup',
+  clientX: number,
+  clientY: number,
+  pointerId = 1,
+): void {
+  handle.dispatchEvent(createPointerLikeEvent(type, clientX, clientY, pointerId));
 }