@enigmax/primitives 0.25.0 → 0.27.0

package/registry.json

@@ -86,6 +86,7 @@
         "[data-enigma-marquee-copy]"
       ],
       "docs": "docs/notes/primitives.md#marquee",
+      "source": "src/core/marquee.ts",
       "recipes": [
         "tailwind",
         "css"
@@ -151,7 +152,8 @@
         ".logo-marquee[data-grabbing]",
         ".logo-marquee__item"
       ],
-      "docs": "docs/notes/primitives.md#logo-marquee"
+      "docs": "docs/notes/primitives.md#logo-marquee",
+      "source": "recipes/logo-marquee/index.tsx"
     },
     {
       "name": "input",
@@ -392,6 +394,7 @@
         "[data-enigma-color-preset]"
       ],
       "docs": "docs/notes/primitives.md#input",
+      "source": "src/core/input.ts",
       "recipes": [
         "tailwind",
         "css"
@@ -460,6 +463,7 @@
         "fuse.js": "Fuzzy matching. Omit it and a built-in substring matcher is used."
       },
       "docs": "docs/notes/primitives.md#search",
+      "source": "src/core/search.ts",
       "recipes": [
         "tailwind"
       ],
@@ -551,7 +555,8 @@
         "[aria-busy=true]",
         "[data-enigma-button-key]"
       ],
-      "docs": "docs/notes/primitives.md#button"
+      "docs": "docs/notes/primitives.md#button",
+      "source": "src/core/button.ts"
     },
     {
       "name": "palette",
@@ -656,6 +661,7 @@
         "[data-enigma-palette-hint]"
       ],
       "docs": "docs/notes/primitives.md#palette",
+      "source": "src/core/palette.ts",
       "recipes": [
         "css"
       ]
@@ -799,6 +805,7 @@
         "[data-enigma-select-empty]"
       ],
       "docs": "docs/notes/primitives.md#select",
+      "source": "src/core/select.ts",
       "recipes": [
         "css"
       ]
@@ -946,6 +953,7 @@
         "[data-enigma-menu-status][data-error]"
       ],
       "docs": "docs/notes/primitives.md#context-menu",
+      "source": "src/core/context-menu.ts",
       "recipes": [
         "css"
       ]
@@ -1019,7 +1027,8 @@
         "[data-enigma-selection-marquee]",
         "[data-enigma-selection-empty]"
       ],
-      "docs": "docs/notes/primitives.md#selection"
+      "docs": "docs/notes/primitives.md#selection",
+      "source": "src/core/selection.ts"
     },
     {
       "name": "flags",
@@ -1081,7 +1090,8 @@
         "[data-enigma-flag][data-flag-shape=circle]"
       ],
       "assets": "flags",
-      "docs": "docs/notes/primitives.md#flags"
+      "docs": "docs/notes/primitives.md#flags",
+      "source": "src/core/flags.ts"
     },
     {
       "name": "notifications",
@@ -1140,6 +1150,7 @@
       ],
       "styles": false,
       "docs": "docs/notes/primitives.md#notifications",
+      "source": "src/core/notifications.ts",
       "recipes": [
         "tailwind"
       ]
@@ -1278,6 +1289,7 @@
         "[data-icon]"
       ],
       "docs": "docs/notes/primitives.md#toast",
+      "source": "src/react/toaster.tsx",
       "recipes": [
         "tailwind",
         "css"
@@ -1331,7 +1343,8 @@
         }
       ],
       "styles": false,
-      "docs": "docs/notes/primitives.md#network"
+      "docs": "docs/notes/primitives.md#network",
+      "source": "src/core/network.ts"
     },
     {
       "name": "relative-time",
@@ -1399,9 +1412,477 @@
         "[data-relative-time-capitalize-first-letter=true]"
       ],
       "docs": "docs/notes/primitives.md#relative-time",
+      "source": "src/core/relative-time.ts",
       "dependencies": {
         "@github/relative-time-element": "^4.4.0"
       }
