impact-nova 2.0.9 → 2.1.0-alpha.2

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

@@ -0,0 +1,285 @@
+import { jsx as r, jsxs as h, Fragment as j } from "react/jsx-runtime";
+import * as s from "react";
+import { Person as z, Monitor as G, PriorityAlert as U, Locked as T, Reset as q } from "impact-nova-icons";
+import { cn as p } from "../../../lib/utils.js";
+import { ModuleRegistry as B, AllCommunityModule as $ } from "ag-grid-community";
+import { AllEnterpriseModule as H } from "ag-grid-enterprise";
+import { DataTable as V, DataTableContent as J } from "../../data/data-table/data-table.js";
+import { AG_CELL_NO_PADDING as F } from "../../data/ag-grid-react/cell-renderers/index.js";
+import { Kbd as Q } from "../../primitives/kbd/kbd.js";
+import { keybindingToString as X } from "../../primitives/kbd/keybinding-display.js";
+import { useCommandPalette as Y } from "./use-command-palette.js";
+import { COMMAND_SOURCE_LABELS as m, keybindingFromEvent as Z, isReservedShortcut as W } from "./utils.js";
+import { BadgeCellRenderer as ee } from "../../data/ag-grid-react/cell-renderers/badge-cell-renderer.js";
+B.registerModules([$, H]);
+function te(a) {
+  const t = a.data;
+  return t ? /* @__PURE__ */ h("div", { className: "flex items-center gap-2 min-w-0 h-full", children: [
+    !t.customisable && /* @__PURE__ */ r(T, { className: "h-3 w-3 text-content-muted shrink-0" }),
+    /* @__PURE__ */ h("div", { className: "flex flex-col min-w-0 gap-0", children: [
+      /* @__PURE__ */ r("span", { className: "truncate font-medium text-content-charcoal text-xs leading-tight", children: t.command }),
+      t.description && /* @__PURE__ */ r("span", { className: "truncate text-[10px] text-content-muted leading-tight", children: t.description })
+    ] })
+  ] }) : null;
+}
+function re(a) {
+  const t = a.data;
+  if (!t) return null;
+  const u = a.recordingCommandId === t.id;
+  return /* @__PURE__ */ r("div", { className: p(
+    "w-full h-full flex items-center ag-cell-inner-padding",
+    t.customisable ? "in-ag-editable-cell-highlight" : ""
+  ), children: /* @__PURE__ */ r(
+    "div",
+    {
+      className: p(
+        "flex items-center justify-between w-full h-7 rounded-[8px] px-1.5 group/row relative",
+        t.customisable ? "bg-canvas-elevated" : "bg-transparent",
+        u && "ring-1 ring-brand border border-brand"
+      ),
+      children: u ? /* @__PURE__ */ r("span", { className: "text-xs text-brand font-medium animate-pulse motion-reduce:animate-none", children: a.recordingLabel ?? "Press desired shortcut..." }) : /* @__PURE__ */ h(j, { children: [
+        t.keybinding ? /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: (o) => {
+              o.stopPropagation(), t.customisable && a.onStartRecording(t.id);
+            },
+            disabled: !t.customisable,
+            className: p(
+              "flex items-center justify-end h-full w-full text-end",
+              t.customisable ? "cursor-pointer" : "cursor-default opacity-70"
+            ),
+            children: /* @__PURE__ */ r(Q, { keybinding: t.keybinding, size: "sm" })
+          }
+        ) : t.customisable ? /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: (o) => {
+              o.stopPropagation(), a.onStartRecording(t.id);
+            },
+            className: "flex items-center justify-end h-full w-full text-xs text-content-muted hover:text-brand transition-colors cursor-pointer text-end",
+            children: a.addShortcutLabel ?? "Add shortcut"
+          }
+        ) : /* @__PURE__ */ r("span", { className: "text-xs text-transparent", children: "--" }),
+        t.hasOverride && t.customisable && !u && /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: (o) => {
+              o.stopPropagation(), a.onReset(t.id);
+            },
+            className: "absolute end-1.5 p-0.5 rounded bg-canvas-elevated hover:bg-canvas-muted hover:text-destructive cursor-pointer opacity-0 group-hover/row:opacity-100 transition-opacity z-10",
+            title: "Reset to default",
+            children: /* @__PURE__ */ r(q, { className: "!h-3 !w-3" })
+          }
+        )
+      ] })
+    }
+  ) });
+}
+function ne(a) {
+  const t = a.data;
+  return t ? /* @__PURE__ */ r("div", { className: "flex items-center h-full", children: /* @__PURE__ */ r("span", { className: "text-xs text-content-muted capitalize", children: t.scope }) }) : null;
+}
+function ae({
+  className: a,
+  scopes: t,
+  sources: u,
+  renderStatus: o,
+  recordingLabel: le,
+  pressShortcutLabel: y,
+  addShortcutLabel: v,
+  conflictWarnLabel: w = "Conflicts with other shortcuts",
+  reservedWarnLabel: b = "This shortcut is reserved by the browser",
+  recordingInstruction: L = "Recording: Press shortcut or Esc"
+}) {
+  const {
+    getSettingsCommands: C,
+    getEffectiveKeybinding: S,
+    updateKeybinding: N,
+    resetKeybinding: R,
+    version: O
+  } = Y(), [c, f] = s.useState(null), [d, l] = s.useState(null), x = s.useMemo(() => {
+    let n = C();
+    return n = n.filter((e) => {
+      const i = e.source ?? "user";
+      return i === "user" || i === "ag-grid";
+    }), t && (n = n.filter((e) => t.includes(e.scope))), u && (n = n.filter((e) => e.source && u.includes(e.source))), n.map((e) => {
+      const i = S(e.id), g = e.source ?? "user", D = m[g] ?? g ?? "User", A = D.toLowerCase() === "user";
+      return {
+        id: e.id,
+        command: e.label,
+        description: e.description || "",
+        category: e.category || "General",
+        keybinding: i,
+        keybindingDisplay: i ? X(i) : "",
+        scope: e.scope,
+        source: D,
+        sourceColor: A ? "primary" : "neutral",
+        sourceIcon: A ? /* @__PURE__ */ r(z, { className: "h-3 w-3" }) : /* @__PURE__ */ r(G, { className: "h-3 w-3" }),
+        customisable: e.customisable !== !1,
+        passive: e.passive === !0,
+        hasOverride: e.keybinding !== void 0,
+        _def: e
+      };
+    });
+  }, [O, t, u, C, S]), k = s.useCallback((n) => {
+    f(n), l(null);
+  }, []), M = s.useCallback((n) => {
+    R(n), l(null);
+  }, [R]);
+  s.useEffect(() => {
+    if (!c) return;
+    const n = (e) => {
+      if (e.preventDefault(), e.stopPropagation(), e.key === "Escape") {
+        f(null), l(null);
+        return;
+      }
+      const i = Z(e);
+      if (!i) return;
+      if (W(i)) {
+        l({ type: "reserved", text: b }), f(null), setTimeout(() => l(null), 3e3);
+        return;
+      }
+      const g = N(c, i);
+      g.success ? (f(null), l(null)) : g.conflict ? (l({
+        type: "conflict",
+        text: w
+      }), f(null), setTimeout(() => l(null), 3e3)) : g.reserved && (l({ type: "reserved", text: b }), f(null), setTimeout(() => l(null), 3e3));
+    };
+    return window.addEventListener("keydown", n, !0), () => window.removeEventListener("keydown", n, !0);
+  }, [c, N, b, w]);
+  const P = s.useMemo(() => Array.from(new Set(x.map((e) => e.category))).sort().map((e) => ({ label: e, value: e })), [x]), _ = s.useMemo(() => [
+    {
+      field: "command",
+      headerName: "Command",
+      flex: 1,
+      minWidth: 200,
+      filter: "agTextColumnFilter",
+      cellRenderer: te,
+      filterValueGetter: (n) => {
+        const e = n.data;
+        return e ? `${e.command} ${e.description}` : "";
+      }
+    },
+    {
+      field: "category",
+      headerName: "Category",
+      width: 140,
+      filter: "agSetColumnFilter",
+      headerComponentParams: {
+        isSearchable: !0,
+        advanceSearchEnabled: !0,
+        selectOptions: P,
+        isMultiSelect: !0
+      }
+    },
+    {
+      field: "keybindingDisplay",
+      headerName: "Shortcut",
+      width: 180,
+      type: "rightAligned",
+      filter: "agTextColumnFilter",
+      cellRenderer: re,
+      cellClass: F,
+      cellRendererParams: {
+        recordingCommandId: c,
+        onStartRecording: k,
+        onReset: M,
+        recordingLabel: y,
+        addShortcutLabel: v
+      },
+      sortable: !0
+    },
+    {
+      field: "scope",
+      headerName: "Scope",
+      width: 100,
+      filter: "agSetColumnFilter",
+      cellRenderer: ne,
+      headerComponentParams: {
+        isSearchable: !0,
+        advanceSearchEnabled: !0,
+        selectOptions: [
+          { label: "Global", value: "global" },
+          { label: "Module", value: "module" },
+          { label: "Page", value: "page" },
+          { label: "Modal", value: "modal" }
+        ],
+        isMultiSelect: !0
+      }
+    },
+    {
+      field: "source",
+      headerName: "Source",
+      width: 130,
+      filter: "agSetColumnFilter",
+      cellClass: F,
+      cellRenderer: ee,
+      cellRendererParams: {
+        variant: "subtle",
+        colorField: "sourceColor",
+        isIcon: !0,
+        iconField: "sourceIcon",
+        size: "small"
+      },
+      headerComponentParams: {
+        isSearchable: !0,
+        advanceSearchEnabled: !0,
+        selectOptions: [
+          { label: m.user, value: m.user },
+          { label: m["ag-grid"], value: m["ag-grid"] }
+        ],
+        isMultiSelect: !0
+      }
+    }
+  ], [c, k, M, y, v, P]), I = s.useMemo(() => ({
+    filter: {
+      filterModel: {
+        source: {
+          filterType: "set",
+          values: [m.user, m["ag-grid"]]
+        }
+      }
+    }
+  }), []), K = s.useMemo(() => ({
+    sortable: !0,
+    resizable: !0,
+    filter: !0,
+    headerComponentParams: {
+      isSearchable: !0,
+      advanceSearchEnabled: !0
+    }
+  }), []), E = d || c ? /* @__PURE__ */ h("div", { className: p(
+    "px-3 py-1.5 text-[10px] md:text-sm font-medium rounded-md whitespace-nowrap flex items-center gap-2",
+    d?.type === "conflict" ? "bg-feedback-warning-surface text-content" : d?.type === "reserved" ? "bg-feedback-error-surface text-destructive" : c ? "bg-feedback-info-surface text-brand animate-[pulse_1.5s_ease-in-out_infinite] motion-reduce:animate-none" : ""
+  ), children: [
+    d?.type === "conflict" ? /* @__PURE__ */ r(U, { className: "h-3.5 w-3.5 shrink-0" }) : d?.type === "reserved" ? /* @__PURE__ */ r(T, { className: "h-3.5 w-3.5 shrink-0" }) : c ? /* @__PURE__ */ r("span", { className: "shrink-0 text-base", children: "⌨️" }) : null,
+    /* @__PURE__ */ r("span", { children: d ? d.text : L })
+  ] }) : null;
+  return /* @__PURE__ */ h(V, { className: p("flex flex-col w-full h-full border-t-0", a), children: [
+    o ? o(E) : E,
+    /* @__PURE__ */ r(
+      J,
+      {
+        rowData: x,
+        columnDefs: _,
+        defaultColDef: K,
+        initialState: I,
+        rowHeight: 44,
+        animateRows: !1,
+        rowSelection: "single",
+        suppressCellFocus: !0,
+        getRowId: (n) => n.data.id,
+        suppressRowClickSelection: !0,
+        domLayout: "normal"
+      }
+    )
+  ] });
+}
+ae.displayName = "ShortcutSettings";
+export {
+  ae as ShortcutSettings
+};

