feat: implement Q2 2026 roadmap — spec type re-exports, focus/keyboard, animation, notifications, DnD, view enhancements

[Copilot]

Advances spec v2.0.7 compliance from 86% → 90% by implementing the Q2 2026 interactive experience layer: focus management, animation/motion, notifications, DnD coordination, and view enhancement hooks.

Spec type re-exports (@object-ui/types)

• Re-export all 70+ new v2.0.7 UI types from @objectstack/spec/ui, organized into 11 domain sections (DnD, Focus, Animation, Notifications, Gestures, Offline/Sync, View Enhancements, Performance, Page Transitions, Accessibility, I18n, Responsive)
• Alias colliding names with Spec prefix (SpecGestureConfig, SpecOfflineConfig, SpecNotification, etc.)

New hooks (@object-ui/react)

• useFocusTrap — Tab/Shift+Tab cycling, auto-focus, restore-focus, escape-deactivate
• useKeyboardShortcuts — Modifier key support (Ctrl/Cmd/Shift/Alt), form element awareness, getShortcutDescriptions() for help dialogs
• useAnimation — 7 transition presets mapped to Tailwind classes (fade, slide-*, scale, scale-fade) with custom duration/delay/easing
• useReducedMotion — Live prefers-reduced-motion media query listener
• useColumnSummary — SUM/AVG/COUNT/MIN/MAX/DISTINCT with Intl.NumberFormat
• useDensityMode — Compact/comfortable/spacious with row heights, padding/font classes, cycle()
• useViewSharing — Saved view CRUD with private/team/org/public visibility

New context providers (@object-ui/react)

• NotificationProvider / useNotifications — Severity levels, auto-dismiss, unread tracking, external toast delegation via onToast
• DndProvider / useDnd — Drop zone registration, accept-type filtering, constraint config, effect types (move/copy/link)

// Focus trap + keyboard shortcuts
const trapRef = useFocusTrap({ autoFocus: true, escapeDeactivates: true, onEscape: close });
useKeyboardShortcuts([
  { key: 'k', ctrlOrMeta: true, handler: openSearch, description: 'Search' },
]);

// Animation with reduced motion respect
const prefersReduced = useReducedMotion();
const anim = useAnimation({ preset: prefersReduced ? 'none' : 'fade', duration: 200 });

// View density + column summary
const density = useDensityMode('comfortable');
const total = useColumnSummary(rows, { field: 'amount', function: 'sum', label: 'Total' });

Tests

8 new test files, 125 new tests. All 256 react package tests pass, all 41 monorepo builds pass.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
objectui	Canceled		Feb 11, 2026 8:52pm
objectui-demo	Canceled		Feb 11, 2026 8:52pm
objectui-storybook	Error		Feb 11, 2026 8:52pm

[Copilot]

Pull request overview

This PR advances ObjectUI’s v2.0.7 compliance by expanding spec type re-exports in @object-ui/types and adding a new interactive “experience layer” in @object-ui/react (hooks + context providers) for focus/keyboard, motion/animation, notifications, DnD coordination, and view enhancements.

Changes:

• Re-export v2.0.7 spec UI types from @objectstack/spec/ui via @object-ui/types, with Spec* aliases for some colliding names.
• Add new React hooks (useFocusTrap, useKeyboardShortcuts, useReducedMotion, useAnimation, useColumnSummary, useDensityMode, useViewSharing) and corresponding test coverage.
• Introduce NotificationProvider/useNotifications and DndProvider/useDnd contexts (plus tests) and update the roadmap metrics.

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
packages/types/src/index.ts	Adds v2.0.7 UI type re-exports from @objectstack/spec/ui organized by domain.
packages/react/src/hooks/useViewSharing.ts	Adds a saved-view CRUD hook for view sharing/visibility.
packages/react/src/hooks/useReducedMotion.ts	Adds a prefers-reduced-motion listener hook.
packages/react/src/hooks/useKeyboardShortcuts.ts	Adds a global keyboard shortcut registration hook + description helper.
packages/react/src/hooks/useFocusTrap.ts	Adds a focus-trap hook for modal/drawer-style containment.
packages/react/src/hooks/useDensityMode.ts	Adds a compact/comfortable/spacious density mode hook.
packages/react/src/hooks/useColumnSummary.ts	Adds a column aggregation hook (sum/avg/count/min/max/distinct) with formatting.
packages/react/src/hooks/useAnimation.ts	Adds preset-based animation class generation with configurable timing.
packages/react/src/hooks/index.ts	Exports the newly added hooks from the hooks barrel file.
packages/react/src/hooks/tests/*.test.ts	Adds unit tests for the new hooks.
packages/react/src/context/index.ts	Exports the new Notification and DnD contexts.
packages/react/src/context/NotificationContext.tsx	Adds NotificationProvider and related notification APIs.
packages/react/src/context/DndContext.tsx	Adds DndProvider coordination layer for DnD state and drop-zone registration.
packages/react/src/context/tests/*.test.tsx	Adds unit tests for the new contexts.
ROADMAP.md	Updates roadmap checkboxes and compliance percentages to reflect these features.

[Copilot]

dropZones is a Map that gets mutated in-place. Since the Map reference never changes, context consumers won’t re-render when drop zones are registered/unregistered. Consider clone-on-write with a state setter (replace the Map) or store the Map in a ref plus a version state to trigger updates.

[Copilot]

The saveView JSDoc/API says it can "save a new view or update existing", but the current signature (Omit<..., 'id' | 'updatedAt'>) and implementation always create a new id and append a new view. Either add update/upsert support (e.g., accept an id) or rename this to reflect create-only behavior.

Suggested change

	/** Save a new view or update existing */
	/** Save a new view */

