@olddevs/ui 4.2.0 → 4.2.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @olddevs/ui
 
+## 4.2.1
+
+### Patch Changes
+
+- 581ac6f: The `MegaMenu` reference page tells the fuller story of the technique in "Where it comes from": the trap that menus used to close with a delay, how Ben Kamens worked out Amazon's triangle in 2013, the math behind `jQuery-menu-aim`, and how the idea spread.
+
 ## 4.2.0
 
 ### Minor Changes

package/docs/components/navigation/mega-menu.en.md

@@ -5,7 +5,7 @@ category: navigation
 status: stable
 source: src/components/navigation/MegaMenu.tsx
 story: src/components/navigation/MegaMenu.stories.tsx
-sourceHash: 8e166f4b1ab7
+sourceHash: 731dae1c43c3
 ---
 
 # MegaMenu
@@ -162,20 +162,38 @@ category column of a catalog gets scrolled through.
 ## Where it comes from
 
 The technique comes from Amazon. By 2013 the "Shop by Department" menu on amazon.com already worked like this: a
-column of departments on the left, a large panel on the right, and switching with no delay at all, while the pointer
-could cut diagonally toward the panel without knocking it away. Ben Kamens worked out how it does that.
-
-- **6 March 2013**: Ben Kamens, a developer at Khan Academy, publishes the analysis "Breaking down Amazon's mega
-  dropdown". He shows that Amazon does not slow the opening down with a delay, as most dropdown menus do, but
-  follows the direction of the pointer: while it stays inside the triangle between the pointer and the corners of the
-  panel, the submenu does not change. Khan Academy puts the technique into its new "Learn" menu.
-- **March 2013**: Kamens publishes the `jQuery-menu-aim` plugin on GitHub: the triangle, a tolerance near the corners
-  and a 300 ms delay for a pointer that has stopped.
-- **7 March 2013**: a retelling of the article appears on Habr, from which the technique spread across the Russian-speaking web.
-- **After that**: the technique moves into libraries: the "safe polygon" `safePolygon()` in Floating UI, the "grace
-  area" of submenus in Radix, the "safe triangle" `useSafelyMouseToSubmenu` in react-aria. Submenus shipped in
-  react-aria as an alpha on 13 February 2024 (v1.1.0) and became stable on 1 May 2024 (v1.2.0).
-- **2026**: `MegaMenu` in `@olddevs/ui`: the react-aria model and Kamens's pause.
+column of departments on the left, a large panel on the right, switching with no delay at all, and yet the pointer
+could cut diagonally toward the panel without knocking it away.
+
+**The trap that menus closed with a delay.** If a submenu switches at once, the pointer brushes a neighboring item on
+its way there, the submenu changes, and the link you were heading for is gone: a game you can't win. Bootstrap's
+dropdowns behaved like this, for example. The usual fix is a delay before switching items, known as menu hysteresis,
+as in Khan Academy's own earlier menu. It closes the trap but makes the menu sluggish: every move between items waits
+for a timer.
+
+**What Ben Kamens noticed.** The Khan Academy developer saw that Amazon's menu switches instantly and still doesn't
+lose the submenu, and worked out why. The menu watches direction, not time: at each pointer position it builds a
+triangle with corners at the pointer itself and at the top and bottom corners of the submenu. If the next position is
+inside the triangle, the user is heading for the submenu, and items brushed on the way don't take it over. Once the
+pointer leaves the triangle, the submenu switches immediately. Kamens published his analysis on 6 March 2013.
+
+**The plugin and the math.** Kamens turned the idea into a jQuery plugin, `jQuery-menu-aim`, and used it in Khan
+Academy's new "Learn" menu. Whether a point lies inside a triangle can be checked with cross products, and Sophie
+Alpert helped him with that bit of linear algebra, but in the plugin Kamens went with something simpler: comparing
+the slopes of lines. A pointer that entered the triangle and stopped still opens the item under it, after 300 ms.
+Kamens was happy to admit he had copied Amazon, and suspected the problem had been solved and forgotten many times
+before.
+
+**The response.** The next day, 7 March 2013, a retelling titled "The riddle of Amazon's dropdown" appeared on Habr,
+and the technique spread across the Russian-speaking web: as of October 2026 the article has more than 550 votes and
+two thousand bookmarks. The retelling also notes that the idea isn't new: it had been invented, forgotten and
+rediscovered before.
+
+**What came next.** The technique moved into libraries: the "safe polygon" `safePolygon()` in Floating UI, the "grace
+area" of submenus in Radix, the "safe triangle" `useSafelyMouseToSubmenu` in react-aria. Submenus shipped in
+react-aria as an alpha on 13 February 2024 (v1.1.0) and became stable on 1 May 2024 (v1.2.0). The kit's `MegaMenu`
+(2026) checks the wedge with cross products, following react-aria's model, and takes its pause from Kamens: the same
+300 ms.
 
 Primary sources:
 [Ben Kamens's article](https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown),

package/docs/components/navigation/mega-menu.md

@@ -151,20 +151,35 @@ import { MegaMenu, MegaMenuCategory, MegaMenuGroup, MegaMenuLink } from "@olddev
 ## Откуда это
 
 Приём пришёл из Amazon. К 2013 году меню «Shop by Department» на amazon.com уже работало так: столбец отделов
-слева, большая панель справа, и переключение без всякой задержки — при этом наискосок к панели курсор проходил,
-не сбивая её. Как это устроено, разобрал Бен Каменс.
-
-- **6 марта 2013** — Бен Каменс, разработчик Khan Academy, публикует разбор «Breaking down Amazon's mega
-  dropdown». Он показывает, что Amazon не тормозит открытие задержкой, как большинство выпадающих меню, а следит
-  за направлением курсора: пока тот внутри треугольника между курсором и углами панели, подменю не меняется.
-  Khan Academy ставит приём в своё новое меню «Learn».
-- **Март 2013** — Каменс выкладывает плагин `jQuery-menu-aim` на GitHub: треугольник, допуск у углов и
-  задержка 300 мс для курсора, который остановился.
-- **7 марта 2013** — пересказ статьи на Хабре, с которого приём разошёлся по рунету.
-- **Дальше** — приём уходит в библиотеки: «безопасный многоугольник» `safePolygon()` в Floating UI, «grace
-  area» подменю в Radix, «безопасный треугольник» `useSafelyMouseToSubmenu` в react-aria. В react-aria подменю
-  вышли альфой 13 февраля 2024 года (v1.1.0) и стали стабильными 1 мая 2024 года (v1.2.0).
-- **2026** — `MegaMenu` в `@olddevs/ui`: модель react-aria и пауза Каменса.
+слева, большая панель справа, переключение без всякой задержки — и при этом курсор проходил к панели наискосок, не
+сбивая её.
+
+**Ловушка, которую закрывали задержкой.** Если подменю переключается сразу, курсор по пути к нему задевает соседний
+пункт, подменю сменяется, и до нужной ссылки не дотянуться: как в игре, которую нельзя выиграть. Так вели себя,
+например, выпадающие меню Bootstrap. Обычный ответ — задержка перед сменой пункта, гистерезис меню, как в прежнем
+меню самой Khan Academy. Ловушку она закрывает, но меню становится вязким: каждый переход между пунктами ждёт
+таймера.
+
+**Что заметил Бен Каменс.** Разработчик Khan Academy обратил внимание, что меню Amazon переключается мгновенно и
+всё же не теряет подменю, и разобрался почему. Меню следит не за временем, а за направлением: для каждой точки
+курсора строится треугольник с вершинами в самом курсоре и в верхнем и нижнем углах подменю. Следующая точка
+внутри треугольника значит, что человек ведёт курсор к подменю, и пункты, задетые по пути, его не перехватывают.
+Курсор вышел из треугольника — подменю меняется сразу. Свой разбор Каменс опубликовал 6 марта 2013 года.
+
+**Плагин и математика.** По этому принципу Каменс написал jQuery-плагин `jQuery-menu-aim` и поставил его в
+новое меню «Learn» на Khan Academy. Попадание точки в треугольник проверяется векторным произведением — с этой
+линейной алгеброй ему помогла Софи Алперт, — но в плагине Каменс выбрал способ попроще: сравнение наклонов прямых.
+Курсор, который вошёл в треугольник и остановился, всё же открывает пункт под собой: через 300 мс. Сам Каменс не
+стеснялся того, что скопировал Amazon, и подозревал, что задачу до них не раз решали и забывали.
+
+**Отклик.** На следующий день, 7 марта 2013 года, на Хабре вышел пересказ «Загадка выпадающего списка «Амазона»», и
+приём разошёлся по рунету: на октябрь 2026 года у статьи больше 550 голосов и двух тысяч закладок. Пересказ тоже
+отмечает, что идея не новая — её придумывали, забывали и открывали заново.
+
+**Дальше.** Приём ушёл в библиотеки: «безопасный многоугольник» `safePolygon()` в Floating UI, «grace area»
+подменю в Radix, «безопасный треугольник» `useSafelyMouseToSubmenu` в react-aria. В react-aria подменю вышли
+альфой 13 февраля 2024 года (v1.1.0) и стали стабильными 1 мая 2024 года (v1.2.0). `MegaMenu` кита (2026)
+проверяет сектор векторным произведением, по модели react-aria, а паузу берёт у Каменса — те же 300 мс.
 
 Первоисточники:
 [статья Бена Каменса](https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olddevs/ui",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "Olddevs UI — design system: tokens, themes and accessible UI primitives",
   "license": "MIT",
   "private": false,