@notis_ai/cli 0.2.0-beta.1793038587372.1 → 0.2.0-beta.1793098461724.1

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

@@ -27,6 +27,10 @@ export interface MultiSelectActionBarProps {
   actions: MultiSelectAction[];
   /** Override the "{count} selected" label units. Default: "selected" with no item word. */
   itemLabel?: { singular: string; plural: string };
+  /** Complete count text in the caller's language, including plural agreement. */
+  selectionLabel?: string;
+  /** Accessible toolbar name in the caller's language. */
+  toolbarLabel?: 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. */
@@ -125,6 +129,8 @@ export function MultiSelectActionBar({
   selectedCount,
   actions,
   itemLabel,
+  selectionLabel,
+  toolbarLabel,
   className,
   style,
   shortcutsEnabled = true,
@@ -196,9 +202,9 @@ export function MultiSelectActionBar({
       ? itemLabel.singular
       : itemLabel.plural
     : 'selected';
-  const countLabel = itemLabel
+  const countLabel = selectionLabel ?? (itemLabel
     ? `${selectedCount} ${countWord} selected`
-    : `${selectedCount} selected`;
+    : `${selectedCount} selected`);
 
   const composedStyle: CSSProperties = { ...containerBaseStyle, ...(style || {}) };
 
@@ -215,7 +221,7 @@ export function MultiSelectActionBar({
         onClearSelection();
       }}
       role="toolbar"
-      aria-label={`Bulk actions for ${selectedCount} selected ${countWord}`}
+      aria-label={toolbarLabel ?? `Bulk actions for ${selectedCount} selected ${countWord}`}
       className={className}
       style={composedStyle}
     >
@@ -225,8 +231,13 @@ export function MultiSelectActionBar({
           [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; }
+          /* Every action gets an equal column, icon over label, so none is cut off at the edge
+             (longer labels such as French ones wrap inside their column instead). */
+          [data-notis-bulk-action-list] { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; overflow: visible !important; }
+          [data-notis-bulk-actions] button { flex-direction: column; justify-content: flex-start; gap: 4px !important; min-width: 0; min-height: 56px; padding: 8px 4px 6px !important; font-size: 12px !important; line-height: 1.25; white-space: normal !important; text-align: center; }
+          [data-notis-bulk-actions] kbd { display: none !important; }
+          [data-notis-bulk-action-icon][data-has-shortcut] { display: inline-flex !important; }
+          [data-notis-bulk-action-icon] svg { width: 18px; height: 18px; }
         }
         @media (hover: none) and (pointer: coarse) {
           [data-notis-bulk-actions] kbd { display: none !important; }

package/dist/sdk/src/hooks/useCollectionInteractions.ts

@@ -26,6 +26,7 @@ import {
 
 import type { MultiSelectActionBarProps } from '../components/MultiSelectActionBar';
 import { isInteractionElementVisible } from '../interactions/visibility';
+import { travelBetween, type TravelDirection } from '../ui/engine/step';
 import { useLongPressSelection } from './useLongPressSelection';
 import { useMarqueeSelection, type SelectionMarqueeRect } from './useMarqueeSelection';
 
@@ -117,6 +118,11 @@ export interface CollectionInteractionController<T> {
   lastClickedId: string | null;
   dragRect: SelectionMarqueeRect | null;
   actions: ResolvedCollectionAction[];
+  /**
+   * The way the active item last moved (J/K, the arrows, a click further up or down); 'next' until it moves. A page
+   * that removes the active item continues this way (iOS Photos), else the other way at the edge.
+   */
+  travelDirection: () => TravelDirection;
   getActionBarProps: () => Pick<MultiSelectActionBarProps, 'selectedCount' | 'actions' | 'collectionOwnerId' | 'isAvailable' | 'shortcutsEnabled' | 'onClearSelection'>;
 
   isSelected: (id: string) => boolean;
@@ -237,6 +243,7 @@ export function useCollectionInteractions<T>(
   const selectedIdsRef = useRef(selectedIds);
   const activeIdRef = useRef(activeId);
   const anchorIdRef = useRef(anchorId);
+  const travelRef = useRef<TravelDirection>('next');
   // Keep manually selected rows outside the current keyboard range on reversal.
   const keyboardRangeBaseRef = useRef<Set<string> | null>(null);
   const onSelectionChangeRef = useRef(onSelectionChange);
@@ -307,6 +314,9 @@ export function useCollectionInteractions<T>(
   const setActive = useCallback((id: string | null, reason: CollectionInteractionReason = 'activate') => {
     const next = id && selectableIdsRef.current.includes(id) ? id : null;
     if (activeIdRef.current === next) return;
+    // A click or focus further up or down sets the way; keys set it themselves (moveActive), a wrap included.
+    const travel = reason === 'items-changed' ? null : travelBetween(selectableIdsRef.current, activeIdRef.current, next);
+    if (travel) travelRef.current = travel;
     activeIdRef.current = next;
     if (controlledActiveId === undefined) setUncontrolledActiveId(next);
     onActiveIdChangeRef.current?.(next, reason);
@@ -448,6 +458,7 @@ export function useCollectionInteractions<T>(
     const ids = selectableIdsRef.current;
     if (ids.length === 0) return;
     const current = activeIdRef.current;
+    const forward = direction === 'next' || direction === 'down' || direction === 'right';
     // Range gestures follow the displayed order, independent of asymmetric grid geometry.
     let next = extend ? null : resolveNextIdRef.current?.({
       direction,
@@ -457,7 +468,6 @@ export function useCollectionInteractions<T>(
     }) ?? null;
     if (!next) {
       const currentIndex = current ? ids.indexOf(current) : -1;
-      const forward = direction === 'next' || direction === 'down' || direction === 'right';
       const nextIndex = currentIndex === -1
         ? forward ? 0 : ids.length - 1
         : Math.min(ids.length - 1, Math.max(0, currentIndex + (forward ? 1 : -1)));
@@ -478,6 +488,7 @@ export function useCollectionInteractions<T>(
       setAnchor(next, 'navigate');
     }
     setActive(next, extend ? 'range' : 'navigate');
+    travelRef.current = forward ? 'next' : 'previous';
     const nextId = next;
     requestAnimationFrame(() => focusItem(nextId));
   }, [focusItem, replaceRange, setActive, setAnchor]);
@@ -649,6 +660,7 @@ export function useCollectionInteractions<T>(
   }), [enabled, onCheckboxClick]);
 
   const getSelectedItems = useCallback(() => getItemsForIds(selectedIdsRef.current), [getItemsForIds]);
+  const travelDirection = useCallback(() => travelRef.current, []);
   const isSelected = useCallback((id: string) => selectedIds.has(id), [selectedIds]);
 
   const actionContext = useMemo<CollectionActionContext<T>>(() => ({
@@ -716,6 +728,7 @@ export function useCollectionInteractions<T>(
     lastClickedId: anchorId,
     dragRect,
     actions: resolvedActions,
+    travelDirection,
     getActionBarProps,
     isSelected,
     getSelectedItems,

package/dist/sdk/src/interactions.ts

@@ -19,6 +19,8 @@ export type {
   ResolvedCollectionAction,
 } from './interactions/actions';
 export { useCollectionInteractions, COLLECTION_ITEM_ATTRIBUTE } from './hooks/useCollectionInteractions';
+export { continuationOf, travelBetween } from './ui/engine/step';
+export type { TravelDirection } from './ui/engine/step';
 export type {
   CollectionInteractionController,
   CollectionInteractionReason,

package/dist/sdk/src/ui/engine/step.ts

@@ -0,0 +1,54 @@
+export interface StepOptions {
+  /** Wrap from the last item to the first (and back). Default true. */
+  wrap?: boolean;
+  /** The key is held (`event.repeat`): never wrap, stop at the edge. */
+  repeat?: boolean;
+}
+
+/**
+ * Next cursor id for J/K stepping. Wraps only on a fresh press, so holding J stops at the last row instead of
+ * spinning back to the top. No cursor: J lands on the first item, K on the last.
+ */
+export function stepCursor(ids: readonly string[], cursor: string | null | undefined, delta: number,
+  options: StepOptions = {}): string | null {
+  if (!ids.length) return null;
+  const { wrap = true, repeat = false } = options;
+  const index = cursor == null ? -1 : ids.indexOf(cursor);
+  if (index === -1) return delta >= 0 ? ids[0]! : ids[ids.length - 1]!;
+  let next = index + delta;
+  if (next < 0 || next >= ids.length) {
+    if (wrap && !repeat) next = ((next % ids.length) + ids.length) % ids.length;
+    else next = Math.max(0, Math.min(ids.length - 1, next));
+  }
+  return ids[next]!;
+}
+
+/** The way the cursor last moved through a list. A removal continues that way (iOS Photos). */
+export type TravelDirection = 'next' | 'previous';
+
+/** The way a move from `from` to `to` went in `ids`; null when either is not in the list or nothing moved. */
+export function travelBetween(ids: readonly string[], from: string | null | undefined,
+  to: string | null | undefined): TravelDirection | null {
+  if (from == null || to == null || from === to) return null;
+  const a = ids.indexOf(from);
+  const b = ids.indexOf(to);
+  if (a === -1 || b === -1) return null;
+  return b > a ? 'next' : 'previous';
+}
+
+/**
+ * The id that takes `gone`'s place after it left `previous` (`now` holds the ids still listed): the nearest one still
+ * there in the travel direction, else the nearest the other way. Null when none is left.
+ */
+export function continuationOf(previous: readonly string[], now: readonly string[] | ReadonlySet<string>,
+  gone: string, direction: TravelDirection = 'next'): string | null {
+  const present = now instanceof Set ? now : new Set(now as readonly string[]);
+  const index = previous.indexOf(gone);
+  if (index === -1) return null;
+  const scan = (delta: number) => {
+    for (let i = index + delta; i >= 0 && i < previous.length; i += delta) if (present.has(previous[i]!)) return previous[i]!;
+    return null;
+  };
+  const first = direction === 'next' ? 1 : -1;
+  return scan(first) ?? scan(-first);
+}