@evotecit/canopyx 0.3.3 → 0.3.5

package/CanopyX.Html/Assets/canopyx.js

@@ -60,7 +60,7 @@ function fill(template,values){return template.replace(/\{(\w+)\}/g, (match, nam
 const pluralRules=new Map();function plural(template,count,lang){if(!template.startsWith("["))return template;const forms={};for(const match of template.matchAll(/\[(zero|one|two|few|many|other)\]([^[]*)/g)) forms[match[1]] = match[2];
 let rules=pluralRules.get(lang);if(!rules){try{rules=new Intl.PluralRules(lang||"en")}catch(_){rules=new Intl.PluralRules("en")}pluralRules.set(lang,rules)}
 return forms[rules.select(Number(count))]??forms.other??template}
-let DEFAULT_LABELS=Object.freeze({searchPlaceholder:"Search",searchResults:"Search results",searchResultCount:"{count} results",searchResultCountOfTotal:"{count} of {total} results",searchResultCountOfMany:"{count} of many results",searchNoResults:"No results",searchTooShort:"Type at least {min} characters",searchWordTooShort:"Type a word of at least {min} characters",searchFailed:"Search failed: {error}",columns:"Columns",visibleColumns:"Visible columns",resizeColumn:"Resize {column}",columnWidth:"{width} pixels",loading:"Loading…",loadError:"Could not load: {error} (Enter to retry)",queryFailed:"Could not update the view: {error}",showMore:"Show more ({loaded} of {total} loaded)",showMoreUnknownTotal:"Show more ({loaded} loaded)",pageLoaded:"{loaded} of {total} loaded",itemsLoaded:"{count} items",yes:"Yes",no:"No",utcTime:"{time} UTC",localTime:"{time} local time",mountError:"This view could not be displayed: {error}"});function labelsFor(...sources){const labels=Object.assign({},DEFAULT_LABELS);for(const source of sources){if(source==null)continue;if(typeof source!=="object"||Array.isArray(source))throw new Error("CanopyX: labels must be an object of strings.");Object.keys(source).forEach((name)=>{if(!Object.hasOwn(DEFAULT_LABELS,name)&&!/^(?:gridEdit|format|calendar|flow)[A-Z]\w{0,63}$/.test(name)) throw new Error("CanopyX: there is no label '" + name + "'.");
+let DEFAULT_LABELS=Object.freeze({searchPlaceholder:"Search",searchResults:"Search results",searchResultCount:"{count} results",searchResultCountOfTotal:"{count} of {total} results",searchResultCountOfMany:"{count} of many results",searchNoResults:"No results",searchTooShort:"Type at least {min} characters",searchWordTooShort:"Type a word of at least {min} characters",searchFailed:"Search failed: {error}",columns:"Columns",visibleColumns:"Visible columns",resizeColumn:"Resize {column}",columnWidth:"{width} pixels",loading:"Loading…",loadError:"Could not load: {error} (Enter to retry)",queryFailed:"Could not update the view: {error}",showMore:"Show more ({loaded} of {total} loaded)",showMoreUnknownTotal:"Show more ({loaded} loaded)",pageLoaded:"{loaded} of {total} loaded",itemsLoaded:"{count} items",yes:"Yes",no:"No",utcTime:"{time} UTC",localTime:"{time} local time",mountError:"This view could not be displayed: {error}"});function labelsFor(...sources){const labels=Object.assign({},DEFAULT_LABELS);for(const source of sources){if(source==null)continue;if(typeof source!=="object"||Array.isArray(source))throw new Error("CanopyX: labels must be an object of strings.");Object.keys(source).forEach((name)=>{if(!Object.hasOwn(DEFAULT_LABELS,name)&&!/^(?:gridEdit|format|calendar|flow|matrix)[A-Z]\w{0,63}$/.test(name)) throw new Error("CanopyX: there is no label '" + name + "'.");
 if(typeof source[name]!=="string"||!/\S/.test(source[name])) throw new Error("CanopyX: label '" + name + "' must be a string with visible text.");
 if((name==="utcTime"||name==="localTime")&&source[name].indexOf("{time}")<0)throw new Error("CanopyX: label '"+name+"' must hold {time}.");labels[name]=source[name]})}
 return Object.freeze(labels)}
@@ -504,7 +504,7 @@ if(active>=0){list.children[active].setAttribute("aria-selected","false")}
 active=active<0?(delta<0?hits.length-1:0):(active+delta+hits.length)%hits.length;const item=list.children[active];item.setAttribute("aria-selected","true");input.setAttribute("aria-activedescendant",item.id);item.scrollIntoView({block:"nearest"})};input.addEventListener("input",()=>{cancelNavigation();sequence++;clearTimeout(timer);hits=[];close();timer=setTimeout(run,150)});input.addEventListener("keydown",(e)=>{if(e.defaultPrevented||e.isComposing)return;if(e.key==="ArrowDown"||e.key==="ArrowUp"){move(e.key==="ArrowDown"?1:-1)}else if(e.key==="Enter"){if(!list.hidden){choose(active>=0?active:0)}}else if(e.key==="Escape"){cancelNavigation();sequence++;clearTimeout(timer);if(list.hidden){input.value=""}
 close()}else{return}
 e.preventDefault()});input.addEventListener("blur",()=>{cancelNavigation();sequence++;clearTimeout(timer);clearTimeout(blurTimer);blurTimer=setTimeout(close,150)});this.cancelSearch=()=>{cancelNavigation();sequence++;clearTimeout(timer);clearTimeout(blurTimer);hits=[];close()};box.appendChild(input);box.appendChild(list);box.appendChild(status);bar.appendChild(box);this.searchInput=input}});function watchFlyout(anchorElement,panel,isOpen){const position=()=>{if(!isOpen())return;const anchor=anchorElement.getBoundingClientRect(),fixed=getComputedStyle(panel).position==="fixed";const below=Math.max(0,global.innerHeight-anchor.bottom-8);const above=Math.max(0,anchor.top-8);const opensAbove=below<120&&above>below,room=opensAbove?above:below;panel.style.maxHeight=(panel.classList.contains("cx-fb")?room:Math.min(320,room))+ "px";panel.style.top=opensAbove?"auto":fixed?anchor.bottom+"px":"100%";panel.style.bottom=opensAbove?fixed?global.innerHeight-anchor.top+"px":"100%":"auto";const width=panel.getBoundingClientRect().width;panel.style.left=Math.max(8,Math.min(anchor.left,global.innerWidth-width-8))-(fixed?0:anchor.left)+ "px"};global.addEventListener("resize",position);global.addEventListener("scroll",position,true);return{position,dispose:()=>{global.removeEventListener("resize",position);global.removeEventListener("scroll",position,true)}}}
-const PART_URL=typeof document!=="undefined"&&document.currentScript?.src;const PARTS={"tree-tools":["ce442e100494535d","canopyx-tree-tools.149c371950d66a15.js","canopyx-tree-tools.ef7a3fb9c9115a82.css"],"export":["8b99c0b7b0ec37c5","canopyx-export.6989ea36f5d6da7b.js"],"links":["f1ab7e32b501ce37","canopyx-links.d96addeefb3eccf5.js"],"search":["521eebd6e1bbbd35","canopyx-search.14c69f4551c69f23.js"],"link":["fa0c9e888463553b","canopyx-link.4ec39bc39fa6cf50.js","canopyx-link.8435c892613926ac.css"],"highlight":["f39423961654c1e2","canopyx-highlight.a6f93893d36ab343.js","canopyx-highlight.5b6d2e0d979f9f9b.css"],"layouts":["fa8c686f21626884","canopyx-layouts.e7250c82a6abf52e.js","canopyx-layouts.0b75738924533ee8.css"],"record-panel":["bcc06276c7933af6","canopyx-record-panel.a374fb4254f9115c.js","canopyx-record-panel.f3691d54cefaab04.css"]},PART_CODE=new Map(),partName=name=>typeof name==="string"&&/^[a-z][a-z\d-]{0,31}$/.test(name);
+const PART_URL=typeof document!=="undefined"&&document.currentScript?.src;const PARTS={"tree-tools":["dbc7cd1bfd91ce63","canopyx-tree-tools.879d4297cd1760d6.js","canopyx-tree-tools.ef7a3fb9c9115a82.css"],"export":["8b99c0b7b0ec37c5","canopyx-export.6989ea36f5d6da7b.js"],"links":["f1ab7e32b501ce37","canopyx-links.d96addeefb3eccf5.js"],"search":["521eebd6e1bbbd35","canopyx-search.14c69f4551c69f23.js"],"link":["fa0c9e888463553b","canopyx-link.4ec39bc39fa6cf50.js","canopyx-link.8435c892613926ac.css"],"highlight":["f39423961654c1e2","canopyx-highlight.a6f93893d36ab343.js","canopyx-highlight.5b6d2e0d979f9f9b.css"],"layouts":["fa8c686f21626884","canopyx-layouts.e7250c82a6abf52e.js","canopyx-layouts.0b75738924533ee8.css"],"record-panel":["bcc06276c7933af6","canopyx-record-panel.a374fb4254f9115c.js","canopyx-record-panel.f3691d54cefaab04.css"]},PART_CODE=new Map(),partName=name=>typeof name==="string"&&/^[a-z][a-z\d-]{0,31}$/.test(name);
 function registerPart(name,part){if(!partName(name)||!part||typeof part.version!=="string"||typeof part.install!=="function"||
 part.requires!==undefined&&!(Array.isArray(part.requires)&&part.requires.every(partName)))throw new Error("CanopyX: invalid part.");PART_CODE.set(name,part)}
 function definePart(View,name,label,context){const parts=View.prototype.parts||={};return parts[name]={name,label,context,parts}}
@@ -610,5 +610,5 @@ watcher.observe(host)}
 function mount(root,automatic){const scope=root||document;const created=[];const showError=(host,err,api,view)=>{if(api){api.destroy();if(host.canopyx===api)delete host.canopyx}
 const message=err&&err.message?err.message:String(err);let labels=DEFAULT_LABELS;for(const attempt of[()=>labelsFor(view&&view.labels,view&&configured.has(view.id)?configured.get(view.id).labels:null),()=>labelsFor(view&&view.labels)]){try{labels=attempt();break}catch(e){labels=DEFAULT_LABELS}}
 const notice=document.createElement("div");notice.className="cx-mount-error";notice.setAttribute("role","alert");setText(notice,fill(labels.mountError,{error:message}));host.classList.add("cx-host");host.setAttribute("data-canopyx-mounted","true");host.setAttribute("data-cx-error",message);host.appendChild(notice);if(global.console)global.console.error(err)};const selector="[data-canopyx-host]:not([data-canopyx-mounted])";(scope.matches?.(selector)?[scope]:scope.querySelectorAll(selector)).forEach((host)=>{const config=host.querySelector("script.cx-config"),mode=host.getAttribute("data-cx-mount");if(!config||(automatic===true&&mode==="manual")){return}
-if(mode==="visible"&&host!==scope&&global.IntersectionObserver)return mountWhenVisible(host);watcher?.unobserve(host);host.setAttribute("data-canopyx-mounted","true");let view=null;try{view=JSON.parse(config.textContent);if(view===Object(view))parsedViews.add(view);const flow=view&&view.kind==="flow"&&typeof FLOW_API==="object";const create=flow?FLOW_API.createFlow:view&&view.type==="grid"&&typeof createDataGrid==="function"?createDataGrid:createTreeGrid;const api=create(host,Object.assign({},view&&configured.get(view.id),flow?{flow:view}:{view}));created.push(api);api.ready.catch((err)=>{if(view.type!=="grid"&&activeGrids.get(host)===api&&host.canopyx===api)showError(host,err,api,view)})}catch(err){showError(host,err,null,view)}});return created}
-global.CanopyX=Object.freeze(Object.assign({protocol:PROTOCOL,createTreeGrid,configure,unconfigure,mount:(root)=>mount(root,false),sources:Object.freeze({inline:inlineSource,sidecar:sidecarSource,remote:remoteSource}),badge:hostBadge,labels:DEFAULT_LABELS,registerExportFormat,use,registerPart,setNonce},typeof GRID_API==="object"?GRID_API:{},typeof FLOW_API==="object"?FLOW_API:{}));const navigation=global.performance&&performance.getEntriesByType?performance.getEntriesByType("navigation")[0]:null;if(document.readyState==="loading"||(document.readyState==="interactive"&&navigation&&navigation.domContentLoadedEventStart===0)){document.addEventListener("DOMContentLoaded",()=>mount(document,true))}else{mount(document,true)}})(typeof window!=="undefined"?window:this);
+if(mode==="visible"&&host!==scope&&global.IntersectionObserver)return mountWhenVisible(host);watcher?.unobserve(host);host.setAttribute("data-canopyx-mounted","true");let view=null;try{view=JSON.parse(config.textContent);if(view===Object(view))parsedViews.add(view);const flow=view&&view.kind==="flow"&&typeof FLOW_API==="object",matrix=view&&view.type==="matrix"&&typeof MATRIX_API==="object";const create=flow?FLOW_API.createFlow:matrix?MATRIX_API.createMatrix:view&&view.type==="grid"&&typeof createDataGrid==="function"?createDataGrid:createTreeGrid;const api=create(host,Object.assign({},view&&configured.get(view.id),flow?{flow:view}:{view}));created.push(api);api.ready.catch((err)=>{if(view.type!=="grid"&&!matrix&&activeGrids.get(host)===api&&host.canopyx===api)showError(host,err,api,view)})}catch(err){showError(host,err,null,view)}});return created}
+global.CanopyX=Object.freeze(Object.assign({protocol:PROTOCOL,createTreeGrid,configure,unconfigure,mount:(root)=>mount(root,false),sources:Object.freeze({inline:inlineSource,sidecar:sidecarSource,remote:remoteSource}),badge:hostBadge,labels:DEFAULT_LABELS,registerExportFormat,use,registerPart,setNonce},typeof GRID_API==="object"?GRID_API:{},typeof FLOW_API==="object"?FLOW_API:{},typeof MATRIX_API==="object"?MATRIX_API:{}));const navigation=global.performance&&performance.getEntriesByType?performance.getEntriesByType("navigation")[0]:null;if(document.readyState==="loading"||(document.readyState==="interactive"&&navigation&&navigation.domContentLoadedEventStart===0)){document.addEventListener("DOMContentLoaded",()=>mount(document,true))}else{mount(document,true)}})(typeof window!=="undefined"?window:this);

