@livenetworks/ashlar 1.6.0 → 2.0.0

package/components/ln-chart/src/ln-chart.js

@@ -0,0 +1,176 @@
+import { cloneTemplateScoped, dispatch, fillTemplate, formatNumber, getLocale, registerComponent, defineAttrs, attrSpec, attrStr } from '../../ln-core';
+import { buildChartModel, parseChartSort, parseChartViewBox } from './chart-model.js';
+
+(function () {
+	const DOM_SELECTOR = 'data-ln-chart';
+	const DOM_ATTRIBUTE = 'lnChart';
+	const DEFAULT_VIEW_BOX = { x: 0, y: 0, width: 1000, height: 320 };
+	if (window[DOM_ATTRIBUTE] !== undefined) return;
+
+	// ─── Attribute Contract (SSOT) ──────────────────────────
+	function _requestData(el) {
+		const instance = el[DOM_ATTRIBUTE];
+		if (!instance) return;
+		instance.requestData();
+	}
+
+	function _renderChart(el) {
+		const instance = el[DOM_ATTRIBUTE];
+		if (!instance) return;
+		instance._render();
+	}
+
+	const ATTRIBUTES = {
+		'data-ln-chart':         { prop: 'name', type: 'string', read: attrStr, fallback: '', effect: _renderChart, description: 'Chart instance name or identifier' },
+		'data-ln-chart-source':  { type: 'string', effect: _requestData, description: 'Source store or coordinator identifier' },
+		'data-ln-chart-sort':    { type: 'string', effect: _requestData, description: 'Field name to sort chart series data by' },
+		'data-ln-chart-type':    { type: 'enum', values: ['line', 'bar', 'area', 'scatter'], fallback: 'line', effect: _renderChart, description: 'Visual chart render type' },
+		'data-ln-chart-x':       { type: 'string', effect: _renderChart, description: 'Field name mapping to X axis' },
+		'data-ln-chart-y':       { type: 'string', effect: _renderChart, description: 'Field name mapping to Y axis' },
+		'data-ln-chart-padding': { type: 'integer', fallback: 20, min: 0, effect: _renderChart, description: 'Internal plot padding in pixels' },
+		'data-ln-chart-zero':    { type: 'boolean', effect: _renderChart, description: 'Forces Y axis scale to start at zero' }
+	};
+	const ATTR_SPEC = attrSpec(ATTRIBUTES);
+
+	function setText(element, value) {
+		if (element) element.textContent = value;
+	}
+
+	function _component(dom) {
+		this.dom = dom;
+		defineAttrs(this, dom, ATTR_SPEC);
+		this.source = dom.getAttribute('data-ln-chart-source') || this.name;
+		this.plot = dom.querySelector('[data-ln-chart-plot]');
+		this.line = dom.querySelector('[data-ln-chart-line]');
+		this.area = dom.querySelector('[data-ln-chart-area]');
+		this.labels = dom.querySelector('[data-ln-chart-labels]');
+		this.empty = dom.querySelector('[data-ln-chart-empty]');
+		this.minimum = dom.querySelector('[data-ln-chart-min]');
+		this.maximum = dom.querySelector('[data-ln-chart-max]');
+		this.count = dom.querySelector('[data-ln-chart-count]');
+		this._data = [];
+		this.model = null;
+		this.isLoaded = false;
+
+		const self = this;
+		this._onSetData = function (event) {
+			const detail = event.detail || {};
+			self._data = Array.isArray(detail.data) ? detail.data : [];
+			self.isLoaded = true;
+			self._setLoading(false);
+			self._render();
+		};
+		this._onSetLoading = function (event) {
+			self._setLoading(!!(event.detail && event.detail.loading));
+		};
+		this._onRefresh = function () {
+			self.requestData();
+		};
+
+		dom.addEventListener('ln-chart:set-data', this._onSetData);
+		dom.addEventListener('ln-chart:set-loading', this._onSetLoading);
+		dom.addEventListener('ln-chart:request-refresh', this._onRefresh);
+
+		this.requestData();
+		return this;
+	}
+
+	_component.prototype._readOptions = function () {
+		const rawPadding = this.dom.getAttribute('data-ln-chart-padding');
+		const parsedPadding = rawPadding === null ? NaN : Number(rawPadding);
+		const type = (this.dom.getAttribute('data-ln-chart-type') || 'line').toLowerCase();
+		return {
+			xField: this.dom.getAttribute('data-ln-chart-x') || 'label',
+			yField: this.dom.getAttribute('data-ln-chart-y') || 'value',
+			includeZero: this.dom.getAttribute('data-ln-chart-zero') !== 'false',
+			padding: Number.isFinite(parsedPadding) && parsedPadding >= 0 ? parsedPadding : 16,
+			type: type === 'area' || type === 'polygon' ? 'area' : 'line',
+			viewBox: this.plot ? (parseChartViewBox(this.plot.getAttribute('viewBox')) || DEFAULT_VIEW_BOX) : DEFAULT_VIEW_BOX
+		};
+	};
+
+	_component.prototype._setLoading = function (loading) {
+		this.dom.classList.toggle('ln-chart--loading', loading);
+		this.dom.setAttribute('aria-busy', loading ? 'true' : 'false');
+	};
+
+	_component.prototype._renderLabels = function (model) {
+		if (!this.labels) return;
+		this.labels.replaceChildren();
+		if (model.count === 0) return;
+
+		const templateName = this.name + '-label';
+		const selector = '[data-ln-template="' + templateName + '"]';
+		if (!this.dom.querySelector(selector) && !document.querySelector(selector)) return;
+
+		const prototype = cloneTemplateScoped(this.dom, templateName, 'ln-chart');
+		if (!prototype) return;
+
+		const locale = getLocale(this.dom);
+		for (const point of model.points) {
+			const clone = prototype.cloneNode(true);
+			fillTemplate(clone, {
+				label: point.label,
+				value: formatNumber(point.value, locale)
+			});
+			this.labels.appendChild(clone);
+		}
+	};
+
+	_component.prototype._render = function () {
+		const options = this._readOptions();
+		const model = buildChartModel(this._data, options);
+		this.model = model;
+
+		if (this.line) {
+			this.line.setAttribute('points', model.linePoints);
+			this.line.toggleAttribute('hidden', model.count === 0);
+		}
+		if (this.area) {
+			this.area.setAttribute('points', model.areaPoints);
+			this.area.toggleAttribute('hidden', model.count === 0 || options.type !== 'area');
+		}
+
+		const isEmpty = model.count === 0;
+		this.dom.classList.toggle('ln-chart--empty', isEmpty);
+		if (this.empty) this.empty.toggleAttribute('hidden', !isEmpty);
+
+		const locale = getLocale(this.dom);
+		setText(this.minimum, formatNumber(model.min, locale));
+		setText(this.maximum, formatNumber(model.max, locale));
+		setText(this.count, formatNumber(model.count, locale));
+		this._renderLabels(model);
+
+		dispatch(this.dom, 'ln-chart:rendered', {
+			chart: this.name,
+			count: model.count,
+			min: model.min,
+			max: model.max
+		});
+	};
+
+	_component.prototype.requestData = function () {
+		this.source = this.dom.getAttribute('data-ln-chart-source') || this.name;
+		dispatch(this.dom, 'ln-chart:request-data', {
+			chart: this.name,
+			source: this.source,
+			sort: parseChartSort(this.dom.getAttribute('data-ln-chart-sort')),
+			filters: {},
+			search: ''
+		});
+	};
+
+	_component.prototype.destroy = function () {
+		if (!this.dom[DOM_ATTRIBUTE]) return;
+		this.dom.removeEventListener('ln-chart:set-data', this._onSetData);
+		this.dom.removeEventListener('ln-chart:set-loading', this._onSetLoading);
+		this.dom.removeEventListener('ln-chart:request-refresh', this._onRefresh);
+		this._data = [];
+		this.model = null;
+		delete this.dom[DOM_ATTRIBUTE];
+	};
+
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-chart', {
+		attributes: ATTRIBUTES
+	});
+})();

