@livenetworks/ashlar 1.6.1 → 2.0.0

package/components/ln-chart/README.md

@@ -0,0 +1,145 @@
+# `ln-chart`
+
+> Applied to a container element (`<figure data-ln-chart="name" data-ln-chart-source="sales">`) containing an SVG canvas (`<svg data-ln-chart-plot>`). It listens for `ln-chart:set-data` events dispatched by `ln-data-coordinator`, calculates linear coordinates within the authored `viewBox`, and updates the geometry of child `<polyline data-ln-chart-line>` and `<polygon data-ln-chart-area>` elements. It holds no private data caches, acting purely as a presentational SVG renderer driven by CSS custom properties.
+
+A zero-dependency, responsive SVG dataset renderer for `ln-ashlar`. It is the
+chart equivalent of `ln-table` / `ln-list`: the component owns only its SVG DOM
+and rendering state, while `ln-data-coordinator` owns local-store and API
+routing.
+
+The first contract supports a single numeric series rendered as a `line` or an
+`area` (`polygon` is accepted as an alias). SVG geometry is calculated in the
+authored `viewBox`; presentation is controlled entirely by CSS custom
+properties.
+
+## Data-coordinator example
+
+```html
+<ul data-ln-data-coordinator="sales" hidden>
+  <li data-ln-data-store="sales"></li>
+  <li data-ln-api-connector data-ln-api-endpoint="/api/sales"></li>
+</ul>
+
+<figure id="monthly-revenue"
+        class="chart"
+        data-ln-chart="monthly-revenue"
+        data-ln-chart-source="sales"
+        data-ln-chart-x="month"
+        data-ln-chart-y="revenue"
+        data-ln-chart-sort="month:asc"
+        data-ln-chart-type="area">
+  <figcaption id="monthly-revenue-title">Monthly revenue</figcaption>
+
+  <svg class="chart__plot"
+       data-ln-chart-plot
+       viewBox="0 0 1000 320"
+       role="img"
+       aria-labelledby="monthly-revenue-title"
+       preserveAspectRatio="none">
+    <polygon class="chart__area" data-ln-chart-area hidden></polygon>
+    <polyline class="chart__line" data-ln-chart-line></polyline>
+  </svg>
+
+  <ol class="chart__labels" data-ln-chart-labels></ol>
+  <template data-ln-template="monthly-revenue-label">
+    <li class="chart__label">
+      <span>{{ label }}</span>
+      <strong>{{ value }}</strong>
+    </li>
+  </template>
+
+  <p class="chart__empty" data-ln-chart-empty hidden>No chart data available.</p>
+  <dl class="chart__summary">
+    <div><dt>Minimum</dt><dd data-ln-chart-min></dd></div>
+    <div><dt>Maximum</dt><dd data-ln-chart-max></dd></div>
+    <div><dt>Points</dt><dd data-ln-chart-count></dd></div>
+  </dl>
+</figure>
+```
+
+The dataset may come from IndexedDB or the connector. Records are expected to
+contain the configured x/y fields, for example:
+
+```json
+[
+  { "month": "Jan", "revenue": 1200 },
+  { "month": "Feb", "revenue": 1850 },
+  { "month": "Mar", "revenue": 1630 }
+]
+```
+
+## Attributes
+
+| Attribute | Description |
+|---|---|
+| `data-ln-chart="<name>"` | Component name and event identity. |
+| `data-ln-chart-source="<source>"` | `id` of the `ln-data-store` this chart binds to. |
+| `data-ln-chart-x="<field>"` | Record field used as the ordered category label. |
+| `data-ln-chart-y="<field>"` | Record field containing the numeric value. Invalid/non-numeric records are ignored. |
+| `data-ln-chart-type="line\|area\|polygon"` | Rendering mode. Default `line`; `polygon` aliases `area`. |
+| `data-ln-chart-sort="field:asc\|desc"` | Optional store/API sort passed with `request-data`. |
+| `data-ln-chart-padding="N"` | Inner SVG viewBox padding. Default `16`. |
+| `data-ln-chart-zero="false"` | Opt out of the default zero-inclusive y domain. |
+
+## Authored child roles
+
+| Attribute | Expected element | Purpose |
+|---|---|---|
+| `data-ln-chart-plot` | `<svg viewBox="…">` | Responsive plotting surface. |
+| `data-ln-chart-line` | `<polyline>` | Line geometry target. Required for both modes. |
+| `data-ln-chart-area` | `<polygon>` | Optional area fill target. |
+| `data-ln-chart-labels` | List/container | Optional x-label destination. Uses `{chartName}-label` template. |
+| `data-ln-chart-empty` | Authored empty-state element | Shown only when no valid values exist. |
+| `data-ln-chart-min/max/count` | Authored text elements | Optional numeric summary destinations. |
+
+## Events
+
+### Emitted
+
+- `ln-chart:request-data` `{ chart, source, sort, filters, search }` — asks the
+  coordinator for records.
+- `ln-chart:rendered` `{ chart, count, min, max }` — geometry and optional
+  labels have been updated.
+
+### Listened
+
+- `ln-chart:set-data` `{ data, total?, filtered? }` — replaces the current
+  dataset and renders it.
+- `ln-chart:set-loading` `{ loading }` — toggles `aria-busy` and the
+  `ln-chart--loading` state class.
+- `ln-chart:request-refresh` — asks the component to issue its data query again.
+
+## CSS custom properties
+
+The `.chart` mixin exposes:
+
+- `--chart-height`
+- `--chart-gap`
+- `--chart-radius`
+- `--chart-line-color`
+- `--chart-line-width`
+- `--chart-area-color`
+- `--chart-grid-color`
+- `--chart-grid-column-size`
+- `--chart-grid-row-size`
+- `--chart-label-color`
+
+Override variables on the chart instance; do not override internal selectors:
+
+```css
+#monthly-revenue {
+  --chart-height: 24rem;
+  --chart-line-color: hsl(var(--color-success));
+  --chart-area-color: hsl(var(--color-success) / 0.14);
+}
+```
+
+## Architecture notes
+
+- `ln-chart` never imports or reads `ln-data-store` or a connector.
+- The SVG skeleton, labels template, empty state, caption, and summary are
+  authored HTML. JavaScript updates only data geometry and bound text.
+- The runtime has no charting dependency. Scaling lives in the pure
+  `src/chart-model.js` module and is covered by Node behavioral tests.
+- The v1 contract intentionally excludes multi-series legends, interaction,
+  and tooltips. Those can be composed later without changing the read protocol.

