@notis_ai/cli 0.2.14 → 0.2.15

package/src/runtime/sync-skills.js

@@ -0,0 +1,215 @@
+import { createHash, randomUUID } from 'node:crypto';
+import { mkdir, readFile, rename, rm, stat, writeFile } from 'node:fs/promises';
+import { homedir } from 'node:os';
+import { dirname, join } from 'node:path';
+
+import { reconcileBaseSkills } from './base-skills.js';
+
+const DEFAULT_LOCK_TIMEOUT_MS = 30_000;
+const DEFAULT_LOCK_STALE_MS = 10 * 60_000;
+const DEFAULT_LOCK_POLL_MS = 50;
+
+async function lockSnapshot(lockDirectory) {
+  try {
+    const [raw, metadata] = await Promise.all([
+      readFile(join(lockDirectory, 'owner'), 'utf8').catch(() => ''),
+      stat(lockDirectory),
+    ]);
+    let owner = {};
+    try {
+      owner = raw ? JSON.parse(raw) : {};
+    } catch {
+      // A process can die between mkdir and the atomic owner write. Preserve
+      // the directory mtime as a reclaimable ownerless lease.
+    }
+    return {
+      id: typeof owner.id === 'string' ? owner.id : null,
+      pid: Number.isInteger(Number(owner.pid)) ? Number(owner.pid) : null,
+      at: Number.isFinite(Number(owner.at)) ? Number(owner.at) : metadata.mtimeMs,
+      mtimeMs: metadata.mtimeMs,
+    };
+  } catch {
+    return null;
+  }
+}
+
+function sameLockSnapshot(left, right) {
+  return Boolean(
+    left
+    && right
+    && left.id === right.id
+    && left.pid === right.pid
+    && left.at === right.at
+    && left.mtimeMs === right.mtimeMs,
+  );
+}
+
+function processIsAlive(pid) {
+  if (!Number.isInteger(pid) || pid <= 0) return false;
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch (error) {
+    return error?.code === 'EPERM';
+  }
+}
+
+function delay(milliseconds) {
+  return new Promise((resolve) => setTimeout(resolve, milliseconds));
+}
+
+async function quarantineStaleLock(lockDirectory, snapshot) {
+  const quarantineRoot = join(dirname(lockDirectory), '.stale-operation-locks');
+  const snapshotToken = createHash('sha256')
+    .update(JSON.stringify(snapshot))
+    .digest('hex');
+  await mkdir(quarantineRoot, { recursive: true, mode: 0o700 });
+  try {
+    // The deterministic destination is the compare-and-swap guard. If two
+    // waiters observed the same stale owner, only one can move it here. The
+    // retained non-empty tombstone prevents the loser from ever moving a new
+    // live lock that appeared at the shared pathname in the meantime.
+    await rename(lockDirectory, join(quarantineRoot, snapshotToken));
+    return true;
+  } catch (error) {
+    if (['EEXIST', 'ENOTEMPTY', 'ENOENT'].includes(error?.code)) return false;
+    throw error;
+  }
+}
+
+async function writeLockOwnerAtomically(lockDirectory, owner) {
+  const temporaryOwnerPath = join(lockDirectory, `.owner.${owner.id}.tmp`);
+  const ownerPath = join(lockDirectory, 'owner');
+  await writeFile(temporaryOwnerPath, JSON.stringify(owner), { mode: 0o600 });
+  await rename(temporaryOwnerPath, ownerPath);
+}
+
+/** Serialize Desktop and terminal skill sync across processes on one Mac. */
+export async function withSkillSyncLock(callback, {
+  home = homedir(),
+  timeoutMs = DEFAULT_LOCK_TIMEOUT_MS,
+  staleMs = DEFAULT_LOCK_STALE_MS,
+  pollMs = DEFAULT_LOCK_POLL_MS,
+  now = () => Date.now(),
+} = {}) {
+  const lockDirectory = join(home, '.notis', 'skills', '.operation-lock');
+  const ownerId = `${process.pid}.${randomUUID()}`;
+  const deadline = now() + timeoutMs;
+  await mkdir(dirname(lockDirectory), { recursive: true, mode: 0o700 });
+
+  for (;;) {
+    try {
+      await mkdir(lockDirectory, { mode: 0o700 });
+      try {
+        await writeLockOwnerAtomically(lockDirectory, {
+          id: ownerId,
+          pid: process.pid,
+          at: now(),
+        });
+      } catch (error) {
+        // This process exclusively created the directory and has not yet
+        // published an owner, so it is safe to undo a failed acquisition.
+        await rm(lockDirectory, { recursive: true, force: true });
+        throw error;
+      }
+      break;
+    } catch (error) {
+      if (error?.code !== 'EEXIST') throw error;
+    }
+
+    const observed = await lockSnapshot(lockDirectory);
+    if (
+      observed
+      && now() - observed.at > staleMs
+      && !processIsAlive(observed.pid)
+    ) {
+      // Require an unchanged observation interval before stealing. This avoids
+      // racing a holder that is publishing or refreshing its owner lease.
+      await delay(Math.max(pollMs, 10));
+      const current = await lockSnapshot(lockDirectory);
+      if (sameLockSnapshot(observed, current) && !processIsAlive(current?.pid)) {
+        if (await quarantineStaleLock(lockDirectory, current)) continue;
+      }
+    }
+    if (now() >= deadline) {
+      throw new Error('Timed out waiting for another Notis skill sync to finish.');
+    }
+    await delay(pollMs);
+  }
+
+  const heartbeatMs = Math.max(10, Math.min(30_000, Math.floor(staleMs / 3)));
+  let heartbeatStopped = false;
+  let heartbeatInFlight = Promise.resolve();
+  const refreshHeartbeat = async () => {
+      if (heartbeatStopped) return;
+      const temporaryOwnerPath = join(lockDirectory, `.owner.${ownerId}.tmp`);
+      await writeFile(
+        temporaryOwnerPath,
+        JSON.stringify({ id: ownerId, pid: process.pid, at: now() }),
+        { mode: 0o600 },
+      );
+      const owner = await lockSnapshot(lockDirectory);
+      if (owner?.id !== ownerId) {
+        await rm(temporaryOwnerPath, { force: true });
+        return;
+      }
+      // If a stale-lock reclaimer moved this directory after the ownership
+      // check, the source path disappears and rename fails instead of
+      // overwriting the owner of a newly acquired lock at the shared path.
+      await rename(temporaryOwnerPath, join(lockDirectory, 'owner'));
+  };
+  const heartbeat = setInterval(() => {
+    // Serialize refreshes and retain the active promise so cleanup cannot race
+    // a temporary owner write that was already in flight when the interval was
+    // cleared.
+    heartbeatInFlight = heartbeatInFlight
+      .then(refreshHeartbeat)
+      .catch(() => undefined);
+  }, heartbeatMs);
+  heartbeat.unref?.();
+
+  try {
+    return await callback();
+  } finally {
+    heartbeatStopped = true;
+    clearInterval(heartbeat);
+    await heartbeatInFlight;
+    const owner = await lockSnapshot(lockDirectory);
+    if (owner?.id === ownerId) {
+      await rm(lockDirectory, { recursive: true, force: true });
+    }
+  }
+}
+
+/**
+ * Shared CLI-owned orchestration for base-skill installation plus account sync.
+ * Desktop injects the source engine that webpack bundles; the CLI command
+ * injects the generated dist engine used by the published package.
+ */
+export async function reconcileAllSkills({
+  serverUrl,
+  jwt,
+  honorSyncEnabled,
+  userId = null,
+  home,
+  runAccountSync,
+  reconcileBase = reconcileBaseSkills,
+  lockOptions = {},
+}) {
+  return withSkillSyncLock(async () => {
+    const base = reconcileBase({ userId, ...(home ? { home } : {}) });
+    const account = await runAccountSync(
+      serverUrl,
+      jwt,
+      {},
+      { honorSyncEnabled },
+    );
+    return {
+      ...account,
+      baseSkills: base.skills,
+      baseInstalled: base.installed,
+      baseLinked: base.linked,
+      baseBackups: base.backups,
+    };
+  }, { ...lockOptions, ...(home ? { home } : {}) });
+}

