impact-nova 2.0.9 → 2.1.0-alpha.10

package/dist/components/flows/command-palette/shortcut-overlay.js

@@ -0,0 +1,166 @@
+import { jsxs as L, Fragment as x, jsx as v } from "react/jsx-runtime";
+import * as h from "react";
+import { createPortal as O } from "react-dom";
+import { useShortcutOverlay as S } from "./shortcut-overlay-context.js";
+import { useCommandPalette as M } from "./use-command-palette.js";
+import { Kbd as T } from "../../primitives/kbd/kbd.js";
+const u = 26, y = 80, s = 4;
+function X() {
+  const o = document.querySelectorAll(
+    '[role="dialog"][data-state="open"], [role="alertdialog"][data-state="open"], [data-component="sheet-content"][data-state="open"]'
+  );
+  return o.length === 0 ? null : o[o.length - 1];
+}
+function z(o) {
+  if (o.length <= 1) return o;
+  const a = [...o].sort((e, t) => e.top - t.top || e.left - t.left), f = (e, t) => Math.abs(e.left - t.left) < y && Math.abs(e.top - t.top) < u + s, c = (e) => a.slice(0, e).some((t) => f(t, a[e]));
+  for (let e = 1; e < a.length; e++) {
+    if (!c(e)) continue;
+    const t = a[e], d = t.top, p = t.left, n = t.placement;
+    if (t.placement === "above" ? (t.placement = "below", t.top = d + u + 32 + s) : (t.placement = "above", t.top = d - u - 32 - s), !c(e)) continue;
+    t.placement = n, t.left = p;
+    let i = !1;
+    for (let r = 1; r <= 6; r++)
+      if (t.top = d + (u + s) * r, !c(e)) {
+        i = !0;
+        break;
+      }
+    if (!i) {
+      t.top = d;
+      for (let r = 1; r <= 4; r++)
+        if (t.left = p + (y + s) * r, !c(e)) {
+          i = !0;
+          break;
+        }
+      if (!i) {
+        t.left = p;
+        for (let r = 1; r <= 4 && (t.top = d - (u + s) * r, !!c(e)); r++)
+          ;
+      }
+    }
+  }
+  return a;
+}
+function D(o) {
+  const a = window.innerWidth, f = window.innerHeight;
+  return {
+    ...o,
+    top: Math.max(s, Math.min(o.top, f - u - s)),
+    left: Math.max(y / 2, Math.min(o.left, a - y / 2))
+  };
+}
+function F() {
+  const { isOverlayVisible: o, setOverlayVisible: a } = S(), { getEffectiveKeybinding: f, version: c } = M(), [e, t] = h.useState([]), [d, p] = h.useState(0);
+  return h.useLayoutEffect(() => {
+    if (!o) {
+      t([]);
+      return;
+    }
+    const n = X(), i = document.querySelectorAll("[data-shortcut-id]"), r = [];
+    i.forEach((m) => {
+      const w = m.getAttribute("data-shortcut-id");
+      if (!w || n && !n.contains(m)) return;
+      const g = window.getComputedStyle(m);
+      if (g.display === "none" || g.visibility === "hidden" || g.opacity === "0")
+        return;
+      const l = m.getBoundingClientRect();
+      if (l.width === 0 || l.height === 0 || l.bottom < 0 || l.top > window.innerHeight || l.right < 0 || l.left > window.innerWidth)
+        return;
+      const k = f(w);
+      if (!k) return;
+      const A = l.left + l.width / 2;
+      let E = "above", b = l.top - u - s;
+      b < s && (E = "below", b = l.bottom + s), r.push({
+        id: w,
+        keybinding: k,
+        top: b,
+        left: A,
+        placement: E
+      });
+    }), t(z(r).map(D));
+  }, [o, f, c, d]), h.useEffect(() => {
+    if (!o) return;
+    const n = (i) => {
+      i.key === "Escape" && (i.preventDefault(), i.stopPropagation(), a(!1));
+    };
+    return window.addEventListener("keydown", n, !0), () => window.removeEventListener("keydown", n, !0);
+  }, [o, a]), h.useEffect(() => {
+    if (!o) return;
+    let n;
+    const i = () => {
+      cancelAnimationFrame(n), n = requestAnimationFrame(() => p((m) => m + 1));
+    };
+    window.addEventListener("scroll", i, !0), window.addEventListener("resize", i);
+    const r = new MutationObserver(i);
+    return r.observe(document.body, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: ["data-state"]
+    }), () => {
+      cancelAnimationFrame(n), window.removeEventListener("scroll", i, !0), window.removeEventListener("resize", i), r.disconnect();
+    };
+  }, [o]), !o || e.length === 0 ? null : O(
+    /* @__PURE__ */ L(x, { children: [
+      /* @__PURE__ */ v(
+        "div",
+        {
+          className: "fixed inset-0 z-[99998] cursor-default bg-scrim-light",
+          "data-shortcut-overlay-backdrop": "",
+          onClick: () => a(!1)
+        }
+      ),
+      e.map((n) => /* @__PURE__ */ v(
+        "div",
+        {
+          "data-shortcut-overlay-badge": "",
+          style: {
+            position: "fixed",
+            top: n.top,
+            left: n.left,
+            transform: "translateX(-50%)",
+            zIndex: 99999,
+            pointerEvents: "none",
+            animation: n.placement === "below" ? "shortcut-overlay-badge-in-below 0.15s ease-out" : "shortcut-overlay-badge-in 0.15s ease-out"
+          },
+          children: /* @__PURE__ */ v(
+            T,
+            {
+              keybinding: n.keybinding,
+              size: "sm",
+              variant: "dark"
+            }
+          )
+        },
+        n.id
+      )),
+      /* @__PURE__ */ v("style", { children: `
+        @keyframes shortcut-overlay-badge-in {
+          from {
+            opacity: 0;
+            transform: translateX(-50%) translateY(4px);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(-50%) translateY(0);
+          }
+        }
+        @keyframes shortcut-overlay-badge-in-below {
+          from {
+            opacity: 0;
+            transform: translateX(-50%) translateY(-4px);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(-50%) translateY(0);
+          }
+        }
+      ` })
+    ] }),
+    document.body
+  );
+}
+F.displayName = "ShortcutOverlay";
+export {
+  F as ShortcutOverlay
+};