+    },
+    {
+      "name": "image",
+      "title": "Image, with the viewer a press on it opens",
+      "description": "An image that opens into a lightbox: a press enlarges it and the picture flies out of the page into the viewer, the wheel zooms around the cursor, with a drag to pan, a pinch on touch, and the keyboard driving all of it. Everything else is a decision about the page it sits in, so it is off until asked for - the arrows and counter of a set, the strip of previews along the bottom, a three-dot menu that downloads the file, and a discard action that drops an image and moves to the next. The viewer is its own chunk, fetched on intent, and the menu another under that, so a page of images nobody enlarges downloads neither. It brings a theme: there is no useful unstyled lightbox.",
+      "targets": [
+        "react"
+      ],
+      "entry": {
+        "react": "@enigmax/primitives/react/image"
+      },
+      "exports": {
+        "react": [
+          "Image"
+        ]
+      },
+      "files": [
+        {
+          "path": "src/core/image-viewer.ts",
+          "dest": "image/image-viewer.ts",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/core/context-menu.ts",
+          "dest": "image/context-menu.ts",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/core/search": "./search-core",
+            "@/core/keys": "./keys"
+          }
+        },
+        {
+          "path": "src/core/search.ts",
+          "dest": "image/search-core.ts",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/core/keys.ts",
+          "dest": "image/keys.ts",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/react/image/types.ts",
+          "dest": "image/types.ts",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/react/context-menu/context": "./context"
+          }
+        },
+        {
+          "path": "src/react/image/icons.tsx",
+          "dest": "image/icons.tsx",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/react/image/styles.ts",
+          "dest": "image/styles.ts",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/core/clipboard-menu.ts",
+          "dest": "image/clipboard-menu.ts",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/core/context-menu": "./context-menu",
+            "@/react/context-menu/styles": "./context-menu-styles"
+          }
+        },
+        {
+          "path": "src/react/slot.tsx",
+          "dest": "image/slot.tsx",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/react/context-menu/styles": "./context-menu-styles"
+          }
+        },
+        {
+          "path": "src/react/context-menu/styles.ts",
+          "dest": "image/context-menu-styles.ts",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/react/context-menu/styles": "./context-menu-styles"
+          }
+        },
+        {
+          "path": "recipes/context-menu/styles.css",
+          "dest": "image/context-menu-styles.css",
+          "targets": [
+            "react"
+          ],
+          "style": "css",
+          "rewrite": {
+            "@/react/context-menu/styles": "./context-menu-styles"
+          }
+        },
+        {
+          "path": "src/react/context-menu/context.ts",
+          "dest": "image/context.ts",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/core/context-menu": "./context-menu",
+            "@/react/context-menu/styles": "./context-menu-styles"
+          }
+        },
+        {
+          "path": "src/react/context-menu/root.tsx",
+          "dest": "image/root.tsx",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/core/context-menu": "./context-menu",
+            "@/core/search": "./search-core",
+            "@/core/keys": "./keys",
+            "@/react/slot": "./slot",
+            "@/react/context-menu/styles": "./context-menu-styles",
+            "@/react/context-menu/context": "./context",
+            "@/core/clipboard-menu": "./clipboard-menu"
+          }
+        },
+        {
+          "path": "src/react/context-menu/index.tsx",
+          "dest": "image/context-menu-ui.tsx",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/react/context-menu/root": "./root",
+            "@/react/context-menu/context": "./context",
+            "@/react/context-menu/styles": "./context-menu-styles",
+            "@/core/context-menu": "./context-menu",
+            "@/core/keys": "./keys",
+            "@/core/clipboard-menu": "./clipboard-menu"
+          }
+        },
+        {
+          "path": "src/react/image/menu.tsx",
+          "dest": "image/menu.tsx",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/react/image/icons": "./icons",
+            "@/react/image/types": "./types",
+            "@/react/image/viewer": "./viewer",
+            "@/core/image-viewer": "./image-viewer",
+            "@/react/context-menu": "./context-menu-ui"
+          }
+        },
+        {
+          "path": "src/react/image/viewer.tsx",
+          "dest": "image/viewer.tsx",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/react/image/icons": "./icons",
+            "@/react/image/types": "./types",
+            "@/react/image/styles": "./styles",
+            "@/react/image/menu": "./menu",
+            "@/core/image-viewer": "./image-viewer"
+          }
+        },
+        {
+          "path": "src/react/image/index.tsx",
+          "dest": "image/index.tsx",
+          "main": true,
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/react/image/types": "./types",
+            "@/react/image/viewer": "./viewer",
+            "@/react/image/styles": "./styles"
+          }
+        },
+        {
+          "path": "recipes/image/styles.css",
+          "dest": "image/styles.css",
+          "targets": [
+            "react"
+          ],
+          "style": "css"
+        }
+      ],
+      "styles": true,
+      "themeHooks": [
+        "[data-enigma-image]",
+        "[data-enigma-image][data-clickable]",
+        "[data-enigma-image-trigger]",
+        "[data-enigma-image-viewer]",
+        "[data-enigma-image-bar]",
+        "[data-enigma-image-counter]",
+        "[data-enigma-image-button]",
+        "[data-enigma-image-frame]",
+        "[data-enigma-image-frame][data-zoomed]",
+        "[data-enigma-image-frame][data-panning]",
+        "[data-enigma-image-frame][data-loading]",
+        "[data-enigma-image-nav]",
+        "[data-enigma-image-spinner]",
+        "[data-enigma-image-foot]",
+        "[data-enigma-image-caption]",
+        "[data-enigma-image-strip]",
+        "[data-enigma-image-thumb]",
+        "[data-enigma-image-viewer][data-state]",
+        "[data-enigma-image-frame][data-flying]"
+      ],
+      "docs": "docs/notes/primitives.md#image",
+      "source": "src/core/image-viewer.ts",
+      "recipes": [
+        "css"
+      ]
+    },
+    {
+      "name": "video",
+      "title": "Video player",
+      "description": "A video with the controls a video is expected to have, shaped after Plyr: a big play button over the poster, a scrubber showing what is buffered, current time and duration, volume that folds away until reached, subtitles with a language picker, a speed menu, picture in picture, casting to a TV and fullscreen. A right-click opens a menu the way YouTube's does - play, loop, speed, subtitles, copy the link or the link at this second - built from the context-menu primitive rather than hand-rolled. The keyboard is the platform's - space and K play, J and L jump ten seconds, the arrows nudge and set the volume, M mutes, F is fullscreen, C captions, a digit seeks to that tenth - and it stands down inside anything that takes text. The bar fades while playing and comes back on the first pointer move. The element stays the source of truth: playback, the subtitle list and the cast target are all read back from it rather than kept twice.",
+      "targets": [
+        "react"
+      ],
+      "entry": {
+        "react": "@enigmax/primitives/react/video"
+      },
+      "exports": {
+        "react": [
+          "Video"
+        ]
+      },
+      "files": [
+        {
+          "path": "src/core/context-menu.ts",
+          "dest": "video/context-menu.ts",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/core/search": "./search-core",
+            "@/core/keys": "./keys"
+          }
+        },
+        {
+          "path": "src/core/search.ts",
+          "dest": "video/search-core.ts",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/core/keys.ts",
+          "dest": "video/keys.ts",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/core/clipboard-menu.ts",
+          "dest": "video/clipboard-menu.ts",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/core/context-menu": "./context-menu",
+            "@/react/context-menu/styles": "./context-menu-styles"
+          }
+        },
+        {
+          "path": "src/react/slot.tsx",
+          "dest": "video/slot.tsx",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/react/context-menu/styles": "./context-menu-styles"
+          }
+        },
+        {
+          "path": "src/react/context-menu/styles.ts",
+          "dest": "video/context-menu-styles.ts",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/react/context-menu/styles": "./context-menu-styles"
+          }
+        },
+        {
+          "path": "recipes/context-menu/styles.css",
+          "dest": "video/context-menu-styles.css",
+          "targets": [
+            "react"
+          ],
+          "style": "css",
+          "rewrite": {
+            "@/react/context-menu/styles": "./context-menu-styles"
+          }
+        },
+        {
+          "path": "src/react/context-menu/context.ts",
+          "dest": "video/context.ts",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/core/context-menu": "./context-menu",
+            "@/react/context-menu/styles": "./context-menu-styles"
+          }
+        },
+        {
+          "path": "src/react/context-menu/root.tsx",
+          "dest": "video/root.tsx",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/core/context-menu": "./context-menu",
+            "@/core/search": "./search-core",
+            "@/core/keys": "./keys",
+            "@/react/slot": "./slot",
+            "@/react/context-menu/styles": "./context-menu-styles",
+            "@/react/context-menu/context": "./context",
+            "@/core/clipboard-menu": "./clipboard-menu"
+          }
+        },
+        {
+          "path": "src/react/context-menu/index.tsx",
+          "dest": "video/context-menu-ui.tsx",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/react/context-menu/root": "./root",
+            "@/react/context-menu/context": "./context",
+            "@/react/context-menu/styles": "./context-menu-styles",
+            "@/core/context-menu": "./context-menu",
+            "@/core/keys": "./keys",
+            "@/core/clipboard-menu": "./clipboard-menu"
+          }
+        },
+        {
+          "path": "src/core/player.ts",
+          "dest": "video/player.ts",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/react/video/types.ts",
+          "dest": "video/types.ts",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/react/context-menu/context": "./context"
+          }
+        },
+        {
+          "path": "src/react/video/icons.tsx",
+          "dest": "video/icons.tsx",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/react/video/styles.ts",
+          "dest": "video/styles.ts",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/react/video/rail.tsx",
+          "dest": "video/rail.tsx",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/core/player": "./player"
+          }
+        },
+        {
+          "path": "src/react/video/menu.tsx",
+          "dest": "video/menu.tsx",
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/core/context-menu": "./context-menu",
+            "@/react/context-menu": "./context-menu-ui"
+          }
+        },
+        {
+          "path": "src/react/video/index.tsx",
+          "dest": "video/index.tsx",
+          "main": true,
+          "targets": [
+            "react"
+          ],
+          "rewrite": {
+            "@/core/player": "./player",
+            "@/react/video/icons": "./icons",
+            "@/react/video/rail": "./rail",
+            "@/react/video/styles": "./styles",
+            "@/react/video/types": "./types",
+            "@/react/context-menu/context": "./context",
+            "@/react/video/menu": "./menu"
+          }
+        },
+        {
+          "path": "recipes/video/styles.css",
+          "dest": "video/styles.css",
+          "targets": [
+            "react"
+          ],
+          "style": "css"
+        }
+      ],
+      "styles": true,
+      "themeHooks": [
+        "[data-enigma-video]",
+        "[data-enigma-video][data-playing]",
+        "[data-enigma-video][data-hidden]",
+        "[data-enigma-video][data-fullscreen]",
+        "[data-enigma-video-big]",
+        "[data-enigma-video-overlay]",
+        "[data-enigma-video-spinner]",
+        "[data-enigma-video-controls]",
+        "[data-enigma-video-button]",
+        "[data-enigma-video-time]",
+        "[data-enigma-video-rail]",
+        "[data-enigma-video-track]",
+        "[data-enigma-video-buffer]",
+        "[data-enigma-video-played]",
+        "[data-enigma-video-knob]",
+        "[data-enigma-video-volume]",
+        "[data-enigma-video-menu]",
+        "[data-enigma-video-panel]",
+        "[data-enigma-video-option]",
+        "[data-enigma-video-heading]",
+        "[data-enigma-video][data-casting]"
+      ],
+      "docs": "docs/notes/primitives.md#video",
+      "source": "src/core/player.ts",
+      "recipes": [
+        "css"
+      ]
     }
   ]
 }

