@notis_ai/cli 0.2.0-beta.16.1 → 0.2.0-beta.160.1

package/template/package.json

@@ -1,19 +1,19 @@
 {
   "name": "my-notis-app",
   "version": "0.1.0",
+  "notisAppVersion": "0.1.0",
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
+    "dev": "vite --configLoader runner",
+    "build": "vite build --configLoader runner"
   },
   "dependencies": {
-    "@notis/sdk": "file:./packages/notis-sdk",
+    "@notis/sdk": "file:./packages/sdk",
+    "@phosphor-icons/react": "^2.1.10",
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.474.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwind-merge": "^2.6.0",

package/template/packages/{notis-sdk → sdk}/package.json

@@ -1,19 +1,26 @@
 {
   "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",
     "./styles.css": "./src/styles.css"
   },
   "files": [
-    "src",
-    "template"
+    "src"
   ],
+  "scripts": {
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
+  },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
@@ -21,6 +28,9 @@
     "@vitejs/plugin-react": ">=4.0.0"
   },
   "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "typescript": "^5.0.0"
   }
 }

package/template/packages/sdk/src/agentContext.ts

@@ -0,0 +1,36 @@
+/** Serializable context shared with the agent. Apps own annotation storage. */
+export interface ContextAttachment {
+  /** Durable HTTPS URL supplied by the app. Sent through the host media pipeline. */
+  url: string;
+  name: string;
+  mimeType: string;
+}
+
+export interface AgentContextContent {
+  title?: string;
+  /** Emoji, Phosphor icon name, or HTTPS image URL. Never executable markup. */
+  icon?: string;
+  /** An app-defined kind, not a closed list of annotation types. */
+  kind?: string;
+  text?: string;
+  comment?: string;
+  preview?: { format: 'text' | 'markdown'; content: string };
+  /** Any JSON-serializable value: coordinates, chart state, loaded records, etc. */
+  data?: unknown;
+  attachments?: ContextAttachment[];
+}
+
+export interface AgentContextItem extends AgentContextContent {
+  /** Stable within this app. The host scopes IDs to the originating app. */
+  id: string;
+  resource?: import('./runtime').ContextResource | null;
+}
+
+/** Host-stamped origin. Apps describe resources; the host identifies the app/view. */
+export interface AgentContextSource {
+  appId: string;
+  appName: string;
+  viewSlug: string;
+  viewName: string;
+  viewUrl?: string | null;
+}

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