package/dist/components/flows/command-palette/shortcut-registry.js

@@ -0,0 +1,221 @@
+import { deserialiseOverrides as h, serialiseOverrides as u, isReservedShortcut as f, keybindingsEqual as m, scopePriority as a, matchesKeybinding as g } from "./utils.js";
+import { hasUsableShortcutKey as v } from "../../primitives/kbd/keybinding-display.js";
+const p = 10;
+class c {
+  static STORAGE_KEY = "impact-nova-shortcuts";
+  static RECENT_COMMANDS_KEY = "impact-nova-recent-commands";
+  getOverrides() {
+    if (typeof localStorage > "u") return null;
+    try {
+      const e = localStorage.getItem(c.STORAGE_KEY);
+      return e ? h(e) : null;
+    } catch {
+      return null;
+    }
+  }
+  saveOverrides(e) {
+    if (!(typeof localStorage > "u"))
+      try {
+        localStorage.setItem(c.STORAGE_KEY, u(e));
+      } catch {
+      }
+  }
+  getRecentCommands() {
+    if (typeof localStorage > "u") return null;
+    try {
+      const e = localStorage.getItem(c.RECENT_COMMANDS_KEY);
+      if (e) {
+        const t = JSON.parse(e);
+        return Array.isArray(t) ? t : null;
+      }
+      return null;
+    } catch {
+      return null;
+    }
+  }
+  saveRecentCommands(e) {
+    if (!(typeof localStorage > "u"))
+      try {
+        localStorage.setItem(c.RECENT_COMMANDS_KEY, JSON.stringify(e));
+      } catch {
+      }
+  }
+}
+class b {
+  commands = /* @__PURE__ */ new Map();
+  overrides = /* @__PURE__ */ new Map();
+  recentCommandIds = [];
+  listeners = /* @__PURE__ */ new Set();
+  activeScopes = /* @__PURE__ */ new Set();
+  activeInstance = null;
+  storage;
+  constructor(e) {
+    this.storage = e ?? new c(), this.activeScopes.add("global"), this.loadOverrides(), this.loadRecentCommands();
+  }
+  // ─── Instance Management ────────────────────────────────────────────────
+  setActiveInstance(e) {
+    this.activeInstance !== e && (this.activeInstance = e, this.emit({ type: "scope-change" }));
+  }
+  getActiveInstance() {
+    return this.activeInstance;
+  }
+  /**
+   * Get all unique instance identifiers currently registered.
+   */
+  getRegisteredInstances() {
+    const e = /* @__PURE__ */ new Set();
+    for (const t of this.commands.values())
+      t.instance && e.add(t.instance);
+    return Array.from(e);
+  }
+  // ─── Registration ───────────────────────────────────────────────────────
+  register(e) {
+    this.commands.set(e.id, e);
+    const t = this.overrides.get(e.id);
+    t && (e.keybinding = t), this.emit({ type: "register", commandId: e.id });
+  }
+  unregister(e) {
+    this.commands.delete(e), this.emit({ type: "unregister", commandId: e });
+  }
+  // ─── Keybinding Management ─────────────────────────────────────────────
+  getEffectiveKeybinding(e) {
+    const t = this.commands.get(e);
+    if (!t) return;
+    const s = t.keybinding ?? t.defaultKeybinding;
+    return v(s) ? s : void 0;
+  }
+  updateKeybinding(e, t) {
+    const s = this.commands.get(e);
+    if (!s) return { success: !1 };
+    if (!s.customisable) return { success: !1 };
+    if (f(t))
+      return { success: !1, reserved: !0 };
+    const i = this.findConflict(e, t, s.scope);
+    return i ? { success: !1, conflict: i } : (s.keybinding = t, this.overrides.set(e, t), this.saveOverrides(), this.emit({ type: "update-keybinding", commandId: e }), { success: !0 });
+  }
+  resetKeybinding(e) {
+    const t = this.commands.get(e);
+    t && (t.keybinding = void 0, this.overrides.delete(e), this.saveOverrides(), this.emit({ type: "reset-keybinding", commandId: e }));
+  }
+  // ─── Conflict Detection ────────────────────────────────────────────────
+  findConflict(e, t, s) {
+    for (const [i, r] of this.commands) {
+      if (i === e || r.scope !== s) continue;
+      const o = this.getEffectiveKeybinding(i);
+      if (o && m(o, t))
+        return {
+          conflictingCommandId: i,
+          conflictingLabel: r.label,
+          scope: r.scope
+        };
+    }
+    return null;
+  }
+  // ─── Scope Management ──────────────────────────────────────────────────
+  pushScope(e) {
+    this.activeScopes.add(e), this.emit({ type: "scope-change" });
+  }
+  popScope(e) {
+    e !== "global" && (this.activeScopes.delete(e), this.emit({ type: "scope-change" }));
+  }
+  getActiveScopes() {
+    return Array.from(this.activeScopes);
+  }
+  getHighestActiveScope() {
+    let e = "global";
+    for (const t of this.activeScopes)
+      a(t) > a(e) && (e = t);
+    return e;
+  }
+  getHighestActiveScopePriority() {
+    let e = 0;
+    for (const t of this.activeScopes)
+      e = Math.max(e, a(t));
+    return e;
+  }
+  // ─── Command Queries ───────────────────────────────────────────────────
+  getCommand(e) {
+    return this.commands.get(e);
+  }
+  getAllCommands() {
+    return Array.from(this.commands.values());
+  }
+  /**
+   * Get commands visible in the command palette.
+   * Instance-scoped commands are filtered (only active instance shows unless
+   * there's only one instance, in which case it always shows).
+   * When multiple instances exist, labels are auto-prefixed with the instance name.
+   */
+  getPaletteCommands() {
+    const t = this.getRegisteredInstances().length > 1;
+    return this.getAllCommands().filter((s) => {
+      if (s.hidden) return !1;
+      const i = this.getHighestActiveScopePriority();
+      return !(a(s.scope) > i || s.instance && t && this.activeInstance && s.instance !== this.activeInstance);
+    });
+  }
+  /**
+   * Get commands for the settings panel (all registered, including hidden).
+   */
+  getSettingsCommands() {
+    return this.getAllCommands();
+  }
+  // ─── Keyboard Event Handling ───────────────────────────────────────────
+  /**
+   * Handle a keyboard event. Finds the highest-priority matching command
+   * and executes its handler.
+   *
+   * @returns true if a command was executed, false otherwise
+   */
+  handleKeyEvent(e) {
+    const t = this.activeScopes.has("modal"), i = this.getRegisteredInstances().length > 1;
+    let r = null, o = -1;
+    for (const n of this.commands.values()) {
+      if (n.passive) continue;
+      const d = this.getEffectiveKeybinding(n.id);
+      if (d && !(t && n.scope !== "modal") && !(n.instance && i && n.instance !== this.activeInstance) && !(n.when && !n.when()) && g(e, d)) {
+        const l = a(n.scope);
+        l > o && (r = n, o = l);
+      }
+    }
+    return r ? (e.preventDefault(), e.stopPropagation(), r.handler(), this.addRecentCommand(r.id), !0) : !1;
+  }
+  // ─── Recent Commands ───────────────────────────────────────────────────
+  getRecentCommandIds() {
+    return [...this.recentCommandIds];
+  }
+  addRecentCommand(e) {
+    this.recentCommandIds = [
+      e,
+      ...this.recentCommandIds.filter((t) => t !== e)
+    ].slice(0, p), this.saveRecentCommands();
+  }
+  // ─── Event System ─────────────────────────────────────────────────────
+  subscribe(e) {
+    return this.listeners.add(e), () => {
+      this.listeners.delete(e);
+    };
+  }
+  emit(e) {
+    this.listeners.forEach((t) => t(e));
+  }
+  // ─── Persistence ──────────────────────────────────────────────────────
+  loadOverrides() {
+    const e = this.storage.getOverrides();
+    e && (this.overrides = e);
+  }
+  saveOverrides() {
+    this.storage.saveOverrides(this.overrides);
+  }
+  loadRecentCommands() {
+    const e = this.storage.getRecentCommands();
+    e && (this.recentCommandIds = e);
+  }
+  saveRecentCommands() {
+    this.storage.saveRecentCommands(this.recentCommandIds);
+  }
+}
+export {
+  c as LocalStorageAdapter,
+  b as ShortcutRegistry
+};