package/src/core/context-menu.ts

@@ -82,8 +82,18 @@ export function isAction(entry: ContextMenuEntry): entry is ContextMenuAction {
 /** The fields the filter reads when the caller does not say. */
 export const CONTEXT_MENU_SEARCH_KEYS = ["label", "description", "group", "keywords"];
 
-/** Filtering six rows is worth a field; filtering three is a bigger panel for nothing. */
-export const SEARCHABLE_FROM = 8;
+/**
+ * How many rows a level needs before it grows a filter on its own.
+ *
+ * Raised from 8, which turned out to be a number you can still READ. A menu of eight is
+ * scanned in one look, so the field was a row of chrome, a focus stop and a taller panel in
+ * exchange for nothing - the video player's own menu, at nine rows, is what showed it. Twelve
+ * is about where a list stops being a shape and starts being a list.
+ *
+ * It is only the DEFAULT. A menu whose rows arrive from somewhere - a list of files, a
+ * directory, anything fetched - says `searchable` and does not wait to grow into it.
+ */
+export const SEARCHABLE_FROM = 12;
 
 /** Where a menu was opened. Viewport coordinates, which is what a pointer event reports. */
 export interface ContextMenuPoint {
@@ -141,6 +151,12 @@ export interface ContextMenuOptions {
     /** A row was invoked. The menu has already closed unless the row keeps it open. */
     onSelect?: (item: ContextMenuAction, path: string[]) => void;
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the ROOT level draws a filter. `"auto"` (the default) grows one from
+     * `SEARCHABLE_FROM` rows; `true` puts one there whatever the count, which is what a menu
+     * filling itself from somewhere wants; `false` never does.
+     */
+    searchable?: boolean | "auto";
 }
 
 export interface ContextMenuInstance {
@@ -235,7 +251,10 @@ export function createContextMenu(options: ContextMenuOptions = {}): ContextMenu
     }
 
     function searchableFor(item: ContextMenuAction | null, entries: readonly ContextMenuEntry[]): boolean {
-        const asked = item?.searchable ?? "auto";
+        // The root has no item to carry the answer, so it reads the menu's own option - which
+        // is the only way a caller can turn the field on for rows they are about to fetch, or
+        // off for a menu they know is short.
+        const asked = (item ? item.searchable : opts.searchable) ?? "auto";
         if (asked !== "auto") return asked;
         return entries.filter(isAction).length >= SEARCHABLE_FROM;
     }