@robosystems/report-components 0.1.3 → 0.2.0

package/dist/index.js

@@ -1,7 +1,7 @@
-import { BLOCK_ORDER, BLOCK_TITLES, humanize, qname } from './chunk-JTTICHPF.js';
-export { BLOCK_ORDER, BLOCK_TITLES, NS, cypherAdapter, humanize, jsonldFileAdapter, parseJsonld, parseStore, qname } from './chunk-JTTICHPF.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useMemo, useState } from 'react';
+import { isExternalFactUrl, BLOCK_ORDER, BLOCK_TITLES, humanize, qname } from './chunk-POSLHOTN.js';
+export { BLOCK_ORDER, BLOCK_TITLES, NS, cypherAdapter, fetchSecReportShell, fetchSecSection, humanize, isExternalFactUrl, jsonldFileAdapter, mergeSecSections, parseJsonld, parseStore, parseStructureDefinition, qname } from './chunk-POSLHOTN.js';
+import { useState, useEffect, useMemo, useRef } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/format.ts
 function formatMoney(value, opts = {}) {
@@ -81,8 +81,19 @@ function calcSubtotals(model) {
   for (const assoc of model.calcAssociations) out.add(assoc.parent);
   return out;
 }
-function structureForBlock(model, blockType) {
-  return model.structures.find((s) => s.blockType === blockType) ?? null;
+function structureForBlock(model, ib) {
+  if (ib.structureId) {
+    const byId = model.structures.find((s) => s.id === ib.structureId);
+    if (byId) return byId;
+  }
+  return model.structures.find((s) => s.blockType === ib.blockType) ?? null;
+}
+function blockOrder(model, ib) {
+  if (ib.structureId) {
+    const s = model.structures.find((x) => x.id === ib.structureId);
+    if (s?.order !== void 0) return s.order;
+  }
+  return BLOCK_ORDER[ib.blockType] ?? 99;
 }
 function columnLabel(period) {
   return formatDate(period.end);
@@ -104,7 +115,7 @@ function deriveColumns(model, facts) {
   }).map((period) => ({ key: period.end, label: columnLabel(period), period }));
 }
 function buildStatement(model, ib, subtotals) {
-  const structure = structureForBlock(model, ib.blockType);
+  const structure = structureForBlock(model, ib);
   const order = structure ? presentationOrder(model, structure.id) : /* @__PURE__ */ new Map();
   const facts = model.facts.filter((f) => f.factSet !== null && f.factSet === ib.factSet);
   const columns = deriveColumns(model, facts);
@@ -117,10 +128,10 @@ function buildStatement(model, ib, subtotals) {
     if (idx === void 0) continue;
     let cells = cellsByElement.get(fact.element);
     if (!cells) {
-      cells = columns.map(() => ({ value: null, fact: null }));
+      cells = columns.map(() => ({ value: null, fact: null, textValue: null }));
       cellsByElement.set(fact.element, cells);
     }
-    cells[idx] = { value: fact.value, fact };
+    cells[idx] = { value: fact.value, fact, textValue: fact.textValue ?? null };
   }
   const rows = [...cellsByElement.keys()].map((id) => {
     const entry = order.get(id);
@@ -135,19 +146,27 @@ function buildStatement(model, ib, subtotals) {
     isSubtotal: subtotals.has(id),
     cells: cellsByElement.get(id)
   }));
+  const title = ib.structureId ? structure?.structureName ?? ib.label ?? BLOCK_TITLES[ib.blockType] ?? ib.blockType : BLOCK_TITLES[ib.blockType] ?? ib.label ?? ib.blockType;
   return {
     ib,
     blockType: ib.blockType,
-    title: BLOCK_TITLES[ib.blockType] ?? ib.label ?? ib.blockType,
-    structureName: structure?.structureName ?? ib.label ?? null,
+    title,
+    structureName: ib.structureId ? null : structure?.structureName ?? ib.label ?? null,
     columns,
     rows
   };
 }
+function reportSections(model) {
+  return buildStatements(model).map((s) => ({ id: s.ib.id, title: s.title }));
+}
+function sliceReportSection(model, informationBlockId) {
+  const ib = model.informationBlocks.find((b) => b.id === informationBlockId);
+  return { ...model, informationBlocks: ib ? [ib] : [] };
+}
 function buildStatements(model) {
   const subtotals = calcSubtotals(model);
   return [...model.informationBlocks].sort(
-    (a, b) => (BLOCK_ORDER[a.blockType] ?? 99) - (BLOCK_ORDER[b.blockType] ?? 99) || a.blockType.localeCompare(b.blockType)
+    (a, b) => blockOrder(model, a) - blockOrder(model, b) || a.blockType.localeCompare(b.blockType)
   ).map((ib) => buildStatement(model, ib, subtotals));
 }
 function footCheck(model, statement, elementId, columnIndex) {
@@ -176,6 +195,93 @@ function footCheck(model, statement, elementId, columnIndex) {
   };
 }
 var styles = {
+  status: {
+    fontFamily: "var(--rs-font-sans, ui-sans-serif, system-ui, sans-serif)",
+    fontSize: "0.85rem",
+    color: "var(--rs-muted, #6b7280)",
+    padding: "0.75rem 0"
+  },
+  link: { color: "var(--rs-primary-700, #1d4ed8)" },
+  frame: { width: "100%", border: "none", display: "block" },
+  pre: {
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+    fontFamily: "var(--rs-font-mono, ui-monospace, monospace)",
+    fontSize: "0.85rem",
+    color: "var(--rs-text, #111827)",
+    margin: 0
+  }
+};
+function wrapHtml(body) {
+  return `<!doctype html><html><head><meta charset="utf-8"><base target="_blank"><style>
+    :root { color-scheme: light; }
+    body { margin: 0; color: #111827;
+      font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+      font-size: 13px; line-height: 1.45; }
+    img, svg { max-width: 100%; height: auto; }
+    table { max-width: 100%; border-collapse: collapse; }
+    a { color: #1d4ed8; }
+  </style></head><body>${body}</body></html>`;
+}
+function SandboxedHtml({ html }) {
+  const ref = useRef(null);
+  const fit = () => {
+    const frame = ref.current;
+    const doc = frame?.contentWindow?.document;
+    if (!frame || !doc) return;
+    try {
+      frame.style.height = `${doc.documentElement.scrollHeight}px`;
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      ref,
+      title: "Disclosure",
+      sandbox: "allow-same-origin",
+      srcDoc: wrapHtml(html),
+      style: styles.frame,
+      onLoad: () => {
+        fit();
+        setTimeout(fit, 250);
+      }
+    }
+  );
+}
+function ExternalTextBlock({ url }) {
+  const [state, setState] = useState("loading");
+  const [body, setBody] = useState("");
+  const isHtml = /\.html$/i.test(url);
+  useEffect(() => {
+    let cancelled = false;
+    setState("loading");
+    fetch(url).then((r) => {
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      return r.text();
+    }).then((text) => {
+      if (cancelled) return;
+      setBody(text);
+      setState("ready");
+    }).catch(() => {
+      if (!cancelled) setState("error");
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [url]);
+  if (state === "loading") return /* @__PURE__ */ jsx("div", { style: styles.status, children: "Loading disclosure\u2026" });
+  if (state === "error") {
+    return /* @__PURE__ */ jsxs("div", { style: styles.status, children: [
+      "Could not load this disclosure.",
+      " ",
+      /* @__PURE__ */ jsx("a", { style: styles.link, href: url, target: "_blank", rel: "noreferrer", children: "Open it directly \u2197" })
+    ] });
+  }
+  if (!isHtml) return /* @__PURE__ */ jsx("pre", { style: styles.pre, children: body });
+  return /* @__PURE__ */ jsx(SandboxedHtml, { html: body });
+}
+var styles2 = {
   panel: {
     fontFamily: "var(--rs-font-sans, ui-sans-serif, system-ui, sans-serif)",
     color: "var(--rs-text, #111827)",
@@ -192,11 +298,17 @@ var styles = {
     gap: "1rem",
     marginBottom: "0.75rem"
   },
-  label: { fontSize: "1rem", fontWeight: 700, margin: 0 },
+  // `minWidth: 0` lets this flex child shrink below its content so the long
+  // label / qname wrap inside the panel instead of overflowing it.
+  headerText: { minWidth: 0 },
+  label: { fontSize: "1rem", fontWeight: 700, margin: 0, overflowWrap: "anywhere" },
   qname: {
+    display: "block",
     fontFamily: "var(--rs-font-mono, ui-monospace, monospace)",
     fontSize: "0.8rem",
-    color: "var(--rs-primary-700, #1d4ed8)"
+    color: "var(--rs-primary-700, #1d4ed8)",
+    // qnames are single unbroken tokens — break anywhere so they don't overflow.
+    overflowWrap: "anywhere"
   },
   close: {
     border: "none",
@@ -235,7 +347,7 @@ var styles = {
 };
 function Field({ k, children }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { style: styles.key, children: k }),
+    /* @__PURE__ */ jsx("span", { style: styles2.key, children: k }),
     /* @__PURE__ */ jsx("span", { children })
   ] });
 }
@@ -253,20 +365,20 @@ function FactInspector({
   const unit = cell.fact?.unit ? report.units[cell.fact.unit] : null;
   const foot = footCheck(report, statement, element.id, columnIndex);
   const sym = currencySymbol;
-  return /* @__PURE__ */ jsxs("div", { style: styles.panel, children: [
-    /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("p", { style: styles.label, children: element.label }),
-        /* @__PURE__ */ jsx("span", { style: styles.qname, children: element.qname })
+  return /* @__PURE__ */ jsxs("div", { style: styles2.panel, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles2.header, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles2.headerText, children: [
+        /* @__PURE__ */ jsx("p", { style: styles2.label, children: element.label }),
+        /* @__PURE__ */ jsx("span", { style: styles2.qname, children: element.qname })
       ] }),
-      onClose ? /* @__PURE__ */ jsx("button", { style: styles.close, onClick: onClose, "aria-label": "Close", children: "\xD7" }) : null
+      onClose ? /* @__PURE__ */ jsx("button", { style: styles2.close, onClick: onClose, "aria-label": "Close", children: "\xD7" }) : null
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: styles.grid, children: [
-      /* @__PURE__ */ jsx(Field, { k: "Value", children: /* @__PURE__ */ jsx("span", { style: styles.mono, children: formatMoney(cell.value, { currencySymbol: sym }) }) }),
+    /* @__PURE__ */ jsxs("div", { style: styles2.grid, children: [
+      /* @__PURE__ */ jsx(Field, { k: "Value", children: cell.value === null && cell.textValue ? /* @__PURE__ */ jsx("span", { children: cell.textValue }) : /* @__PURE__ */ jsx("span", { style: styles2.mono, children: formatMoney(cell.value, { currencySymbol: sym }) }) }),
       /* @__PURE__ */ jsxs(Field, { k: "Period", children: [
         formatPeriod(column.period),
         " ",
-        /* @__PURE__ */ jsxs("span", { style: styles.key, children: [
+        /* @__PURE__ */ jsxs("span", { style: styles2.key, children: [
           "(",
           column.period.type,
           ")"
@@ -276,12 +388,12 @@ function FactInspector({
       element.balance ? /* @__PURE__ */ jsx(Field, { k: "Balance", children: element.balance }) : null,
       cell.fact?.decimals ? /* @__PURE__ */ jsx(Field, { k: "Decimals", children: cell.fact.decimals }) : null
     ] }),
-    foot ? /* @__PURE__ */ jsxs("div", { style: styles.footing, children: [
-      /* @__PURE__ */ jsxs("div", { style: styles.footTitle, children: [
+    foot ? /* @__PURE__ */ jsxs("div", { style: styles2.footing, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles2.footTitle, children: [
         "Calculation ",
         foot.ok ? "\u2713 foots" : "\u26A0 does not foot"
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: styles.equation, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles2.equation, children: [
         foot.terms.map((term, i) => {
           const op = i === 0 ? term.weight < 0 ? "\u2212" : "" : term.weight < 0 ? " \u2212 " : " + ";
           return /* @__PURE__ */ jsxs("span", { title: term.element.qname, children: [
@@ -303,7 +415,7 @@ function FactInspector({
     ] }) : null
   ] });
 }
-var styles2 = {
+var styles3 = {
   wrap: {
     fontFamily: "var(--rs-font-sans, ui-sans-serif, system-ui, sans-serif)",
     color: "var(--rs-text, #111827)",
@@ -349,6 +461,18 @@ var styles2 = {
     whiteSpace: "nowrap",
     fontFamily: "var(--rs-font-mono, ui-monospace, SFMono-Regular, monospace)",
     fontVariantNumeric: "tabular-nums"
+  },
+  textBlockCell: {
+    padding: "0.75rem",
+    borderTop: "1px solid var(--rs-border, #e5e7eb)"
+  },
+  textBlockLabel: {
+    fontSize: "0.7rem",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    fontWeight: 600,
+    color: "var(--rs-muted, #6b7280)",
+    marginBottom: "0.5rem"
   }
 };
 function StatementTable({
@@ -359,25 +483,34 @@ function StatementTable({
 }) {
   const { columns, rows } = statement;
   const periodCaption = columns.length === 1 ? formatPeriod(columns[0].period) : null;
-  return /* @__PURE__ */ jsxs("section", { style: styles2.wrap, children: [
-    /* @__PURE__ */ jsxs("header", { style: styles2.heading, children: [
-      /* @__PURE__ */ jsx("h3", { style: styles2.title, children: statement.title }),
-      statement.structureName ? /* @__PURE__ */ jsx("div", { style: styles2.subtitle, children: statement.structureName }) : null,
-      periodCaption ? /* @__PURE__ */ jsx("div", { style: styles2.subtitle, children: periodCaption }) : null
+  return /* @__PURE__ */ jsxs("section", { style: styles3.wrap, children: [
+    /* @__PURE__ */ jsxs("header", { style: styles3.heading, children: [
+      /* @__PURE__ */ jsx("h3", { style: styles3.title, children: statement.title }),
+      statement.structureName ? /* @__PURE__ */ jsx("div", { style: styles3.subtitle, children: statement.structureName }) : null,
+      periodCaption ? /* @__PURE__ */ jsx("div", { style: styles3.subtitle, children: periodCaption }) : null
     ] }),
-    /* @__PURE__ */ jsxs("table", { style: styles2.table, children: [
+    /* @__PURE__ */ jsxs("table", { style: styles3.table, children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { style: { ...styles2.th, ...styles2.thConcept }, children: "Concept" }),
-        columns.map((col) => /* @__PURE__ */ jsx("th", { style: { ...styles2.th, ...styles2.thNum }, children: col.label }, col.key))
+        /* @__PURE__ */ jsx("th", { style: { ...styles3.th, ...styles3.thConcept }, children: "Concept" }),
+        columns.map((col) => /* @__PURE__ */ jsx("th", { style: { ...styles3.th, ...styles3.thNum }, children: col.label }, col.key))
       ] }) }),
       /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => {
+        const textBlock = row.cells.find(
+          (c) => c.value === null && isExternalFactUrl(c.textValue)
+        );
+        if (textBlock?.textValue) {
+          return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", { colSpan: columns.length + 1, style: styles3.textBlockCell, children: [
+            /* @__PURE__ */ jsx("div", { style: styles3.textBlockLabel, title: row.element.qname, children: row.element.label }),
+            /* @__PURE__ */ jsx(ExternalTextBlock, { url: textBlock.textValue })
+          ] }) }, row.element.id);
+        }
         const isGrandTotal = row.isSubtotal && row.depth === 0;
         const allZeroOrNull = row.cells.every((c) => c.value === null || c.value === 0);
         const rowStyle = {
           backgroundColor: row.isSubtotal ? "var(--rs-subtotal-bg, #f9fafb)" : void 0
         };
         const labelStyle = {
-          ...styles2.labelCell,
+          ...styles3.labelCell,
           paddingLeft: `${row.depth * 20 + 12}px`,
           fontWeight: row.isSubtotal ? 600 : 400,
           color: !row.isSubtotal && allZeroOrNull ? "var(--rs-muted, #9ca3af)" : void 0,
@@ -388,20 +521,26 @@ function StatementTable({
           row.cells.map((cell, i) => {
             const isSelected = selected !== null && selected.elementId === row.element.id && selected.columnIndex === i;
             const clickable = onCellClick && cell.fact !== null;
+            const isText = cell.value === null && cell.textValue != null && cell.textValue !== "";
             const numStyle = {
-              ...styles2.numCell,
+              ...styles3.numCell,
               fontWeight: row.isSubtotal ? 600 : 400,
               borderBottom: isGrandTotal ? "3px double var(--rs-text, #111827)" : void 0,
               cursor: clickable ? "pointer" : "default",
               backgroundColor: isSelected ? "var(--rs-selected-bg, #dbeafe)" : void 0,
-              color: !row.isSubtotal && (cell.value === null || cell.value === 0) ? "var(--rs-muted, #9ca3af)" : void 0
+              color: !isText && !row.isSubtotal && (cell.value === null || cell.value === 0) ? "var(--rs-muted, #9ca3af)" : void 0,
+              ...isText ? {
+                textAlign: "left",
+                whiteSpace: "normal",
+                fontFamily: "var(--rs-font-sans, ui-sans-serif, system-ui, sans-serif)"
+              } : {}
             };
             return /* @__PURE__ */ jsx(
               "td",
               {
                 style: numStyle,
                 onClick: clickable ? () => onCellClick?.(row, i) : void 0,
-                children: formatMoney(cell.value, { currencySymbol })
+                children: isText ? cell.textValue : formatMoney(cell.value, { currencySymbol })
               },
               columns[i].key
             );
@@ -411,7 +550,7 @@ function StatementTable({
     ] })
   ] });
 }
-var styles3 = {
+var styles4 = {
   layout: {
     display: "grid",
     gridTemplateColumns: "minmax(0, 1fr)",
@@ -432,7 +571,6 @@ var styles3 = {
     margin: 0,
     color: "var(--rs-text, #111827)"
   },
-  entitySub: { fontSize: "0.85rem", color: "var(--rs-muted, #6b7280)" },
   panel: { position: "sticky", top: "1rem" }
 };
 function ReportView({ report, currencySymbol = "$", inspect = true }) {
@@ -441,16 +579,13 @@ function ReportView({ report, currencySymbol = "$", inspect = true }) {
   const selected = selection !== null ? statements[selection.statementIndex] : null;
   const selectedRow = selected?.rows.find((r) => r.element.id === selection?.elementId) ?? null;
   return /* @__PURE__ */ jsxs("div", { children: [
-    report.entity ? /* @__PURE__ */ jsxs("header", { style: styles3.entity, children: [
-      /* @__PURE__ */ jsx("h2", { style: styles3.entityName, children: report.entity.name }),
-      report.entity.country ? /* @__PURE__ */ jsx("div", { style: styles3.entitySub, children: report.entity.country }) : null
-    ] }) : null,
+    report.entity ? /* @__PURE__ */ jsx("header", { style: styles4.entity, children: /* @__PURE__ */ jsx("h2", { style: styles4.entityName, children: report.entity.name }) }) : null,
     /* @__PURE__ */ jsxs(
       "div",
       {
         style: {
-          ...styles3.layout,
-          ...inspect && selectedRow ? styles3.layoutWithPanel : {}
+          ...styles4.layout,
+          ...inspect && selectedRow ? styles4.layoutWithPanel : {}
         },
         children: [
           /* @__PURE__ */ jsx("div", { children: statements.map((statement, statementIndex) => /* @__PURE__ */ jsx(
@@ -470,7 +605,7 @@ function ReportView({ report, currencySymbol = "$", inspect = true }) {
             },
             statement.ib.id
           )) }),
-          inspect && selected && selectedRow && selection ? /* @__PURE__ */ jsx("div", { style: styles3.panel, children: /* @__PURE__ */ jsx(
+          inspect && selected && selectedRow && selection ? /* @__PURE__ */ jsx("div", { style: styles4.panel, children: /* @__PURE__ */ jsx(
             FactInspector,
             {
               report,
@@ -487,6 +622,6 @@ function ReportView({ report, currencySymbol = "$", inspect = true }) {
   ] });
 }
 
-export { FactInspector, ReportView, StatementTable, buildStatements, calcSubtotals, footCheck, formatDate, formatMoney, formatPeriod, presentationOrder };
+export { ExternalTextBlock, FactInspector, ReportView, StatementTable, buildStatements, calcSubtotals, footCheck, formatDate, formatMoney, formatPeriod, presentationOrder, reportSections, sliceReportSection };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map