feat: add local OneNote and ONEPKG reader

src/components/DiagnosticsPanel.tsx

@@ -0,0 +1,70 @@
+import type { ParserDiagnostic } from '../onenote/model/diagnostics.js';
+
+interface DiagnosticsPanelProps {
+  diagnostics: ParserDiagnostic[];
+  title?: string;
+}
+
+function formatOffset(offset: number): string {
+  return `0x${offset.toString(16).toUpperCase()}`;
+}
+
+export function DiagnosticsPanel({
+  diagnostics,
+  title = 'Diagnostics',
+}: DiagnosticsPanelProps) {
+  return (
+    <section className="diagnostics" aria-labelledby="diagnostics-title">
+      <div className="panel-heading">
+        <div>
+          <p className="eyebrow">Parser details</p>
+          <h2 id="diagnostics-title">{title}</h2>
+        </div>
+        <span className="count-badge">{diagnostics.length}</span>
+      </div>
+
+      {diagnostics.length === 0 ? (
+        <p className="empty-message">No parser diagnostics for this view.</p>
+      ) : (
+        <ul className="diagnostic-list">
+          {diagnostics.map((diagnostic, index) => (
+            <li
+              className={`diagnostic diagnostic--${diagnostic.severity}`}
+              key={`${diagnostic.code}-${diagnostic.offset ?? 'none'}-${index}`}
+            >
+              <div className="diagnostic__summary">
+                <strong>{diagnostic.code}</strong>
+                <span>{diagnostic.severity}</span>
+              </div>
+              <p>{diagnostic.message}</p>
+              {diagnostic.structure !== undefined ||
+              diagnostic.offset !== undefined ||
+              diagnostic.propertyId !== undefined ? (
+                <dl className="diagnostic__context">
+                  {diagnostic.structure !== undefined ? (
+                    <>
+                      <dt>Structure</dt>
+                      <dd>{diagnostic.structure}</dd>
+                    </>
+                  ) : null}
+                  {diagnostic.offset !== undefined ? (
+                    <>
+                      <dt>Offset</dt>
+                      <dd>{formatOffset(diagnostic.offset)}</dd>
+                    </>
+                  ) : null}
+                  {diagnostic.propertyId !== undefined ? (
+                    <>
+                      <dt>Property</dt>
+                      <dd>{diagnostic.propertyId}</dd>
+                    </>
+                  ) : null}
+                </dl>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}