package/template/app/layout.tsx

@@ -1,6 +1,10 @@
 import '@notis/sdk/styles.css';
+import { ShortcutProvider } from '@notis/sdk/interactions';
 import './globals.css';
 
 export default function AppShell({ children }: { children: React.ReactNode }) {
-  return children;
+  // NotisProvider supplies this in the product host. Keeping the shell-level
+  // provider makes the same scope arbitration available in the local harness;
+  // ShortcutProvider is nesting-safe, so the hosted app still has one registry.
+  return <ShortcutProvider>{children}</ShortcutProvider>;
 }

package/template/notis.config.ts

@@ -2,6 +2,7 @@ import { defineNotisApp } from '@notis/sdk/config';
 
 export default defineNotisApp({
   name: 'my-notis-app',
+  devSlug: 'my-notis-app',
   title: 'My Notis App',
   description: 'A focused Notis app with one route and one database-backed workflow.',
   icon: 'phosphor:squares-four',

package/template/packages/sdk/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@notis/sdk",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "./src/index.ts",
   "exports": {
     ".": "./src/index.ts",
+    "./interactions": "./src/interactions.ts",
     "./config": "./src/config.ts",
     "./vite": "./src/vite.ts",
     "./ui": "./src/ui.ts",

package/template/packages/sdk/src/components/DocumentEditor.tsx

@@ -51,7 +51,7 @@ function DocumentEditorFallback({ documentId, variant = 'full', className }: Not
     );
   }
 
-  const isMarkdown = document.contentType !== 'file';
+  const isMarkdown = document.contentType === 'markdown' || !document.contentType;
   return (
     <div className={className}>
       {variant === 'full' ? <h1 style={fallbackTitleStyle}>{document.title}</h1> : null}
@@ -62,6 +62,15 @@ function DocumentEditorFallback({ documentId, variant = 'full', className }: Not
             <p style={fallbackNoticeStyle}>Read-only preview — editing is available inside the Notis portal.</p>
           )}
         </>
+      ) : document.contentType === 'view' ? (
+        <div style={fallbackFrameStyle}>
+          {document.viewType === 'report'
+            ? 'Interactive report'
+            : document.viewType === 'html'
+              ? 'Interactive HTML document'
+              : 'View document'} — open it in Notis Documents for
+          the full native experience.
+        </div>
       ) : (
         <div style={fallbackFrameStyle}>
           {document.fileType ? `${document.fileType.toUpperCase()} document` : 'File document'} — open it in
@@ -76,8 +85,9 @@ function DocumentEditorFallback({ documentId, variant = 'full', className }: Not
  * Embeds the document editor for a document anywhere in an app view. The host
  * (portal) provides the implementation through `runtime.ui.DocumentEditor` and
  * dispatches on the document's content type (markdown -> rich text editor,
- * files -> matching viewer). Outside the portal this falls back to a read-only
- * preview.
+ * files -> matching viewer, views -> their trusted native Documents surface).
+ * Outside the portal this falls back to a read-only preview or an explicit
+ * open-in-Documents notice for native views.
  *
  * ```tsx
  * <DocumentEditor documentId={entry.id} variant="body" className="min-h-[320px]" />

package/template/packages/sdk/src/components/MarkdownEditor.tsx

@@ -0,0 +1,121 @@
+import type { ChangeEvent, KeyboardEvent, ReactElement } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useNotisRuntime } from '../provider';
+import type { NotisMarkdownEditorProps } from '../runtime';
+
+function MarkdownEditorFallback({
+  value,
+  revision,
+  readOnly,
+  autosaveMs = 1500,
+  placeholder = 'Write in Markdown…',
+  className,
+  onChange,
+  onSave,
+  onDirtyChange,
+  onSavingChange,
+}: NotisMarkdownEditorProps) {
+  const [draft, setDraft] = useState(value);
+  const [saveAttempt, setSaveAttempt] = useState(0);
+  const draftRef = useRef(value);
+  const dirtyRef = useRef(false);
+  const savingRef = useRef(false);
+  const revisionRef = useRef(revision);
+  const onSaveRef = useRef(onSave);
+  const readOnlyRef = useRef(readOnly);
+  const unmountedRef = useRef(false);
+  const saveRef = useRef<() => Promise<void>>(async () => undefined);
+
+  useEffect(() => {
+    onSaveRef.current = onSave;
+    readOnlyRef.current = readOnly;
+  }, [onSave, readOnly]);
+
+  useEffect(() => {
+    if (dirtyRef.current) return;
+    draftRef.current = value;
+    revisionRef.current = revision;
+    setDraft(value);
+  }, [revision, value]);
+
+  const save = useCallback(async () => {
+    if (!onSave || !dirtyRef.current || readOnly || savingRef.current) return;
+    const markdown = draftRef.current;
+    savingRef.current = true;
+    if (!unmountedRef.current) onSavingChange?.(true);
+    try {
+      const result = await onSave({ markdown, expectedRevision: revisionRef.current });
+      if (result?.revision) revisionRef.current = result.revision;
+      if (draftRef.current === markdown) {
+        dirtyRef.current = false;
+        if (!unmountedRef.current) onDirtyChange?.(false);
+      }
+    } finally {
+      savingRef.current = false;
+      if (!unmountedRef.current) onSavingChange?.(false);
+      if (dirtyRef.current && draftRef.current !== markdown) {
+        if (unmountedRef.current) {
+          void saveRef.current().catch((error) => console.error('Could not save Markdown on unmount', error));
+        } else {
+          setSaveAttempt((attempt) => attempt + 1);
+        }
+      }
+    }
+  }, [onDirtyChange, onSave, onSavingChange, readOnly]);
+  saveRef.current = save;
+
+  useEffect(() => {
+    unmountedRef.current = false;
+    return () => {
+      unmountedRef.current = true;
+      if (!savingRef.current) {
+        void saveRef.current().catch((error) => console.error('Could not save Markdown on unmount', error));
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!dirtyRef.current || !onSave || readOnly) return;
+    const timer = window.setTimeout(() => void save(), Math.max(250, autosaveMs));
+    return () => window.clearTimeout(timer);
+  }, [autosaveMs, draft, onSave, readOnly, save, saveAttempt]);
+
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    const next = event.currentTarget.value;
+    draftRef.current = next;
+    setDraft(next);
+    if (!dirtyRef.current) {
+      dirtyRef.current = true;
+      onDirtyChange?.(true);
+    }
+    onChange?.(next);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 's') {
+      event.preventDefault();
+      void save();
+    }
+  };
+
+  return (
+    <textarea
+      value={draft}
+      readOnly={readOnly}
+      placeholder={placeholder}
+      className={className}
+      onChange={handleChange}
+      onKeyDown={handleKeyDown}
+      style={{ minHeight: 360, width: '100%', resize: 'vertical' }}
+    />
+  );
+}
+
+/** Use Notis' editor while leaving persistence entirely under app control. */
+export function MarkdownEditor(props: NotisMarkdownEditorProps): ReactElement {
+  const runtime = useNotisRuntime();
+  const HostEditor = runtime?.ui?.MarkdownEditor;
+  return HostEditor
+    ? <HostEditor key={props.resourceKey} {...props} />
+    : <MarkdownEditorFallback key={props.resourceKey} {...props} />;
+}

package/template/packages/sdk/src/components/MultiSelectActionBar.tsx

@@ -1,25 +1,16 @@
 'use client';
 
-import {
-  useEffect,
+import React, {
   useMemo,
-  useRef,
   useState,
   type CSSProperties,
   type ReactElement,
-  type ReactNode,
 } from 'react';
+import type { ResolvedCollectionAction } from '../interactions/actions';
+import { shortcutDisplay, useShortcuts, type ShortcutDefinition } from '../interactions/shortcuts';
+import type { ShortcutScope } from '../interactions/shortcuts';
 
-export interface MultiSelectAction {
-  id: string;
-  label: string;
-  icon: ReactNode;
-  /** Single-key (e.g. "E", "#") or "Mod+K" shortcut. Bound while the bar is mounted with count > 0. */
-  shortcut?: string;
-  onRun: () => void | Promise<void>;
-  /** Hint for future destructive styling. Currently unused visually. */
-  destructive?: boolean;
-}
+export type MultiSelectAction = ResolvedCollectionAction;
 
 export interface MultiSelectActionBarProps {
   selectedCount: number;
@@ -30,73 +21,10 @@ export interface MultiSelectActionBarProps {
   className?: string;
   /** Optional override for the bar's positioning style. Defaults to bottom-center floating. */
   style?: CSSProperties;
-}
-
-interface ParsedShortcut {
-  key: string;
-  needsMod: boolean;
-  needsShift: boolean;
-}
-
-function parseShortcut(raw: string): ParsedShortcut | null {
-  const parts = raw.split('+').map((p) => p.trim()).filter(Boolean);
-  if (parts.length === 0) return null;
-  let needsMod = false;
-  let needsShift = false;
-  let key = '';
-  for (const part of parts) {
-    const lower = part.toLowerCase();
-    if (lower === 'mod' || lower === 'cmd' || lower === 'ctrl' || lower === 'meta') {
-      needsMod = true;
-    } else if (lower === 'shift') {
-      needsShift = true;
-    } else {
-      key = lower;
-    }
-  }
-  if (!key) return null;
-  return { key, needsMod, needsShift };
-}
-
-function shortcutMatches(shortcut: ParsedShortcut, event: KeyboardEvent): boolean {
-  const eventKey = event.key.toLowerCase();
-  // Special-case "#" so Shift+3 matches without the consumer specifying Shift.
-  if (shortcut.key === '#') {
-    if (eventKey === '#') return true;
-    if (event.shiftKey && eventKey === '3') return true;
-    return false;
-  }
-  if (eventKey !== shortcut.key) return false;
-  if (shortcut.needsMod !== Boolean(event.metaKey || event.ctrlKey)) return false;
-  if (shortcut.needsShift !== event.shiftKey) return false;
-  if (event.altKey) return false;
-  return true;
-}
-
-function isEditableEvent(event: Event): boolean {
-  // Notis apps mount inside a Shadow DOM, so a document-level listener sees
-  // `event.target` retargeted to the shadow host. `composedPath()[0]` pierces
-  // the shadow boundary to the real focused element, so action-bar shortcuts
-  // don't fire while the user is typing in an app input.
-  const target = event.composedPath?.()[0] ?? event.target;
-  if (!(target instanceof HTMLElement)) return false;
-  if (target.isContentEditable) return true;
-  const tag = target.tagName;
-  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';
-}
-
-function shortcutDisplay(raw: string): string {
-  const parts = raw.split('+').map((p) => p.trim()).filter(Boolean);
-  return parts
-    .map((part) => {
-      const lower = part.toLowerCase();
-      if (lower === 'mod' || lower === 'cmd' || lower === 'meta') return '⌘';
-      if (lower === 'ctrl') return '⌃';
-      if (lower === 'shift') return '⇧';
-      if (lower === 'alt' || lower === 'option') return '⌥';
-      return part.length === 1 ? part.toUpperCase() : part;
-    })
-    .join('');
+  /** Disable action key bindings while leaving the visible toolbar mounted. */
+  shortcutsEnabled?: boolean;
+  /** Override the default collection shortcut scope. */
+  shortcutScope?: ShortcutScope;
 }
 
 const containerBaseStyle: CSSProperties = {
@@ -180,43 +108,25 @@ export function MultiSelectActionBar({
   itemLabel,
   className,
   style,
+  shortcutsEnabled = true,
+  shortcutScope = 'collection',
 }: MultiSelectActionBarProps): ReactElement | null {
-  const actionsRef = useRef(actions);
-  actionsRef.current = actions;
-
-  const parsedShortcuts = useMemo(() => {
-    return actions
-      .map((action) => {
-        if (!action.shortcut) return null;
-        const parsed = parseShortcut(action.shortcut);
-        return parsed ? { action, parsed } : null;
-      })
-      .filter((entry): entry is { action: MultiSelectAction; parsed: ParsedShortcut } => entry !== null);
+  const actionShortcuts = useMemo<ShortcutDefinition[]>(() => {
+    return actions.flatMap((action): ShortcutDefinition[] => {
+        if (!action.shortcut || action.disabled || action.pending) return [];
+        return [{
+          id: `collection.action.${action.id}`,
+          keys: action.shortcut,
+          label: action.label,
+          onTrigger: () => action.onRun(),
+        }];
+      });
   }, [actions]);
-
-  useEffect(() => {
-    if (selectedCount === 0 || parsedShortcuts.length === 0) return;
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (isEditableEvent(event)) return;
-      for (const { action, parsed } of parsedShortcuts) {
-        if (shortcutMatches(parsed, event)) {
-          event.preventDefault();
-          event.stopPropagation();
-          if (typeof event.stopImmediatePropagation === 'function') {
-            event.stopImmediatePropagation();
-          }
-          void action.onRun();
-          return;
-        }
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown, true);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown, true);
-    };
-  }, [parsedShortcuts, selectedCount]);
+  useShortcuts(actionShortcuts, {
+    enabled: shortcutsEnabled && selectedCount > 0,
+    scope: shortcutScope,
+    priority: 25,
+  });
 
   if (selectedCount === 0) return null;
 
@@ -258,21 +168,29 @@ function ActionButton({ action }: { action: MultiSelectAction }) {
     color: hover
       ? 'hsl(var(--background))'
       : baseButtonStyle.color,
+    opacity: action.disabled ? 0.45 : 1,
+    cursor: action.disabled || action.pending ? 'not-allowed' : 'pointer',
   };
 
   return (
     <button
       type="button"
-      onClick={() => void action.onRun()}
+      onClick={() => {
+        if (!action.disabled && !action.pending) void action.onRun();
+      }}
+      disabled={action.disabled || action.pending}
+      aria-busy={action.pending || undefined}
+      aria-keyshortcuts={action.shortcut || undefined}
+      data-destructive={action.destructive ? 'true' : 'false'}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
       onFocus={() => setHover(true)}
       onBlur={() => setHover(false)}
       style={buttonStyle}
     >
-      <span aria-hidden style={iconSlotStyle}>{action.icon}</span>
+      {action.icon ? <span aria-hidden style={iconSlotStyle}>{action.icon}</span> : null}
       {display ? <kbd aria-hidden style={keycapStyle}>{display}</kbd> : null}
-      <span>{action.label}</span>
+      <span>{action.pending ? `${action.label}…` : action.label}</span>
     </button>
   );
 }

package/template/packages/sdk/src/components/MultiSelectCheckbox.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import { type CSSProperties, type MouseEvent as ReactMouseEvent, type ReactElement } from 'react';
+import React, { type CSSProperties, type MouseEvent as ReactMouseEvent, type ReactElement } from 'react';
 
 export interface MultiSelectCheckboxProps {
   isSelected: boolean;
   onClick: (event: ReactMouseEvent) => void;
+  disabled?: boolean;
   /** When true, the checkbox is always visible. Default false (hover/focus reveal via the parent's :hover state). */
   alwaysVisible?: boolean;
   /** Optional aria-label override. Defaults to "Select item" / "Deselect item". */
@@ -40,6 +41,7 @@ const checkPath = 'M3.5 7.5l2.5 2.5 6.5-6.5';
 export function MultiSelectCheckbox({
   isSelected,
   onClick,
+  disabled = false,
   alwaysVisible = false,
   ariaLabel,
   className,
@@ -49,6 +51,7 @@ export function MultiSelectCheckbox({
     ...baseStyle,
     ...(isSelected ? selectedStyle : null),
     ...(alwaysVisible || isSelected ? { opacity: 1 } : null),
+    ...(disabled ? { opacity: 0.45, cursor: 'not-allowed' } : null),
     ...(style || null),
   };
 
@@ -62,6 +65,7 @@ export function MultiSelectCheckbox({
       type="button"
       role="checkbox"
       aria-checked={isSelected}
+      disabled={disabled}
       aria-label={ariaLabel ?? (isSelected ? 'Deselect item' : 'Select item')}
       onClick={onClick}
       onMouseDown={(e) => e.stopPropagation()}

package/template/packages/sdk/src/components/MultiSelectDragOverlay.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { type CSSProperties, type ReactElement } from 'react';
+import React, { type CSSProperties, type ReactElement } from 'react';
 import type { DragRect } from '../hooks/useMultiSelect';
 
 export interface MultiSelectDragOverlayProps {