package/dist/components/flows/command-palette/shortcut-scope-provider.d.ts

@@ -0,0 +1,51 @@
+import { ShortcutScope } from './utils';
+/**
+ * ShortcutScopeProvider — Scope boundary component with instance awareness.
+ *
+ * When mounted, it pushes a scope onto the registry. When unmounted,
+ * it pops the scope. This allows sections of the UI to own their shortcuts.
+ *
+ * When `instance` is provided, the provider wraps its children in a
+ * container div that detects focus events. When anything inside the
+ * container receives focus (click or tab), the instance becomes "active"
+ * in the registry, and only that instance's commands are dispatched.
+ *
+ * Usage:
+ *   // Basic scope (no instance — all commands fire)
+ *   <ShortcutScopeProvider scope="module" name="planning">
+ *     <PlanningModule />
+ *   </ShortcutScopeProvider>
+ *
+ *   // Instance-aware (for multi-table pages)
+ *   <ShortcutScopeProvider scope="page" instance="sales-table" label="Sales Table">
+ *     <DataTable ... />
+ *   </ShortcutScopeProvider>
+ *
+ *   <ShortcutScopeProvider scope="page" instance="inventory-table" label="Inventory Table">
+ *     <DataTable ... />
+ *   </ShortcutScopeProvider>
+ */
+import * as React from 'react';
+export interface ShortcutScopeProviderProps {
+    /** The scope level to activate */
+    scope: ShortcutScope;
+    /** Human-readable name for debugging */
+    name?: string;
+    /**
+     * Unique instance identifier. When provided, enables focus-based
+     * dispatch so that only the focused instance's commands fire.
+     */
+    instance?: string;
+    /**
+     * Human-readable label for the instance (shown in command palette
+     * when multiple instances are present, e.g. "Sales Table").
+     */
+    label?: string;
+    /** Optional className for the wrapper div (only used when instance is set) */
+    className?: string;
+    children: React.ReactNode;
+}
+export declare function ShortcutScopeProvider({ scope, instance, label, className, children, }: ShortcutScopeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ShortcutScopeProvider {
+    var displayName: string;
+}

package/dist/components/flows/command-palette/shortcut-scope-provider.js

@@ -0,0 +1,52 @@
+import { jsx as u, Fragment as f } from "react/jsx-runtime";
+import * as c from "react";
+import { useCommandPalette as i } from "./use-command-palette.js";
+import { ShortcutInstanceContext as s } from "./shortcut-instance-context.js";
+import { cn as l } from "../../../lib/utils.js";
+function d({
+  scope: r,
+  instance: t,
+  label: o,
+  className: a,
+  children: e
+}) {
+  const { pushScope: p, popScope: m, setActiveInstance: n } = i();
+  return c.useEffect(() => (p(r), () => {
+    m(r);
+  }), [r, p, m]), t ? /* @__PURE__ */ u(s.Provider, { value: { instance: t, label: o }, children: /* @__PURE__ */ u(
+    C,
+    {
+      instance: t,
+      className: a,
+      setActiveInstance: n,
+      children: e
+    }
+  ) }) : /* @__PURE__ */ u(f, { children: e });
+}
+d.displayName = "ShortcutScopeProvider";
+function C({
+  instance: r,
+  className: t,
+  setActiveInstance: o,
+  children: a
+}) {
+  const e = c.useCallback(() => {
+    o(r);
+  }, [r, o]);
+  return c.useEffect(() => () => {
+    queueMicrotask(() => {
+    });
+  }, [r]), /* @__PURE__ */ u(
+    "div",
+    {
+      onFocusCapture: e,
+      onClickCapture: e,
+      className: l("relative", t),
+      "data-shortcut-instance": r,
+      children: a
+    }
+  );
+}
+export {
+  d as ShortcutScopeProvider
+};

package/dist/components/flows/command-palette/shortcut-settings.d.ts

@@ -0,0 +1,38 @@
+import { ShortcutScope } from './utils';
+/**
+ * ShortcutSettings — Keyboard shortcut customisation panel (data table UI).
+ *
+ * Features:
+ *   - Search, sort, and filter on every column
+ *   - Source column with set filter (All / User / Browser / Table / System)
+ *   - Click keybinding cell → "recording mode" (press new keys)
+ *   - Non-customisable rows are read-only
+ *   - Conflict detection with inline warning
+ *   - Reset individual overrides to defaults
+ *   - Persists changes to localStorage immediately
+ */
+import * as React from 'react';
+export interface ShortcutSettingsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Filter to specific scopes */
+    scopes?: ShortcutScope[];
+    /** Filter to specific sources */
+    sources?: Array<'system' | 'user' | 'ag-grid' | 'browser'>;
+    /** Optional render prop to hoist the recording indicator/conflict message up to a parent toolbar */
+    renderStatus?: (node: React.ReactNode | null) => React.ReactNode;
+    /** Label shown during recording mode */
+    recordingLabel?: string;
+    /** Instruction for recording a shortcut */
+    pressShortcutLabel?: string;
+    /** Label for adding a new shortcut */
+    addShortcutLabel?: string;
+    /** Warning message for shortcut conflicts */
+    conflictWarnLabel?: string;
+    /** Warning message for browser-reserved shortcuts */
+    reservedWarnLabel?: string;
+    /** Detailed instruction for recording state */
+    recordingInstruction?: string;
+}
+export declare function ShortcutSettings({ className, scopes, sources, renderStatus, recordingLabel, pressShortcutLabel, addShortcutLabel, conflictWarnLabel, reservedWarnLabel, recordingInstruction, }: ShortcutSettingsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ShortcutSettings {
+    var displayName: string;
+}