package/dist/components/flows/command-palette/use-browser-shortcuts.js

@@ -0,0 +1,48 @@
+import * as u from "react";
+import { useCommandPalette as f } from "./use-command-palette.js";
+import { BROWSER_SHORTCUTS as d } from "./utils.js";
+function m(r) {
+  const s = r.split("+"), e = { key: "" };
+  for (const t of s)
+    t === "meta" ? e.meta = !0 : t === "ctrl" ? e.ctrl = !0 : t === "alt" ? e.alt = !0 : t === "shift" ? e.shift = !0 : e.key = t;
+  return e;
+}
+function b(r) {
+  const { registerCommand: s, unregisterCommand: e } = f(), t = r?.exclude;
+  u.useEffect(() => {
+    const c = [];
+    for (const o of d) {
+      if (t?.length) {
+        const a = `${o.label} ${o.category}`.toLowerCase();
+        if (t.some(
+          (l) => a.includes(l.toLowerCase())
+        )) continue;
+      }
+      const n = `browser.${o.shortcut.replace(/\+/g, "-")}`;
+      c.push(n);
+      const i = {
+        id: n,
+        label: o.label,
+        description: `Browser shortcut (${o.category})`,
+        category: o.category,
+        scope: "global",
+        defaultKeybinding: m(o.shortcut),
+        customisable: !1,
+        hidden: !1,
+        handler: () => {
+        },
+        // no-op — browser handles these
+        source: "browser",
+        passive: !0
+      };
+      s(i);
+    }
+    return () => {
+      for (const o of c)
+        e(o);
+    };
+  }, [s, e, JSON.stringify(t)]);
+}
+export {
+  b as useBrowserShortcuts
+};