package/components/ln-chart/ln-chart-dev.scss

@@ -0,0 +1,20 @@
+@use '../../theme/config/mixins' as *;
+
+[data-ln-debug] {
+	[data-ln-chart]:not(.chart) {
+		@include dev-dom-error("[data-ln-chart] is missing the required .chart visual class.");
+	}
+
+	[data-ln-chart]:not([data-ln-chart-x]),
+	[data-ln-chart]:not([data-ln-chart-y]) {
+		@include dev-dom-error("[data-ln-chart] requires data-ln-chart-x and data-ln-chart-y.");
+	}
+
+	[data-ln-chart]:not(:has([data-ln-chart-plot][viewBox])) {
+		@include dev-dom-error("[data-ln-chart] requires [data-ln-chart-plot] with an SVG viewBox.");
+	}
+
+	[data-ln-chart]:not(:has([data-ln-chart-line])) {
+		@include dev-dom-error("[data-ln-chart] requires an authored [data-ln-chart-line] polyline.");
+	}
+}

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

@@ -0,0 +1 @@
+(function(){"use strict";function R(){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 O(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 r=null;for(let o=1;o<t.length;o++)if(t[o]&&t[o].nodeType===1){r=t[o];break}if(!O(r))return}e.apply(console,t)}}function E(e,t,n){const r=n||{};window.lnCore._debugSink&&window.lnCore._debugSink("event",t,e,r),e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:r}))}function k(e,t){if(!document.body){document.addEventListener("DOMContentLoaded",function(){k(e,t)}),console.warn("["+t+'] Script loaded before <body> — add "defer" to your <script> tag');return}e()}const j={};function z(e,t){j[e]=t}function X(e){return j[e]||{ingress:t=>t,egress:t=>t}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=z,window.lnCore.getDataMapper=X);function W(e){const t=e?e.closest("[lang]"):null,n=(t?t.getAttribute("lang")||t.lang:null)||(typeof document<"u"&&document.documentElement?document.documentElement.getAttribute("lang")||document.documentElement.lang:null)||(typeof navigator<"u"?navigator.language:null);return n?n.trim():"en-US"}function Z(){typeof window>"u"||(window.lnCore=window.lnCore||{},!window.lnCore._localeObserverBound&&(window.lnCore._localeObserverBound=!0,k(function(){new MutationObserver(function(){E(document,"ln-core:locale-change",{})}).observe(document.documentElement,{attributes:!0,attributeFilter:["lang"],subtree:!0})},"ln-core")))}const V={};function ee(e,t){if(!e||typeof t!="object")return;const n=e.toLowerCase().split("-")[0];V[n]=t}function te(e){if(!e)return null;const t=e.toLowerCase().split("-")[0];return V[t]||null}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerLocaleFallback=ee,window.lnCore.getLocaleFallback=te,window.lnCore.ensureLocaleObserver=Z);const F={};function P(e,t){F[e]||(F[e]=document.querySelector('[data-ln-template="'+e+'"]'));const n=F[e];return n?n.content.cloneNode(!0):(console.warn("["+(t||"ln-core")+'] Template "'+e+'" not found'),null)}function ne(e,t,n){if(e){const r=e.querySelector('[data-ln-template="'+t+'"]');if(r)return r.content.cloneNode(!0)}return P(t,n)}function H(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],a=c.getAttribute("data-ln-field");t[a]!=null&&(c.textContent=t[a])}const r=e.querySelectorAll("[data-ln-attr]");for(let i=0;i<r.length;i++){const c=r[i],a=c.getAttribute("data-ln-attr").split(",");for(let s=0;s<a.length;s++){const u=a[s].trim().split(":");if(u.length!==2)continue;const d=u[0].trim(),f=u[1].trim();t[f]!=null&&c.setAttribute(d,t[f])}}const o=e.querySelectorAll("[data-ln-show]");for(let i=0;i<o.length;i++){const c=o[i],a=c.getAttribute("data-ln-show");a in t&&c.classList.toggle("hidden",!t[a])}const l=e.querySelectorAll("[data-ln-class]");for(let i=0;i<l.length;i++){const c=l[i],a=c.getAttribute("data-ln-class").split(",");for(let s=0;s<a.length;s++){const u=a[s].trim().split(":");if(u.length!==2)continue;const d=u[0].trim(),f=u[1].trim();f in t&&c.classList.toggle(d,!!t[f])}}return e}function re(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 r=0;r<n.length;r++)window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",n[r],t??null),n[r].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)H(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 q(e,t){if(!e||!t)return e;const n=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);for(;n.nextNode();){const l=n.currentNode;l.textContent.indexOf("{{")!==-1&&(l.textContent=l.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(i,c){return t[c]!==void 0?t[c]:""}))}const r=function(l,i){return t[i]!==void 0?t[i]:""},o=Array.from(e.querySelectorAll("*"));e.nodeType===1&&o.push(e);for(let l=0;l<o.length;l++){const i=o[l],c=i.attributes;for(let a=0;a<c.length;a++){const s=c[a];s.value.indexOf("{{")!==-1&&i.setAttribute(s.name,s.value.replace(/\{\{\s*(\w+)\s*\}\}/g,r))}}return e}function oe(e,t,n,r,o,l){const i={};for(let a=0;a<e.children.length;a++){const s=e.children[a],u=s.getAttribute("data-ln-render-key");u&&(i[u]=s)}const c=document.createDocumentFragment();for(let a=0;a<t.length;a++){const s=t[a],u=String(r(s));let d=i[u];if(d)o(d,s,a);else{const f=P(n,l);if(!f||(q(f,s),d=f.firstElementChild,!d))continue;d.setAttribute("data-ln-render-key",u),o(d,s,a)}c.appendChild(d)}e.textContent="",e.appendChild(c)}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.fillTemplate=q,window.lnCore.fill=H,window.lnCore.lnFill=re,window.lnCore.renderList=oe);function N(e,t,n){const r=e.getAttribute(t);return r===null?n:r}function ie(e,t,n){const r=parseInt(e.getAttribute(t),10);return isNaN(r)?n:r}function le(e,t,n=!1){const r=e.getAttribute(t);if(r===null)return!!n;const o=r.trim().toLowerCase();return!(o==="false"||o==="0")}function ae(e,t){return(e.getAttribute(t)||"").split(",").map(n=>n.trim()).filter(Boolean)}const I=new Map;function se(e,t){const n=(e?e.join("|"):"")+"::"+t;if(I.has(n))return I.get(n);const r=new Set(e||[]),o=function(l,i){const c=l.getAttribute(i);return c!==null&&r.has(c)?c:t};return I.set(n,o),o}function ce(e,t,n){const r=parseFloat(e.getAttribute(t));return isNaN(r)?n:r}function ue(e,t,n){const r=e.getAttribute(t);if(!r)return n;try{return JSON.parse(r)}catch{return n}}function U(e,t,n,r,o){if(!e||t===null)return!0;const l=r||"ln-component",i=e.type;if(i==="trigger"||i==="marker"||i==="string"||i==="list"||!i||t===""&&e.fallback!==void 0)return!0;const c=a=>{o?console.warn(a,o):console.warn(a)};if(i==="boolean"){const a=t.trim().toLowerCase();return a!==""&&a!=="true"&&a!=="false"&&a!=="1"&&a!=="0"?(c(`[${l}] Invalid value "${t}" for boolean attribute "${n}". Allowed: "true", "false", or presence-only.`),!1):!0}if(i==="enum"){const a=e.values||[];return a.includes(t)?!0:(c(`[${l}] Invalid value "${t}" for attribute "${n}". Allowed: ${a.join(", ")}. Fallback: "${e.fallback}".`),!1)}if(i==="integer"){if(!/^-?\d+$/.test(t))return c(`[${l}] Invalid integer "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1;const a=parseInt(t,10);return e.min!==void 0&&a<e.min?(c(`[${l}] Value ${a} for attribute "${n}" is less than min (${e.min}).`),!1):e.max!==void 0&&a>e.max?(c(`[${l}] Value ${a} for attribute "${n}" is greater than max (${e.max}).`),!1):!0}if(i==="float")return isNaN(Number(t))?(c(`[${l}] Invalid float "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1):!0;if(i==="json")try{return JSON.parse(t),!0}catch(a){return c(`[${l}] Invalid JSON for attribute "${n}": ${a.message}. Fallback: ${e.fallback}.`),!1}return!0}function de(e,t,n){for(const r in n){const[o,l,i]=n[r];Object.defineProperty(e,r,{get:function(){return o(t,l,i)},enumerable:!0,configurable:!0})}return e}function fe(e){const t={};for(const n in e){const r=e[n];if(!r||!r.prop)continue;let o=r.read;if(!o&&r.type)switch(r.type){case"enum":o=se(r.values,r.fallback);break;case"integer":o=ie;break;case"float":o=ce;break;case"boolean":o=le;break;case"list":o=ae;break;case"json":o=ue;break;case"string":default:o=N;break}o||(o=N),t[r.prop]=[o,n,r.fallback]}return t}function he(e){const t={};for(const n in e){const r=e[n];r&&r.effect&&(t[n]=r.effect)}return Object.keys(t).length?t:null}function ge(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 T(e,t,n,r){if(e.nodeType!==1)return;const l=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",i=Array.from(e.querySelectorAll(l));e.matches&&e.matches(l)&&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 r(c)}catch(a){console.error("["+n+"] init failed",c,a)}}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[]);function we(){return typeof window<"u"&&window.lnCore&&window.lnCore._bootHolds||0}function be(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 K(){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 pe(e){const t=K(),n=e.observed||[];for(let r=0;r<n.length;r++){const o=n[r];t.byAttr.has(o)||t.byAttr.set(o,[]),t.byAttr.get(o).push(e)}if(t.byDeclaredAttr=t.byDeclaredAttr||new Map,e.attributes)for(const r in e.attributes){t.byDeclaredAttr.has(r)||t.byDeclaredAttr.set(r,[]);const o=t.byDeclaredAttr.get(r);o.some(l=>l.componentTag===e.componentTag)||o.push({spec:e.attributes[r],componentTag:e.componentTag})}if(e.onAttrChange||e.effects){t.reactive.push(e);const r=ge(e);if(r===null)t.reactiveWildcard.push(e);else for(const o of r)t.byReactive.has(o)||t.byReactive.set(o,[]),t.byReactive.get(o).push(e)}e.persist&&t.persist.push(e)}function G(e,t,n,r){for(let o=0;o<e.length;o++){const l=e[o];if(!t[l.attribute])continue;const i=l.effects&&l.effects[n];i?i(t,n,r):l.onAttrChange&&(!l.declared||l.declared.has(n))&&l.onAttrChange(t,n,r)}}function me(e){const t=e.target,n=e.attributeName;if(e.oldValue===t.getAttribute(n))return;const r=K(),o=r.byAttr.get(n);if(R()&&r.byDeclaredAttr&&r.byDeclaredAttr.has(n)&&O(t)){const l=r.byDeclaredAttr.get(n),i=t.getAttribute(n);for(let c=0;c<l.length;c++)U(l[c].spec,i,n,l[c].componentTag,t)}if(window.lnCore._debugSink&&(n.indexOf("data-ln-")===0||o)&&window.lnCore._debugSink("attr",n,t,{oldValue:e.oldValue,newValue:t.getAttribute(n)}),n.indexOf("data-ln-")===0){const l=r.byReactive.get(n);l&&G(l,t,n,e.oldValue),r.reactiveWildcard.length&&G(r.reactiveWildcard,t,n,e.oldValue)}if(o)for(let l=0;l<o.length;l++){const i=o[l];if(i.handler){i.handler(t,n,e.oldValue);continue}i.onAttributeChange&&t[i.attribute]?i.onAttributeChange(t,n):(T(t,i.selector,i.attribute,i.ComponentFn),i.onInit&&i.onInit(t))}}function ye(){window.lnCore=window.lnCore||{},!window.lnCore._attrObserverBound&&(window.lnCore._attrObserverBound=!0,k(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++)try{me(t[n])}catch(r){console.error("[ln-core] mutation handler failed",t[n].target,r)}}).observe(document.body,{attributes:!0,subtree:!0,attributeOldValue:!0})},"ln-core"))}function Q(){return window.lnCore=window.lnCore||{},window.lnCore._lifecycleRegistry=window.lnCore._lifecycleRegistry||[]}function Ce(e){const t=Q();if(t.length){if(e.target)for(let n=0;n<t.length;n++){const r=t[n];if(r.onSubtreeChange){const o=r.query,l=e.target.nodeType===1?e.target.matches(o)?e.target:e.target.closest(o):e.target.parentElement?e.target.parentElement.closest(o):null;l&&r.onSubtreeChange(l,e)}}for(let n=0;n<e.addedNodes.length;n++){const r=e.addedNodes[n];if(r.nodeType===1)for(let o=0;o<t.length;o++){const l=t[o];T(r,l.selector,l.attribute,l.ComponentFn),l.onInit&&l.onInit(r)}}for(let n=0;n<e.removedNodes.length;n++){const r=e.removedNodes[n];if(r.nodeType===1)for(let o=0;o<t.length;o++){const l=t[o],i=l.query,c=Array.from(r.querySelectorAll(i));r.matches&&r.matches(i)&&c.push(r);for(let a=0;a<c.length;a++){const s=c[a];if(!document.contains(s)){const u=s[l.attribute];if(u&&typeof u.destroy=="function")try{u.destroy()}catch(d){console.error("["+l.attribute+"] destroy failed",s,d)}delete s[l.attribute]}}}}}}function Ae(){window.lnCore=window.lnCore||{},!window.lnCore._lifecycleObserverBound&&(window.lnCore._lifecycleObserverBound=!0,k(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++){const r=t[n];if(r.type==="childList")try{Ce(r)}catch(o){console.error("[ln-core] lifecycle handler failed",r.target,o)}}}).observe(document.body,{childList:!0,subtree:!0})},"ln-core"))}function _e(e,t,n,r,o={}){const l=o.extraAttributes||[],i=o.onAttributeChange||null,c=o.onSubtreeChange||null,a=o.onInit||null,s=o.onAttrChange||null,u=o.effects||null,d=o.attributes||null,f=d?he(d):u,x=d?new Set(Object.keys(d)):null,y=o.persist||null;function b(h){const g=h||document.body;if(T(g,e,t,n),d&&R())for(const w in d){const _=d[w],v=Array.from(g.querySelectorAll("["+w+"]"));g.matches&&g.matches("["+w+"]")&&v.push(g);for(let $=0;$<v.length;$++){const B=v[$];O(B)&&U(_,B.getAttribute(w),w,r,B)}}a&&a(g)}const C=[];if(e.indexOf("[")!==-1){const h=/\[([\w-]+)/g;let g;for(;(g=h.exec(e))!==null;)C.push(g[1])}else C.push(e);pe({selector:e,attribute:t,componentTag:r,attributes:d,ComponentFn:n,onInit:a,observed:C.concat(l),onAttributeChange:i,onAttrChange:s,effects:f,declared:x,persist:y}),ye();const D=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]";Q().push({selector:e,attribute:t,ComponentFn:n,onInit:a,onSubtreeChange:c,query:D}),Ae(),window[t]=b;function S(){we()>0?be(function(){b(document.body)}):b(document.body)}return document.readyState==="loading"?document.addEventListener("DOMContentLoaded",S):S(),b}function J(e){return(e||"").replace(/^#/,"")}function M(e){const t=e===void 0?location.hash:e,n={},r=J(t);if(!r)return n;const o=r.split("&");for(let l=0;l<o.length;l++){const i=o[l];if(!i)continue;const c=i.indexOf(":"),a=c>-1?i.slice(0,c):i,s=c>-1?i.slice(c+1):"";if(a)try{n[a]=decodeURIComponent(s)}catch{n[a]=s}}return n}function ve(e){if(!e)return null;const t=M();return e in t?t[e]:null}function xe(e,t){if(!e)return;const n=M();t==null?delete n[e]:n[e]=String(t);const o=Object.keys(n).map(function(l){const i=n[l];return i===""?l:l+":"+encodeURIComponent(i)}).join("&");J(location.hash)!==o&&(location.hash=o)}function Se(e){return e.button===1||e.ctrlKey||e.metaKey||e.shiftKey?!1:(e.preventDefault(),!0)}function ke(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 r=e.getAttribute("data-ln-sort")||e.getAttribute("data-ln-search-for")||e.getAttribute("data-ln-search")||e.getAttribute("data-ln-filter")||e.id;return r?t?r+"-"+t:r:t||null}function Le(e,t){return!t||t==="none"||e===null||e===void 0?null:String(e)+"."+t}function De(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 Oe(e,t){return!e||!Array.isArray(t)||t.length===0?null:e+":"+t.map(encodeURIComponent).join(",")}function Ee(e){if(!e||typeof e!="string")return null;const t=e.indexOf(":");if(t===-1)return null;const n=e.slice(0,t),r=e.slice(t+1),o=r?r.split(",").map(function(l){try{return decodeURIComponent(l)}catch{return l}}).filter(Boolean):[];return{key:n,values:o}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=M,window.lnCore.hashGet=ve,window.lnCore.hashSet=xe,window.lnCore.hashLinkClick=Se,window.lnCore.resolveHashNamespace=ke,window.lnCore.hashSortEncode=Le,window.lnCore.hashSortDecode=De,window.lnCore.hashFilterEncode=Oe,window.lnCore.hashFilterDecode=Ee);const p={};function Fe(e){const t=e||"default";if(!p[t]){const n=new Intl.NumberFormat(e,{useGrouping:!0}),r=n.formatToParts(1234.5);let o="",l=".";for(let i=0;i<r.length;i++)r[i].type==="group"&&(o=r[i].value),r[i].type==="decimal"&&(l=r[i].value);p[t]={groupSep:o,decimalSep:l,fmt:n}}return p[t]}function L(e,t,n={}){if(typeof e!="number"||isNaN(e)||!Number.isFinite(e))return"";const r=t||"default",o=n.maxDecimals!=null?parseInt(n.maxDecimals,10):null,l=n.userDecimals!=null?n.userDecimals:null;if(o!==null){const i=r+"|max:"+o;return p[i]||(p[i]=new Intl.NumberFormat(t,{useGrouping:!0,minimumFractionDigits:0,maximumFractionDigits:o})),p[i].format(e)}if(l!==null&&l>0){const i=r+"|exact:"+l;return p[i]||(p[i]=new Intl.NumberFormat(t,{useGrouping:!0,minimumFractionDigits:l,maximumFractionDigits:l})),p[i].format(e)}return Fe(t).fmt.format(e)}function Y(e){if(e==null||e==="")return null;const t=Number(e);return Number.isFinite(t)?t:null}function A(e){return String(Math.round(e*1e3)/1e3)}function qe(e,t,n){const r=Y(e);return r===null||r<0?0:Math.min(r,Math.min(t,n)/2)}function Ne(e){if(typeof e!="string")return null;const t=e.trim().split(/[\s,]+/).map(Number);return t.length!==4||t.some(n=>!Number.isFinite(n))||t[2]<=0||t[3]<=0?null:{x:t[0],y:t[1],width:t[2],height:t[3]}}function Ie(e){if(!e||typeof e!="string")return null;const t=e.split(":"),n=t[0].trim();return n?{field:n,direction:t[1]&&t[1].trim().toLowerCase()==="desc"?"desc":"asc"}:null}function Te(e,t){t=t||{};const n=t.viewBox||{x:0,y:0,width:1e3,height:320},r=t.xField||"label",o=t.yField||"value",l=t.includeZero!==!1,i=qe(t.padding,n.width,n.height),c=Array.isArray(e)?e:[],a=[];for(let h=0;h<c.length;h++){const g=c[h]||{},w=Y(g[o]);w!==null&&a.push({record:g,sourceIndex:h,label:g[r]==null?String(h+1):String(g[r]),value:w})}if(a.length===0)return{points:[],linePoints:"",areaPoints:"",count:0,min:null,max:null,domainMin:0,domainMax:1,baselineY:n.y+n.height-i};let s=a[0].value,u=a[0].value;for(let h=1;h<a.length;h++)a[h].value<s&&(s=a[h].value),a[h].value>u&&(u=a[h].value);let d=s,f=u;l&&(d=Math.min(0,d),f=Math.max(0,f)),d===f&&(f===0?f=1:f>0?d=0:f=0);const x=Math.max(1,n.width-i*2),y=Math.max(1,n.height-i*2),b=f-d,C=n.y+n.height-i-(0-d)/b*y,m=[];for(let h=0;h<a.length;h++){const g=a[h],w=a.length===1?.5:h/(a.length-1),_=n.x+i+w*x,v=n.y+n.height-i-(g.value-d)/b*y;m.push({record:g.record,sourceIndex:g.sourceIndex,label:g.label,value:g.value,x:_,y:v,pointString:A(_)+","+A(v)})}const D=m.map(h=>h.pointString).join(" ");let S="";if(m.length>0){const h=m[0],g=m[m.length-1],w=A(h.x)+","+A(C),_=A(g.x)+","+A(C);S=w+" "+D+" "+_}return{points:m,linePoints:D,areaPoints:S,count:m.length,min:s,max:u,domainMin:d,domainMax:f,baselineY:C}}(function(){const e="data-ln-chart",t="lnChart",n={x:0,y:0,width:1e3,height:320};if(window[t]!==void 0)return;function r(s){const u=s[t];u&&u.requestData()}function o(s){const u=s[t];u&&u._render()}const l={"data-ln-chart":{prop:"name",type:"string",read:N,fallback:"",effect:o,description:"Chart instance name or identifier"},"data-ln-chart-source":{type:"string",effect:r,description:"Source store or coordinator identifier"},"data-ln-chart-sort":{type:"string",effect:r,description:"Field name to sort chart series data by"},"data-ln-chart-type":{type:"enum",values:["line","bar","area","scatter"],fallback:"line",effect:o,description:"Visual chart render type"},"data-ln-chart-x":{type:"string",effect:o,description:"Field name mapping to X axis"},"data-ln-chart-y":{type:"string",effect:o,description:"Field name mapping to Y axis"},"data-ln-chart-padding":{type:"integer",fallback:20,min:0,effect:o,description:"Internal plot padding in pixels"},"data-ln-chart-zero":{type:"boolean",effect:o,description:"Forces Y axis scale to start at zero"}},i=fe(l);function c(s,u){s&&(s.textContent=u)}function a(s){this.dom=s,de(this,s,i),this.source=s.getAttribute("data-ln-chart-source")||this.name,this.plot=s.querySelector("[data-ln-chart-plot]"),this.line=s.querySelector("[data-ln-chart-line]"),this.area=s.querySelector("[data-ln-chart-area]"),this.labels=s.querySelector("[data-ln-chart-labels]"),this.empty=s.querySelector("[data-ln-chart-empty]"),this.minimum=s.querySelector("[data-ln-chart-min]"),this.maximum=s.querySelector("[data-ln-chart-max]"),this.count=s.querySelector("[data-ln-chart-count]"),this._data=[],this.model=null,this.isLoaded=!1;const u=this;return this._onSetData=function(d){const f=d.detail||{};u._data=Array.isArray(f.data)?f.data:[],u.isLoaded=!0,u._setLoading(!1),u._render()},this._onSetLoading=function(d){u._setLoading(!!(d.detail&&d.detail.loading))},this._onRefresh=function(){u.requestData()},s.addEventListener("ln-chart:set-data",this._onSetData),s.addEventListener("ln-chart:set-loading",this._onSetLoading),s.addEventListener("ln-chart:request-refresh",this._onRefresh),this.requestData(),this}a.prototype._readOptions=function(){const s=this.dom.getAttribute("data-ln-chart-padding"),u=s===null?NaN:Number(s),d=(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(u)&&u>=0?u:16,type:d==="area"||d==="polygon"?"area":"line",viewBox:this.plot&&Ne(this.plot.getAttribute("viewBox"))||n}},a.prototype._setLoading=function(s){this.dom.classList.toggle("ln-chart--loading",s),this.dom.setAttribute("aria-busy",s?"true":"false")},a.prototype._renderLabels=function(s){if(!this.labels||(this.labels.replaceChildren(),s.count===0))return;const u=this.name+"-label",d='[data-ln-template="'+u+'"]';if(!this.dom.querySelector(d)&&!document.querySelector(d))return;const f=ne(this.dom,u,"ln-chart");if(!f)return;const x=W(this.dom);for(const y of s.points){const b=f.cloneNode(!0);q(b,{label:y.label,value:L(y.value,x)}),this.labels.appendChild(b)}},a.prototype._render=function(){const s=this._readOptions(),u=Te(this._data,s);this.model=u,this.line&&(this.line.setAttribute("points",u.linePoints),this.line.toggleAttribute("hidden",u.count===0)),this.area&&(this.area.setAttribute("points",u.areaPoints),this.area.toggleAttribute("hidden",u.count===0||s.type!=="area"));const d=u.count===0;this.dom.classList.toggle("ln-chart--empty",d),this.empty&&this.empty.toggleAttribute("hidden",!d);const f=W(this.dom);c(this.minimum,L(u.min,f)),c(this.maximum,L(u.max,f)),c(this.count,L(u.count,f)),this._renderLabels(u),E(this.dom,"ln-chart:rendered",{chart:this.name,count:u.count,min:u.min,max:u.max})},a.prototype.requestData=function(){this.source=this.dom.getAttribute("data-ln-chart-source")||this.name,E(this.dom,"ln-chart:request-data",{chart:this.name,source:this.source,sort:Ie(this.dom.getAttribute("data-ln-chart-sort")),filters:{},search:""})},a.prototype.destroy=function(){this.dom[t]&&(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[t])},_e(e,t,a,"ln-chart",{attributes:l})})()})();

package/components/ln-chart/ln-chart.schema.json

@@ -0,0 +1,146 @@
+{
+	"$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-chart",
+	"generator": "scripts/sync-ln-schemas.mjs",
+	"attributes": {
+		"data-ln-chart": {
+			"direction": null,
+			"sources": [
+				"ln-chart-dev.scss",
+				"src/ln-chart.js"
+			],
+			"type": "string",
+			"fallback": "",
+			"description": "Chart instance name or identifier"
+		},
+		"data-ln-chart-area": {
+			"direction": "author",
+			"sources": [
+				"src/ln-chart.js"
+			]
+		},
+		"data-ln-chart-count": {
+			"direction": "author",
+			"sources": [
+				"src/ln-chart.js"
+			]
+		},
+		"data-ln-chart-empty": {
+			"direction": "author",
+			"sources": [
+				"src/ln-chart.js"
+			]
+		},
+		"data-ln-chart-labels": {
+			"direction": "author",
+			"sources": [
+				"src/ln-chart.js"
+			]
+		},
+		"data-ln-chart-line": {
+			"direction": "author",
+			"sources": [
+				"ln-chart-dev.scss",
+				"src/ln-chart.js"
+			]
+		},
+		"data-ln-chart-max": {
+			"direction": "author",
+			"sources": [
+				"src/ln-chart.js"
+			]
+		},
+		"data-ln-chart-min": {
+			"direction": "author",
+			"sources": [
+				"src/ln-chart.js"
+			]
+		},
+		"data-ln-chart-padding": {
+			"direction": "author",
+			"sources": [
+				"src/ln-chart.js"
+			],
+			"type": "integer",
+			"fallback": 20,
+			"min": 0,
+			"description": "Internal plot padding in pixels"
+		},
+		"data-ln-chart-plot": {
+			"direction": "author",
+			"sources": [
+				"ln-chart-dev.scss",
+				"src/ln-chart.js"
+			]
+		},
+		"data-ln-chart-sort": {
+			"direction": "author",
+			"sources": [
+				"src/ln-chart.js"
+			],
+			"type": "string",
+			"description": "Field name to sort chart series data by"
+		},
+		"data-ln-chart-source": {
+			"direction": "author",
+			"sources": [
+				"src/ln-chart.js"
+			],
+			"type": "string",
+			"description": "Source store or coordinator identifier"
+		},
+		"data-ln-chart-type": {
+			"direction": "author",
+			"sources": [
+				"src/ln-chart.js"
+			],
+			"type": "enum",
+			"values": [
+				"line",
+				"bar",
+				"area",
+				"scatter"
+			],
+			"fallback": "line",
+			"description": "Visual chart render type"
+		},
+		"data-ln-chart-x": {
+			"direction": "author",
+			"sources": [
+				"ln-chart-dev.scss",
+				"src/ln-chart.js"
+			],
+			"type": "string",
+			"description": "Field name mapping to X axis"
+		},
+		"data-ln-chart-y": {
+			"direction": "author",
+			"sources": [
+				"ln-chart-dev.scss",
+				"src/ln-chart.js"
+			],
+			"type": "string",
+			"description": "Field name mapping to Y axis"
+		},
+		"data-ln-chart-zero": {
+			"direction": "author",
+			"sources": [
+				"src/ln-chart.js"
+			],
+			"type": "boolean",
+			"description": "Forces Y axis scale to start at zero"
+		},
+		"data-ln-debug": {
+			"direction": null,
+			"sources": [
+				"ln-chart-dev.scss"
+			]
+		},
+		"data-ln-template": {
+			"direction": null,
+			"sources": [
+				"src/ln-chart.js"
+			]
+		}
+	}
+}

package/components/ln-chart/ln-chart.scss

@@ -0,0 +1,8 @@
+// ==========================================================================
+// ln-chart — Functional Loading State
+// ==========================================================================
+
+.ln-chart--loading .chart__plot {
+	opacity: 0.5;
+	pointer-events: none;
+}

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

@@ -0,0 +1,154 @@
+function finiteNumber(value) {
+	if (value === null || value === undefined || value === '') return null;
+	const number = Number(value);
+	return Number.isFinite(number) ? number : null;
+}
+
+function coordinate(value) {
+	return String(Math.round(value * 1000) / 1000);
+}
+
+function clampPadding(padding, width, height) {
+	const parsed = finiteNumber(padding);
+	if (parsed === null || parsed < 0) return 0;
+	return Math.min(parsed, Math.min(width, height) / 2);
+}
+
+/**
+ * Parses SVG viewBox string into coordinates and dimensions.
+ * @param {string} value
+ * @returns {{ x: number, y: number, width: number, height: number }|null}
+ */
+export function parseChartViewBox(value) {
+	if (typeof value !== 'string') return null;
+	const parts = value.trim().split(/[\s,]+/).map(Number);
+	if (parts.length !== 4 || parts.some(part => !Number.isFinite(part))) return null;
+	if (parts[2] <= 0 || parts[3] <= 0) return null;
+	return { x: parts[0], y: parts[1], width: parts[2], height: parts[3] };
+}
+
+/**
+ * Parses chart sort string (e.g. "field:desc" or "field:asc").
+ * @param {string} raw
+ * @returns {{ field: string, direction: 'asc' | 'desc' }|null}
+ */
+export function parseChartSort(raw) {
+	if (!raw || typeof raw !== 'string') return null;
+	const parts = raw.split(':');
+	const field = parts[0].trim();
+	if (!field) return null;
+	return {
+		field,
+		direction: parts[1] && parts[1].trim().toLowerCase() === 'desc' ? 'desc' : 'asc'
+	};
+}
+
+/**
+ * Builds points, geometries, and domain metadata for chart rendering.
+ * @param {Array<object>} records
+ * @param {object} options
+ * @returns {object}
+ */
+export function buildChartModel(records, options) {
+	options = options || {};
+	const viewBox = options.viewBox || { x: 0, y: 0, width: 1000, height: 320 };
+	const xField = options.xField || 'label';
+	const yField = options.yField || 'value';
+	const includeZero = options.includeZero !== false;
+	const padding = clampPadding(options.padding, viewBox.width, viewBox.height);
+	const source = Array.isArray(records) ? records : [];
+
+	const values = [];
+	for (let index = 0; index < source.length; index++) {
+		const record = source[index] || {};
+		const value = finiteNumber(record[yField]);
+		if (value === null) continue;
+		values.push({
+			record,
+			sourceIndex: index,
+			label: record[xField] == null ? String(index + 1) : String(record[xField]),
+			value
+		});
+	}
+
+	if (values.length === 0) {
+		return {
+			points: [],
+			linePoints: '',
+			areaPoints: '',
+			count: 0,
+			min: null,
+			max: null,
+			domainMin: 0,
+			domainMax: 1,
+			baselineY: viewBox.y + viewBox.height - padding
+		};
+	}
+
+	let min = values[0].value;
+	let max = values[0].value;
+	for (let i = 1; i < values.length; i++) {
+		if (values[i].value < min) min = values[i].value;
+		if (values[i].value > max) max = values[i].value;
+	}
+
+	let domainMin = min;
+	let domainMax = max;
+	if (includeZero) {
+		domainMin = Math.min(0, domainMin);
+		domainMax = Math.max(0, domainMax);
+	}
+	if (domainMin === domainMax) {
+		if (domainMax === 0) {
+			domainMax = 1;
+		} else if (domainMax > 0) {
+			domainMin = 0;
+		} else {
+			domainMax = 0;
+		}
+	}
+
+	const usableWidth = Math.max(1, viewBox.width - padding * 2);
+	const usableHeight = Math.max(1, viewBox.height - padding * 2);
+	const valueRange = domainMax - domainMin;
+	const baselineY = viewBox.y + viewBox.height - padding - ((0 - domainMin) / valueRange) * usableHeight;
+
+	const points = [];
+	for (let i = 0; i < values.length; i++) {
+		const item = values[i];
+		const progress = values.length === 1 ? 0.5 : i / (values.length - 1);
+		const x = viewBox.x + padding + progress * usableWidth;
+		const y = viewBox.y + viewBox.height - padding - ((item.value - domainMin) / valueRange) * usableHeight;
+		points.push({
+			record: item.record,
+			sourceIndex: item.sourceIndex,
+			label: item.label,
+			value: item.value,
+			x,
+			y,
+			pointString: coordinate(x) + ',' + coordinate(y)
+		});
+	}
+
+	const linePoints = points.map(point => point.pointString).join(' ');
+	let areaPoints = '';
+	if (points.length > 0) {
+		const first = points[0];
+		const last = points[points.length - 1];
+		const startBaseline = coordinate(first.x) + ',' + coordinate(baselineY);
+		const endBaseline = coordinate(last.x) + ',' + coordinate(baselineY);
+		areaPoints = startBaseline + ' ' + linePoints + ' ' + endBaseline;
+	}
+
+	return {
+		points,
+		linePoints,
+		areaPoints,
+		count: points.length,
+		min,
+		max,
+		domainMin,
+		domainMax,
+		baselineY
+	};
+}