package/{js → components}/ln-circular-progress/README.md

@@ -1,7 +1,8 @@
 # ln-circular-progress
 
-> Attribute-driven SVG ring renderer. Set `data-ln-circular-progress="75"` on an
-> empty host; the component builds the SVG, watches the attribute, and redraws on every change. The attribute IS the state — no imperative setter.
+> Applied to an empty host element via `data-ln-circular-progress="value"`. On initialization, it injects an inline `<svg>`
+> ring and a `<strong>` percentage label. An attribute observer watches `data-ln-circular-progress`: it calculates the circle's
+> `stroke-dashoffset` from the clamped percentage, updates `strong.textContent`, and synchronizes `aria-valuenow` on the host.
 
 ## Quick start
 
@@ -26,7 +27,7 @@ The host element must be empty at init — the constructor `appendChild`s the SV
 
 **Size variants** — apply a class to the host: `.sm` (2.5 rem), default (4 rem), `.lg` (6 rem), `.xl` (8 rem). Each rebinds the label font-size.
 
-**Colour variants** — `.success`, `.warning`, `.error` override the fill stroke via `scss/components/_circular-progress.scss`. The default fill reads `--color-accent` and follows the active theme.
+**Colour variants** — `.success`, `.warning`, `.error` override the fill stroke via `theme/components/_circular-progress.scss`. The default fill reads `--color-accent` and follows the active theme.
 
 ## Events
 
@@ -71,7 +72,7 @@ The component sets `aria-hidden="true"` on the constructed `<svg>` — screen re
 | `trackCircle` | `SVGCircleElement` | Background circle (stroke = `--color-border`) |
 | `progressCircle` | `SVGCircleElement` | Fill circle — `stroke-dashoffset` carries the progress |
 | `labelEl` | `HTMLElement` | The `<strong>` element holding the percentage or custom label text |
-| `destroy()` | method | Disconnects the attribute observer, removes the SVG and label from DOM, deletes `el.lnCircularProgress`. Leaves the value attribute, colour class, and size class in place — setting the value attribute again re-instantiates. |
+| `destroy()` | method | Removes the SVG and label from DOM, deletes `el.lnCircularProgress`. Leaves the value attribute, colour class, and size class in place — setting the value attribute again re-instantiates. |
 
 `window.lnCircularProgress(root)` re-runs the init scan over `root`. The shared `registerComponent` observer already covers AJAX inserts; call this manually only for Shadow DOM roots or foreign documents the observer cannot reach.
 
@@ -135,16 +136,16 @@ Include the main Ashlar bundle in your HTML. This bundle registers all Ashlar co
 ### 2. Standalone (Zero-Dependency IIFE)
 If you only need circular progress indicators without the rest of the Ashlar library, load the component's standalone IIFE script:
 ```html
-<script src="js/ln-circular-progress/ln-circular-progress.js" defer></script>
+<script src="components/ln-circular-progress/ln-circular-progress.js" defer></script>
 ```
 
 ### 3. Source & Reference