package/dist/components/flows/command-palette/use-command-palette.d.ts

@@ -0,0 +1,2 @@
+import { CommandPaletteContextValue } from './command-palette-context.types';
+export declare function useCommandPalette(): CommandPaletteContextValue;

package/dist/components/flows/command-palette/use-command-palette.js

@@ -0,0 +1,13 @@
+import * as e from "react";
+import { CommandPaletteContext as o } from "./command-palette-react-context.js";
+function a() {
+  const t = e.useContext(o);
+  if (!t)
+    throw new Error(
+      "useCommandPalette must be used within a <CommandPaletteProvider>. Wrap your application root with <CommandPaletteProvider>."
+    );
+  return t;
+}
+export {
+  a as useCommandPalette
+};

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

@@ -0,0 +1,49 @@
+import * as e from "react";
+import { useCommandPalette as I } from "./use-command-palette.js";
+import { ShortcutInstanceContext as S } from "./shortcut-instance-context.js";
+function P(l) {
+  const { registerCommand: r, unregisterCommand: s } = I(), h = e.useContext(S), {
+    id: n,
+    label: c,
+    description: p,
+    icon: C,
+    category: x,
+    scope: o,
+    defaultKeybinding: R,
+    customisable: b = !0,
+    hidden: g = !1,
+    when: a,
+    handler: i,
+    source: w = "user",
+    enabled: u = !0,
+    passive: d = !1,
+    instance: v
+  } = l, m = v ?? h?.instance, f = e.useRef(i);
+  f.current = i;
+  const t = e.useRef(a);
+  t.current = a, e.useEffect(() => {
+    if (!u) return;
+    const y = {
+      id: n,
+      label: c,
+      description: p,
+      icon: C,
+      category: x,
+      scope: o,
+      defaultKeybinding: R,
+      customisable: b,
+      hidden: g,
+      when: t.current ? () => t.current() : void 0,
+      handler: () => f.current(),
+      source: w,
+      passive: d,
+      instance: m
+    };
+    return r(y), () => {
+      s(n);
+    };
+  }, [n, c, o, u, d, m, r, s]);
+}
+export {
+  P as useShortcut
+};