@@ -0,0 +1,103 @@
+'use client';
+
+import type { CSSProperties, ReactElement } from 'react';
+import { useNotisRuntime } from '../provider';
+import { useDocument } from '../hooks/useDocument';
+import { Markdown } from './Markdown';
+import type { NotisDocumentEditorProps } from '../runtime';
+
+const fallbackNoticeStyle: CSSProperties = {
+  marginTop: '0.75rem',
+  fontSize: '12px',
+  color: 'hsl(var(--muted-foreground))',
+};
+
+const fallbackFrameStyle: CSSProperties = {
+  borderRadius: '0.5rem',
+  border: '1px dashed hsl(var(--border))',
+  padding: '1rem',
+  fontSize: '13px',
+  color: 'hsl(var(--muted-foreground))',
+};
+
+const fallbackTitleStyle: CSSProperties = {
+  margin: '0 0 0.75rem',
+  fontSize: '1.5rem',
+  fontWeight: 700,
+  letterSpacing: '-0.01em',
+  color: 'hsl(var(--foreground))',
+};
+
+/**
+ * Read-only stand-in used when no host editor is available (standalone dev
+ * harness, snapshots). Markdown content renders via `Markdown`; other content
+ * types get a typed placeholder.
+ */
+function DocumentEditorFallback({ documentId, variant = 'full', className }: NotisDocumentEditorProps) {
+  const runtime = useNotisRuntime();
+  const { document, loading, error } = useDocument(documentId);
+  // Listing screenshots should show the app as it looks in the portal, so the
+  // harness-only editing notice stays out of scenario captures.
+  const isScreenshot = Boolean(runtime?.context?.screenshotScenario);
+
+  if (loading) {
+    return <div className={className} style={fallbackFrameStyle}>Loading document…</div>;
+  }
+  if (error || !document) {
+    return (
+      <div className={className} style={fallbackFrameStyle}>
+        {error?.message ?? 'Document not found.'}
+      </div>
+    );
+  }
+
+  const isMarkdown = document.contentType === 'markdown' || !document.contentType;
+  return (
+    <div className={className}>
+      {variant === 'full' ? <h1 style={fallbackTitleStyle}>{document.title}</h1> : null}
+      {isMarkdown ? (
+        <>
+          <Markdown value={document.contentMarkdown ?? ''} />
+          {isScreenshot ? null : (
+            <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
+          the Notis portal to view.
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * 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, 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]" />
+ * ```
+ */
+export function DocumentEditor(props: NotisDocumentEditorProps): ReactElement {
+  const runtime = useNotisRuntime();
+  const HostEditor = runtime?.ui?.DocumentEditor;
+  if (HostEditor) {
+    return <HostEditor {...props} />;
+  }
+  return <DocumentEditorFallback {...props} />;
+}

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

@@ -0,0 +1,60 @@
+'use client';
+
+import type { AnchorHTMLAttributes, ReactElement } from 'react';
+import ReactMarkdown, { type Components } from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+export interface MarkdownProps {
+  /** Markdown source to render. */
+  value: string;
+  /** Typography scale. 'sm' suits dense surfaces (cards, list rows). */
+  size?: 'sm' | 'base';
+  className?: string;
+  /** Per-element overrides, passed through to react-markdown. */
+  components?: Components;
+}
+
+function MarkdownLink({
+  href,
+  children,
+  node: _node,
+  ...rest
+}: AnchorHTMLAttributes<HTMLAnchorElement> & { node?: unknown }) {
+  const isExternal = typeof href === 'string' && /^https?:\/\//i.test(href);
+  return (
+    <a
+      href={href}
+      {...(isExternal ? { target: '_blank', rel: 'noreferrer noopener' } : {})}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+}
+
+const defaultComponents: Components = {
+  a: MarkdownLink,
+};
+
+/**
+ * Renders a markdown value with Notis typography. Markdown is a value type:
+ * use this anywhere markdown appears — document content, database fields,
+ * generated text. Styling comes from `.notis-markdown` rules in the SDK
+ * stylesheet and follows the portal theme variables.
+ */
+export function Markdown({ value, size = 'base', className, components }: MarkdownProps): ReactElement {
+  const classes = ['notis-markdown', size === 'sm' ? 'notis-markdown--sm' : null, className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={classes}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={components ? { ...defaultComponents, ...components } : defaultComponents}
+      >
+        {value}
+      </ReactMarkdown>
+    </div>
+  );
+}

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

@@ -0,0 +1,285 @@
+'use client';
+
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactElement,
+} from 'react';
+import type { ResolvedCollectionAction } from '../interactions/actions';
+import { activateShortcutCollection, shortcutDisplay, useShortcuts, type ShortcutDefinition } from '../interactions/shortcuts';
+import { isInteractionElementVisible } from '../interactions/visibility';
+import type { ShortcutScope } from '../interactions/shortcuts';
+
+export type MultiSelectAction = ResolvedCollectionAction;
+
+/** The Portal owns global launcher positioning; app code only reports its own bar. */
+export const BULK_ACTION_LAYOUT_EVENT = 'notis:bulk-actions-layout';
+export interface BulkActionLayoutDetail {
+  bar: HTMLElement;
+  active: boolean;
+}
+
+export interface MultiSelectActionBarProps {
+  selectedCount: number;
+  actions: MultiSelectAction[];
+  /** Override the "{count} selected" label units. Default: "selected" with no item word. */
+  itemLabel?: { singular: string; plural: string };
+  /** Optional extra class on the outer container (composed alongside the inline styles). */
+  className?: string;
+  /** Optional override for the bar's positioning style. Defaults to bottom-center floating. */
+  style?: CSSProperties;
+  /** Disable action key bindings while leaving the visible toolbar mounted. */
+  shortcutsEnabled?: boolean;
+  /** Override the default collection shortcut scope. */
+  shortcutScope?: ShortcutScope;
+  collectionOwnerId?: string;
+  isAvailable?: () => boolean;
+  onClearSelection?: () => void;
+}
+
+const containerBaseStyle: CSSProperties = {
+  position: 'fixed',
+  bottom: 'calc(var(--notis-viewport-bottom, 0px) + max(1rem, var(--notis-safe-area-bottom, env(safe-area-inset-bottom, 0px))))',
+  left: '50%',
+  transform: 'translateX(-50%)',
+  zIndex: 60,
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.25rem',
+  padding: '0.375rem 0.5rem',
+  borderRadius: '0.5rem',
+  background: 'color-mix(in srgb, hsl(var(--foreground)) 95%, transparent)',
+  color: 'hsl(var(--background))',
+  boxShadow: '0 10px 25px -10px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.08)',
+  backdropFilter: 'blur(6px)',
+  WebkitBackdropFilter: 'blur(6px)',
+  pointerEvents: 'auto',
+  fontSize: '13px',
+  lineHeight: 1.2,
+  width: 'max-content',
+  maxWidth: 'calc(100% - 2rem)',
+};
+
+const countStyle: CSSProperties = {
+  flexShrink: 0,
+  padding: '0 0.5rem',
+  fontSize: '12px',
+  fontWeight: 500,
+  fontVariantNumeric: 'tabular-nums',
+  whiteSpace: 'nowrap',
+  color: 'color-mix(in srgb, hsl(var(--background)) 70%, transparent)',
+};
+
+const dividerStyle: CSSProperties = {
+  width: '1px',
+  height: '1rem',
+  margin: '0 0.125rem',
+  background: 'color-mix(in srgb, hsl(var(--background)) 20%, transparent)',
+};
+
+const baseButtonStyle: CSSProperties = {
+  flexShrink: 0,
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: '0.375rem',
+  padding: '0.25rem 0.5rem',
+  border: 0,
+  background: 'transparent',
+  color: 'color-mix(in srgb, hsl(var(--background)) 90%, transparent)',
+  borderRadius: '0.375rem',
+  cursor: 'pointer',
+  fontSize: '13px',
+  fontFamily: 'inherit',
+  whiteSpace: 'nowrap',
+  transition: 'background-color 120ms ease, color 120ms ease',
+};
+
+const keycapStyle: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minWidth: '20px',
+  height: '20px',
+  padding: '0 4px',
+  borderRadius: '4px',
+  border: '1px solid color-mix(in srgb, hsl(var(--background)) 20%, transparent)',
+  background: 'color-mix(in srgb, hsl(var(--background)) 15%, transparent)',
+  color: 'inherit',
+  fontSize: '11px',
+  fontWeight: 500,
+  lineHeight: 1,
+  fontFamily: 'inherit',
+};
+
+const iconSlotStyle: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: 'inherit',
+};
+
+export function MultiSelectActionBar({
+  selectedCount,
+  actions,
+  itemLabel,
+  className,
+  style,
+  shortcutsEnabled = true,
+  shortcutScope = 'collection',
+  collectionOwnerId,
+  isAvailable,
+  onClearSelection,
+}: MultiSelectActionBarProps): ReactElement | null {
+  const barRef = useRef<HTMLDivElement>(null);
+  const visible = selectedCount > 0;
+  useEffect(() => {
+    const bar = barRef.current;
+    if (!visible || !bar) return;
+    // Notify the owning document, including from a shadow root or after unmount.
+    // Only the Portal host may measure this bar and change global layout styles.
+    const report = (active: boolean) => {
+      const owner = bar.ownerDocument;
+      const LayoutEvent = owner.defaultView?.CustomEvent;
+      if (LayoutEvent) {
+        owner.dispatchEvent(new LayoutEvent<BulkActionLayoutDetail>(BULK_ACTION_LAYOUT_EVENT, {
+          detail: { bar, active },
+        }));
+      }
+    };
+    const update = () => report(isAvailable?.() !== false && isInteractionElementVisible(bar));
+    update();
+    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(update);
+    observer?.observe(bar);
+    const VisibilityObserver = bar.ownerDocument.defaultView?.MutationObserver;
+    const visibilityObserver = VisibilityObserver ? new VisibilityObserver(update) : null;
+    let element: Element | null = bar;
+    while (element) {
+      visibilityObserver?.observe(element, { attributes: true, attributeFilter: element === bar.ownerDocument.documentElement ? ['hidden', 'inert', 'aria-hidden', 'class'] : ['hidden', 'inert', 'aria-hidden', 'style', 'class'] });
+      const root: Node = element.getRootNode();
+      element = element.parentElement ?? ('host' in root ? (root as ShadowRoot).host : null);
+    }
+    return () => {
+      observer?.disconnect();
+      visibilityObserver?.disconnect();
+      report(false);
+    };
+  }, [isAvailable, visible]);
+
+  const actionShortcuts = useMemo<ShortcutDefinition[]>(() => {
+    return actions.flatMap((action): ShortcutDefinition[] => {
+        if (!action.shortcut) return [];
+        return [{
+          id: `collection.action.${action.id}`,
+          keys: action.shortcut,
+          label: action.label,
+          allowRepeat: Boolean(action.disabled || action.pending),
+          // Keep advertised keys owned while disabled/pending; never fall through to another action.
+          onTrigger: () => { if (!action.disabled && !action.pending) action.onRun(); },
+        }];
+      });
+  }, [actions]);
+  useShortcuts(actionShortcuts, {
+    enabled: shortcutsEnabled && selectedCount > 0,
+    scope: shortcutScope,
+    priority: 25,
+    collectionOwnerId,
+    isAvailable: () => isAvailable?.() !== false && isInteractionElementVisible(barRef.current),
+  });
+
+  if (selectedCount === 0) return null;
+
+  const countWord = itemLabel
+    ? selectedCount === 1
+      ? itemLabel.singular
+      : itemLabel.plural
+    : 'selected';
+  const countLabel = itemLabel
+    ? `${selectedCount} ${countWord} selected`
+    : `${selectedCount} selected`;
+
+  const composedStyle: CSSProperties = { ...containerBaseStyle, ...(style || {}) };
+
+  return (
+    <div
+      ref={barRef}
+      data-notis-bulk-actions
+      onFocusCapture={() => { if (collectionOwnerId) activateShortcutCollection(collectionOwnerId); }}
+      onMouseDownCapture={() => { if (collectionOwnerId) activateShortcutCollection(collectionOwnerId); }}
+      onKeyDown={(event) => {
+        if (event.key !== 'Escape' || !shortcutsEnabled || !onClearSelection || isAvailable?.() === false) return;
+        event.preventDefault();
+        event.stopPropagation();
+        onClearSelection();
+      }}
+      role="toolbar"
+      aria-label={`Bulk actions for ${selectedCount} selected ${countWord}`}
+      className={className}
+      style={composedStyle}
+    >
+      <style>{`
+        [data-notis-bulk-action-icon][data-has-shortcut] { display: none !important; }
+        @media (max-width: 639px) {
+          [data-notis-bulk-actions] { flex-wrap: wrap; width: calc(100% - 2rem) !important; }
+          [data-notis-bulk-count] { flex-basis: 100%; padding: 0.375rem 0.5rem !important; font-size: 14px !important; }
+          [data-notis-bulk-divider] { display: none; }
+          [data-notis-bulk-action-list] { width: 100%; }
+          [data-notis-bulk-actions] button { min-height: 48px; font-size: 16px !important; }
+        }
+        @media (hover: none) and (pointer: coarse) {
+          [data-notis-bulk-actions] kbd { display: none !important; }
+          [data-notis-bulk-action-icon][data-has-shortcut] { display: inline-flex !important; }
+        }
+      `}</style>
+      <span data-notis-bulk-count style={countStyle}>{countLabel}</span>
+      {actions.length > 0 ? <span data-notis-bulk-divider aria-hidden style={dividerStyle} /> : null}
+      <div data-notis-bulk-action-list style={{ display: 'flex', minWidth: 0, overflowX: 'auto', overscrollBehaviorX: 'contain', gap: '0.25rem' }}>
+        {actions.map((action) => (
+          <ActionButton key={action.id} action={action} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ActionButton({ action }: { action: MultiSelectAction }) {
+  const [hover, setHover] = useState(false);
+  const display = action.shortcut ? shortcutDisplay(action.shortcut) : null;
+  const buttonStyle: CSSProperties = {
+    ...baseButtonStyle,
+    background: hover
+      ? 'color-mix(in srgb, hsl(var(--background)) 12%, transparent)'
+      : 'transparent',
+    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={() => {
+        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}
+    >
+      {action.icon ? (
+        <span data-notis-bulk-action-icon data-has-shortcut={action.shortcut ? '' : undefined} aria-hidden style={iconSlotStyle}>{action.icon}</span>
+      ) : null}
+      {display ? <kbd aria-hidden style={keycapStyle}>{display}</kbd> : null}
+      <span>{action.pending ? `${action.label}…` : action.label}</span>
+    </button>
+  );
+}