enigma-cli 1.42.1 → 1.44.0

package/dist/guardrails.js

@@ -1063,6 +1063,168 @@ var BUILTIN_RULES = [
     severity: "block",
     skill: "frontend-policy"
   },
+  {
+    id: "fe-lightbox-hand-rolled",
+    label: "Image viewers come from the primitive",
+    files: ["*.tsx", "*.jsx", "*.vue", "*.svelte", "*.astro", "*.ts", "*.js"],
+    excludeFiles: [
+      "*.test.*",
+      "*.spec.*",
+      "**/tests/**",
+      "**/__tests__/**",
+      "**/fixtures/**",
+      "*.min.js",
+      "**/dist/**",
+      "**/build/**",
+      "**/node_modules/**",
+      "**/vendor/**",
+      "dist/**",
+      "build/**",
+      "node_modules/**",
+      "vendor/**"
+    ],
+    scope: "file",
+    stage: "diff",
+    fileCheck: "fe-lightbox-hand-rolled",
+    message: "A lightbox written by hand: a picture in a dialog, a wheel that scales it, and a zoom kept as state. The tail is long and always the same. A wheel listener is PASSIVE by default, so every notch zooms the image and scrolls the article behind the backdrop with it. Scaling around the frame's centre slides whatever was under the pointer away from it, so zooming into a face means hunting for it again. Nothing bounds the pan, so a drag strands the picture off screen with no way back but closing. The dialog is left in the page rather than portalled, and the first ancestor with `overflow: hidden` clips it. Escape does not close it, the body still scrolls under it, and focus never returns to the image it was opened from. `enigma add image` (@enigmax/primitives) is `<Image>`: a press enlarges it and the wheel zooms around the cursor by default, with a drag to pan, a pinch on touch and the keyboard driving both - and the arrows, the strip of previews, a download menu and a discard action off until asked for. The viewer is its own chunk, fetched on intent, so a page of images nobody enlarges downloads none of it. Mark the line `enigma:allow-hand-rolled-lightbox` when the viewer genuinely has to be your own (frontend-policy).",
+    severity: "block",
+    skill: "frontend-policy"
+  },
+  {
+    id: "fe-video-player-hand-rolled",
+    label: "Video controls come from the primitive",
+    files: ["*.tsx", "*.jsx", "*.vue", "*.svelte", "*.astro", "*.ts", "*.js"],
+    excludeFiles: [
+      "*.test.*",
+      "*.spec.*",
+      "**/tests/**",
+      "**/__tests__/**",
+      "**/fixtures/**",
+      "*.min.js",
+      "**/dist/**",
+      "**/build/**",
+      "**/node_modules/**",
+      "**/vendor/**",
+      "dist/**",
+      "build/**",
+      "node_modules/**",
+      "vendor/**"
+    ],
+    scope: "file",
+    stage: "diff",
+    fileCheck: "fe-video-player-hand-rolled",
+    message: "Controls written by hand over a `<video>`. What follows is the same every time: `play()` returns a promise that REJECTS - no gesture yet, an autoplay policy, no source - and the unhandled rejection leaves the button saying pause over a video that never started; the state is kept in the component instead of read back from the element's own events, so anything else that plays or pauses it (the media keys, picture in picture, the operating system) desynchronises the bar; the scrubber is a div with a click handler rather than a slider a keyboard can drive or a screen reader can read; the buffered ranges are ignored, or read as `buffered.end(0)`, which reports a range nobody is watching; the clock changes width as it passes ten minutes and shoves every control along with it; the shortcuts fire while somebody is typing in a comment box; and fullscreen calls `requestFullscreen` on a container, which iOS Safari does not have at all. `enigma add video` (@enigmax/primitives) is `<Video>`, shaped after Plyr: the same control set and the same shortcuts, the element as the source of truth, and a theme restyled through `data-*` attributes. Mark the line `enigma:allow-hand-rolled-video-player` when the player genuinely has to be your own (frontend-policy).",
+    severity: "block",
+    skill: "frontend-policy"
+  },
+  {
+    id: "sec-2fa-reauth-prompt",
+    label: "A credential just proven is not asked for again",
+    files: ["*.tsx", "*.jsx", "*.vue", "*.svelte", "*.astro", "*.ts", "*.js", "*.py", "*.rb", "*.php"],
+    excludeFiles: [
+      "*.test.*",
+      "*.spec.*",
+      "**/tests/**",
+      "**/__tests__/**",
+      "**/fixtures/**",
+      "*.min.js",
+      "**/dist/**",
+      "**/build/**",
+      "**/node_modules/**",
+      "**/vendor/**",
+      "dist/**",
+      "build/**",
+      "node_modules/**",
+      "vendor/**"
+    ],
+    scope: "file",
+    stage: "diff",
+    fileCheck: "sec-2fa-reauth-prompt",
+    message: "Turning 2FA on asks for the password the visitor typed a moment ago. Nothing is verified by asking: the session was established by that exact credential during sign-up or sign-in, so the answer is already known - and what the prompt teaches is that a password box can appear at any moment for no stated reason, which is the habit every phishing page relies on. The step that proves the factor works is the CODE from the authenticator, not the password. Re-authentication is a real control and this is not it: it belongs to a sensitive change on a session that is no longer FRESH, so record `authenticatedAt` when the session is created and treat it as fresh for 5-15 minutes; ask again only past that window, and prefer the second factor or a passkey over the password when you do. The actions worth guarding that way are changing the password or the email, disabling 2FA or removing a factor, regenerating recovery codes, issuing an API token, changing payout details and deleting the account. Mark the line `enigma:allow-2fa-password-prompt` where a policy genuinely requires the prompt (security-policy).",
+    severity: "block",
+    skill: "security-policy"
+  },
+  {
+    id: "fe-select-hand-rolled",
+    label: "Custom selects come from the primitive",
+    files: ["*.tsx", "*.jsx", "*.vue", "*.svelte", "*.astro", "*.ts", "*.js"],
+    excludeFiles: [
+      "*.test.*",
+      "*.spec.*",
+      "**/tests/**",
+      "**/__tests__/**",
+      "**/fixtures/**",
+      "*.min.js",
+      "**/dist/**",
+      "**/build/**",
+      "**/node_modules/**",
+      "**/vendor/**",
+      "dist/**",
+      "build/**",
+      "node_modules/**",
+      "vendor/**"
+    ],
+    scope: "file",
+    stage: "diff",
+    fileCheck: "fe-select-hand-rolled",
+    message: "A select written by hand. Replacing the native one is often right - it cannot hold an icon, a second line or a tag, and its popup is drawn by the OS - but what replaces it has to do everything the platform was doing for free, and the panel is the part that gets written. Missing every time: a typeahead (one letter walks the rows that start with it, a longer buffer refines), a disabled row that is listed and announced but that the arrow keys walk PAST rather than onto, a highlight that the pointer and the keyboard share (two highlights on screen is what makes Enter open the row the mouse is not on), a panel that measures before it opens instead of hanging off the bottom of the window, a hidden input so the form it sits in can actually submit the value, and a long list rendered a window at a time instead of 250 rows for the seven anybody sees. `enigma add select` (@enigmax/primitives) is all of it with a test each, plus a filter that turns itself on from the option count, multi-select with tags, and a baseline theme because an unstyled popup is transparent text lying on the page. Mark the line `enigma:allow-hand-rolled-select` when the listbox genuinely has to be your own (frontend-policy).",
+    severity: "block",
+    skill: "frontend-policy"
+  },
+  {
+    id: "fe-toast-hand-rolled",
+    label: "Toasts come from the primitive",
+    files: ["*.tsx", "*.jsx", "*.vue", "*.svelte", "*.astro", "*.ts", "*.js"],
+    excludeFiles: [
+      "*.test.*",
+      "*.spec.*",
+      "**/tests/**",
+      "**/__tests__/**",
+      "**/fixtures/**",
+      "*.min.js",
+      "**/dist/**",
+      "**/build/**",
+      "**/node_modules/**",
+      "**/vendor/**",
+      "dist/**",
+      "build/**",
+      "node_modules/**",
+      "vendor/**"
+    ],
+    scope: "file",
+    stage: "diff",
+    fileCheck: "fe-toast-hand-rolled",
+    message: "A toast stack written by hand: an array of messages and a `setTimeout` that removes them. The queue is the easy half; what is missing is the timing. A timer that does not PAUSE while the pointer is over the toast dismisses the one thing somebody stopped to read, and one that does not pause on a hidden tab expires every toast the moment the tab is left. A timer restarted by a re-render never fires at all, and one keyed on the array index dismisses the wrong toast as soon as two overlap. Then the stack pushes the page around as it grows, and none of it is announced, because a toast needs a live region rather than a div that appeared. `enigma add toast` (@enigmax/primitives) is the real thing - hover and focus pause it, the tab pauses it, promise toasts, actions, and one styled surface you can restyle. Mark the line `enigma:allow-hand-rolled-toast` when the stack genuinely has to be your own (frontend-policy).",
+    severity: "block",
+    skill: "frontend-policy"
+  },
+  {
+    id: "fe-palette-hand-rolled",
+    label: "The Ctrl+K palette comes from the primitive",
+    files: ["*.tsx", "*.jsx", "*.vue", "*.svelte", "*.astro", "*.ts", "*.js"],
+    excludeFiles: [
+      "*.test.*",
+      "*.spec.*",
+      "**/tests/**",
+      "**/__tests__/**",
+      "**/fixtures/**",
+      "*.min.js",
+      "**/dist/**",
+      "**/build/**",
+      "**/node_modules/**",
+      "**/vendor/**",
+      "dist/**",
+      "build/**",
+      "node_modules/**",
+      "vendor/**"
+    ],
+    scope: "file",
+    stage: "diff",
+    fileCheck: "fe-palette-hand-rolled",
+    message: "A command palette written by hand. The shortcut and the panel are an afternoon; the list underneath is where every palette breaks. A shorter result list leaves the highlight past the end, so Enter opens nothing - the single most common palette bug. The arrows stop at the last row instead of wrapping, which reads as a frozen panel. Focus moves to the row, so the caret leaves the field and a screen reader hears nothing (a row is announced through `aria-activedescendant`, with focus never leaving the input). The pointer gets its own highlight beside the keyboard's, so Enter opens the row the mouse is not on. It reopens holding the last query, which hides what an empty query is for - the recents. And dismissing hands focus to the top of the document instead of back to the trigger. `enigma add palette` (@enigmax/primitives) has each of those with a test, plus grouping whose keyboard sequence stays flat across groups, recents guarded against a storage that throws in a private window, and a scroll lock that compensates for the scrollbar. Mark the line `enigma:allow-hand-rolled-palette` when the palette genuinely has to be your own (frontend-policy).",
+    severity: "block",
+    skill: "frontend-policy"
+  },
   {
     id: "fe-icon-action-button",
     label: "Repeated actions are icon buttons, not text labels",
@@ -1862,7 +2024,13 @@ var FILE_CHECKS = {
   "fe-new-password-affordance-on-signin": (content) => newPasswordAffordanceOnSignIn(content),
   "fe-context-menu-hand-rolled": (content) => handRolledContextMenu(content),
   "fe-selection-hand-rolled": (content) => handRolledSelection(content),
-  "fe-color-picker-hand-rolled": (content) => handRolledColorPicker(content)
+  "fe-color-picker-hand-rolled": (content) => handRolledColorPicker(content),
+  "fe-lightbox-hand-rolled": (content) => handRolledLightbox(content),
+  "fe-video-player-hand-rolled": (content) => handRolledVideoPlayer(content),
+  "sec-2fa-reauth-prompt": (content) => twoFactorPasswordPrompt(content),
+  "fe-select-hand-rolled": (content) => handRolledSelect(content),
+  "fe-toast-hand-rolled": (content) => handRolledToast(content),
+  "fe-palette-hand-rolled": (content) => handRolledPalette(content)
 };
 var FIXERS = {
   "fe-name-input-capitalize": (line, file) => {
@@ -2168,6 +2336,113 @@ function handRolledColorPicker(content) {
   }
   return [];
 }
+var LIGHTBOX_IMAGE = /<img\b|<Image\b|createElement\(\s*["'`]img["'`]/;
+var LIGHTBOX_WHEEL = /onWheel|@wheel|on:wheel|addEventListener\(\s*["'`]wheel["'`]/;
+var LIGHTBOX_ZOOM = /\bset(?:Scale|Zoom)\b|\b(?:scale|zoom)\s*[:=]\s*[0-9(]|scale\(/;
+var LIGHTBOX_DIALOG = /role=["']dialog["']|aria-modal|lightbox|createPortal|["']Escape["']|backdrop/i;
+var LIGHTBOX_MITIGATED = /@enigmax\/primitives|data-enigma-image|ImageViewer\b|yet-another-react-lightbox|react-image-lightbox|photoswipe|medium-zoom|viewerjs|fancybox|lightgallery|react-medium-image-zoom|enigma:allow-hand-rolled-lightbox/i;
+function handRolledLightbox(content) {
+  if (LIGHTBOX_MITIGATED.test(content)) return [];
+  if (!LIGHTBOX_IMAGE.test(content) || !LIGHTBOX_WHEEL.test(content)) return [];
+  if (!LIGHTBOX_ZOOM.test(content) || !LIGHTBOX_DIALOG.test(content)) return [];
+  const lines = content.split("\n");
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (COMMENT_LINE.test(line) || /enigma:/.test(line)) continue;
+    if (!LIGHTBOX_WHEEL.test(line)) continue;
+    return [{ line: i + 1, detail: "a picture in a dialog, a wheel that scales it, and the zoom it keeps" }];
+  }
+  return [];
+}
+var VIDEO_ELEMENT = /<video\b|createElement\(\s*["'`]video["'`]|HTMLVideoElement/;
+var VIDEO_DRIVEN = /\.play\(\)|\.pause\(\)|\bplaybackRate\b|requestPictureInPicture/;
+var VIDEO_TIMELINE = /\bcurrentTime\b|timeupdate|\.buffered\b/i;
+var VIDEO_CONTROLS = /aria-label=["'](?:Play|Pause|Mute|Seek|Fullscreen)|onClick=\{[^}]*(?:play|pause)|requestFullscreen|toggleFullscreen|isPlaying|setPlaying/i;
+var VIDEO_MITIGATED = /@enigmax\/primitives|data-enigma-video|["'`]plyr|from\s+["'`]plyr|video\.js|videojs|react-player|vidstack|media-chrome|@vime|shaka-player|enigma:allow-hand-rolled-video-player/i;
+function handRolledVideoPlayer(content) {
+  if (VIDEO_MITIGATED.test(content)) return [];
+  if (!VIDEO_ELEMENT.test(content) || !VIDEO_DRIVEN.test(content)) return [];
+  if (!VIDEO_TIMELINE.test(content) || !VIDEO_CONTROLS.test(content)) return [];
+  const lines = content.split("\n");
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (COMMENT_LINE.test(line) || /enigma:/.test(line)) continue;
+    if (!VIDEO_DRIVEN.test(line)) continue;
+    return [{ line: i + 1, detail: "a video element, its playback driven by code, and a bar of controls over it" }];
+  }
+  return [];
+}
+var TWOFA_SUBJECT = /2fa|two[-_ ]?factor|totp|mfa|authenticator|otpauth/i;
+var TWOFA_ENROLL = /enroll?(?!ed)|set[-_ ]?up|activate(?!d)|enable(?!d)|provision(?!ed)/i;
+var TWOFA_PASSWORD = /type=["']password["']|\bpassword\s*[:=]|\bpassword\b\s*[,)]|currentPassword|current_password/i;
+var TWOFA_MITIGATED = /authenticatedAt|authenticated_at|reauthenticat|sudo[-_ ]?mode|sudoMode|freshSession|fresh_session|requireFresh|lastAuthAt|last_auth_at|recentlyAuthenticated|stepUp|step_up|enigma:allow-2fa-password-prompt/i;
+var TWOFA_WINDOW = 25;
+function twoFactorPasswordPrompt(content) {
+  if (TWOFA_MITIGATED.test(content)) return [];
+  if (!TWOFA_SUBJECT.test(content) || !TWOFA_ENROLL.test(content)) return [];
+  const lines = content.split("\n");
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (COMMENT_LINE.test(line) || /enigma:/.test(line)) continue;
+    if (!TWOFA_SUBJECT.test(line) || !TWOFA_ENROLL.test(line)) continue;
+    for (let j = Math.max(0, i - TWOFA_WINDOW); j < Math.min(lines.length, i + TWOFA_WINDOW); j++) {
+      const near = lines[j];
+      if (COMMENT_LINE.test(near) || /enigma:/.test(near)) continue;
+      if (!TWOFA_PASSWORD.test(near)) continue;
+      return [{ line: j + 1, detail: "a password field inside a first-time 2FA enrollment" }];
+    }
+  }
+  return [];
+}
+var LISTBOX_ROLE = /role=["'{\s]*["']?(?:listbox|option)\b|aria-activedescendant/;
+var LISTBOX_OPEN = /\bset(?:Open|IsOpen|DropdownOpen|MenuOpen|Expanded)\b|\bisOpen\b|\baria-expanded\b/;
+var LISTBOX_OPTIONS = /\b(?:options|choices)\b/;
+var LISTBOX_MITIGATED = /@enigmax\/primitives|createSelect|useSelectContext|<Select|SelectRoot|radix-ui|@headlessui|downshift|react-select|@mui\/material|antd|@mantine|@chakra-ui|primereact|enigma:allow-hand-rolled-select/;
+function handRolledSelect(content) {
+  if (LISTBOX_MITIGATED.test(content)) return [];
+  if (!LISTBOX_ROLE.test(content) || !LISTBOX_OPEN.test(content) || !LISTBOX_OPTIONS.test(content)) return [];
+  const lines = content.split("\n");
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (COMMENT_LINE.test(line) || /enigma:/.test(line)) continue;
+    if (!LISTBOX_ROLE.test(line)) continue;
+    return [{ line: i + 1, detail: "a listbox role over an options list with its own open state" }];
+  }
+  return [];
+}
+var TOAST_QUEUE = /\bset(?:Toasts?|Snackbars?)\b|\btoasts\.(?:map|filter|slice)\b|\btoastQueue\b/;
+var TOAST_TIMER = /setTimeout\(/;
+var TOAST_MITIGATED = /@enigmax\/primitives|createNotifications|useNotifications|<Toaster|ToastT\b|ToasterProps\b|["']sonner["']|react-hot-toast|react-toastify|notistack|@radix-ui|@mui\/material|@chakra-ui|@mantine|antd|enigma:allow-hand-rolled-toast/;
+function handRolledToast(content) {
+  if (TOAST_MITIGATED.test(content)) return [];
+  if (!TOAST_QUEUE.test(content) || !TOAST_TIMER.test(content)) return [];
+  const lines = content.split("\n");
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (COMMENT_LINE.test(line) || /enigma:/.test(line)) continue;
+    if (!TOAST_QUEUE.test(line)) continue;
+    return [{ line: i + 1, detail: "a queue of toasts dismissed by a timer" }];
+  }
+  return [];
+}
+var PALETTE_SHORTCUT = /key\s*===?\s*["'`][kK]["'`]/;
+var PALETTE_MODIFIER = /metaKey|ctrlKey/;
+var PALETTE_OPEN = /\bset(?:Open|IsOpen|PaletteOpen|CommandOpen|Palette)\b/;
+var PALETTE_FILTER = /\bquery\b|\bfilter\(|\bsearch\b/i;
+var PALETTE_MITIGATED = /@enigmax\/primitives|isPaletteShortcut|usePaletteContext|<SearchPalette|PaletteRoot|["']cmdk["']|\bkbar\b|enigma:allow-hand-rolled-palette/;
+function handRolledPalette(content) {
+  if (PALETTE_MITIGATED.test(content)) return [];
+  if (!PALETTE_SHORTCUT.test(content) || !PALETTE_MODIFIER.test(content)) return [];
+  if (!PALETTE_OPEN.test(content) || !PALETTE_FILTER.test(content)) return [];
+  const lines = content.split("\n");
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (COMMENT_LINE.test(line) || /enigma:/.test(line)) continue;
+    if (!PALETTE_SHORTCUT.test(line)) continue;
+    return [{ line: i + 1, detail: "Ctrl/Cmd+K opening a filtered panel" }];
+  }
+  return [];
+}
 var CLIP_ONE_LINE = /\btruncate\b|\btext-ellipsis\b|text-overflow\s*:\s*ellipsis/;
 var DYNAMIC_CHILD = /(?<![=!<>-])>\s*\{(?![#/:@])/;
 var VALUE_REACHABLE = /\btitle\s*=|aria-label\s*=|<\s*Tooltip|TooltipTrigger|data-tooltip|hoverCard|HoverCard/i;
@@ -2747,7 +3022,12 @@ export {
   formatFindings,
   handRolledColorPicker,
   handRolledContextMenu,
+  handRolledLightbox,
+  handRolledPalette,
+  handRolledSelect,
   handRolledSelection,
+  handRolledToast,
+  handRolledVideoPlayer,
   loadRules,
   missingPathAlias,
   missingWindowsHide,
@@ -2765,6 +3045,7 @@ export {
   summarizeLedger,
   textareaSizeBounds,
   truncatedValueUnreachable,
+  twoFactorPasswordPrompt,
   unboundedRemoteList,
   viewBlankedWhileLoading,
   wideNamedImports