-* **Active Development Source**: [js/ln-circular-progress/src/ln-circular-progress.js](file:///c:/laragon/www/ln-ashlar/js/ln-circular-progress/src/ln-circular-progress.js) — The source of truth containing the ES module implementation.
-* **Compiled Standalone Release**: [js/ln-circular-progress/ln-circular-progress.js](file:///c:/laragon/www/ln-ashlar/js/ln-circular-progress/ln-circular-progress.js) — The compiled IIFE distribution file.
+* **Active Development Source**: [components/ln-circular-progress/src/ln-circular-progress.js](file:///c:/laragon/www/ln-ashlar/components/ln-circular-progress/src/ln-circular-progress.js) — The source of truth containing the ES module implementation.
+* **Compiled Standalone Release**: [components/ln-circular-progress/ln-circular-progress.js](file:///c:/laragon/www/ln-ashlar/components/ln-circular-progress/ln-circular-progress.js) — The compiled IIFE distribution file.
 
 ## 🔧 Internals
 
-Source: `js/ln-circular-progress/ln-circular-progress.js`. Passive renderer — owns no data; `_render` re-reads all three attributes fresh on every call, no cached value.
+Source: `components/ln-circular-progress/ln-circular-progress.js`. Passive renderer — owns no data; `_render` re-reads all three attributes fresh on every call, no cached value.
 
 ### SVG geometry
 
@@ -156,20 +157,20 @@ Fixed module-level constants: `VIEW_SIZE = 36`, `RADIUS = 16`, `CIRCUMFERENCE =
 - Clamping happens at the percentage level, not the attribute level: `detail.value` stays the raw unclamped number, `detail.percentage` is the 0–100 clamp used for the arc — this is how a consumer distinguishes overshoot from the visible fill.
 - ARIA (`role`, `aria-valuemin/max/now`, `aria-valuetext`) is rewritten on every render on the host element itself, not the SVG (which is `aria-hidden`).
 
-### What the per-instance observer watches
+### Attribute observation
 
-`_listenValues` filters to the three state attributes only — deliberately excluding `class`. Colour/size variants are pure CSS; nothing about the SVG geometry depends on the class, so no JS reaction is needed.
+Attribute mutations (`data-ln-circular-progress`, `-max`, `-label`) are handled by `registerComponent`'s shared observer via `onAttributeChange`, calling `_render` directly without any per-instance MutationObserver. Colour/size variants are pure CSS, so no JS reaction to class changes is needed.
 
 ### Destroy
 
-Disconnects the attribute observer, removes the SVG and label nodes, removes the ARIA attributes it added, deletes `el.lnCircularProgress`. Leaves the value attribute and any classes in place — a later write to the value attribute re-triggers `registerComponent`'s shared observer and rebuilds the instance from scratch (`_buildSvg` is not idempotent; it always appends new nodes).
+Removes the SVG and label nodes, deletes `el.lnCircularProgress`. Leaves the host attributes in place — a later write to the value attribute re-triggers `registerComponent`'s shared observer and rebuilds the instance from scratch (`_buildSvg` is not idempotent; it always appends new nodes).
 
 ---
 
 ## See also
 
-- `@mixin circular-progress` (`scss/config/mixins/_circular-progress.scss`) — SVG layout, fill/track stroke tokens, motion-safe transition, size variant mixins.
-- `scss/components/_circular-progress.scss` — default selector application and the `.success` / `.warning` / `.error` colour variant rules.
+- `@mixin circular-progress` (`theme/config/mixins/_circular-progress.scss`) — SVG layout, fill/track stroke tokens, motion-safe transition, size variant mixins.
+- `theme/components/_circular-progress.scss` — default selector application and the `.success` / `.warning` / `.error` colour variant rules.
 - [`ln-progress`](../ln-progress/README.md) — linear sibling. Same contract shape (`data-ln-progress` + `-max`); supports parent-track shared max.
-- `@mixin loader` (`scss/config/mixins/_loader.scss`) — indeterminate spinner for operations with no known fraction.
+- `@mixin loader` (`theme/config/mixins/_loader.scss`) — indeterminate spinner for operations with no known fraction.
 - [`docs/architecture/data-flow.md`](../../docs/architecture/data-flow.md) — passive renderer pattern used by this component.

package/components/ln-circular-progress/ln-circular-progress-dev.scss

@@ -0,0 +1,8 @@
+@use '../../theme/config/mixins' as *;
+
+[data-ln-debug] {
+	// 1. Identification Check: circular progress should have an id for identification/linking
+	[data-ln-circular-progress]:not([id]) {
+		@include dev-dom-error("[data-ln-circular-progress] is missing an 'id' attribute.");
+	}
+}

package/components/ln-circular-progress/ln-circular-progress.js

@@ -0,0 +1 @@
+(function(){"use strict";function L(){return typeof window>"u"?!1:window.lnDebug===!0||window.lnCore&&window.lnCore._debugSink?!0:typeof document<"u"&&document.body?document.body.hasAttribute("data-ln-debug")||document.body.querySelector("[data-ln-debug]")!==null:!1}function y(e){if(typeof window>"u")return!1;if(window.lnDebug===!0)return!0;if(window.lnCore&&window.lnCore._debugIsContained)return e?window.lnCore._debugIsContained(e):window.lnCore._debugSink!==null;if(e&&e.closest){const t=e.closest("[data-ln-debug]");return!(!t||typeof document<"u"&&t===document.documentElement)}return typeof document<"u"&&document.body?document.body.hasAttribute("data-ln-debug"):!1}if(typeof window<"u"&&(window.lnCore=window.lnCore||{},!window.lnCore._warnBound)){window.lnCore._warnBound=!0;const e=console.warn;console.warn=function(...t){if(typeof t[0]=="string"&&(t[0].startsWith("[ln-")||t[0].startsWith("[lnCore"))){let o=null;for(let l=1;l<t.length;l++)if(t[l]&&t[l].nodeType===1){o=t[l];break}if(!y(o))return}e.apply(console,t)}}function $(e,t,n){const o=n||{};window.lnCore._debugSink&&window.lnCore._debugSink("event",t,e,o),e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:o}))}function m(e,t){if(!document.body){document.addEventListener("DOMContentLoaded",function(){m(e,t)}),console.warn("["+t+'] Script loaded before <body> — add "defer" to your <script> tag');return}e()}const I={};function W(e,t){I[e]=t}function j(e){return I[e]||{ingress:t=>t,egress:t=>t}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=W,window.lnCore.getDataMapper=j);function H(){typeof window>"u"||(window.lnCore=window.lnCore||{},!window.lnCore._localeObserverBound&&(window.lnCore._localeObserverBound=!0,m(function(){new MutationObserver(function(){$(document,"ln-core:locale-change",{})}).observe(document.documentElement,{attributes:!0,attributeFilter:["lang"],subtree:!0})},"ln-core")))}const T={};function U(e,t){if(!e||typeof t!="object")return;const n=e.toLowerCase().split("-")[0];T[n]=t}function Q(e){if(!e)return null;const t=e.toLowerCase().split("-")[0];return T[t]||null}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerLocaleFallback=U,window.lnCore.getLocaleFallback=Q,window.lnCore.ensureLocaleObserver=H);const A={};function K(e,t){A[e]||(A[e]=document.querySelector('[data-ln-template="'+e+'"]'));const n=A[e];return n?n.content.cloneNode(!0):(console.warn("["+(t||"ln-core")+'] Template "'+e+'" not found'),null)}function D(e,t){if(!e||!t)return e;const n=e.querySelectorAll("[data-ln-field]");for(let i=0;i<n.length;i++){const c=n[i],s=c.getAttribute("data-ln-field");t[s]!=null&&(c.textContent=t[s])}const o=e.querySelectorAll("[data-ln-attr]");for(let i=0;i<o.length;i++){const c=o[i],s=c.getAttribute("data-ln-attr").split(",");for(let a=0;a<s.length;a++){const d=s[a].trim().split(":");if(d.length!==2)continue;const u=d[0].trim(),f=d[1].trim();t[f]!=null&&c.setAttribute(u,t[f])}}const l=e.querySelectorAll("[data-ln-show]");for(let i=0;i<l.length;i++){const c=l[i],s=c.getAttribute("data-ln-show");s in t&&c.classList.toggle("hidden",!t[s])}const r=e.querySelectorAll("[data-ln-class]");for(let i=0;i<r.length;i++){const c=r[i],s=c.getAttribute("data-ln-class").split(",");for(let a=0;a<s.length;a++){const d=s[a].trim().split(":");if(d.length!==2)continue;const u=d[0].trim(),f=d[1].trim();f in t&&c.classList.toggle(u,!!t[f])}}return e}function P(e,t){e.matches&&e.matches("[data-ln-form], [data-ln-fillable]")&&(window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",e,t??null),e.dispatchEvent(new CustomEvent("ln-fill",{detail:t??null,bubbles:!0})));const n=e.querySelectorAll("[data-ln-form], [data-ln-fillable]");for(let o=0;o<n.length;o++)window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",n[o],t??null),n[o].dispatchEvent(new CustomEvent("ln-fill",{detail:t??null,bubbles:!0}));return e}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._fillBound||(window.lnCore._fillBound=!0,document.addEventListener("ln-fill",function(e){if(!(!e.target.matches||!e.target.matches("[data-ln-fillable]")))if(e.detail)D(e.target,e.detail);else{const t=e.target.querySelectorAll("[data-ln-field]");for(let n=0;n<t.length;n++)t[n].textContent=""}})));function M(e,t){if(!e||!t)return e;const n=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);for(;n.nextNode();){const r=n.currentNode;r.textContent.indexOf("{{")!==-1&&(r.textContent=r.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(i,c){return t[c]!==void 0?t[c]:""}))}const o=function(r,i){return t[i]!==void 0?t[i]:""},l=Array.from(e.querySelectorAll("*"));e.nodeType===1&&l.push(e);for(let r=0;r<l.length;r++){const i=l[r],c=i.attributes;for(let s=0;s<c.length;s++){const a=c[s];a.value.indexOf("{{")!==-1&&i.setAttribute(a.name,a.value.replace(/\{\{\s*(\w+)\s*\}\}/g,o))}}return e}function G(e,t,n,o,l,r){const i={};for(let s=0;s<e.children.length;s++){const a=e.children[s],d=a.getAttribute("data-ln-render-key");d&&(i[d]=a)}const c=document.createDocumentFragment();for(let s=0;s<t.length;s++){const a=t[s],d=String(o(a));let u=i[d];if(u)l(u,a,s);else{const f=K(n,r);if(!f||(M(f,a),u=f.firstElementChild,!u))continue;u.setAttribute("data-ln-render-key",d),l(u,a,s)}c.appendChild(u)}e.textContent="",e.appendChild(c)}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.fillTemplate=M,window.lnCore.fill=D,window.lnCore.lnFill=P,window.lnCore.renderList=G);function R(e,t,n,o,l){if(!e||t===null)return!0;const r=o||"ln-component",i=e.type;if(i==="trigger"||i==="marker"||i==="string"||i==="list"||!i||t===""&&e.fallback!==void 0)return!0;const c=s=>{l?console.warn(s,l):console.warn(s)};if(i==="boolean"){const s=t.trim().toLowerCase();return s!==""&&s!=="true"&&s!=="false"&&s!=="1"&&s!=="0"?(c(`[${r}] Invalid value "${t}" for boolean attribute "${n}". Allowed: "true", "false", or presence-only.`),!1):!0}if(i==="enum"){const s=e.values||[];return s.includes(t)?!0:(c(`[${r}] Invalid value "${t}" for attribute "${n}". Allowed: ${s.join(", ")}. Fallback: "${e.fallback}".`),!1)}if(i==="integer"){if(!/^-?\d+$/.test(t))return c(`[${r}] Invalid integer "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1;const s=parseInt(t,10);return e.min!==void 0&&s<e.min?(c(`[${r}] Value ${s} for attribute "${n}" is less than min (${e.min}).`),!1):e.max!==void 0&&s>e.max?(c(`[${r}] Value ${s} for attribute "${n}" is greater than max (${e.max}).`),!1):!0}if(i==="float")return isNaN(Number(t))?(c(`[${r}] Invalid float "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1):!0;if(i==="json")try{return JSON.parse(t),!0}catch(s){return c(`[${r}] Invalid JSON for attribute "${n}": ${s.message}. Fallback: ${e.fallback}.`),!1}return!0}function J(e){const t={};for(const n in e){const o=e[n];o&&o.effect&&(t[n]=o.effect)}return Object.keys(t).length?t:null}function X(e){if(e.onAttrChange&&!e.declared)return null;const t=new Set;if(e.effects)for(const n in e.effects)t.add(n);if(e.onAttrChange&&e.declared)for(const n of e.declared)t.add(n);return t}function v(e,t,n,o){if(e.nodeType!==1)return;const r=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",i=Array.from(e.querySelectorAll(r));e.matches&&e.matches(r)&&i.push(e);for(const c of i)if(!c[n]){window.lnCore._persistSink&&c.hasAttribute("data-ln-persist")&&window.lnCore._persistSink(c,t);try{c[n]=new o(c)}catch(s){console.error("["+n+"] init failed",c,s)}}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[]);function Z(){return typeof window<"u"&&window.lnCore&&window.lnCore._bootHolds||0}function z(e){typeof window<"u"?(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[],window.lnCore._bootHolds>0?window.lnCore._bootQueue.push(e):setTimeout(e,0)):e()}function F(){window.lnCore=window.lnCore||{};const e=window.lnCore._attrRegistry=window.lnCore._attrRegistry||{byAttr:new Map,reactive:[],persist:[]};return e.byReactive=e.byReactive||new Map,e.reactiveWildcard=e.reactiveWildcard||[],e}function Y(e){const t=F(),n=e.observed||[];for(let o=0;o<n.length;o++){const l=n[o];t.byAttr.has(l)||t.byAttr.set(l,[]),t.byAttr.get(l).push(e)}if(t.byDeclaredAttr=t.byDeclaredAttr||new Map,e.attributes)for(const o in e.attributes){t.byDeclaredAttr.has(o)||t.byDeclaredAttr.set(o,[]);const l=t.byDeclaredAttr.get(o);l.some(r=>r.componentTag===e.componentTag)||l.push({spec:e.attributes[o],componentTag:e.componentTag})}if(e.onAttrChange||e.effects){t.reactive.push(e);const o=X(e);if(o===null)t.reactiveWildcard.push(e);else for(const l of o)t.byReactive.has(l)||t.byReactive.set(l,[]),t.byReactive.get(l).push(e)}e.persist&&t.persist.push(e)}function q(e,t,n,o){for(let l=0;l<e.length;l++){const r=e[l];if(!t[r.attribute])continue;const i=r.effects&&r.effects[n];i?i(t,n,o):r.onAttrChange&&(!r.declared||r.declared.has(n))&&r.onAttrChange(t,n,o)}}function ee(e){const t=e.target,n=e.attributeName;if(e.oldValue===t.getAttribute(n))return;const o=F(),l=o.byAttr.get(n);if(L()&&o.byDeclaredAttr&&o.byDeclaredAttr.has(n)&&y(t)){const r=o.byDeclaredAttr.get(n),i=t.getAttribute(n);for(let c=0;c<r.length;c++)R(r[c].spec,i,n,r[c].componentTag,t)}if(window.lnCore._debugSink&&(n.indexOf("data-ln-")===0||l)&&window.lnCore._debugSink("attr",n,t,{oldValue:e.oldValue,newValue:t.getAttribute(n)}),n.indexOf("data-ln-")===0){const r=o.byReactive.get(n);r&&q(r,t,n,e.oldValue),o.reactiveWildcard.length&&q(o.reactiveWildcard,t,n,e.oldValue)}if(l)for(let r=0;r<l.length;r++){const i=l[r];if(i.handler){i.handler(t,n,e.oldValue);continue}i.onAttributeChange&&t[i.attribute]?i.onAttributeChange(t,n):(v(t,i.selector,i.attribute,i.ComponentFn),i.onInit&&i.onInit(t))}}function te(){window.lnCore=window.lnCore||{},!window.lnCore._attrObserverBound&&(window.lnCore._attrObserverBound=!0,m(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++)try{ee(t[n])}catch(o){console.error("[ln-core] mutation handler failed",t[n].target,o)}}).observe(document.body,{attributes:!0,subtree:!0,attributeOldValue:!0})},"ln-core"))}function B(){return window.lnCore=window.lnCore||{},window.lnCore._lifecycleRegistry=window.lnCore._lifecycleRegistry||[]}function ne(e){const t=B();if(t.length){if(e.target)for(let n=0;n<t.length;n++){const o=t[n];if(o.onSubtreeChange){const l=o.query,r=e.target.nodeType===1?e.target.matches(l)?e.target:e.target.closest(l):e.target.parentElement?e.target.parentElement.closest(l):null;r&&o.onSubtreeChange(r,e)}}for(let n=0;n<e.addedNodes.length;n++){const o=e.addedNodes[n];if(o.nodeType===1)for(let l=0;l<t.length;l++){const r=t[l];v(o,r.selector,r.attribute,r.ComponentFn),r.onInit&&r.onInit(o)}}for(let n=0;n<e.removedNodes.length;n++){const o=e.removedNodes[n];if(o.nodeType===1)for(let l=0;l<t.length;l++){const r=t[l],i=r.query,c=Array.from(o.querySelectorAll(i));o.matches&&o.matches(i)&&c.push(o);for(let s=0;s<c.length;s++){const a=c[s];if(!document.contains(a)){const d=a[r.attribute];if(d&&typeof d.destroy=="function")try{d.destroy()}catch(u){console.error("["+r.attribute+"] destroy failed",a,u)}delete a[r.attribute]}}}}}}function re(){window.lnCore=window.lnCore||{},!window.lnCore._lifecycleObserverBound&&(window.lnCore._lifecycleObserverBound=!0,m(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++){const o=t[n];if(o.type==="childList")try{ne(o)}catch(l){console.error("[ln-core] lifecycle handler failed",o.target,l)}}}).observe(document.body,{childList:!0,subtree:!0})},"ln-core"))}function oe(e,t,n,o,l={}){const r=l.extraAttributes||[],i=l.onAttributeChange||null,c=l.onSubtreeChange||null,s=l.onInit||null,a=l.onAttrChange||null,d=l.effects||null,u=l.attributes||null,f=u?J(u):d,b=u?new Set(Object.keys(u)):null,w=l.persist||null;function g(k){const h=k||document.body;if(v(h,e,t,n),u&&L())for(const C in u){const be=u[C],x=Array.from(h.querySelectorAll("["+C+"]"));h.matches&&h.matches("["+C+"]")&&x.push(h);for(let E=0;E<x.length;E++){const O=x[E];y(O)&&R(be,O.getAttribute(C),C,o,O)}}s&&s(h)}const p=[];if(e.indexOf("[")!==-1){const k=/\[([\w-]+)/g;let h;for(;(h=k.exec(e))!==null;)p.push(h[1])}else p.push(e);Y({selector:e,attribute:t,componentTag:o,attributes:u,ComponentFn:n,onInit:s,observed:p.concat(r),onAttributeChange:i,onAttrChange:a,effects:f,declared:b,persist:w}),te();const he=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]";B().push({selector:e,attribute:t,ComponentFn:n,onInit:s,onSubtreeChange:c,query:he}),re(),window[t]=g;function N(){Z()>0?z(function(){g(document.body)}):g(document.body)}return document.readyState==="loading"?document.addEventListener("DOMContentLoaded",N):N(),g}function V(e){return(e||"").replace(/^#/,"")}function _(e){const t=e===void 0?location.hash:e,n={},o=V(t);if(!o)return n;const l=o.split("&");for(let r=0;r<l.length;r++){const i=l[r];if(!i)continue;const c=i.indexOf(":"),s=c>-1?i.slice(0,c):i,a=c>-1?i.slice(c+1):"";if(s)try{n[s]=decodeURIComponent(a)}catch{n[s]=a}}return n}function ie(e){if(!e)return null;const t=_();return e in t?t[e]:null}function le(e,t){if(!e)return;const n=_();t==null?delete n[e]:n[e]=String(t);const l=Object.keys(n).map(function(r){const i=n[r];return i===""?r:r+":"+encodeURIComponent(i)}).join("&");V(location.hash)!==l&&(location.hash=l)}function se(e){return e.button===1||e.ctrlKey||e.metaKey||e.shiftKey?!1:(e.preventDefault(),!0)}function ce(e,t){if(!e||!e.hasAttribute("data-ln-hash"))return null;const n=e.getAttribute("data-ln-hash");if(n&&n.trim()!=="")return n.trim();const o=e.getAttribute("data-ln-sort")||e.getAttribute("data-ln-search-for")||e.getAttribute("data-ln-search")||e.getAttribute("data-ln-filter")||e.id;return o?t?o+"-"+t:o:t||null}function ae(e,t){return!t||t==="none"||e===null||e===void 0?null:String(e)+"."+t}function ue(e){return!e||typeof e!="string"?null:e.endsWith(".asc")?{fieldOrColumn:e.slice(0,-4),direction:"asc"}:e.endsWith(".desc")?{fieldOrColumn:e.slice(0,-5),direction:"desc"}:null}function de(e,t){return!e||!Array.isArray(t)||t.length===0?null:e+":"+t.map(encodeURIComponent).join(",")}function fe(e){if(!e||typeof e!="string")return null;const t=e.indexOf(":");if(t===-1)return null;const n=e.slice(0,t),o=e.slice(t+1),l=o?o.split(",").map(function(r){try{return decodeURIComponent(r)}catch{return r}}).filter(Boolean):[];return{key:n,values:l}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=_,window.lnCore.hashGet=ie,window.lnCore.hashSet=le,window.lnCore.hashLinkClick=se,window.lnCore.resolveHashNamespace=ce,window.lnCore.hashSortEncode=ae,window.lnCore.hashSortDecode=ue,window.lnCore.hashFilterEncode=de,window.lnCore.hashFilterDecode=fe);function we(e,t=100,n=0){const o=parseFloat(String(e))||0,l=parseFloat(String(t))||100,r=parseFloat(String(n))||0,i=Math.max(r,Math.min(o,l)),c=l-r;let s=0;return c>0&&(s=(i-r)/c*100),s=Math.max(0,Math.min(100,s)),{value:o,min:r,max:l,clampedValue:i,percentage:s}}(function(){const e="data-ln-circular-progress",t="lnCircularProgress";if(window[t]!==void 0)return;function n(f){const b=f[t];b&&u.call(b)}const o={"data-ln-circular-progress":{type:"float",fallback:0,min:0,effect:n,description:"Current circular progress value"},"data-ln-circular-progress-max":{type:"float",fallback:100,min:0,effect:n,description:"Maximum circular progress scale value"},"data-ln-circular-progress-label":{type:"string",effect:n,description:"Text label format or template inside circular progress"}},l="http://www.w3.org/2000/svg",r=36,i=16,c=2*Math.PI*i;function s(f){return this.dom=f,this.svg=null,this.trackCircle=null,this.progressCircle=null,this.labelEl=null,d.call(this),u.call(this),this}s.prototype.destroy=function(){this.dom[t]&&(this.svg&&this.svg.remove(),this.labelEl&&this.labelEl.remove(),delete this.dom[t])};function a(f,b){const w=document.createElementNS(l,f);for(const[g,p]of Object.entries(b))w.setAttribute(g,p);return w}function d(){this.svg=a("svg",{viewBox:"0 0 "+r+" "+r,width:r,height:r}),this.svg.classList.add("ln-circular-progress__svg"),this.trackCircle=a("circle",{cx:r/2,cy:r/2,r:i,fill:"none","stroke-width":"3"}),this.trackCircle.classList.add("ln-circular-progress__track"),this.progressCircle=a("circle",{cx:r/2,cy:r/2,r:i,fill:"none","stroke-width":"3","stroke-linecap":"round","stroke-dasharray":c,"stroke-dashoffset":c,transform:"rotate(-90 "+r/2+" "+r/2+")"}),this.progressCircle.classList.add("ln-circular-progress__fill"),this.svg.appendChild(this.trackCircle),this.svg.appendChild(this.progressCircle),this.labelEl=document.createElement("strong"),this.labelEl.classList.add("ln-circular-progress__label"),this.dom.appendChild(this.svg),this.dom.appendChild(this.labelEl)}function u(){const f=this.dom.getAttribute("data-ln-circular-progress"),b=this.dom.getAttribute("data-ln-circular-progress-max"),w=we(f,b||100),g=c-w.percentage/100*c;this.progressCircle.setAttribute("stroke-dashoffset",g);const p=this.dom.getAttribute("data-ln-circular-progress-label"),S=p!==null?p:Math.round(w.percentage)+"%";this.labelEl.textContent=S,this.dom.setAttribute("role","progressbar"),this.dom.setAttribute("aria-valuemin",String(w.min)),this.dom.setAttribute("aria-valuemax",String(w.max)),this.dom.setAttribute("aria-valuenow",String(w.clampedValue)),this.dom.setAttribute("aria-valuetext",S),$(this.dom,"ln-circular-progress:change",{target:this.dom,value:w.value,max:w.max,percentage:w.percentage})}oe(e,t,s,"ln-circular-progress",{attributes:o})})()})();

package/components/ln-circular-progress/ln-circular-progress.schema.json

@@ -0,0 +1,42 @@
+{
+	"$comment": "This file is partly generated. The $comment, component, generator, and each attribute's direction, sources, type, values, fallback, and description keys are owned by the generator and synchronized from JS source code. All other keys are preserved and safe to hand-author. Regenerate with `npm run sync:ln-schemas`.",
+	"component": "ln-circular-progress",
+	"generator": "scripts/sync-ln-schemas.mjs",
+	"attributes": {
+		"data-ln-circular-progress": {
+			"direction": "author",
+			"sources": [
+				"ln-circular-progress-dev.scss",
+				"src/ln-circular-progress.js"
+			],
+			"type": "float",
+			"fallback": 0,
+			"min": 0,
+			"description": "Current circular progress value"
+		},
+		"data-ln-circular-progress-label": {
+			"direction": "author",
+			"sources": [
+				"src/ln-circular-progress.js"
+			],
+			"type": "string",
+			"description": "Text label format or template inside circular progress"
+		},
+		"data-ln-circular-progress-max": {
+			"direction": "author",
+			"sources": [
+				"src/ln-circular-progress.js"
+			],
+			"type": "float",
+			"fallback": 100,
+			"min": 0,
+			"description": "Maximum circular progress scale value"
+		},
+		"data-ln-debug": {
+			"direction": null,
+			"sources": [
+				"ln-circular-progress-dev.scss"
+			]
+		}
+	}
+}

package/{js → components}/ln-circular-progress/src/ln-circular-progress.js

@@ -1,4 +1,4 @@
-import { dispatch, registerComponent } from '../../ln-core';
+import { calculateProgress, dispatch, registerComponent } from '../../ln-core';
 
 (function () {
 	const DOM_SELECTOR = 'data-ln-circular-progress';
@@ -6,6 +6,18 @@ import { dispatch, registerComponent } from '../../ln-core';
 
 	if (window[DOM_ATTRIBUTE] !== undefined) return;
 
+	function _syncAttribute(el) {
+		const inst = el[DOM_ATTRIBUTE];
+		if (inst) _render.call(inst);
+	}
+
+	// ─── Attribute Contract (SSOT) ──────────────────────────
+	const ATTRIBUTES = {
+		'data-ln-circular-progress':       { type: 'float', fallback: 0, min: 0, effect: _syncAttribute, description: 'Current circular progress value' },
+		'data-ln-circular-progress-max':   { type: 'float', fallback: 100, min: 0, effect: _syncAttribute, description: 'Maximum circular progress scale value' },
+		'data-ln-circular-progress-label': { type: 'string', effect: _syncAttribute, description: 'Text label format or template inside circular progress' }
+	};
+
 	const SVG_NS = 'http://www.w3.org/2000/svg';
 	const VIEW_SIZE = 36;
 	const RADIUS = 16;
@@ -17,36 +29,26 @@ import { dispatch, registerComponent } from '../../ln-core';
 		this.trackCircle = null;
 		this.progressCircle = null;
 		this.labelEl = null;
-		this._attrObserver = null;
 		_buildSvg.call(this);
 		_render.call(this);
-		_listenValues.call(this);
 		return this;
 	}
 
 	_constructor.prototype.destroy = function () {
 		if (!this.dom[DOM_ATTRIBUTE]) return;
-		if (this._attrObserver) {
-			this._attrObserver.disconnect();
-		}
 		if (this.svg) {
 			this.svg.remove();
 		}
 		if (this.labelEl) {
 			this.labelEl.remove();
 		}
-		this.dom.removeAttribute('role');
-		this.dom.removeAttribute('aria-valuemin');
-		this.dom.removeAttribute('aria-valuemax');
-		this.dom.removeAttribute('aria-valuenow');
-		this.dom.removeAttribute('aria-valuetext');
 		delete this.dom[DOM_ATTRIBUTE];
 	};
 
 	function _createSvgElement(tag, attrs) {
 		const el = document.createElementNS(SVG_NS, tag);
-		for (const key in attrs) {
-			el.setAttribute(key, attrs[key]);
+		for (const [key, val] of Object.entries(attrs)) {
+			el.setAttribute(key, val);
 		}
 		return el;
 	}
@@ -54,8 +56,10 @@ import { dispatch, registerComponent } from '../../ln-core';
 	function _buildSvg() {
 		this.svg = _createSvgElement('svg', {
 			viewBox: '0 0 ' + VIEW_SIZE + ' ' + VIEW_SIZE,
-			'aria-hidden': 'true'
+			width: VIEW_SIZE,
+			height: VIEW_SIZE
 		});
+		this.svg.classList.add('ln-circular-progress__svg');
 
 		this.trackCircle = _createSvgElement('circle', {
 			cx: VIEW_SIZE / 2,
@@ -89,58 +93,36 @@ import { dispatch, registerComponent } from '../../ln-core';
 		this.dom.appendChild(this.labelEl);
 	}
 
-	function _listenValues() {
-		const self = this;
-		const observer = new MutationObserver(function (mutations) {
-			for (const mutation of mutations) {
-				if (mutation.attributeName === 'data-ln-circular-progress' ||
-					mutation.attributeName === 'data-ln-circular-progress-max' ||
-					mutation.attributeName === 'data-ln-circular-progress-label') {
-					_render.call(self);
-				}
-			}
-		});
-
-		observer.observe(this.dom, {
-			attributes: true,
-			attributeFilter: ['data-ln-circular-progress', 'data-ln-circular-progress-max', 'data-ln-circular-progress-label']
-		});
-
-		this._attrObserver = observer;
-	}
-
 	function _render() {
-		const value = parseFloat(this.dom.getAttribute('data-ln-circular-progress')) || 0;
-		const max = parseFloat(this.dom.getAttribute('data-ln-circular-progress-max')) || 100;
-		let percentage = (max > 0) ? (value / max) * 100 : 0;
-
-		if (percentage < 0) percentage = 0;
-		if (percentage > 100) percentage = 100;
+		const rawVal = this.dom.getAttribute('data-ln-circular-progress');
+		const rawMax = this.dom.getAttribute('data-ln-circular-progress-max');
+		const result = calculateProgress(rawVal, rawMax || 100);
 
-		const offset = CIRCUMFERENCE - (percentage / 100) * CIRCUMFERENCE;
+		const offset = CIRCUMFERENCE - (result.percentage / 100) * CIRCUMFERENCE;
 		this.progressCircle.setAttribute('stroke-dashoffset', offset);
 
 		const label = this.dom.getAttribute('data-ln-circular-progress-label');
-		const labelText = label !== null ? label : Math.round(percentage) + '%';
+		const labelText = label !== null ? label : Math.round(result.percentage) + '%';
 		this.labelEl.textContent = labelText;
 
 		// Sync ARIA properties
 		this.dom.setAttribute('role', 'progressbar');
-		this.dom.setAttribute('aria-valuemin', '0');
-		this.dom.setAttribute('aria-valuemax', String(max));
-		const clampedValue = Math.max(0, Math.min(value, max));
-		this.dom.setAttribute('aria-valuenow', String(clampedValue));
+		this.dom.setAttribute('aria-valuemin', String(result.min));
+		this.dom.setAttribute('aria-valuemax', String(result.max));
+		this.dom.setAttribute('aria-valuenow', String(result.clampedValue));
 		this.dom.setAttribute('aria-valuetext', labelText);
 
 		dispatch(this.dom, 'ln-circular-progress:change', {
 			target: this.dom,
-			value: value,
-			max: max,
-			percentage: percentage
+			value: result.value,
+			max: result.max,
+			percentage: result.percentage
 		});
 	}
 
 	// ─── Init ──────────────────────────────────────────────────
 
-	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _constructor, 'ln-circular-progress');
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _constructor, 'ln-circular-progress', {
+		attributes: ATTRIBUTES
+	});
 })();