@livenetworks/ashlar 1.5.1 → 1.6.0

package/js/ln-router/README.md

@@ -0,0 +1,432 @@
+# ln-router
+
+> A zero-dependency, template-driven, client-side SPA router that maps URLs to route templates and renders them declaratively.
+
+---
+
+## 1. Philosophy & The Primitive Mindset
+
+In `ln-ashlar`, the core design principle is **orthogonality**. Rather than creating a heavy router that handles data fetching, state management, and HTML sanitization, `ln-router` separates these concerns:
+
+1. **The Route Mounter (JavaScript)**: The `ln-router` component only manages path matching, history states (`pushState`/`popstate`), accessibility focus shifting, and DOM swapping. It does not fetch data, sanitise markup, or touch database stores.
+2. **The Declarative Layout (HTML)**: Route configurations and view templates live in HTML as `<template data-ln-route="...">` tags. The router never constructs HTML inside JS. It simply clones the templates into the designated outlet.
+3. **Decoupled Data Binding (Coordinator)**: The coordinator listens to the `ln-router:navigated` event, retrieves params/query, fetches from a store or HTTP endpoint, and updates the mounted view using core helpers:
+   - **`fillTemplate(clone, data)`**: Replaces inline `{{ placeholder }}` text-node variables in the cloned view. Since it operates strictly on text nodes (via `TreeWalker`), it is 100% safe from reflected XSS.
+   - **`fill(el, data)`**: Performs attribute-driven binding (`data-ln-field` → `textContent`, `data-ln-attr` → `setAttribute`), which is also inherently secure.
+   
+> [!WARNING]
+> **Reflected XSS Security**: The route coordinator is responsible for populating the view. When binding URL parameters (e.g., username in `/profile/:username`) or query parameters to the DOM, **never** use unsafe methods like `innerHTML` or `outerHTML`. Always use `fillTemplate`, `fill`, or set `textContent` directly to avoid reflected XSS injections. For more, see [Security Architecture](file:///c:/laragon/www/ln-ashlar/docs/architecture/security.md#safe-dom-interpolation).
+
+---
+
+## 2. Minimal Blueprint
+
+Route templates and outlets are declared in HTML. Triggers are plain same-origin `<a>` tags.
+
+```html
+<!-- Default Outlet (where views render by default) -->
+<main data-ln-outlet></main>
+
+<!-- Route Templates (lives anywhere, commonly grouped near outlet) -->
+<template data-ln-route="/">
+    <article>
+        <h1>Home</h1>
+        <p>Welcome to Ashlar SPA.</p>
+    </article>
+</template>
+
+<template data-ln-route="/users">
+    <article>
+        <h1>Users List</h1>
+        <ul id="user-list"></ul>
+    </article>
+</template>
+
+<!-- Parameter route -->
+<template data-ln-route="/users/:id" data-ln-route-title="User Details">
+    <article>
+        <h1 id="user-name-title">Loading User...</h1>
+    </article>
+</template>
+
+<!-- Catch-all fallback route -->
+<template data-ln-route="*">
+    <article>
+        <h1>404 - Not Found</h1>
+    </article>
+</template>
+```
+
+### Multi-Region Blueprint
+
+```html
+<!-- Primary outlet -->
+<main data-ln-outlet></main>
+
+<!-- Persistent sidebar — keeps state on param-only changes -->
+<aside id="side" data-ln-route-keep></aside>
+
+<!-- Primary region templates -->
+<template data-ln-route="/users/:id">
+    <article><h1>User {{id}}</h1></article>
+</template>
+
+<!-- Sidebar templates -->
+<template data-ln-route="/users/:id" data-ln-route-target="side">
+    <section>
+        <h2>Sidebar: User {{id}}</h2>
+        <input type="text" placeholder="Type something — survives param changes">
+    </section>
+</template>
+```
+
+---
+
+## 3. The Declarative API & State Contract
+
+There is no need to manually instantiate or initialize the router. Discovered `<template data-ln-route>` elements register themselves automatically.
+
+```js
+import { router } from '../ln-router';
+
+// Programmatic navigation
+router.navigate('/users/42?tab=profile');
+
+// Programmatic replace state
+router.replace('/dashboard');
+
+// Read-only state query
+const current = router.current();
+// Returns:
+// {
+//   path: '/users/42?tab=profile',
+//   params: { id: '42' },          // primary region params
+//   query: { tab: 'profile' },
+//   route: { 
+//     pattern: '/users/:id', 
+//     target: null, // The string ID of the custom target outlet, or null if using default
+//     title: 'User Details', 
+//     templateNode: HTMLTemplateElement 
+//   },
+//   regions: Map {                  // NEW — per-region snapshot
+//     '__primary__' => { route: {...}, params: { id: '42' } },
+//     'side'        => { route: {...}, params: { id: '42' } } | null
+//   }
+// }
+```
+
+### Target Outlet Resolution Fallback
+When a route matches, the router resolves the target DOM element to render into by checking the following hierarchy:
+1. An explicit element ID specified by `data-ln-route-target="..."` on the `<template>`.
+2. A default outlet element marked with the `data-ln-outlet` attribute.
+3. The first `<main>` element found in the document.
+
+If the **primary** outlet cannot be resolved, the router logs a `console.warn` and aborts the navigation, leaving the current page state intact. If an **auxiliary** region's target element cannot be resolved, the router warns and skips only that region — the remaining regions still render.
+
+### Attributes
+- `data-ln-route="pattern"`: Declares a route on a `<template>`. Supports static segments (`/users`), parameters (`/users/:id`), and wildcards (`*`).
+- `data-ln-route-target="id"`: Sets an explicit element ID to render this route into. Templates with no `data-ln-route-target` belong to the **primary region** (default outlet).
+- `data-ln-route-title="text"`: Sets `document.title` on successful navigation (primary region only).
+- `data-ln-outlet`: Marks the default outlet element (falls back to the first `<main>` element if omitted).
+- `data-ln-router-hydrate`: Placed on the outlet element to signal that initial SSR (Server-Side Rendered) content is already present, letting the router skip the initial clone and register events cleanly.
+- `data-ln-route-keep`: Placed on a **target element** (not a template). When present, the router skips teardown and DOM swap for that region if the matched template is the same as the one currently mounted — surviving param-only URL changes while preserving DOM state (inputs, scroll, open panels). When the matched template changes, teardown and swap proceed normally. Ignored on the primary outlet (the primary always re-renders).
+
+---
+
+## 4. Transition Events
+
+All events bubble from the target outlet element.
+
+| Event | Cancelable | Detail | Dispatched When |
+|---|---|---|---|
+| **`ln-router:before-navigate`** | **Yes** | `{ from, to, params, query }` | Fired **once per navigation** on the primary outlet before any region swap. `preventDefault()` aborts the entire navigation (no history update, no region swaps). |
+| **`ln-router:navigated`** | No | `{ path, params, query, route, target, region }` | Fired **per region that actually swapped**. `region` is `'__primary__'` for the default outlet, or the target element's id string for auxiliary regions. All existing keys (`path, params, query, route, target`) remain present for backward compatibility. |
+| **`ln-router:not-found`** | No | `{ path }` | When the primary region has no match (and no catch-all `*` exists). DOM is left untouched. Not fired on auxiliary-only pages. |
+
+### Timing guarantee
+
+The initial render runs after the full route scan completes — all `<template data-ln-route>` elements in the document are registered before the first navigation fires.
+The initial `ln-router:navigated` (on a matched route) and boot-path `ln-router:not-found` (on no match) dispatches are **deferred one microtask** via `queueMicrotask`. This ensures that listeners registered during the same `DOMContentLoaded` burst — i.e. in a `<script defer>` tag that appears after the router bundle — always receive the boot event. When the View Transitions API is available, the deferral is handled via the VT callback rather than literally `queueMicrotask`, but the guarantee is identical — listeners in a later `defer` script still receive the boot event.
+
+All subsequent navigations (link clicks, `popstate`, programmatic `router.navigate()`/`router.replace()`) dispatch **synchronously**; no deferral applies once the boot phase is complete.
+
+**Consumers no longer need a `current()` boot-replay block.** The pattern:
+
+```js
+// OBSOLETE — no longer needed
+const booted = window.lnRouter && window.lnRouter.current();
+if (booted && !navigatedFired) {
+    mountRoute(booted);
+}
+```
+
+can be replaced by simply attaching a `ln-router:navigated` listener — it will fire even if the router booted before the listener was added.
+
+```js
+// Example: Block navigation out of unsaved forms
+document.addEventListener('ln-router:before-navigate', (e) => {
+    if (hasUnsavedChanges && !confirm('Discard changes?')) {
+        e.preventDefault(); // Cancels transition and keeps current view
+    }
+});
+```
+
+## 5. Fragment-only popstate guard
+
+A `popstate` event whose new URL differs from the current SPA state **only in
+the fragment** (path and query are identical) is **skipped** — no navigation,
+no outlet teardown, no `ln-router:navigated` event fires.
+
+This is what makes hash-bound overlays (like `ln-modal`, which uses its
+element `id` as the hash namespace) work cleanly with Back/Forward:
+
+1. User opens a hash-bound modal → URL gets `#id:value`.
+2. User presses **Back** → browser fires `popstate` to the URL without the
+   fragment.
+3. ln-router detects path + query are identical → **skips navigation** → the
+   under-modal view (table, scroll position, search/filter state) is
+   completely preserved.
+4. `hashchange` fires → ln-modal's `_onHashChange` sees the segment is gone
+   → `data-ln-modal="close"` → modal closes cleanly.
+
+Real path/query Back/Forward navigations and link clicks are unaffected. The
+`router.current()` return value is left coherent (unchanged) on a skipped
+fragment popstate — no stale state is introduced.
+
+This guard is implemented via `_queryEqual` in the router source.
+
+## 6. Accessibility & Screen Reader Continuity
+
+`ln-router` shifts focus automatically on each user-initiated navigation (click or popstate back/forward) to ensure compatibility with assistive technologies (screen readers). Focus is **not** shifted on the initial page load (boot render) to avoid an unexpected visible focus ring without user action.
+1. **Focus Shifting** (user navigation only): The router looks for the first heading element (`h1` through `h6`) in the newly mounted template. If found, it dynamically assigns `tabindex="-1"` and calls `.focus()` on it. If no heading element is present, focus is shifted to the outlet container itself.
+2. **Title Updates**: When `data-ln-route-title` is defined, the router updates `document.title`, which is announced by screen readers upon focus shifting.
+3. **Scroll Management** (user navigation only): The router automatically scrolls the target element into view via `.scrollIntoView({ block: 'start', behavior: 'instant' })` to reset the viewport for the new content.
+
+---
+
+## 7. Server Integration & Deep Links
+
+Since `ln-router` operates client-side using history `pushState`, direct access or page refresh on a deep path (e.g., direct opening of `/users/42`) will bypass the client-side router and hit the web server directly. This results in a server 404 error if not configured correctly.
+
+### 1. Server Catch-All Fallback
+Your web server must serve the main shell entrypoint (e.g., `index.html` or main layout view) for all deep URLs, allowing the client-side router to boot and handle the path.
+
+In **Laravel**, define a fallback route at the end of `routes/web.php`:
+```php
+Route::fallback(function () {
+    return view('app'); // returns your main blade layout shell
+});
+```
+
+In **Nginx**, configure the fallback in your site configuration:
+```nginx
+location / {
+    try_files $uri $uri/ /index.html;
+}
+```
+
+### 2. Relative Assets & `<base>` Tag
+If your app references assets using relative paths, deep paths will attempt to load assets relative to the current route path (e.g., loading `/users/assets/app.js` instead of `/assets/app.js`). To prevent this:
+- **Configure the base tag**: Add `<base href="/">` in the `<head>` of your main HTML shell.
+- **Or use absolute asset paths**: Ensure script and link tags point to absolute URLs (e.g., `/dist/main.js` instead of `dist/main.js`).
+
+---
+
+## 8. Routing Model — Parallel Regions, Not Nested Routes
+
+> [!NOTE]
+> **No Nested Routing**: `ln-router` does not support nested outlets or child routes (rendering a sub-view inside an already-routed parent). All routes are flat.
+
+> [!NOTE]
+> **Multi-region routing is PARALLEL (sibling), not nested.** When a single URL simultaneously paints a sidebar region and a main region, both regions are siblings at the page level — neither is a child of the other's outlet. The "No Nested Routing" doctrine applies: there is no concept of a parent route whose outlet contains another router outlet.
+
+---
+
+## 9. Integration Patterns
+
+### Coordinator Data Binding (Secure Interpolation)
+Coordinators listen to `ln-router:navigated`, fetch data, and populate the view. Use `fillTemplate` for safe `{{ placeholder }}` text-node substitutions:
+
+```html
+<template data-ln-route="/profile/:username">
+    <section>
+        <h1>Profile: {{username}}</h1>
+    </section>
+</template>
+```
+
+```js
+import { fillTemplate } from '../ln-core';
+
+document.addEventListener('ln-router:navigated', function (e) {
+	if (e.detail.route.pattern !== '/profile/:username') return;
+
+	const username = e.detail.params.username;
+	// Populate read-only placeholders like {{username}} inside the outlet
+	// fillTemplate walks text nodes and is completely safe from XSS.
+	fillTemplate(e.detail.target, { username: username });
+});
+```
+
+---
+
+## 10. Integration & Source Files
+
+`ln-ashlar` is a source-only package. Products should bundle it from source using their asset compilation pipelines (Vite, Laravel Mix, Webpack, etc.):
+
+- **Vite / ES Modules**:
+  ```js
+  import '@livenetworks/ashlar/js/ln-router';
+  ```
+- **Git Submodule ESM import**:
+  ```js
+  import 'resources/ln-ashlar/js/ln-router/src/ln-router.js';
+  ```
+- **Development Demo**:
+  The compiled build in `demo/dist/ln-ashlar.iife.js` exists solely for running the local repository demo environment and should not be referenced in production consumer applications.
+
+---
+
+## 11. Multi-Region Routing
+
+One URL can simultaneously paint multiple sibling regions. Each region independently maintains its own route table and matches the current URL.
+
+### Declaring regions
+
+Regions are ordinary DOM elements. Each is identified by an `id`. Route templates target a region via `data-ln-route-target="<id>"`. Templates with no `data-ln-route-target` belong to the **primary region** (the default outlet).
+
+```html
+<!-- Primary outlet (default region) -->
+<main data-ln-outlet></main>
+
+<!-- Auxiliary region: sidebar -->
+<aside id="side" data-ln-route-keep></aside>
+
+<!-- Primary templates -->
+<template data-ln-route="/users/:id" data-ln-route-title="User Details">
+    <article><h1>User {{id}}</h1></article>
+</template>
+
+<!-- Sidebar templates — same or different patterns -->
+<template data-ln-route="/users/:id" data-ln-route-target="side">
+    <section><h2>Sidebar for User {{id}}</h2></section>
+</template>
+
+<!-- Sidebar catch-all — shown on all other routes -->
+<template data-ln-route="*" data-ln-route-target="side">
+    <section><p>Select a user to see details.</p></section>
+</template>
+```
+
+### The primary region
+
+The primary region is the default outlet (`[data-ln-outlet]` or first `<main>`). It is authoritative for:
+- The single cancelable `ln-router:before-navigate` event (fires once per navigation)
+- `document.title` updates
+- Focus shifting and scroll management
+- `ln-router:not-found` (when the primary has no match)
+- `router.current()` return value
+
+`data-ln-route-keep` is ignored on the primary region: the primary always tears down and re-renders on every matched navigation.
+
+> [!IMPORTANT]
+> **Each region matches the URL independently.** A route targeting an
+> auxiliary region (`data-ln-route-target="…"`) no longer competes with primary
+> routes for a single "best match" — every region runs its own match. If you
+> have a route like `/users/:id/logs` that targets only an auxiliary region,
+> the primary region will independently try to match `/users/42/logs` against
+> its own templates and fall back to its `*` catch-all (or fire `not-found`) if
+> it has no template for that path. Author a primary template for such paths if
+> you want the main outlet to show meaningful content alongside the auxiliary
+> region. This is a deliberate consequence of the parallel-regions model.
+
+### `data-ln-route-keep` — persistent regions
+
+Add `data-ln-route-keep` to any target element to make it a **keep region**.
+
+```html
+<aside id="side" data-ln-route-keep></aside>
+```
+
+Keep-region logic:
+- **Same template matches again** (e.g. param-only change `/users/42` → `/users/43`): the region is left completely untouched. No teardown, no DOM swap, no `ln-router:navigated` event. Input values, scroll position, and open panels survive.
+- **Different template matches** (e.g. navigating to a route that has a different sidebar template): normal teardown + DOM swap + `ln-router:navigated` event.
+- **No match for this URL**: the region is left as-is (untouched content persists). To clear a keep region on certain routes, declare an explicit empty `<template>` for those patterns.
+
+Keep is a property of the **region target element**, not of the template.
+
+### `navigated` event — per swapped region
+
+`ln-router:navigated` fires once per region that actually swapped. The `region` key identifies which region fired:
+
+```js
+document.addEventListener('ln-router:navigated', function (e) {
+    const { path, params, query, route, target, region } = e.detail;
+
+    if (region === '__primary__') {
+        // Primary outlet navigated
+    } else if (region === 'side') {
+        // Sidebar region swapped
+    }
+});
+```
+
+The `region` value is `'__primary__'` for the default outlet, or the target element's `id` string for auxiliary regions.
+
+**Backward compatibility:** all existing keys (`path, params, query, route, target`) remain in the event detail unchanged. Single-outlet pages continue to receive one `navigated` event with the same payload they always have.
+
+### `router.current()` — multi-region state
+
+```js
+const state = router.current();
+// {
+//   path: '/users/42',
+//   params: { id: '42' },       // primary region params
+//   query: {},
+//   route: { ... },             // primary region matched route
+//   regions: Map {
+//     '__primary__' => { route: {...}, params: { id: '42' } },
+//     'side'        => { route: {...}, params: { id: '42' } },
+//   }
+// }
+```
+
+### Atomicity
+
+All region swaps for a single navigation are wrapped in a single `document.startViewTransition` call. History push/replace happens once. `before-navigate` fires once.
+
+---
+
+## 🔧 Internals
+
+Source: `js/ln-router/src/ln-router.js`.
+
+### Navigation pipeline (order matters)
+
+1. Strip hash/query, collapse trailing slashes.
+2. Every region in `regionRegistry` matches independently against its own sorted route list; the primary region's match is authoritative — if it has none (and no catch-all), the router dispatches `ln-router:not-found` and stops. Auxiliary-only pages proceed without firing `not-found`.
+3. `ln-router:before-navigate` fires once on the primary outlet; `preventDefault()` aborts the whole navigation before any region swap or history update.
+4. For each matched region, a keep-region check (`data-ln-route-keep` + same template already mounted) decides whether it enters the swap plan.
+5. History push/replace happens once.
+6. All planned swaps run sequentially inside a single `document.startViewTransition` call — teardown, clone, `replaceChildren`, record in `mountedTemplates`.
+7. `ln-router:navigated` fires per swapped region (`region` key = `'__primary__'` or the target id).
+
+### Registry & specificity
+
+`regionRegistry: Map<regionKey, { routes: Map<pattern, meta>, sorted: meta[] }>` — one route table per region, each independently sorted static > param > wildcard, first-declared wins ties. A duplicate `(pattern, regionKey)` registration is dropped with `console.warn`; the same pattern targeting two different regions is legal.
+
+### Teardown & teleport cleanup
+
+Only regions actually in the swap plan are torn down — a keep-region that skips a swap is never touched. Before `replaceChildren()` clears an outlet, the router walks its descendants for any element carrying an `ln*` property with a `destroy()` method and calls it — this is what prevents leaked window/document listeners and teleported overlay trees (e.g. an open popover in `<body>` whose trigger lived in the outlet) from surviving the swap.
+
+### Per-region persistence (keep regions)
+
+A `WeakMap<Element, HTMLTemplateElement>` (`mountedTemplates`) tracks the currently-mounted template per target. A keep-region skips its swap only when the newly matched template node is the *same* node already mounted there — never for the primary region, which always re-renders.
+
+### SSR hydration
+
+On boot, a region whose target carries `data-ln-router-hydrate` and already has children skips its initial clone swap — the SSR markup is left in place, listeners are wired, and `ln-router:navigated` still fires so a coordinator can bind/fill it.
+
+### Boot timing
+
+A module-level `_booting` flag is true only during the router's own initial `_navigate` call inside `_boot()`. While true, `ln-router:navigated`/`not-found` dispatches are queued via `queueMicrotask` instead of firing synchronously — guaranteeing that listeners registered later in the same `defer`-script burst still receive the boot event. Every subsequent navigation dispatches synchronously.

package/js/ln-router/ln-router.js

@@ -0,0 +1 @@
+var LnAshlarComponent=(function(b){"use strict";if(typeof window<"u"){const t=console.warn;console.warn=function(...e){typeof e[0]=="string"&&(e[0].startsWith("[ln-")||e[0].startsWith("[lnCore"))&&!(document.documentElement.hasAttribute("data-ln-debug")||document.body&&document.body.hasAttribute("data-ln-debug"))||t.apply(console,e)}}const _={};function Y(t,e){_[t]||(_[t]=document.querySelector('[data-ln-template="'+t+'"]'));const n=_[t];return n?n.content.cloneNode(!0):(console.warn("["+(e||"ln-core")+'] Template "'+t+'" not found'),null)}function R(t,e,n){t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:n||{}}))}function Z(t,e,n){const s=new CustomEvent(e,{bubbles:!0,cancelable:!0,detail:n||{}});return t.dispatchEvent(s),s}function D(t,e){if(!t||!e)return t;const n=t.querySelectorAll("[data-ln-field]");for(let o=0;o<n.length;o++){const l=n[o],a=l.getAttribute("data-ln-field");e[a]!=null&&(l.textContent=e[a])}const s=t.querySelectorAll("[data-ln-attr]");for(let o=0;o<s.length;o++){const l=s[o],a=l.getAttribute("data-ln-attr").split(",");for(let c=0;c<a.length;c++){const d=a[c].trim().split(":");if(d.length!==2)continue;const u=d[0].trim(),f=d[1].trim();e[f]!=null&&l.setAttribute(u,e[f])}}const r=t.querySelectorAll("[data-ln-show]");for(let o=0;o<r.length;o++){const l=r[o],a=l.getAttribute("data-ln-show");a in e&&l.classList.toggle("hidden",!e[a])}const i=t.querySelectorAll("[data-ln-class]");for(let o=0;o<i.length;o++){const l=i[o],a=l.getAttribute("data-ln-class").split(",");for(let c=0;c<a.length;c++){const d=a[c].trim().split(":");if(d.length!==2)continue;const u=d[0].trim(),f=d[1].trim();f in e&&l.classList.toggle(u,!!e[f])}}return t}function tt(t,e){t.matches&&t.matches("[data-ln-form], [data-ln-fillable]")&&t.dispatchEvent(new CustomEvent("ln-fill",{detail:e??null,bubbles:!0}));const n=t.querySelectorAll("[data-ln-form], [data-ln-fillable]");for(let s=0;s<n.length;s++)n[s].dispatchEvent(new CustomEvent("ln-fill",{detail:e??null,bubbles:!0}));return t}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._fillBound||(window.lnCore._fillBound=!0,document.addEventListener("ln-fill",function(t){if(!(!t.target.matches||!t.target.matches("[data-ln-fillable]")))if(t.detail)D(t.target,t.detail);else{const e=t.target.querySelectorAll("[data-ln-field]");for(let n=0;n<e.length;n++)e[n].textContent=""}})));function W(t,e){if(!t||!e)return t;const n=document.createTreeWalker(t,NodeFilter.SHOW_TEXT);for(;n.nextNode();){const i=n.currentNode;i.textContent.indexOf("{{")!==-1&&(i.textContent=i.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(o,l){return e[l]!==void 0?e[l]:""}))}const s=function(i,o){return e[o]!==void 0?e[o]:""},r=Array.from(t.querySelectorAll("*"));t.nodeType===1&&r.push(t);for(let i=0;i<r.length;i++){const o=r[i],l=o.attributes;for(let a=0;a<l.length;a++){const c=l[a];c.value.indexOf("{{")!==-1&&o.setAttribute(c.name,c.value.replace(/\{\{\s*(\w+)\s*\}\}/g,s))}}return t}function et(t,e,n,s,r,i){const o={};for(let a=0;a<t.children.length;a++){const c=t.children[a],d=c.getAttribute("data-ln-key");d&&(o[d]=c)}const l=document.createDocumentFragment();for(let a=0;a<e.length;a++){const c=e[a],d=String(s(c));let u=o[d];if(u)r(u,c,a);else{const f=Y(n,i);if(!f||(W(f,c),u=f.firstElementChild,!u))continue;u.setAttribute("data-ln-key",d),r(u,c,a)}l.appendChild(u)}t.textContent="",t.appendChild(l)}function A(t,e){if(!document.body){document.addEventListener("DOMContentLoaded",function(){A(t,e)}),console.warn("["+e+'] Script loaded before <body> — add "defer" to your <script> tag');return}t()}function C(t,e,n,s){if(t.nodeType!==1)return;const i=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]",o=Array.from(t.querySelectorAll(i));t.matches&&t.matches(i)&&o.push(t);for(const l of o)l[n]||(l[n]=new s(l))}function nt(t,e,n,s,r={}){const i=r.extraAttributes||[],o=r.onAttributeChange||null,l=r.onInit||null;function a(c){const d=c||document.body;C(d,t,e,n),l&&l(d)}return A(function(){const c=new MutationObserver(function(u){for(let f=0;f<u.length;f++){const h=u[f];if(h.type==="childList"){for(let p=0;p<h.addedNodes.length;p++){const m=h.addedNodes[p];m.nodeType===1&&(C(m,t,e,n),l&&l(m))}for(let p=0;p<h.removedNodes.length;p++){const m=h.removedNodes[p];if(m.nodeType===1){const X=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",q=Array.from(m.querySelectorAll(X));m.matches&&m.matches(X)&&q.push(m);for(let M=0;M<q.length;M++){const J=q[M];if(!document.contains(J)){const T=J[e];T&&typeof T.destroy=="function"&&T.destroy()}}}}}else h.type==="attributes"&&(o&&h.target[e]?o(h.target,h.attributeName):(C(h.target,t,e,n),l&&l(h.target)))}});let d=[];if(t.indexOf("[")!==-1){const u=/\[([\w-]+)/g;let f;for(;(f=u.exec(t))!==null;)d.push(f[1])}else d.push(t);c.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:d.concat(i)})},s),window[e]=a,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){a(document.body)}):a(document.body),a}function rt(t,e){if(t.ctrlKey||t.metaKey||t.shiftKey||t.altKey||t.button!==0||!e)return!1;const n=e.getAttribute("href");return!(!n||e.getAttribute("target")==="_blank"||e.hasAttribute("download")||n.startsWith("mailto:")||n.startsWith("tel:")||n==="#"||n.startsWith("#")||e.hostname&&e.hostname!==window.location.hostname)}const I={};function ot(t,e){I[t]=e}function it(t){return I[t]||{ingress:e=>e,egress:e=>e}}const N={};function j(t,e){if(!t||typeof e!="object")return;const n=t.toLowerCase().split("-")[0];N[n]=e}function st(t){if(!t)return null;const e=t.toLowerCase().split("-")[0];return N[e]||null}j("mk",{monthsLong:["јануари","февруари","март","април","мај","јуни","јули","август","септември","октомври","ноември","декември"],monthsShort:["јан","фев","мар","апр","мај","јун","јул","авг","септ","окт","ноем","дек"],daysLong:["недела","понеделник","вторник","среда","четврток","петок","сабота"],daysShort:["нед","пон","вт","ср","чет","пет","саб"]}),typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=ot,window.lnCore.getDataMapper=it,window.lnCore.registerLocaleFallback=j,window.lnCore.getLocaleFallback=st,window.lnCore.fillTemplate=W,window.lnCore.fill=D,window.lnCore.lnFill=tt,window.lnCore.renderList=et);function K(t){return(t||"").replace(/^#/,"")}function S(t){const e=t===void 0?location.hash:t,n={},s=K(e);if(!s)return n;const r=s.split("&");for(let i=0;i<r.length;i++){const o=r[i];if(!o)continue;const l=o.indexOf(":"),a=l>-1?o.slice(0,l):o,c=l>-1?o.slice(l+1):"";if(a)try{n[a]=decodeURIComponent(c)}catch{n[a]=c}}return n}function lt(t){if(!t)return null;const e=S();return t in e?e[t]:null}function at(t,e){if(!t)return;const n=S();e==null?delete n[t]:n[t]=String(e);const r=Object.keys(n).map(function(i){const o=n[i];return o===""?i:i+":"+encodeURIComponent(o)}).join("&");K(location.hash)!==r&&(location.hash=r)}function ct(t){return t.button===1||t.ctrlKey||t.metaKey||t.shiftKey?!1:(t.preventDefault(),!0)}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=S,window.lnCore.hashGet=lt,window.lnCore.hashSet=at,window.lnCore.hashLinkClick=ct);const v={navigate:function(t){y(t,{historyAction:"push"})},replace:function(t){y(t,{historyAction:"replace"})},current:function(){return E?{path:x,params:F,query:U,route:E,regions:H}:null}},k="data-ln-route",P="lnRoute";typeof window<"u"&&(window.lnRouter=v);const g=new Map,B=new WeakMap;let H=new Map,$=!1,x=null,F={},U={},E=null,L=!1;function z(t,e,n){L?queueMicrotask(function(){R(t,e,n)}):R(t,e,n)}function w(t){try{const i=new URL(t,window.location.origin);t=i.pathname+i.search+i.hash}catch{}let[e]=t.split("#"),[n,s]=e.split("?");const r={};if(s){const i=new URLSearchParams(s);for(const[o,l]of i.entries())r[o]=l}return n=n.replace(/\/+$/,""),n===""&&(n="/"),{path:n,query:r}}function V(t,e){if(t.pattern==="*")return 1;if(e.pattern==="*")return-1;const n=t.segments,s=e.segments,r=Math.max(n.length,s.length);for(let i=0;i<r;i++){const o=n[i],l=s[i];if(o===void 0)return 1;if(l===void 0)return-1;if(o==="*")return 1;if(l==="*")return-1;const a=o.startsWith(":"),c=l.startsWith(":");if(a&&!c)return 1;if(!a&&c)return-1}return 0}function G(t,e){const n=t.split("/").filter(Boolean);for(const s of e){if(s.pattern==="*")return{route:s,params:{wildcard:t}};const r=s.segments,i={};let o=!0;if(!(n.length>r.length&&r[r.length-1]!=="*")){for(let l=0;l<r.length;l++){const a=r[l],c=n[l];if(a==="*"){i.wildcard=n.slice(l).join("/");break}if(c===void 0){o=!1;break}if(a.startsWith(":"))i[a.slice(1)]=decodeURIComponent(c);else if(a!==c){o=!1;break}}if(o&&(r.indexOf("*")!==-1||n.length<=r.length))return{route:s,params:i}}}return null}function O(t,e){if(t!=="__primary__"){const s=document.getElementById(e.target);return s||console.warn(`[ln-router] Explicit target element #${e.target} not found in DOM`),s}const n=document.querySelector("[data-ln-outlet]")||document.querySelector("main");return n||console.warn("[ln-router] Default outlet (element with [data-ln-outlet] or <main>) not found in DOM"),n}function ut(t){if(!t)return;const e=Array.from(t.querySelectorAll("*")),n=[t].concat(e);for(const r of n)for(const i of Object.keys(r))if(i.startsWith("ln")&&r[i]&&typeof r[i].destroy=="function")try{r[i].destroy()}catch(o){console.error(`[ln-router] Error destroying component ${i} on element:`,r,o)}const s=document.querySelectorAll('[data-ln-popover="open"]');for(const r of s){const i=r.lnPopover;if(i&&i.trigger&&t.contains(i.trigger))try{i.destroy()}catch(o){console.error("[ln-router] Error destroying open popover:",o)}}}function y(t,e={}){const{path:n,query:s}=w(t),r=new Map;for(const[d,u]of g)r.set(d,G(n,u.sorted));const i=g.has("__primary__"),o=r.get("__primary__");if(i&&!o){z(document.body,"ln-router:not-found",{path:n});return}let l=null;if(o&&(l=O("__primary__",o.route),!l||Z(l,"ln-router:before-navigate",{from:x,to:t,params:o.params,query:s}).defaultPrevented))return;const a=[];for(const[d,u]of r){if(!u)continue;const f=O(d,u.route);f&&(d!=="__primary__"&&f.hasAttribute("data-ln-route-keep")&&B.get(f)===u.route.templateNode||a.push({regionKey:d,match:u,targetEl:f}))}e.historyAction==="push"?window.history.pushState(null,"",t):e.historyAction==="replace"&&window.history.replaceState(null,"",t);const c=function(){for(const{regionKey:d,match:u,targetEl:f}of a){if(!(e.isHydration&&f.hasAttribute("data-ln-router-hydrate")&&f.children.length>0)){ut(f);const p=u.route.templateNode.content.cloneNode(!0);f.replaceChildren(p)}if(B.set(f,u.route.templateNode),d==="__primary__"&&(u.route.title&&(document.title=u.route.title),!e.isHydration)){f.hasAttribute("tabindex")||f.setAttribute("tabindex","-1");const p=f.querySelector("h1, h2, h3, h4, h5, h6");p?(p.setAttribute("tabindex","-1"),p.focus()):f.focus(),f.scrollIntoView({block:"start",behavior:"instant"})}z(f,"ln-router:navigated",{path:t,params:u.params,query:s,route:u.route,target:f,region:d})}o&&(x=t,F=o.params,U=s,E=o.route),H=new Map(Array.from(r.entries()).map(([d,u])=>[d,u?{route:u.route,params:u.params}:null]))};document.startViewTransition&&!e.isHydration?document.startViewTransition(c):c()}function ft(t){const e=t.target.closest("a");if(!e||!rt(t,e))return;const n=e.getAttribute("href"),{path:s}=w(n),r=g.get("__primary__");if(!r)return;G(s,r.sorted)&&(t.preventDefault(),y(n,{historyAction:"push"}))}function dt(t,e){const n=Object.keys(t),s=Object.keys(e);if(n.length!==s.length)return!1;for(let r=0;r<n.length;r++){const i=n[r];if(t[i]!==e[i])return!1}return!0}function ht(){const t=window.location.pathname+window.location.search,e=v.current();if(e&&e.path!=null){const n=w(t);if(w(e.path).path===n.path&&dt(e.query,n.query))return}y(t,{historyAction:"skip"})}function pt(){$||($=!0,A(function(){document.addEventListener("click",ft),window.addEventListener("popstate",ht),L=!0;const t=window.location.pathname+window.location.search+window.location.hash;y(t,{historyAction:"replace",isHydration:!0}),L=!1},"ln-router"))}function gt(t){const e=t.getAttribute(k);if(!e)return;const n=t.getAttribute("data-ln-route-target")||null;if(n==="__primary__"){console.warn(`[ln-router] "__primary__" is a reserved region key and cannot be used as data-ln-route-target. Route "${e}" rejected.`);return}const s=n||"__primary__";g.has(s)||g.set(s,{routes:new Map,sorted:[]});const r=g.get(s);if(r.routes.has(e)){console.warn(`[ln-router] Duplicate route pattern registered: "${e}" in region "${s}"`);return}const i=t.getAttribute("data-ln-route-title"),o=e.split("/").filter(Boolean),l={pattern:e,segments:o,target:n,title:i,templateNode:t},a=O(s,l);a&&a.contains(t)&&console.warn(`[ln-router] Route template with pattern "${e}" is declared inside its own outlet element:`,t),r.routes.set(e,l),r.sorted=Array.from(r.routes.values()).sort(V)}function mt(t){const e=t.getAttribute(k);if(!e)return;const s=t.getAttribute("data-ln-route-target")||null||"__primary__",r=g.get(s);r&&(r.routes.delete(e),r.sorted=Array.from(r.routes.values()).sort(V),r.routes.size===0&&g.delete(s))}function Q(t){return this.dom=t,gt(t),this}return Q.prototype.destroy=function(){mt(this.dom),delete this.dom[P]},nt(k,P,Q,"ln-router",{extraAttributes:["data-ln-route-target","data-ln-route-title"],onInit:function(){g.size>0&&pt()}}),b.router=v,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"}),b})({});