@se-studio/skills 1.6.2 → 1.6.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @se-studio/skills
 
+## 1.6.4
+
+### Patch Changes
+
+- 2c479e7: Wrap HtmlComponent customJs in an IIFE so `hcRoot` is per-instance. Two HtmlComponents with scripts on the same page no longer throw `Identifier 'hcRoot' has already been declared`.
+
+## 1.6.3
+
+### Patch Changes
+
+- DotLottie player for CMS animations (JSON and `.lottie`), with classic lottie-player fallback if DotLottie is not installed. Lazy load by default; honour loading/fetchPriority for eager (heroes). Server enrich reads dimensions and poster for CLS. WASM self-host helper (`/dotlottie/dotlottie-player.wasm`). Extension-first animation detection; hosted staged upload allows JSON/zip for animation packages. INavigation surfaces optional backgroundColour/textColour for footer chrome.
+
 ## 1.6.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@se-studio/skills",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "description": "SE Studio agent skills for marketing site development with Contentful CMS",
   "repository": {
     "type": "git",

package/references/contentful-cms-cms-guidelines/html-component-authoring.md

@@ -228,7 +228,7 @@ Never redeclare colours or typography in `customCss` — those already exist as
 
 ## Custom JavaScript (`customJs`)
 
-The renderer automatically injects a `hcRoot` variable pointing to this component's own `[data-hc-id]` element before your script runs. **Always use `hcRoot` as the root for DOM queries** — never `document.querySelector('[data-hc-id]')`, which matches the first component on the page, not this one.
+The renderer injects `hcRoot` (this component's `[data-hc-id]` root) inside an IIFE so each instance has its own binding. Multiple HtmlComponents with `customJs` on one page are safe. **Always use `hcRoot` as the root for DOM queries** — never `document.querySelector('[data-hc-id]')`, which matches the first component on the page, not this one.
 
 ```js
 // ✓ Correct — hcRoot is scoped to this component automatically
@@ -246,6 +246,7 @@ var section = document.querySelector('[data-hc-id]');
 **Rules:**
 - Use `hcRoot.querySelector` / `hcRoot.querySelectorAll` for all DOM lookups.
 - Keep scripts small and self-contained — no module imports, no global state.
+- Top-level `function` / `var` / `const` stay inside the IIFE. Do not call them from `rawHtml` (`onclick="setup()"`). Bind listeners on `hcRoot`. Assign `window.foo` only if another script must see the name.
 - Avoid `document.getElementById` unless the ID is guaranteed unique across the whole page.
 - Default `scriptStrategy` is `afterInteractive` — runs after page hydration. Use `lazyOnload` for non-critical third-party widgets.
 

package/skills/se-marketing-sites-handling-media/SKILL.md

@@ -166,7 +166,12 @@ The `IResponsiveVisual` type (from `@se-studio/core-data-types`) supports:
 
 1.  **Image**: Standard Contentful image asset.
 2.  **Video**: Hosted video file (mp4/webm). The component handles `<video>` tag rendering with autoplay/loop/muted attributes suitable for background videos.
-3.  **Animation**: Lottie JSON file. Renders using a Lottie player.
+3.  **Animation**: Lottie motion file. Player is chosen by **file extension**:
+    *   **`.json`** (or `application/json`) → `@lottiefiles/lottie-player` (classic Lottie).
+    *   **`.lottie`** → `@lottiefiles/dotlottie-react` (ThorVG / WASM). Wrong extension ⇒ wrong player.
+    *   Lazy-loaded near the viewport by default; pass `loading="eager"` / `fetchPriority="high"` (e.g. `calculateImagePriority(0)` on heroes) to load immediately and preload WASM for DotLottie.
+    *   Server enrich reads dimensions (and a poster when possible) so layout does not jump.
+    *   Sites using `.lottie` must install `@lottiefiles/dotlottie-react` and copy WASM to `public/dotlottie/dotlottie-player.wasm` (see `ensureDotLottieWasm` / `NEXT_PUBLIC_DOTLOTTIE_WASM_URL`).
 
 The component automatically detects the type and renders the appropriate element.