@enigmax/primitives 0.24.0 → 0.26.0

package/recipes/video/styles.css

@@ -0,0 +1,154 @@
+/*
+ * The video stylesheet.
+ *
+ * GENERATED from src/react/video/styles.ts by scripts/sync-recipes.mjs - edit that file, not
+ * this one. It exists as a stylesheet as well as a string because the component injects it,
+ * and this is the same sheet for anyone who would rather import it, copy it with
+ * `enigma add video --copy`, or fork it outright.
+ */
+:root {
+    --enigma-video-accent: #3b82f6;
+    --enigma-video-bg: #000000;
+    --enigma-video-text: #ffffff;
+    --enigma-video-muted: rgba(255, 255, 255, 0.72);
+    --enigma-video-rail: rgba(255, 255, 255, 0.28);
+    --enigma-video-buffer: rgba(255, 255, 255, 0.45);
+    --enigma-video-panel-bg: rgba(23, 23, 23, 0.96);
+    --enigma-video-radius: 0.5rem;
+    --enigma-video-control-size: 2rem;
+    /* The icons are sized HERE and not in em of the bar's text: 1.25em of a 13px label is a
+       16px icon, and the same markup in a project with larger type silently grew a different
+       player. */
+    --enigma-video-icon-size: 1.125rem;
+    --enigma-video-rail-height: 0.3125rem;
+    --enigma-video-rail-hover: 0.5rem;
+    --enigma-video-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+}
+
+[data-enigma-video] {
+    position: relative; display: block; width: 100%; overflow: hidden;
+    background: var(--enigma-video-bg); border-radius: var(--enigma-video-radius);
+    color: var(--enigma-video-text);
+    font-size: 0.8125rem; line-height: 1;
+}
+[data-enigma-video] video { display: block; width: 100%; height: 100%; }
+/* Fullscreen needs no sizing of its own: the UA stylesheet pins the fullscreen element to the
+   screen with !important, which outranks anything a page or this sheet can say, and a video
+   element already fits itself with object-fit: contain. Only the corner is ours. */
+[data-enigma-video][data-fullscreen] { border-radius: 0; }
+[data-enigma-video][data-hidden] { cursor: none; }
+
+/* The big one, while nothing is playing. Plyr's shape: a filled circle over the poster,
+   large enough to be the obvious target on a phone. */
+[data-enigma-video-big] {
+    position: absolute; inset: 0; margin: auto;
+    display: grid; place-items: center;
+    width: 3.75rem; height: 3.75rem; padding: 0;
+    color: var(--enigma-video-text); background: var(--enigma-video-accent);
+    border: 0; border-radius: 999px; box-shadow: var(--enigma-video-shadow);
+    cursor: pointer;
+}
+[data-enigma-video-big]:focus-visible { outline: 2px solid var(--enigma-video-text); outline-offset: 3px; }
+
+[data-enigma-video-overlay] { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
+[data-enigma-video-overlay] > * { pointer-events: auto; }
+
+[data-enigma-video-spinner] {
+    width: 2rem; height: 2rem;
+    border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: var(--enigma-video-text);
+    border-radius: 999px; animation: enigma-video-spin 700ms linear infinite;
+}
+@keyframes enigma-video-spin { to { rotate: 360deg; } }
+@media (prefers-reduced-motion: reduce) {
+    [data-enigma-video-spinner] { animation-duration: 2s; }
+}
+
+[data-enigma-video-controls] {
+    position: absolute; inset-inline: 0; bottom: 0;
+    display: flex; align-items: center; gap: 0.375rem;
+    padding: 2.5rem 0.625rem 0.625rem;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
+    transition: opacity 180ms ease, translate 180ms ease;
+}
+[data-enigma-video][data-hidden] [data-enigma-video-controls] { opacity: 0; translate: 0 0.5rem; pointer-events: none; }
+@media (prefers-reduced-motion: reduce) {
+    [data-enigma-video-controls] { transition: none; }
+}
+
+[data-enigma-video-button] {
+    display: grid; place-items: center; flex: none;
+    width: var(--enigma-video-control-size); height: var(--enigma-video-control-size);
+    padding: 0; color: var(--enigma-video-text); background: none; border: 0; border-radius: 0.375rem;
+    cursor: pointer;
+}
+[data-enigma-video-button] svg { width: var(--enigma-video-icon-size); height: var(--enigma-video-icon-size); flex: none; }
+[data-enigma-video-big] svg { width: 1.5rem; height: 1.5rem; }
+[data-enigma-video-button]:hover { background: rgba(255, 255, 255, 0.16); }
+[data-enigma-video-button]:focus-visible { outline: 2px solid var(--enigma-video-text); outline-offset: 1px; }
+[data-enigma-video-button][aria-pressed="true"] { color: var(--enigma-video-accent); }
+
+[data-enigma-video-time] { flex: none; color: var(--enigma-video-muted); font-variant-numeric: tabular-nums; }
+
+/* The rail. Its hit area is the row, not the 5px line: a scrubber you have to hit exactly is
+   one people miss and then seek by accident. */
+[data-enigma-video-rail] {
+    position: relative; flex: 1; min-width: 3rem; height: 1rem;
+    display: flex; align-items: center;
+    cursor: pointer; touch-action: none;
+}
+[data-enigma-video-track] {
+    position: relative; width: 100%; height: var(--enigma-video-rail-height);
+    background: var(--enigma-video-rail); border-radius: 999px; overflow: hidden;
+    transition: height 120ms ease;
+}
+[data-enigma-video-rail]:hover [data-enigma-video-track],
+[data-enigma-video-rail]:focus-visible [data-enigma-video-track] { height: var(--enigma-video-rail-hover); }
+[data-enigma-video-rail]:focus-visible { outline: 2px solid var(--enigma-video-text); outline-offset: 2px; border-radius: 999px; }
+[data-enigma-video-buffer] { position: absolute; inset-block: 0; left: 0; background: var(--enigma-video-buffer); }
+[data-enigma-video-played] { position: absolute; inset-block: 0; left: 0; background: var(--enigma-video-accent); }
+[data-enigma-video-knob] {
+    position: absolute; top: 50%; translate: -50% -50%;
+    width: 0.75rem; height: 0.75rem; border-radius: 999px;
+    background: var(--enigma-video-text); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
+    pointer-events: none;
+}
+
+/* The volume rail folds away until the control is reached, which is what keeps a narrow
+   player from spending a third of its bar on something rarely touched. */
+[data-enigma-video-volume] { display: flex; align-items: center; flex: none; }
+[data-enigma-video-volume] [data-enigma-video-rail] {
+    width: 0; min-width: 0; opacity: 0; transition: width 140ms ease, opacity 140ms ease;
+}
+[data-enigma-video-volume]:hover [data-enigma-video-rail],
+[data-enigma-video-volume]:focus-within [data-enigma-video-rail] { width: 4.5rem; min-width: 4.5rem; opacity: 1; }
+
+[data-enigma-video-menu] { position: relative; flex: none; }
+/* The panel opens upward, and the player CLIPS - it has to, or a rounded corner is not
+   rounded. So its height is bounded by the room above the button that opened it (measured, and
+   set inline) and what does not fit scrolls. Without this a speed list plus a language list is
+   a panel with its top cut off on any player under about 300px. */
+[data-enigma-video-panel] {
+    position: absolute; right: 0; bottom: calc(100% + 0.5rem); z-index: 2;
+    box-sizing: border-box; min-width: 8.5rem; max-width: calc(100vw - 2rem); padding: 0.25rem;
+    max-height: 14rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
+    background: var(--enigma-video-panel-bg); border-radius: 0.5rem; box-shadow: var(--enigma-video-shadow);
+}
+[data-enigma-video-option] {
+    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
+    width: 100%; padding: 0.4375rem 0.5rem;
+    color: var(--enigma-video-text); background: none; border: 0; border-radius: 0.375rem;
+    font: inherit; text-align: left; cursor: pointer;
+}
+[data-enigma-video-option]:hover { background: rgba(255, 255, 255, 0.12); }
+[data-enigma-video-option][aria-checked="true"] { color: var(--enigma-video-accent); }
+[data-enigma-video-option]:focus-visible { outline: 2px solid var(--enigma-video-text); outline-offset: -2px; }
+/* Sticky because the panel scrolls: the language you are choosing between should still say
+   which list it belongs to when the speeds have scrolled past it. */
+[data-enigma-video-heading] {
+    position: sticky; top: 0; z-index: 1; margin: 0;
+    padding: 0.375rem 0.5rem; color: var(--enigma-video-muted);
+    background: var(--enigma-video-panel-bg);
+    font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em;
+}
+[data-enigma-video-option] svg { width: 0.875rem; height: 0.875rem; flex: none; }
+[data-enigma-video-option] span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

package/registry.json

@@ -156,7 +156,7 @@
     {
       "name": "input",
       "title": "Input, one field for every type",
-      "description": "A field you pass props to, typed by its `type`: password gets the reveal toggle, a generator, a strength meter and a breach check; search gets debouncing, ranking and a clear button; color gets a swatch and a picker panel - saturation square, hue and alpha rails, presets and the screen eyedropper - instead of the operating system popup; everything else is a plain field with native props. What each type needs is loaded when that type is used, so a form of text fields ships none of it.",
+      "description": "A field you pass props to, typed by its `type`: password gets the reveal toggle, a generator, a strength meter and a breach check; search gets debouncing, ranking and a clear button; color gets a swatch and a picker panel - saturation square, hue and alpha rails, an editable readout that prints the value as hex, rgb() or hsl(), presets and the screen eyedropper - instead of the operating system popup, and the swatch is there from the first frame rather than when the panel's code lands; everything else is a plain field with native props. What each type needs is loaded when that type is used, so a form of text fields ships none of it.",
       "targets": [
         "vanilla",
         "astro",
@@ -279,6 +279,13 @@
             "react"
           ]
         },
+        {
+          "path": "src/react/input/color-swatch.tsx",
+          "dest": "input/color-swatch.tsx",
+          "targets": [
+            "react"
+          ]
+        },
         {
           "path": "src/react/input/color.tsx",
           "dest": "input/color.tsx",
@@ -289,7 +296,8 @@
             "@/core/color": "./color-core",
             "@/react/input/write-value": "./write-value",
             "@/react/input/color-styles": "./color-styles",
-            "@/react/input/types": "./types"
+            "@/react/input/types": "./types",
+            "@/react/input/color-swatch": "./color-swatch"
           }
         },
         {
@@ -325,7 +333,8 @@
             "@/react/input/password": "./password",
             "@/react/input/search": "./search",
             "@/core/password": "./password-core",
-            "@/react/input/color": "./color"
+            "@/react/input/color": "./color",
+            "@/react/input/color-swatch": "./color-swatch"
           }
         },
         {
@@ -1393,6 +1402,471 @@
       "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",
+      "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",
+      "recipes": [
+        "css"
+      ]
     }
   ]
 }