@notis_ai/cli 0.2.0-beta.19.1 → 0.2.0-beta.196.1

package/dist/sdk/src/components/DocumentPage.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import { useCallback, useRef, type CSSProperties, type ReactElement } from 'react';
+import { useNotisRuntime } from '../provider';
+import { DocumentEditor } from './DocumentEditor';
+import { ShareControl } from './RecordComponents';
+import { Skeleton } from './Skeleton';
+import type { NotisDocumentPageProps } from '../runtime';
+
+const copy = {
+  en: { loading: 'Loading document', breadcrumb: 'Breadcrumb' },
+  fr: { loading: 'Chargement du document', breadcrumb: "Fil d'Ariane" },
+};
+
+/** Column widths shared by the host page, its skeleton and the fallback, so nothing moves when the page arrives. */
+export const DOCUMENT_PAGE_WIDTHS = { standard: 900, wide: 1200, full: undefined } as const;
+/**
+ * The page's horizontal gutter: 16px, then 48px from 640px wide (the host page's px-4 sm:px-12), and its
+ * toolbar height (56px plus its 1px border, Beta's py-3 toolbar). The skeleton uses the same values.
+ */
+export const DOCUMENT_PAGE_GUTTER = { narrow: 16, wide: 48, breakpoint: 640, toolbar: 57 } as const;
+
+const SKELETON = 'notis-document-page-skeleton';
+// Inline styles cannot change with the width; this sheet (rendered with the skeleton, so it reaches a
+// Space's ShadowRoot) gives the skeleton the page's own gutter and icon row at every width.
+const skeletonCss = `.${SKELETON}__column{padding:8px ${DOCUMENT_PAGE_GUTTER.narrow}px 0}`
+  + `.${SKELETON}__icon{width:44px;height:44px;margin-bottom:4px}`
+  + `@media (min-width:${DOCUMENT_PAGE_GUTTER.breakpoint}px){.${SKELETON}__column{padding:8px ${DOCUMENT_PAGE_GUTTER.wide}px 0}`
+  + `.${SKELETON}__icon{width:56px;height:56px}}`;
+
+function useCopy() {
+  return copy[useNotisRuntime()?.context?.locale === 'fr' ? 'fr' : 'en'];
+}
+
+function columnStyle(width: NotisDocumentPageProps['width'] = 'standard'): CSSProperties {
+  const max = DOCUMENT_PAGE_WIDTHS[width];
+  return { width: '100%', maxWidth: max ? `${max}px` : undefined, margin: '0 auto', boxSizing: 'border-box' };
+}
+
+/**
+ * Placeholder shaped like the document page (toolbar, icon row, title, meta strip, body lines) at the
+ * same column width and gutter, so the page replaces it without a layout shift. Hosts show it while the
+ * record and the editor load; a Space can show it while its own data decides which record opens.
+ */
+export function DocumentPageSkeleton({ width = 'standard', className, label }: {
+  width?: NotisDocumentPageProps['width']; className?: string; label?: string;
+}): ReactElement {
+  const t = useCopy();
+  return <div role="status" aria-busy="true" aria-label={label || t.loading} data-notis-skeleton="document-page" className={className}
+    style={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
+    <style>{skeletonCss}</style>
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: DOCUMENT_PAGE_GUTTER.toolbar,
+      padding: `0 ${DOCUMENT_PAGE_GUTTER.narrow}px`, boxSizing: 'border-box' }}>
+      <Skeleton style={{ width: 180, height: 14 }} />
+      <Skeleton style={{ width: 48, height: 12 }} />
+    </div>
+    <div className={`${SKELETON}__column`} style={{ ...columnStyle(width), display: 'flex', flexDirection: 'column' }}>
+      <Skeleton className={`${SKELETON}__icon`} style={{ borderRadius: 12, height: undefined }} />
+      <Skeleton style={{ width: '58%', height: 36, margin: '2px 0 10px' }} />
+      <Skeleton style={{ width: '72%', height: 14, margin: '15px 0' }} />
+      <div style={{ display: 'grid', gap: 12, marginTop: 24 }}>
+        {[100, 96, 88, 100, 64].map((size, index) => <Skeleton key={index} style={{ width: `${size}%`, height: 16 }} />)}
+      </div>
+    </div>
+  </div>;
+}
+
+/**
+ * Shown by hosts that predate DocumentPage: the same record, with the editor these hosts already have.
+ * menuItems show as plain toolbar buttons and onSaved is called when a save finishes (title null);
+ * layout, header parts, meta and width options other than the column are not available there.
+ */
+function DocumentPageFallback(props: NotisDocumentPageProps) {
+  const t = useCopy();
+  const { recordKey, breadcrumb, actions, share = false, aboveBody, belowBody, width, readOnly, className, menuItems = [], onSaved, onSavingChange } = props;
+  const crumbs = breadcrumb === false ? [] : breadcrumb || [];
+  const showToolbar = crumbs.length > 0 || Boolean(actions) || share || menuItems.length > 0;
+  // DocumentEditor reports saving, not what it saved: a finished save tells the Space to refresh its lists.
+  const saving = useRef(false);
+  const savingChange = useCallback((value: boolean) => {
+    if (saving.current && !value) onSaved?.({ recordKey, title: null });
+    saving.current = value;
+    onSavingChange?.(value);
+  }, [onSaved, onSavingChange, recordKey]);
+  return <div className={className} style={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
+    {showToolbar ? <div style={{ display: 'flex', alignItems: 'center', gap: 8, minHeight: 48, padding: '0 16px' }}>
+      <nav aria-label={t.breadcrumb} style={{ display: 'flex', alignItems: 'center', gap: 4, flex: 1, minWidth: 0, fontSize: 14 }}>
+        {crumbs.map((crumb, index) => <span key={`${crumb.label}-${index}`} style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+          {crumb.onSelect ? <button type="button" onClick={crumb.onSelect}
+            style={{ background: 'none', border: 0, padding: '4px 6px', borderRadius: 6, cursor: 'pointer', color: 'hsl(var(--muted-foreground))', font: 'inherit' }}>
+            {crumb.label}</button> : <span style={{ color: 'hsl(var(--muted-foreground))' }}>{crumb.label}</span>}
+          <span aria-hidden="true" style={{ color: 'hsl(var(--muted-foreground))' }}>/</span>
+        </span>)}
+      </nav>
+      {actions}
+      {share ? <ShareControl recordKey={recordKey} /> : null}
+      {/* The host's '...' menu is not available here: its entries show as plain buttons. */}
+      {menuItems.map((item, index) => <button key={`${item.label}-${index}`} type="button" onClick={item.onSelect} disabled={item.disabled}
+        style={{ background: 'none', border: 0, padding: '4px 8px', borderRadius: 6, cursor: item.disabled ? 'default' : 'pointer', font: 'inherit', fontSize: 13,
+          color: item.destructive ? 'hsl(var(--destructive))' : 'hsl(var(--muted-foreground))', opacity: item.disabled ? 0.5 : 1 }}>{item.label}</button>)}
+    </div> : null}
+    <div style={{ ...columnStyle(width), padding: '24px 16px 96px', display: 'flex', flexDirection: 'column', gap: 20 }}>
+      {aboveBody}
+      <DocumentEditor recordKey={recordKey} variant={props.header === false ? 'body' : 'full'} showProperties={props.properties !== 'hidden'}
+        readOnly={readOnly} onDirtyChange={props.onDirtyChange} onSavingChange={savingChange} />
+      {belowBody}
+    </div>
+  </div>;
+}
+
+/**
+ * The full page of one record that is the main content of a Space view, such as a note: breadcrumb,
+ * Saving or Saved status, '...' menu, cover, icon, title, meta strip, properties that save
+ * automatically, and the collaborative body with presence. The host (Portal) draws it and keeps one
+ * save queue for the whole record. Files open in their viewer under the header; HTML and reports show
+ * only the toolbar (breadcrumb, actions, Share, '...' menu) above their frame, with no header, meta,
+ * properties, aboveBody or belowBody.
+ *
+ * ```tsx
+ * if (params.note) return <DocumentPage recordKey={params.note}
+ *   breadcrumb={[{ label: 'All notes', onSelect: () => setParams({ note: null }) }]}
+ *   actions={<TrashButton />} onSaved={() => notes.refetch()} />;
+ * ```
+ *
+ * Slots (`breadcrumb`, `actions`, `menuItems`, `aboveBody`, `belowBody`) and toggles (`share`,
+ * `header`, `meta`, `properties`, `width`) adjust it; `layout` rearranges its parts. Hosts without
+ * this component show the record with `DocumentEditor` instead.
+ */
+export function DocumentPage(props: NotisDocumentPageProps): ReactElement {
+  const Host = useNotisRuntime()?.ui?.DocumentPage;
+  return Host ? <Host {...props} /> : <DocumentPageFallback {...props} />;
+}
+
+/**
+ * Starts reading a record before it opens (for example on a list row's hover or focus), so its
+ * DocumentPage shows at once. Does nothing outside a host that supports it.
+ */
+export function usePrefetchRecord(): (recordKey: string) => void {
+  const prefetch = useNotisRuntime()?.ui?.prefetchRecord;
+  return useCallback((recordKey: string) => { if (recordKey) prefetch?.(recordKey); }, [prefetch]);
+}

package/dist/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/dist/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/dist/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>
+  );
+}