package/dist/components/flows/command-palette/utils.d.ts

@@ -0,0 +1,114 @@
+import { KeyBinding, getKeySymbol, hasUsableShortcutKey, isMac, keybindingToString, keybindingToSymbols } from '../../primitives/kbd/keybinding-display';
+export type { KeyBinding };
+export { getKeySymbol, hasUsableShortcutKey, isMac, keybindingToString, keybindingToSymbols, };
+export type ShortcutScope = 'global' | 'module' | 'page' | 'modal';
+export interface CommandDefinition {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    category?: string;
+    scope: ShortcutScope;
+    defaultKeybinding?: KeyBinding;
+    keybinding?: KeyBinding;
+    customisable: boolean;
+    hidden?: boolean;
+    when?: () => boolean;
+    handler: () => void;
+    source?: 'system' | 'user' | 'ag-grid' | 'browser';
+    /**
+     * When true, the shortcut is displayed in the palette/settings but the
+     * registry will NOT intercept the keyboard event. The owning component
+     * (e.g. data table) handles its own keyboard handling natively.
+     */
+    passive?: boolean;
+    /**
+     * Optional instance identifier. When multiple components of the same type
+     * exist on a page (e.g. two DataTables), each registers commands with a
+     * unique instance id. Only the *focused* instance's commands are dispatched.
+     */
+    instance?: string;
+}
+/**
+ * User-visible labels for `CommandDefinition.source`.
+ * Internal keys stay stable (`ag-grid`, etc.); only display text is generic.
+ */
+export declare const COMMAND_SOURCE_LABELS: Record<NonNullable<CommandDefinition['source']>, string>;
+/**
+ * Storage adapter for shortcut overrides and recent commands.
+ * Allows consumers to provide their own persistence implementation
+ * (e.g., IndexedDB, backend API) instead of hardcoded localStorage.
+ */
+export interface ShortcutStorageAdapter {
+    /** Load user-defined keybinding overrides */
+    getOverrides(): Map<string, KeyBinding> | null;
+    /** Save user-defined keybinding overrides */
+    saveOverrides(overrides: Map<string, KeyBinding>): void;
+    /** Load recent command IDs (most recent first) */
+    getRecentCommands(): string[] | null;
+    /** Save recent command IDs */
+    saveRecentCommands(ids: string[]): void;
+}
+/**
+ * Check if a keyboard event matches a KeyBinding definition.
+ */
+export declare function matchesKeybinding(event: KeyboardEvent, kb: KeyBinding): boolean;
+/**
+ * Parse a human-readable string like "Ctrl+Shift+P" or "⌘⇧P" into a KeyBinding.
+ * Accepts both Mac symbol and Windows-style notation.
+ */
+export declare function parseKeybinding(str: string): KeyBinding;
+export declare function keybindingsEqual(a: KeyBinding, b: KeyBinding): boolean;
+/**
+ * Capture the current keyboard state from an event as a KeyBinding.
+ * Useful for the "recording mode" in shortcut settings.
+ */
+export declare function keybindingFromEvent(event: KeyboardEvent): KeyBinding | null;
+/**
+ * Comprehensive list of Chrome browser shortcuts that web pages cannot
+ * reliably override. Sourced from:
+ * https://support.google.com/chrome/answer/157179
+ *
+ * Stored as normalised strings: modifiers in order meta/alt/shift + key.
+ * `meta` means ⌘ on Mac and Ctrl on Windows/Linux.
+ */
+export interface BrowserShortcutInfo {
+    /** Normalised shortcut string (used for matching) */
+    shortcut: string;
+    /** Human-readable description */
+    label: string;
+    /** Category grouping */
+    category: 'Tab & Window' | 'Chrome Features' | 'Address Bar' | 'Webpage' | 'System';
+}
+export declare const BROWSER_SHORTCUTS: BrowserShortcutInfo[];
+export declare function isReservedShortcut(kb: KeyBinding): boolean;
+/**
+ * Get browser shortcut info for a given keybinding (if it's reserved).
+ * Returns the label and category to show in the settings panel.
+ */
+export declare function getBrowserShortcutInfo(kb: KeyBinding): BrowserShortcutInfo | undefined;
+export interface FuzzyResult<T> {
+    item: T;
+    score: number;
+    matches: [number, number][];
+}
+/**
+ * Lightweight fuzzy search scorer.
+ * Scores based on: consecutive character matches, word-start bonus,
+ * exact prefix bonus, and case-sensitive bonus.
+ */
+export declare function fuzzyScore(query: string, text: string): {
+    score: number;
+    matches: [number, number][];
+} | null;
+/**
+ * Filter and rank an array of items by a fuzzy query.
+ */
+export declare function fuzzyFilter<T>(items: T[], query: string, getText: (item: T) => string): FuzzyResult<T>[];
+export declare function scopePriority(scope: ShortcutScope): number;
+export interface SerializedOverride {
+    commandId: string;
+    keybinding: KeyBinding;
+}
+export declare function serialiseOverrides(overrides: Map<string, KeyBinding>): string;
+export declare function deserialiseOverrides(json: string): Map<string, KeyBinding>;