[Copilot]

Notification is re-exported unaliased from @objectstack/spec/ui. Since Notification is also a global DOM type, importing this can create confusing name collisions in consumer code. Consider exporting it as SpecNotification (similar to the other Spec* aliases here).

Suggested change

	Notification,
	Notification as SpecNotification,

[Copilot]

event.target can be null or a non-HTMLElement (e.g. document), but this code casts to HTMLElement and reads tagName, which can throw. Guard with event.target instanceof HTMLElement (and handle null) before accessing element properties.

Suggested change

	const target = event.target as HTMLElement;
	const isFormElement =
	target.tagName === 'INPUT' ||
	target.tagName === 'TEXTAREA' ||
	target.tagName === 'SELECT' ||
	target.isContentEditable;
	const target = event.target;
	let isFormElement = false;
	if (target instanceof HTMLElement) {
	const tagName = target.tagName;
	isFormElement =
	tagName === 'INPUT' ||
	tagName === 'TEXTAREA' ||
	tagName === 'SELECT' ||
	target.isContentEditable;
	}

[Copilot]

Auto-dismiss uses setTimeout, but the timer isn’t tracked/cleared. If the provider unmounts before the timeout fires, it will call setNotifications on an unmounted component. Track timeout ids (e.g., in a ref keyed by notification id) and clear them on unmount / early dismiss.

[Copilot]

registerDropZone mutates the dropZones map via dropZones.set(...) without triggering any state update. To keep consumers reactive, update this to replace the map (e.g., setDropZones(new Map(prev).set(...))) or bump a separate version state.

[Copilot]

Similarly, unregisterDropZone mutates the dropZones map via dropZones.delete(...) without a state update, so dependent UI won’t re-render. Consider using a setter that replaces the map (clone-on-write) when deleting.

Suggested change

	dropZones.set(zone.id, zone);
	},
	[dropZones],
	);
	const unregisterDropZone = useCallback(
	(zoneId: string) => {
	dropZones.delete(zoneId);
	},
	[dropZones],
	setDropZones((prev) => {
	const next = new Map(prev);
	next.set(zone.id, zone);
	return next;
	});
	},
	[setDropZones],
	);
	const unregisterDropZone = useCallback(
	(zoneId: string) => {
	setDropZones((prev) => {
	if (!prev.has(zoneId)) {
	return prev;
	}
	const next = new Map(prev);
	next.delete(zoneId);
	return next;
	});
	},
	[setDropZones],

[Copilot]

This initial state initializer calls window.matchMedia(...) without checking that matchMedia exists. In environments where window is defined but matchMedia is not, this will throw. Add a window.matchMedia existence guard here and in the effect.

Suggested change

	if (typeof window === 'undefined') return false;
	return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
	});
	useEffect(() => {
	if (typeof window === 'undefined') return;
	if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
	return false;
	}
	return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
	});
	useEffect(() => {
	if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;

[Copilot]

useAnimation sets timing via inline styles (animationDuration/animationDelay), which pushes consumers toward style={...} usage. If you want to keep styling Tailwind-driven, consider returning Tailwind duration/delay/ease classes (including arbitrary values) instead of a style object.

[Copilot]

NotificationSystemConfig defines maxVisible, but notify currently prepends and keeps all notifications without enforcing this limit. This can lead to unbounded growth of notifications over time. Consider trimming the list in setNotifications based on config.maxVisible (and/or keeping history separately if needed).