package/JavaScript/grid.d.ts

@@ -931,17 +931,20 @@ export function createDataGrid<Row extends GridRow = GridRow>(host: HTMLElement,
 export function createDataGrid<Row extends GridRow = GridRow>(host: HTMLElement, options: CursorGridOptions<GridNamedRow<Row>>): DataGrid<GridCursorQuery, Row>;
 /** A calendar from a list of events, with no grid schema to write: a preset (basic by default) and options over it (calendar.d.ts). */
 export function createCalendar(host: HTMLElement, options?: CalendarOptions): DataGrid<GridQuery, GridRow>;
-/** Registers options before a tree, flat-grid or flow fragment mounts. */
-export function configure(viewId: string, options: HostOptions | GridHostOptions | GridHostOptions<GridCursorQuery> | Partial<Omit<FlowOptions, "flow">>): () => void;
+/** Registers options before a tree, flat-grid, flow or matrix fragment mounts. */
+export function configure(viewId: string, options: HostOptions | GridHostOptions | GridHostOptions<GridCursorQuery> | Partial<Omit<FlowOptions, "flow">> | Partial<Omit<MatrixOptions, "view">>): () => void;
 /**
- * Mounts tree, flat-grid and flow fragments below root, or root itself when it is a fragment. Fragments marked
+ * Mounts tree, flat-grid, flow and matrix fragments below root, or root itself when it is a fragment. Fragments marked
  * `data-cx-mount="visible"` below root wait until they come near the viewport; passing such a fragment as root mounts it at once.
  * Narrow a controller before using view-specific methods.
  */
-export function mount(root?: ParentNode): Array<TreeGrid | DataGrid<AcceptedGridQuery> | FlowApi>;
+export function mount(root?: ParentNode): Array<TreeGrid | DataGrid<AcceptedGridQuery> | FlowApi | MatrixApi>;
 
 import type { createFlow, FlowApi, FlowOptions } from "./flow.js";
 export { createFlow } from "./flow.js";
 export type { FlowDocument, FlowField, FlowStep, FlowSection, FlowOption, FlowCondition, FlowValidation, FlowValue, FlowSubmission, FlowSubmitDetail, FlowAnswer, FlowHooks, FlowOptions, FlowApi, FlowState, FlowValidationResult } from "./flow.js";
-declare const gridRuntime: Omit<typeof CanopyX, "configure" | "mount"> & { createDataGrid: typeof createDataGrid; createCalendar: typeof createCalendar; createFlow: typeof createFlow; enhance: typeof enhance; grid: typeof grid; configure: typeof configure; mount: typeof mount };
+import type { createMatrix, MatrixOptions, MatrixApi } from "./matrix.js";
+export { createMatrix } from "./matrix.js";
+export type { MatrixDocument, MatrixAxis, MatrixItem, MatrixAttribute, MatrixState, MatrixSort, MatrixNote, MatrixQueryState, MatrixStateInput, MatrixCellDetail, MatrixOptions, MatrixApi } from "./matrix.js";
+declare const gridRuntime: Omit<typeof CanopyX, "configure" | "mount"> & { createDataGrid: typeof createDataGrid; createCalendar: typeof createCalendar; createFlow: typeof createFlow; createMatrix: typeof createMatrix; enhance: typeof enhance; grid: typeof grid; configure: typeof configure; mount: typeof mount };
 export default gridRuntime;

package/JavaScript/locales/de.mjs

@@ -588,6 +588,39 @@ const labels = Object.freeze({
   flowCopied: "Kopiert",
   flowSavedIt: "Ich habe es gespeichert",
   flowShownOnce: "Wird nur einmal angezeigt. Jetzt kopieren.",
+  matrixRows: "Zeilen",
+  matrixColumns: "Spalten",
+  matrixSearch: "Zeilen und Spalten suchen",
+  matrixSortBy: "Sortieren nach",
+  matrixGroupBy: "Gruppieren nach",
+  matrixByLabel: "Name",
+  matrixByTotal: "Gesamt",
+  matrixAsListed: "Wie aufgeführt",
+  matrixNoGrouping: "Keine Gruppen",
+  matrixDescending: "Absteigend",
+  matrixOnlyProblems: "Nur Probleme",
+  matrixHideEmpty: "Leere Zeilen und Spalten ausblenden",
+  matrixSize: "{rows} × {columns}",
+  matrixShown: "Zeilen: {rows} von {totalRows}, Spalten: {columns} von {totalColumns}",
+  matrixAttention: "Erfordert Aufmerksamkeit: {count}",
+  matrixLegend: "Zustände",
+  matrixFilter: "Filtern",
+  matrixClearFilters: "Filter löschen",
+  matrixNoMatches: "Keine Zeilen oder Spalten passen.",
+  matrixSelf: "Dasselbe Element",
+  matrixNoData: "Keine Daten",
+  matrixCell: "{row} und {column}: {state}",
+  matrixTotal: "Gesamt",
+  matrixItemTotal: "{item}: {count}",
+  matrixExpandGroup: "{group} aufklappen",
+  matrixCollapseGroup: "{group} zuklappen",
+  matrixGroupCount: "Elemente: {count}",
+  matrixDetails: "Details",
+  matrixClose: "Schließen",
+  matrixValue: "Wert",
+  matrixState: "Zustand",
+  matrixAllClear: "Nichts erfordert Aufmerksamkeit",
+  matrixShowMore: "Mehr anzeigen",
 });
 const staticLabels = Object.freeze({
   overflowNote: "{shown} Zeilen angezeigt. Gesamtzahl: {total}.",

package/JavaScript/locales/es.mjs

@@ -588,6 +588,39 @@ const labels = Object.freeze({
   flowCopied: "Copiado",
   flowSavedIt: "Lo he guardado",
   flowShownOnce: "Se muestra solo una vez. Cópielo ahora.",
+  matrixRows: "Filas",
+  matrixColumns: "Columnas",
+  matrixSearch: "Buscar filas y columnas",
+  matrixSortBy: "Ordenar por",
+  matrixGroupBy: "Agrupar por",
+  matrixByLabel: "Nombre",
+  matrixByTotal: "Total",
+  matrixAsListed: "Como en la lista",
+  matrixNoGrouping: "Sin grupos",
+  matrixDescending: "Descendente",
+  matrixOnlyProblems: "Solo problemas",
+  matrixHideEmpty: "Ocultar filas y columnas vacías",
+  matrixSize: "{rows} × {columns}",
+  matrixShown: "Filas: {rows} de {totalRows}, columnas: {columns} de {totalColumns}",
+  matrixAttention: "Requieren atención: {count}",
+  matrixLegend: "Estados",
+  matrixFilter: "Filtrar",
+  matrixClearFilters: "Borrar filtros",
+  matrixNoMatches: "Ninguna fila o columna coincide.",
+  matrixSelf: "El mismo elemento",
+  matrixNoData: "Sin datos",
+  matrixCell: "{row} y {column}: {state}",
+  matrixTotal: "Total",
+  matrixItemTotal: "{item}: {count}",
+  matrixExpandGroup: "Expandir {group}",
+  matrixCollapseGroup: "Contraer {group}",
+  matrixGroupCount: "Elementos: {count}",
+  matrixDetails: "Detalles",
+  matrixClose: "Cerrar",
+  matrixValue: "Valor",
+  matrixState: "Estado",
+  matrixAllClear: "Nada requiere atención",
+  matrixShowMore: "Mostrar más",
 });
 const staticLabels = Object.freeze({
   overflowNote: "Filas mostradas: {shown}. Total: {total}.",

package/JavaScript/locales/fr.mjs

@@ -588,6 +588,39 @@ const labels = Object.freeze({
   flowCopied: "Copié",
   flowSavedIt: "Je l'ai enregistré",
   flowShownOnce: "Affiché une seule fois. Copiez-le maintenant.",
+  matrixRows: "Lignes",
+  matrixColumns: "Colonnes",
+  matrixSearch: "Rechercher des lignes et des colonnes",
+  matrixSortBy: "Trier par",
+  matrixGroupBy: "Regrouper par",
+  matrixByLabel: "Nom",
+  matrixByTotal: "Total",
+  matrixAsListed: "Comme listé",
+  matrixNoGrouping: "Aucun groupe",
+  matrixDescending: "Décroissant",
+  matrixOnlyProblems: "Problèmes uniquement",
+  matrixHideEmpty: "Masquer les lignes et colonnes vides",
+  matrixSize: "{rows} × {columns}",
+  matrixShown: "Lignes : {rows} sur {totalRows}, colonnes : {columns} sur {totalColumns}",
+  matrixAttention: "À examiner : {count}",
+  matrixLegend: "États",
+  matrixFilter: "Filtrer",
+  matrixClearFilters: "Effacer les filtres",
+  matrixNoMatches: "Aucune ligne ni colonne ne correspond.",
+  matrixSelf: "Même élément",
+  matrixNoData: "Aucune donnée",
+  matrixCell: "{row} et {column} : {state}",
+  matrixTotal: "Total",
+  matrixItemTotal: "{item} : {count}",
+  matrixExpandGroup: "Développer {group}",
+  matrixCollapseGroup: "Réduire {group}",
+  matrixGroupCount: "Éléments : {count}",
+  matrixDetails: "Détails",
+  matrixClose: "Fermer",
+  matrixValue: "Valeur",
+  matrixState: "État",
+  matrixAllClear: "Rien à examiner",
+  matrixShowMore: "Afficher plus",
 });
 const staticLabels = Object.freeze({
   overflowNote: "{shown} lignes affichées sur {total}.",

package/JavaScript/locales/it.mjs

@@ -588,6 +588,39 @@ const labels = Object.freeze({
   flowCopied: "Copiato",
   flowSavedIt: "L'ho salvato",
   flowShownOnce: "Mostrato una sola volta. Copialo ora.",
+  matrixRows: "Righe",
+  matrixColumns: "Colonne",
+  matrixSearch: "Cerca righe e colonne",
+  matrixSortBy: "Ordina per",
+  matrixGroupBy: "Raggruppa per",
+  matrixByLabel: "Nome",
+  matrixByTotal: "Totale",
+  matrixAsListed: "Come elencato",
+  matrixNoGrouping: "Nessun gruppo",
+  matrixDescending: "Decrescente",
+  matrixOnlyProblems: "Solo problemi",
+  matrixHideEmpty: "Nascondi righe e colonne vuote",
+  matrixSize: "{rows} × {columns}",
+  matrixShown: "Righe: {rows} di {totalRows}, colonne: {columns} di {totalColumns}",
+  matrixAttention: "Richiedono attenzione: {count}",
+  matrixLegend: "Stati",
+  matrixFilter: "Filtra",
+  matrixClearFilters: "Cancella filtri",
+  matrixNoMatches: "Nessuna riga o colonna corrisponde.",
+  matrixSelf: "Stesso elemento",
+  matrixNoData: "Nessun dato",
+  matrixCell: "{row} e {column}: {state}",
+  matrixTotal: "Totale",
+  matrixItemTotal: "{item}: {count}",
+  matrixExpandGroup: "Espandi {group}",
+  matrixCollapseGroup: "Comprimi {group}",
+  matrixGroupCount: "Elementi: {count}",
+  matrixDetails: "Dettagli",
+  matrixClose: "Chiudi",
+  matrixValue: "Valore",
+  matrixState: "Stato",
+  matrixAllClear: "Niente richiede attenzione",
+  matrixShowMore: "Mostra altro",
 });
 const staticLabels = Object.freeze({
   overflowNote: "Righe mostrate: {shown} su {total}.",

package/JavaScript/locales/pl.mjs

@@ -588,6 +588,39 @@ const labels = Object.freeze({
   flowCopied: "Skopiowano",
   flowSavedIt: "Mam to zapisane",
   flowShownOnce: "Widoczne tylko raz. Skopiuj teraz.",
+  matrixRows: "Wiersze",
+  matrixColumns: "Kolumny",
+  matrixSearch: "Szukaj wierszy i kolumn",
+  matrixSortBy: "Sortuj według",
+  matrixGroupBy: "Grupuj według",
+  matrixByLabel: "Nazwa",
+  matrixByTotal: "Razem",
+  matrixAsListed: "Jak na liście",
+  matrixNoGrouping: "Bez grup",
+  matrixDescending: "Malejąco",
+  matrixOnlyProblems: "Tylko problemy",
+  matrixHideEmpty: "Ukryj puste wiersze i kolumny",
+  matrixSize: "{rows} × {columns}",
+  matrixShown: "Wiersze: {rows} z {totalRows}, kolumny: {columns} z {totalColumns}",
+  matrixAttention: "Wymaga uwagi: {count}",
+  matrixLegend: "Stany",
+  matrixFilter: "Filtruj",
+  matrixClearFilters: "Wyczyść filtry",
+  matrixNoMatches: "Brak pasujących wierszy lub kolumn.",
+  matrixSelf: "Ten sam element",
+  matrixNoData: "Brak danych",
+  matrixCell: "{row} i {column}: {state}",
+  matrixTotal: "Razem",
+  matrixItemTotal: "{item}: {count}",
+  matrixExpandGroup: "Rozwiń {group}",
+  matrixCollapseGroup: "Zwiń {group}",
+  matrixGroupCount: "Elementy: {count}",
+  matrixDetails: "Szczegóły",
+  matrixClose: "Zamknij",
+  matrixValue: "Wartość",
+  matrixState: "Stan",
+  matrixAllClear: "Nic nie wymaga uwagi",
+  matrixShowMore: "Pokaż więcej",
 });
 const staticLabels = Object.freeze({
   overflowNote: "Pokazano {shown} z {total} wierszy.",

package/JavaScript/matrix.d.ts

@@ -0,0 +1,160 @@
+// Type declarations for the matrix view (docs/matrix.md): the matrix document, its state and the API of createMatrix.
+import type { CellValue } from "./protocol.js";
+
+/** A state a cell can hold, listed worst first: a collapsed group shows the worst state of its cells. */
+export interface MatrixState {
+  /** A letter, then up to 63 letters, digits, hyphens and underscores. */
+  id: string;
+  label: string;
+  /** A CanopyX tone (success, warning, danger, info, muted, neutral) or a host tone the theme defines. */
+  tone?: string;
+  /** The symbol cells and the legend draw, so a state never relies on colour alone. */
+  symbol: "check" | "cross" | "warning" | "info" | "dot" | "dash" | "question" | "clock" | "pause";
+  /** Cells in this state count in the totals and stay when the reader shows only problems. */
+  attention?: boolean;
+}
+
+/** A property of an axis's items: shown in tooltips, used to group, sort and filter. */
+export interface MatrixAttribute {
+  id: string;
+  title: string;
+  kind?: "text" | "number" | "datetime";
+  /** The filter panel lists its values with their counts. */
+  facet?: boolean;
+}
+
+/** An entity on an axis: a row or a column. */
+export interface MatrixItem {
+  id: string;
+  label: string;
+  secondary?: string;
+  /** An http, https or mailto address, or a relative one. */
+  href?: string;
+  values?: Record<string, CellValue | { value: CellValue; text?: string }>;
+}
+
+/** One axis of the matrix. */
+export interface MatrixAxis {
+  title?: string;
+  noun?: string;
+  attributes?: MatrixAttribute[];
+  items: MatrixItem[];
+  groupBy?: string;
+  sort?: MatrixSort;
+}
+
+/** How an axis is sorted: by its labels, its totals or an attribute. */
+export interface MatrixSort {
+  by: "#label" | "#total" | (string & {});
+  direction?: "asc" | "desc";
+}
+
+/** A cell's extras: [row index, column index, value, text, title, [label, value][]]. */
+export type MatrixNote = [number, number, number | null, (string | null)?, (string | null)?, ([string, string][] | null)?];
+
+/** The matrix document: `{ protocol: "canopyx/2", type: "matrix" }`. */
+export interface MatrixDocument {
+  protocol: "canopyx/2";
+  type: "matrix";
+  id: string;
+  label: string;
+  rows: MatrixAxis;
+  /** The column axis; a square matrix has none and takes its columns from its rows. */
+  columns?: MatrixAxis;
+  square?: boolean;
+  /** The column title of a square matrix. */
+  columnTitle?: string;
+  /** What the self cells of a square matrix show. */
+  diagonal?: "self" | "data";
+  states: MatrixState[];
+  /** One string per row: a state digit (0-9, a-z) per column, "." for no data. */
+  cells: string[];
+  notes?: MatrixNote[];
+  totals?: { states?: string[]; rows?: boolean; columns?: boolean };
+  attentionOnly?: boolean;
+  /** Opens hiding the rows and columns whose visible cells all lack data. */
+  hideEmpty?: boolean;
+  cellWidth?: number;
+  density?: "compact" | "normal" | "comfortable";
+  details?: "dialog" | "host";
+  phone?: "scroll" | "cards";
+  legend?: boolean;
+  /** As tall as the content when it fits, with the host's height as the bound. Default true. */
+  autoHeight?: boolean;
+  labels?: Record<string, string>;
+}
+
+/** The reader's query: search, filters by attribute value, only problems, hide empty, and each axis's sort, groups and collapsed groups. */
+export interface MatrixQueryState {
+  search: string;
+  attentionOnly: boolean;
+  hideEmpty: boolean;
+  filters: { rows: Record<string, string[]>; columns: Record<string, string[]> };
+  sort: { rows: MatrixSort | null; columns: MatrixSort | null };
+  group: { rows: string | null; columns: string | null };
+  collapsed: { rows: string[]; columns: string[] };
+}
+
+/** What canopyx:matrixCell carries: the row and column (or their groups), the state and the cell's extras. */
+export interface MatrixCellDetail {
+  matrix: string;
+  row: string | null;
+  rowGroup: string | null;
+  column: string | null;
+  columnGroup: string | null;
+  /** The state id, "self" for a self cell, or null without data. */
+  state: string | null;
+  value: number | null;
+  text: string | null;
+  title: string | null;
+  details: [string, string][];
+  /** The cells a rolled-up cell covers, and how many of them need attention. */
+  members: number;
+  attention: number;
+}
+
+/** A state to apply: any part of the query, down to one axis of filters, sorts, groups or collapsed groups. */
+export interface MatrixStateInput {
+  search?: string;
+  attentionOnly?: boolean;
+  hideEmpty?: boolean;
+  filters?: { rows?: Record<string, string[] | null>; columns?: Record<string, string[] | null> };
+  sort?: { rows?: MatrixSort | null; columns?: MatrixSort | null };
+  group?: { rows?: string | null; columns?: string | null };
+  collapsed?: { rows?: string[]; columns?: string[] };
+}
+
+/** Options of createMatrix and CanopyX.configure for a matrix fragment. */
+export interface MatrixOptions {
+  view: MatrixDocument;
+  labels?: Record<string, string>;
+  state?: MatrixStateInput;
+  onReady?: (detail: { matrix: string }) => void;
+  /** Called before the details dialog; preventDefault on the event keeps it closed. */
+  onCell?: (detail: MatrixCellDetail, event: CustomEvent<MatrixCellDetail>) => void;
+  onStateChange?: (state: MatrixQueryState) => void;
+}
+
+/** The API of a matrix. Call it once `ready` has settled; a call made before the matrix part is in waits for it and returns a promise instead. */
+export interface MatrixApi {
+  readonly element: HTMLElement;
+  readonly view: MatrixDocument;
+  readonly ready: Promise<MatrixApi>;
+  sort(axis: "rows" | "columns", by: MatrixSort["by"] | null, direction?: "asc" | "desc"): void;
+  group(axis: "rows" | "columns", attribute: string | null): void;
+  filter(axis: "rows" | "columns", attribute: string, values: string[] | null): void;
+  setSearch(text: string): void;
+  setAttentionOnly(on: boolean): void;
+  getState(): Readonly<MatrixQueryState>;
+  setState(state: MatrixStateInput): void;
+  /** The ids of the visible items, members of collapsed groups included, in order. */
+  getVisible(): Readonly<{ rows: string[]; columns: string[] }>;
+  /** Moves focus to a cell; false when the row or column is not shown. */
+  focusCell(row: string, column: string): boolean;
+  /** Replaces the document, keeping the query that still applies (live refresh). */
+  update(view: MatrixDocument): void;
+  destroy(): void;
+}
+
+/** Creates a status matrix in a host element (docs/matrix.md). Ships with the grid and reporting entry points. */
+export declare function createMatrix(host: HTMLElement, options: MatrixOptions): MatrixApi;

package/README.md

@@ -20,15 +20,16 @@ Turn application data into searchable trees, sortable tables and standalone HTML
 - **Application views** backed by paged or cursor-based data sources, with selection and detail callbacks.
 - **Email and print tables** rendered from the same .NET view without JavaScript.
 - **Calendars and resource timelines** of the same records: month, week, day, agenda and year views, resources grouped as a tree with capacity per group, recurring events, drag to reschedule through the grid's editing, and iCalendar export.
+- **Status matrices**: a state for each pair of two sets of entities, with totals, sorting, filtering and grouping on both axes, sticky headers and both axes windowed ([docs/matrix.md](docs/matrix.md)).
 - **Guided flows** for setup and edit tasks: steps with typed fields, conditions as data, validation, a review page with change links, secrets that never echo, and one proposal to the host ([docs/flow.md](docs/flow.md)).
 
-![File explorer in the light theme, with sizes, dates, owners and an expanded detail row](https://cdn.jsdelivr.net/npm/@evotecit/canopyx@0.3.3/docs/images/tree-grid-light.png)
+![File explorer in the light theme, with sizes, dates, owners and an expanded detail row](https://cdn.jsdelivr.net/npm/@evotecit/canopyx@0.3.5/docs/images/tree-grid-light.png)
 
 The same explorer in the dark theme, alongside its script-free output for email and print:
 
 | Dark theme | Static outline |
 | --- | --- |
-| ![File explorer in the dark theme](https://cdn.jsdelivr.net/npm/@evotecit/canopyx@0.3.3/docs/images/tree-grid-dark.png) | ![Static outline table](https://cdn.jsdelivr.net/npm/@evotecit/canopyx@0.3.3/docs/images/static-outline.png) |
+| ![File explorer in the dark theme](https://cdn.jsdelivr.net/npm/@evotecit/canopyx@0.3.5/docs/images/tree-grid-dark.png) | ![Static outline table](https://cdn.jsdelivr.net/npm/@evotecit/canopyx@0.3.5/docs/images/static-outline.png) |
 
 ## Features
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evotecit/canopyx",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "Interactive tree grids and data tables with virtual rows, search, filters and offline HTML reports.",
   "type": "module",
   "license": "MIT",
@@ -48,6 +48,8 @@
     "./forms.css": "./CanopyX.Html/Assets/canopyx-forms.css",
     "./flow.js": "./CanopyX.Html/Assets/canopyx-flow.js",
     "./flow.css": "./CanopyX.Html/Assets/canopyx-flow.css",
+    "./matrix.js": "./CanopyX.Html/Assets/canopyx-matrix.js",
+    "./matrix.css": "./CanopyX.Html/Assets/canopyx-matrix.css",
     "./editing.js": "./CanopyX.Html/Assets/canopyx-editing.js",
     "./editing.css": "./CanopyX.Html/Assets/canopyx-editing.css",
     "./column-groups.js": "./CanopyX.Html/Assets/canopyx-column-groups.js",
@@ -143,6 +145,8 @@
     "CanopyX.Html/Assets/canopyx-forms.css",
     "CanopyX.Html/Assets/canopyx-flow.js",
     "CanopyX.Html/Assets/canopyx-flow.css",
+    "CanopyX.Html/Assets/canopyx-matrix.js",
+    "CanopyX.Html/Assets/canopyx-matrix.css",
     "CanopyX.Html/Assets/canopyx-editing.js",
     "CanopyX.Html/Assets/canopyx-editing.css",
     "CanopyX.Html/Assets/canopyx-column-groups.js",