@mj-biz-apps/contracts-ng 0.1.0

package/dist/lib/sections/section-shell.component.d.ts

@@ -0,0 +1,73 @@
+/**
+ * @fileoverview `mjc-section-shell` — the frame every Contracts section renders inside.
+ *
+ * One of the three top-level sections occupies a tab in MJ Explorer; each owns a LEFT rail over its
+ * own sub-pages. This component is that frame: MJ's chrome trio plus `<mj-left-nav>`, with the active
+ * sub-page projected into the content pane.
+ *
+ * COMPOSITION RATHER THAN INHERITANCE, deliberately. Angular does not inherit templates, so a base
+ * *class* would force one copy of this markup per section — and three copies of a frame is three
+ * places for the frame to drift. Each section is a thin component that hands this one a rail and
+ * projects a page.
+ *
+ * Nothing here is bespoke chrome: header, body, rail and content pane all come from
+ * `@memberjunction/ng-ui-components`. A section with its own gradient header is a section that no
+ * longer looks like MJ.
+ *
+ * THREE TRAPS ORDERS PAID FOR, INHERITED HERE RATHER THAN REDISCOVERED — each is load-bearing and
+ * each looks like styling:
+ *
+ *  1. NO TOOLBAR SLOT. MJ hides its toolbar row when empty (`:empty` on
+ *     `mj-page-header-row--toolbar`), but a wrapper `div` carrying the `toolbar` attribute is itself a
+ *     child node, so the row stops counting as empty and renders its border plus padding on every
+ *     section forever — orders measured 29px of dead space on all four. No section here projects a
+ *     toolbar, so the slot would only ever cost height. A section that needs one must add the wrapper
+ *     back AND guard it with an `@if`.
+ *  2. `mj-page-body-interior` IS REQUIRED FOR SCROLLING. `mj-left-nav-content` forces every DIRECT
+ *     child to flex + `height:100%` + `overflow:hidden` via a `::ng-deep` child rule that outranks a
+ *     page's own `:host { overflow:auto }`. Projected straight in, every page becomes a fixed-height
+ *     box with its overflow hidden and anything past the fold is unreachable — a mouse wheel cannot
+ *     scroll `overflow:hidden`. `mj-page-body-interior` is MJ's own answer: it is named in that rule's
+ *     `:not()` exemption list and self-declares `flex:1 1 auto; overflow-y:auto`. Wrapping here fixes
+ *     every section at once and keeps pages as grandchildren, so their own `:host` layout applies.
+ *  3. `ViewEncapsulation.None` + `styleUrls` IS HOW THE KIT SHIPS. `ngc` only compiles what a
+ *     component references, so a standalone stylesheet nothing imports gets built into `dist` and
+ *     never loaded by a real Explorer — the app renders as unstyled text while the mockups look
+ *     perfect, because those `@import` it by hand. Referencing the kit from the shell every section
+ *     renders inside means Angular carries it wherever the app is mounted. `None` is required, not
+ *     lazy: these classes are used by DESCENDANT components, so scoping them breaks them.
+ *
+ * @module @mj-biz-apps/contracts-ng
+ */
+import { EventEmitter } from '@angular/core';
+import { type MJLeftNavItem, type MJLeftNavSection } from '@memberjunction/ng-ui-components';
+import * as i0 from "@angular/core";
+export declare class MJCSectionShellComponent {
+    /** Section title — the identity of the whole tab, so sub-pages never restate it. */
+    Title: string;
+    /** Font Awesome class for the title. */
+    Icon: string;
+    /** One line saying what this section is for. */
+    Subtitle: string;
+    /** The rail, built by {@link BuildLeftNavSections} from the section's page list. */
+    NavSections: MJLeftNavSection[];
+    /** Which sub-page is showing. Drives the rail's active state. */
+    ActivePageId: string | null;
+    /** Rail width in pixels. 232 matches the mockups and orders. */
+    RailWidth: number;
+    /** Shows the content pane's built-in spinner instead of the projected page. */
+    Loading: boolean;
+    /** Shows the content pane's built-in error state. Null clears it. */
+    Error: string | null;
+    /**
+     * A rail item was chosen. Emits the page id.
+     *
+     * Emitted rather than acted on: this component does not know how the host loads a page, and a
+     * shell that routed would stop being reusable outside the one app that taught it how.
+     */
+    PageSelected: EventEmitter<string>;
+    protected onItemClicked(item: MJLeftNavItem): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJCSectionShellComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJCSectionShellComponent, "mjc-section-shell", never, { "Title": { "alias": "Title"; "required": false; }; "Icon": { "alias": "Icon"; "required": false; }; "Subtitle": { "alias": "Subtitle"; "required": false; }; "NavSections": { "alias": "NavSections"; "required": false; }; "ActivePageId": { "alias": "ActivePageId"; "required": false; }; "RailWidth": { "alias": "RailWidth"; "required": false; }; "Loading": { "alias": "Loading"; "required": false; }; "Error": { "alias": "Error"; "required": false; }; }, { "PageSelected": "PageSelected"; }, never, ["[meta]", "[actions]", "*"], true, never>;
+}
+//# sourceMappingURL=section-shell.component.d.ts.map

package/dist/lib/sections/section-shell.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-shell.component.d.ts","sourceRoot":"","sources":["../../../src/lib/sections/section-shell.component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,OAAO,EAAa,YAAY,EAAoC,MAAM,eAAe,CAAC;AAE1F,OAAO,EAOH,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACxB,MAAM,kCAAkC,CAAC;;AAE1C,qBAwCa,wBAAwB;IACjC,oFAAoF;IAC3E,KAAK,SAAM;IAEpB,wCAAwC;IAC/B,IAAI,SAAM;IAEnB,gDAAgD;IACvC,QAAQ,SAAM;IAEvB,oFAAoF;IAC3E,WAAW,EAAE,gBAAgB,EAAE,CAAM;IAE9C,iEAAiE;IACxD,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE5C,gEAAgE;IACvD,SAAS,SAAO;IAEzB,+EAA+E;IACtE,OAAO,UAAS;IAEzB,qEAAqE;IAC5D,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAErC;;;;;OAKG;IACO,YAAY,uBAA8B;IAEpD,SAAS,CAAC,aAAa,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI;yCAjCzC,wBAAwB;2CAAxB,wBAAwB;CAwCpC"}

package/dist/lib/sections/section-shell.component.js

@@ -0,0 +1,170 @@
+/**
+ * @fileoverview `mjc-section-shell` — the frame every Contracts section renders inside.
+ *
+ * One of the three top-level sections occupies a tab in MJ Explorer; each owns a LEFT rail over its
+ * own sub-pages. This component is that frame: MJ's chrome trio plus `<mj-left-nav>`, with the active
+ * sub-page projected into the content pane.
+ *
+ * COMPOSITION RATHER THAN INHERITANCE, deliberately. Angular does not inherit templates, so a base
+ * *class* would force one copy of this markup per section — and three copies of a frame is three
+ * places for the frame to drift. Each section is a thin component that hands this one a rail and
+ * projects a page.
+ *
+ * Nothing here is bespoke chrome: header, body, rail and content pane all come from
+ * `@memberjunction/ng-ui-components`. A section with its own gradient header is a section that no
+ * longer looks like MJ.
+ *
+ * THREE TRAPS ORDERS PAID FOR, INHERITED HERE RATHER THAN REDISCOVERED — each is load-bearing and
+ * each looks like styling:
+ *
+ *  1. NO TOOLBAR SLOT. MJ hides its toolbar row when empty (`:empty` on
+ *     `mj-page-header-row--toolbar`), but a wrapper `div` carrying the `toolbar` attribute is itself a
+ *     child node, so the row stops counting as empty and renders its border plus padding on every
+ *     section forever — orders measured 29px of dead space on all four. No section here projects a
+ *     toolbar, so the slot would only ever cost height. A section that needs one must add the wrapper
+ *     back AND guard it with an `@if`.
+ *  2. `mj-page-body-interior` IS REQUIRED FOR SCROLLING. `mj-left-nav-content` forces every DIRECT
+ *     child to flex + `height:100%` + `overflow:hidden` via a `::ng-deep` child rule that outranks a
+ *     page's own `:host { overflow:auto }`. Projected straight in, every page becomes a fixed-height
+ *     box with its overflow hidden and anything past the fold is unreachable — a mouse wheel cannot
+ *     scroll `overflow:hidden`. `mj-page-body-interior` is MJ's own answer: it is named in that rule's
+ *     `:not()` exemption list and self-declares `flex:1 1 auto; overflow-y:auto`. Wrapping here fixes
+ *     every section at once and keeps pages as grandchildren, so their own `:host` layout applies.
+ *  3. `ViewEncapsulation.None` + `styleUrls` IS HOW THE KIT SHIPS. `ngc` only compiles what a
+ *     component references, so a standalone stylesheet nothing imports gets built into `dist` and
+ *     never loaded by a real Explorer — the app renders as unstyled text while the mockups look
+ *     perfect, because those `@import` it by hand. Referencing the kit from the shell every section
+ *     renders inside means Angular carries it wherever the app is mounted. `None` is required, not
+ *     lazy: these classes are used by DESCENDANT components, so scoping them breaks them.
+ *
+ * @module @mj-biz-apps/contracts-ng
+ */
+import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MJLeftNavComponent, MJLeftNavContentComponent, MJPageBodyComponent, MJPageBodyInteriorComponent, MJPageHeaderComponent, MJPageLayoutComponent, } from '@memberjunction/ng-ui-components';
+import * as i0 from "@angular/core";
+const _c0 = [[["", "meta", ""]], [["", "actions", ""]], "*"];
+const _c1 = ["[meta]", "[actions]", "*"];
+export class MJCSectionShellComponent {
+    /** Section title — the identity of the whole tab, so sub-pages never restate it. */
+    Title = '';
+    /** Font Awesome class for the title. */
+    Icon = '';
+    /** One line saying what this section is for. */
+    Subtitle = '';
+    /** The rail, built by {@link BuildLeftNavSections} from the section's page list. */
+    NavSections = [];
+    /** Which sub-page is showing. Drives the rail's active state. */
+    ActivePageId = null;
+    /** Rail width in pixels. 232 matches the mockups and orders. */
+    RailWidth = 232;
+    /** Shows the content pane's built-in spinner instead of the projected page. */
+    Loading = false;
+    /** Shows the content pane's built-in error state. Null clears it. */
+    Error = null;
+    /**
+     * A rail item was chosen. Emits the page id.
+     *
+     * Emitted rather than acted on: this component does not know how the host loads a page, and a
+     * shell that routed would stop being reusable outside the one app that taught it how.
+     */
+    PageSelected = new EventEmitter();
+    onItemClicked(item) {
+        if (item.disabled)
+            return;
+        // Re-selecting the current page is a no-op rather than a reload — people click the rail item
+        // they are already on surprisingly often.
+        if (item.id === this.ActivePageId)
+            return;
+        this.PageSelected.emit(item.id);
+    }
+    static ɵfac = function MJCSectionShellComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJCSectionShellComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJCSectionShellComponent, selectors: [["mjc-section-shell"]], inputs: { Title: "Title", Icon: "Icon", Subtitle: "Subtitle", NavSections: "NavSections", ActivePageId: "ActivePageId", RailWidth: "RailWidth", Loading: "Loading", Error: "Error" }, outputs: { PageSelected: "PageSelected" }, ngContentSelectors: _c1, decls: 11, vars: 12, consts: [[3, "Title", "Icon", "Subtitle"], ["meta", ""], ["actions", ""], ["Direction", "row", 3, "Flex", "Padding"], [3, "ItemClicked", "Sections", "ActiveId", "Width", "MobileTitle"], [3, "Loading", "Error"], [3, "Padding"]], template: function MJCSectionShellComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0);
+            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0)(2, "div", 1);
+            i0.ɵɵprojection(3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "div", 2);
+            i0.ɵɵprojection(5, 1);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(6, "mj-page-body", 3)(7, "mj-left-nav", 4);
+            i0.ɵɵlistener("ItemClicked", function MJCSectionShellComponent_Template_mj_left_nav_ItemClicked_7_listener($event) { return ctx.onItemClicked($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "mj-left-nav-content", 5)(9, "mj-page-body-interior", 6);
+            i0.ɵɵprojection(10, 2);
+            i0.ɵɵelementEnd()()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Title", ctx.Title)("Icon", ctx.Icon)("Subtitle", ctx.Subtitle);
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("Flex", true)("Padding", false);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Sections", ctx.NavSections)("ActiveId", ctx.ActivePageId)("Width", ctx.RailWidth)("MobileTitle", ctx.Title);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Loading", ctx.Loading)("Error", ctx.Error);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Padding", false);
+        } }, dependencies: [CommonModule,
+            MJPageLayoutComponent,
+            MJPageHeaderComponent,
+            MJPageBodyComponent,
+            MJLeftNavComponent,
+            MJLeftNavContentComponent,
+            MJPageBodyInteriorComponent], styles: ["/**\n * contracts-kit.css \u2014 ported from design-docs/ui-design/mockups-v2/tokens.css.\n *\n * \u26A0 SEMANTIC TOKENS ONLY. MJ's design-token rule is explicit: *\"NEVER use primitive tokens\n * (`--mj-color-neutral-*`, `--mj-color-brand-*`) in component CSS. Primitives don't adapt to dark\n * mode.\"* An earlier version of this file used twelve of them, because the mockup did \u2014 and in a\n * standalone mockup page that is harmless, since there is no dark mode to adapt to. Ported into a real\n * component stylesheet it means every tinted surface, chip and clause box keeps its LIGHT colour when\n * the app is themed dark. That is the theming break, and it is invisible until someone switches theme.\n *\n * The mapping applied: neutral-50 \u2192 bg-surface-sunken, neutral-100 \u2192 border-subtle, neutral-300 \u2192\n * border-strong, success/error/warning-50 \u2192 status-*-bg, success/error-700 \u2192 status-*-text, brand-50 \u2192\n * status-info-bg, brand-100 \u2192 status-info-border, brand-700/900 \u2192 status-info-text. `#fff` on a brand\n * fill \u2192 `--mj-brand-on-primary`.\n *\n * THE MOCKUPS ARE THE SPEC, and this file exists to keep them so. An earlier version of this kit was\n * written from MEMORY of them, and it was wrong in a way that is invisible in source and obvious on\n * screen: it used token names that do not exist. `--mj-font-size-sm`, `--mj-text-tertiary`,\n * `--mj-color-warning-text`, `--mj-color-success-border` and four others are not MJ tokens (the real\n * names are `--mj-text-sm`, `--mj-status-warning-text`, `--mj-status-success`, \u2026). Every one of those\n * resolved to NOTHING \u2014 so font sizes fell back to browser defaults and the state chips rendered with\n * no colour at all. That is most of what \"looks bad\" was.\n *\n * So: class names and rules below are the mockup's, verbatim where possible, and **every token used\n * here has been checked to exist in MJ's `_tokens.scss`.** If you add a rule, check the token first \u2014\n * a missing custom property fails silently, which is the worst failure mode CSS has.\n *\n * SHIPPED VIA THE SECTION SHELL (`styleUrls` + `ViewEncapsulation.None`). `ngc` only compiles what a\n * component references, so a stylesheet nothing references is built into dist and never loaded.\n * `None` is required, not lazy: these classes are used by DESCENDANT components.\n *\n * Prefix note: the mockup used bare class names (`.panel`, `.chip`) because it was a standalone page.\n * Here everything is `mjc-` prefixed \u2014 bare `.panel` inside a real Explorer would collide with MJ's own\n * chrome, and `ViewEncapsulation.None` means these rules are global.\n */\n\n/* \u2500\u2500 Page frame \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-page {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-4);\n  padding: var(--mj-space-5);\n}\n\n/* A grid page needs a DEFINITE height: mj-explorer-entity-data-grid is height:100% outside a related\n   panel, and 100% of an auto-height parent is zero \u2014 the grid renders no rows while its toolbar still\n   reports the count. MJ's own source documents that symptom. `min-height: 0` on the fill slot is\n   mandatory: a flex child defaults to min-height:auto and refuses to shrink, so without it the grid\n   pushes the page taller instead of scrolling inside itself. */\n.mjc-page--grid { height: 100%; min-height: 0; }\n.mjc-grid-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }\n\n/* Intro prose. Constrained measure \u2014 text stops being readable much past this \u2014 and it is a real\n   block with real spacing, not a bare text node floating between cards. */\n.mjc-page__intro {\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  line-height: 1.55;\n  margin: 0;\n  max-width: 78ch;\n}\n\n/* \u2500\u2500 Panel body helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Our panels are real `<mj-collapsible-panel>`s, so MJ paints the frame, the header and the spacing.\n   These classes style only what goes INSIDE one. */\n\n.mjc-body { padding: var(--mj-space-4); }\n.mjc-body--flush { padding: 0; }            /* a table fills the panel edge to edge */\n.mjc-body > * + * { margin-top: var(--mj-space-3); }   /* nothing ever touches its neighbour */\n\n.mjc-note {\n  margin: 0;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n  line-height: 1.55;\n}\n\n/* A note under a flush table needs its own padding and a rule above it, or it reads as a table row. */\n.mjc-note--footer {\n  padding: var(--mj-space-3) var(--mj-space-4);\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n/* \u2500\u2500 Hero (mockup 1) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-hero {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-4);\n  padding: var(--mj-space-4) var(--mj-space-5);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.mjc-hero__identity { display: flex; align-items: center; gap: var(--mj-space-4); min-width: 0; }\n\n.mjc-hero__avatar {\n  flex: none;\n  width: 52px; height: 52px;\n  border-radius: var(--mj-radius-md);\n  display: flex; align-items: center; justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 18%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-xl, 1.375rem);\n}\n\n.mjc-hero__copy { min-width: 0; flex: 1; }\n\n.mjc-hero__title-row {\n  display: flex; align-items: center; flex-wrap: wrap;\n  gap: var(--mj-space-2) var(--mj-space-3);\n}\n\n.mjc-hero__title {\n  margin: 0;\n  font-size: var(--mj-text-lg);\n  font-weight: 700;\n  line-height: 1.25;\n  /* Long contract descriptions must not push the chips off the card. */\n  overflow-wrap: anywhere;\n}\n\n.mjc-hero__meta {\n  display: flex; flex-wrap: wrap;\n  gap: var(--mj-space-3);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  margin-top: var(--mj-space-2);\n}\n\n/* auto-fit so five stats sit in a row on a wide screen and reflow on a laptop, rather than\n   overflowing the card \u2014 which is what a fixed five-column grid did. */\n.mjc-hero__stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));\n  gap: var(--mj-space-3);\n}\n\n.mjc-stat {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: var(--mj-space-3);\n  min-width: 0;\n}\n.mjc-stat__label {\n  display: block; font-size: var(--mj-text-xs);\n  text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted);\n}\n.mjc-stat__value {\n  display: block; font-size: var(--mj-text-base); font-weight: 700; margin-top: 2px;\n  overflow-wrap: anywhere;\n}\n.mjc-stat__sub { display: block; font-size: var(--mj-text-xs); color: var(--mj-text-muted); }\n\n/* \u2500\u2500 Chips \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-chip {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: var(--mj-text-xs); font-weight: 600;\n  padding: 2px 9px; border-radius: 999px;\n  border: 1px solid transparent; white-space: nowrap;\n}\n.mjc-chip--ok    { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); border-color: var(--mj-status-success); }\n.mjc-chip--warn  { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); border-color: var(--mj-status-warning); }\n.mjc-chip--error { background: var(--mj-status-error-bg);   color: var(--mj-status-error-text);   border-color: var(--mj-status-error); }\n.mjc-chip--info  { background: var(--mj-status-info-bg);   color: var(--mj-status-info-text);   border-color: var(--mj-status-info-border); }\n.mjc-chip--muted { background: var(--mj-border-subtle); color: var(--mj-text-secondary);   border-color: var(--mj-border-default); }\n\n/* \u2500\u2500 Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  font-size: var(--mj-text-sm); font-weight: 600;\n  padding: 6px 12px;\n  border-radius: var(--mj-radius-sm);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n}\n.mjc-btn:disabled { opacity: .5; cursor: default; }\n.mjc-btn--primary { background: var(--mj-brand-primary); border-color: var(--mj-brand-primary); color: var(--mj-brand-on-primary); }\n.mjc-btn--flat    { background: transparent; border-color: transparent; color: var(--mj-brand-primary); }\n.mjc-btn--sm      { padding: 3px 9px; font-size: var(--mj-text-xs); }\n.mjc-btn--danger  { color: var(--mj-status-error-text); border-color: transparent; background: transparent; }\n\n/* \u2500\u2500 Field grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-fields {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));\n  gap: var(--mj-space-3) var(--mj-space-4);\n}\n.mjc-field > label {\n  display: block; font-size: var(--mj-text-xs); color: var(--mj-text-muted);\n  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px;\n}\n.mjc-field .mjc-val {\n  padding: 6px 9px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-surface);\n  min-height: 31px;\n  overflow-wrap: anywhere;\n}\n.mjc-field .mjc-val--ro { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n.mjc-hint { color: var(--mj-text-muted); font-size: var(--mj-text-xs); margin-top: 3px; }\n\n/* \u2500\u2500 Tables \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   The mockup renders modifications, documents and lineage as TABLES, not stacked cards. With three\n   or more rows a table is scannable and a stack is a wall. */\n\ntable.mjc-grid { width: 100%; border-collapse: collapse; }\ntable.mjc-grid th {\n  text-align: left; font-size: var(--mj-text-xs);\n  text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700;\n  padding: var(--mj-space-2) var(--mj-space-3);\n  border-bottom: 1.5px solid var(--mj-border-default);\n}\ntable.mjc-grid td {\n  padding: var(--mj-space-3);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  vertical-align: top;\n}\ntable.mjc-grid tr:last-child td { border-bottom: 0; }\ntable.mjc-grid tbody tr:hover td { background: var(--mj-bg-surface-sunken); }\n.mjc-row--click { cursor: pointer; }\n\n.mjc-muted { color: var(--mj-text-muted); }\n.mjc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--mj-text-xs); }\n\n/* \u2500\u2500 The clause pair (mockups 1 and 2) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   The standard clause and what this contract says instead, read side by side. This is the app's\n   central idea rendered, so it gets real styling rather than two paragraphs. */\n\n.mjc-pair {\n  display: grid; grid-template-columns: 1fr; gap: var(--mj-space-3);\n  margin-top: var(--mj-space-2);\n}\n/* Side by side only when there is room \u2014 two 40ch columns on a laptop is worse than one readable one. */\n@media (min-width: 1100px) { .mjc-pair { grid-template-columns: 1fr 1fr; } }\n\n.mjc-pair__tag {\n  display: block; font-size: var(--mj-text-xs); font-weight: 700;\n  text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); margin-bottom: 3px;\n}\n.mjc-pair__tag--mod { color: var(--mj-status-warning-text); }\n\n.mjc-clause {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border-left: 2px solid var(--mj-border-strong);\n  padding: var(--mj-space-2) var(--mj-space-3);\n  border-radius: 0 var(--mj-radius-sm) var(--mj-radius-sm) 0;\n  margin: 0;\n  /* Clause text carries its own line breaks, and 9.1 is a single 1,100-character sentence in caps \u2014\n     both must wrap inside the box rather than escaping it. */\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n.mjc-clause--mod {\n  border-left-color: var(--mj-status-warning);\n  background: var(--mj-status-warning-bg);\n  color: var(--mj-text-primary);\n}\n\n.mjc-toggle {\n  font-size: var(--mj-text-xs); color: var(--mj-brand-primary);\n  font-weight: 600; margin-top: 4px; background: none; border: 0; padding: 0; cursor: pointer;\n}\n\n/* \u2500\u2500 Callout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-flag {\n  background: var(--mj-status-warning-bg);\n  border-left: 3px solid var(--mj-status-warning);\n  padding: var(--mj-space-2) var(--mj-space-3);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-status-warning-text);\n  border-radius: 0 var(--mj-radius-sm) var(--mj-radius-sm) 0;\n  line-height: 1.55;\n}\n\n/* \u2500\u2500 Invalid input \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* A required field the user has emptied. Border + ring only \u2014 no background change, because these\n   are prose textareas and tinting the reading surface makes the text itself harder to read, which\n   is the opposite of helpful when the point is \"write something here\". Tokens only, per the\n   design-token gate. */\n.mjc-invalid {\n  border-color: var(--mj-status-error) !important;\n  box-shadow: 0 0 0 2px var(--mj-status-error-bg);\n  outline: none;\n}\n\n/* \u2500\u2500 Filter pills (watchlist) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-pills { display: flex; flex-wrap: wrap; gap: var(--mj-space-2); align-items: center; }\n\n.mjc-pill {\n  appearance: none; cursor: pointer;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  border-radius: 999px;\n  padding: 3px var(--mj-space-3);\n  font-size: var(--mj-text-sm);\n  line-height: 1.6;\n  display: inline-flex; align-items: center; gap: var(--mj-space-2);\n}\n.mjc-pill:hover { border-color: var(--mj-brand-primary); color: var(--mj-text-primary); }\n.mjc-pill:disabled { opacity: .5; cursor: default; }\n.mjc-pill--active {\n  background: var(--mj-status-info-bg);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-status-info-text);\n  font-weight: 700;\n}\n.mjc-pill__count { font-variant-numeric: tabular-nums; opacity: .85; font-size: var(--mj-text-xs); }\n\n/* \u2500\u2500 Empty state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   A sentence in a bordered box, never a bare line of text in whitespace. */\n\n.mjc-empty {\n  display: flex; align-items: center; gap: var(--mj-space-2); justify-content: center;\n  padding: var(--mj-space-6);\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px dashed var(--mj-border-strong);\n  border-radius: var(--mj-radius-md);\n  text-align: center;\n}\n"], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJCSectionShellComponent, [{
+        type: Component,
+        args: [{ selector: 'mjc-section-shell', standalone: true, encapsulation: ViewEncapsulation.None, imports: [
+                    CommonModule,
+                    MJPageLayoutComponent,
+                    MJPageHeaderComponent,
+                    MJPageBodyComponent,
+                    MJLeftNavComponent,
+                    MJLeftNavContentComponent,
+                    MJPageBodyInteriorComponent,
+                ], template: `
+        <mj-page-layout>
+            <mj-page-header [Title]="Title" [Icon]="Icon" [Subtitle]="Subtitle">
+                <div meta><ng-content select="[meta]"></ng-content></div>
+                <div actions><ng-content select="[actions]"></ng-content></div>
+                <!-- No toolbar slot — see trap 1 in the file header. -->
+            </mj-page-header>
+
+            <mj-page-body [Flex]="true" [Padding]="false" Direction="row">
+                <mj-left-nav
+                    [Sections]="NavSections"
+                    [ActiveId]="ActivePageId"
+                    [Width]="RailWidth"
+                    [MobileTitle]="Title"
+                    (ItemClicked)="onItemClicked($event)" />
+
+                <mj-left-nav-content [Loading]="Loading" [Error]="Error">
+                    <!-- Required for scrolling — see trap 2. Padding off; each page supplies its own. -->
+                    <mj-page-body-interior [Padding]="false">
+                        <ng-content></ng-content>
+                    </mj-page-body-interior>
+                </mj-left-nav-content>
+            </mj-page-body>
+        </mj-page-layout>
+    `, styles: ["/**\n * contracts-kit.css \u2014 ported from design-docs/ui-design/mockups-v2/tokens.css.\n *\n * \u26A0 SEMANTIC TOKENS ONLY. MJ's design-token rule is explicit: *\"NEVER use primitive tokens\n * (`--mj-color-neutral-*`, `--mj-color-brand-*`) in component CSS. Primitives don't adapt to dark\n * mode.\"* An earlier version of this file used twelve of them, because the mockup did \u2014 and in a\n * standalone mockup page that is harmless, since there is no dark mode to adapt to. Ported into a real\n * component stylesheet it means every tinted surface, chip and clause box keeps its LIGHT colour when\n * the app is themed dark. That is the theming break, and it is invisible until someone switches theme.\n *\n * The mapping applied: neutral-50 \u2192 bg-surface-sunken, neutral-100 \u2192 border-subtle, neutral-300 \u2192\n * border-strong, success/error/warning-50 \u2192 status-*-bg, success/error-700 \u2192 status-*-text, brand-50 \u2192\n * status-info-bg, brand-100 \u2192 status-info-border, brand-700/900 \u2192 status-info-text. `#fff` on a brand\n * fill \u2192 `--mj-brand-on-primary`.\n *\n * THE MOCKUPS ARE THE SPEC, and this file exists to keep them so. An earlier version of this kit was\n * written from MEMORY of them, and it was wrong in a way that is invisible in source and obvious on\n * screen: it used token names that do not exist. `--mj-font-size-sm`, `--mj-text-tertiary`,\n * `--mj-color-warning-text`, `--mj-color-success-border` and four others are not MJ tokens (the real\n * names are `--mj-text-sm`, `--mj-status-warning-text`, `--mj-status-success`, \u2026). Every one of those\n * resolved to NOTHING \u2014 so font sizes fell back to browser defaults and the state chips rendered with\n * no colour at all. That is most of what \"looks bad\" was.\n *\n * So: class names and rules below are the mockup's, verbatim where possible, and **every token used\n * here has been checked to exist in MJ's `_tokens.scss`.** If you add a rule, check the token first \u2014\n * a missing custom property fails silently, which is the worst failure mode CSS has.\n *\n * SHIPPED VIA THE SECTION SHELL (`styleUrls` + `ViewEncapsulation.None`). `ngc` only compiles what a\n * component references, so a stylesheet nothing references is built into dist and never loaded.\n * `None` is required, not lazy: these classes are used by DESCENDANT components.\n *\n * Prefix note: the mockup used bare class names (`.panel`, `.chip`) because it was a standalone page.\n * Here everything is `mjc-` prefixed \u2014 bare `.panel` inside a real Explorer would collide with MJ's own\n * chrome, and `ViewEncapsulation.None` means these rules are global.\n */\n\n/* \u2500\u2500 Page frame \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-page {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-4);\n  padding: var(--mj-space-5);\n}\n\n/* A grid page needs a DEFINITE height: mj-explorer-entity-data-grid is height:100% outside a related\n   panel, and 100% of an auto-height parent is zero \u2014 the grid renders no rows while its toolbar still\n   reports the count. MJ's own source documents that symptom. `min-height: 0` on the fill slot is\n   mandatory: a flex child defaults to min-height:auto and refuses to shrink, so without it the grid\n   pushes the page taller instead of scrolling inside itself. */\n.mjc-page--grid { height: 100%; min-height: 0; }\n.mjc-grid-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }\n\n/* Intro prose. Constrained measure \u2014 text stops being readable much past this \u2014 and it is a real\n   block with real spacing, not a bare text node floating between cards. */\n.mjc-page__intro {\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  line-height: 1.55;\n  margin: 0;\n  max-width: 78ch;\n}\n\n/* \u2500\u2500 Panel body helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Our panels are real `<mj-collapsible-panel>`s, so MJ paints the frame, the header and the spacing.\n   These classes style only what goes INSIDE one. */\n\n.mjc-body { padding: var(--mj-space-4); }\n.mjc-body--flush { padding: 0; }            /* a table fills the panel edge to edge */\n.mjc-body > * + * { margin-top: var(--mj-space-3); }   /* nothing ever touches its neighbour */\n\n.mjc-note {\n  margin: 0;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n  line-height: 1.55;\n}\n\n/* A note under a flush table needs its own padding and a rule above it, or it reads as a table row. */\n.mjc-note--footer {\n  padding: var(--mj-space-3) var(--mj-space-4);\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n/* \u2500\u2500 Hero (mockup 1) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-hero {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-4);\n  padding: var(--mj-space-4) var(--mj-space-5);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.mjc-hero__identity { display: flex; align-items: center; gap: var(--mj-space-4); min-width: 0; }\n\n.mjc-hero__avatar {\n  flex: none;\n  width: 52px; height: 52px;\n  border-radius: var(--mj-radius-md);\n  display: flex; align-items: center; justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 18%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-xl, 1.375rem);\n}\n\n.mjc-hero__copy { min-width: 0; flex: 1; }\n\n.mjc-hero__title-row {\n  display: flex; align-items: center; flex-wrap: wrap;\n  gap: var(--mj-space-2) var(--mj-space-3);\n}\n\n.mjc-hero__title {\n  margin: 0;\n  font-size: var(--mj-text-lg);\n  font-weight: 700;\n  line-height: 1.25;\n  /* Long contract descriptions must not push the chips off the card. */\n  overflow-wrap: anywhere;\n}\n\n.mjc-hero__meta {\n  display: flex; flex-wrap: wrap;\n  gap: var(--mj-space-3);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  margin-top: var(--mj-space-2);\n}\n\n/* auto-fit so five stats sit in a row on a wide screen and reflow on a laptop, rather than\n   overflowing the card \u2014 which is what a fixed five-column grid did. */\n.mjc-hero__stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));\n  gap: var(--mj-space-3);\n}\n\n.mjc-stat {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: var(--mj-space-3);\n  min-width: 0;\n}\n.mjc-stat__label {\n  display: block; font-size: var(--mj-text-xs);\n  text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted);\n}\n.mjc-stat__value {\n  display: block; font-size: var(--mj-text-base); font-weight: 700; margin-top: 2px;\n  overflow-wrap: anywhere;\n}\n.mjc-stat__sub { display: block; font-size: var(--mj-text-xs); color: var(--mj-text-muted); }\n\n/* \u2500\u2500 Chips \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-chip {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: var(--mj-text-xs); font-weight: 600;\n  padding: 2px 9px; border-radius: 999px;\n  border: 1px solid transparent; white-space: nowrap;\n}\n.mjc-chip--ok    { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); border-color: var(--mj-status-success); }\n.mjc-chip--warn  { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); border-color: var(--mj-status-warning); }\n.mjc-chip--error { background: var(--mj-status-error-bg);   color: var(--mj-status-error-text);   border-color: var(--mj-status-error); }\n.mjc-chip--info  { background: var(--mj-status-info-bg);   color: var(--mj-status-info-text);   border-color: var(--mj-status-info-border); }\n.mjc-chip--muted { background: var(--mj-border-subtle); color: var(--mj-text-secondary);   border-color: var(--mj-border-default); }\n\n/* \u2500\u2500 Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  font-size: var(--mj-text-sm); font-weight: 600;\n  padding: 6px 12px;\n  border-radius: var(--mj-radius-sm);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n}\n.mjc-btn:disabled { opacity: .5; cursor: default; }\n.mjc-btn--primary { background: var(--mj-brand-primary); border-color: var(--mj-brand-primary); color: var(--mj-brand-on-primary); }\n.mjc-btn--flat    { background: transparent; border-color: transparent; color: var(--mj-brand-primary); }\n.mjc-btn--sm      { padding: 3px 9px; font-size: var(--mj-text-xs); }\n.mjc-btn--danger  { color: var(--mj-status-error-text); border-color: transparent; background: transparent; }\n\n/* \u2500\u2500 Field grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-fields {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));\n  gap: var(--mj-space-3) var(--mj-space-4);\n}\n.mjc-field > label {\n  display: block; font-size: var(--mj-text-xs); color: var(--mj-text-muted);\n  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px;\n}\n.mjc-field .mjc-val {\n  padding: 6px 9px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-surface);\n  min-height: 31px;\n  overflow-wrap: anywhere;\n}\n.mjc-field .mjc-val--ro { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n.mjc-hint { color: var(--mj-text-muted); font-size: var(--mj-text-xs); margin-top: 3px; }\n\n/* \u2500\u2500 Tables \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   The mockup renders modifications, documents and lineage as TABLES, not stacked cards. With three\n   or more rows a table is scannable and a stack is a wall. */\n\ntable.mjc-grid { width: 100%; border-collapse: collapse; }\ntable.mjc-grid th {\n  text-align: left; font-size: var(--mj-text-xs);\n  text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700;\n  padding: var(--mj-space-2) var(--mj-space-3);\n  border-bottom: 1.5px solid var(--mj-border-default);\n}\ntable.mjc-grid td {\n  padding: var(--mj-space-3);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  vertical-align: top;\n}\ntable.mjc-grid tr:last-child td { border-bottom: 0; }\ntable.mjc-grid tbody tr:hover td { background: var(--mj-bg-surface-sunken); }\n.mjc-row--click { cursor: pointer; }\n\n.mjc-muted { color: var(--mj-text-muted); }\n.mjc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--mj-text-xs); }\n\n/* \u2500\u2500 The clause pair (mockups 1 and 2) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   The standard clause and what this contract says instead, read side by side. This is the app's\n   central idea rendered, so it gets real styling rather than two paragraphs. */\n\n.mjc-pair {\n  display: grid; grid-template-columns: 1fr; gap: var(--mj-space-3);\n  margin-top: var(--mj-space-2);\n}\n/* Side by side only when there is room \u2014 two 40ch columns on a laptop is worse than one readable one. */\n@media (min-width: 1100px) { .mjc-pair { grid-template-columns: 1fr 1fr; } }\n\n.mjc-pair__tag {\n  display: block; font-size: var(--mj-text-xs); font-weight: 700;\n  text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); margin-bottom: 3px;\n}\n.mjc-pair__tag--mod { color: var(--mj-status-warning-text); }\n\n.mjc-clause {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border-left: 2px solid var(--mj-border-strong);\n  padding: var(--mj-space-2) var(--mj-space-3);\n  border-radius: 0 var(--mj-radius-sm) var(--mj-radius-sm) 0;\n  margin: 0;\n  /* Clause text carries its own line breaks, and 9.1 is a single 1,100-character sentence in caps \u2014\n     both must wrap inside the box rather than escaping it. */\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n.mjc-clause--mod {\n  border-left-color: var(--mj-status-warning);\n  background: var(--mj-status-warning-bg);\n  color: var(--mj-text-primary);\n}\n\n.mjc-toggle {\n  font-size: var(--mj-text-xs); color: var(--mj-brand-primary);\n  font-weight: 600; margin-top: 4px; background: none; border: 0; padding: 0; cursor: pointer;\n}\n\n/* \u2500\u2500 Callout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-flag {\n  background: var(--mj-status-warning-bg);\n  border-left: 3px solid var(--mj-status-warning);\n  padding: var(--mj-space-2) var(--mj-space-3);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-status-warning-text);\n  border-radius: 0 var(--mj-radius-sm) var(--mj-radius-sm) 0;\n  line-height: 1.55;\n}\n\n/* \u2500\u2500 Invalid input \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* A required field the user has emptied. Border + ring only \u2014 no background change, because these\n   are prose textareas and tinting the reading surface makes the text itself harder to read, which\n   is the opposite of helpful when the point is \"write something here\". Tokens only, per the\n   design-token gate. */\n.mjc-invalid {\n  border-color: var(--mj-status-error) !important;\n  box-shadow: 0 0 0 2px var(--mj-status-error-bg);\n  outline: none;\n}\n\n/* \u2500\u2500 Filter pills (watchlist) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mjc-pills { display: flex; flex-wrap: wrap; gap: var(--mj-space-2); align-items: center; }\n\n.mjc-pill {\n  appearance: none; cursor: pointer;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  border-radius: 999px;\n  padding: 3px var(--mj-space-3);\n  font-size: var(--mj-text-sm);\n  line-height: 1.6;\n  display: inline-flex; align-items: center; gap: var(--mj-space-2);\n}\n.mjc-pill:hover { border-color: var(--mj-brand-primary); color: var(--mj-text-primary); }\n.mjc-pill:disabled { opacity: .5; cursor: default; }\n.mjc-pill--active {\n  background: var(--mj-status-info-bg);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-status-info-text);\n  font-weight: 700;\n}\n.mjc-pill__count { font-variant-numeric: tabular-nums; opacity: .85; font-size: var(--mj-text-xs); }\n\n/* \u2500\u2500 Empty state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   A sentence in a bordered box, never a bare line of text in whitespace. */\n\n.mjc-empty {\n  display: flex; align-items: center; gap: var(--mj-space-2); justify-content: center;\n  padding: var(--mj-space-6);\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px dashed var(--mj-border-strong);\n  border-radius: var(--mj-radius-md);\n  text-align: center;\n}\n"] }]
+    }], null, { Title: [{
+            type: Input
+        }], Icon: [{
+            type: Input
+        }], Subtitle: [{
+            type: Input
+        }], NavSections: [{
+            type: Input
+        }], ActivePageId: [{
+            type: Input
+        }], RailWidth: [{
+            type: Input
+        }], Loading: [{
+            type: Input
+        }], Error: [{
+            type: Input
+        }], PageSelected: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJCSectionShellComponent, { className: "MJCSectionShellComponent", filePath: "lib/sections/section-shell.component.ts", lineNumber: 95 }); })();
+//# sourceMappingURL=section-shell.component.js.map

package/dist/lib/sections/section-shell.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-shell.component.js","sourceRoot":"","sources":["../../../src/lib/sections/section-shell.component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EACH,kBAAkB,EAClB,yBAAyB,EACzB,mBAAmB,EACnB,2BAA2B,EAC3B,qBAAqB,EACrB,qBAAqB,GAGxB,MAAM,kCAAkC,CAAC;;;;AA0C1C,MAAM,OAAO,wBAAwB;IACjC,oFAAoF;IAC3E,KAAK,GAAG,EAAE,CAAC;IAEpB,wCAAwC;IAC/B,IAAI,GAAG,EAAE,CAAC;IAEnB,gDAAgD;IACvC,QAAQ,GAAG,EAAE,CAAC;IAEvB,oFAAoF;IAC3E,WAAW,GAAuB,EAAE,CAAC;IAE9C,iEAAiE;IACxD,YAAY,GAAkB,IAAI,CAAC;IAE5C,gEAAgE;IACvD,SAAS,GAAG,GAAG,CAAC;IAEzB,+EAA+E;IACtE,OAAO,GAAG,KAAK,CAAC;IAEzB,qEAAqE;IAC5D,KAAK,GAAkB,IAAI,CAAC;IAErC;;;;;OAKG;IACO,YAAY,GAAG,IAAI,YAAY,EAAU,CAAC;IAE1C,aAAa,CAAC,IAAmB;QACvC,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,6FAA6F;QAC7F,0CAA0C;QAC1C,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY;YAAE,OAAO;QAC1C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACpC,CAAC;kHAvCQ,wBAAwB;6DAAxB,wBAAwB;;YAvBrB,AADJ,AADJ,sCAAgB,wBACwD,aACtD;YAAA,kBAAyC;YAAA,iBAAM;YACzD,8BAAa;YAAA,qBAA4C;YAE7D,AAF6D,iBAAM,EAElD;YAGb,AADJ,uCAA8D,qBAMd;YAAxC,4HAAe,yBAAqB,IAAC;YALzC,iBAK4C;YAIxC,AAFJ,8CAAyD,+BAEZ;YACrC,sBAAyB;YAIzC,AADI,AADI,AADI,iBAAwB,EACN,EACX,EACF;;YArBG,cAAe;YAAe,AAAd,AAAhB,iCAAe,kBAAc,0BAAsB;YAMrD,eAAa;YAAC,AAAd,2BAAa,kBAAkB;YAErC,cAAwB;YAGxB,AADA,AADA,AADA,0CAAwB,8BACC,wBACN,0BACE;YAGJ,cAAmB;YAAC,AAApB,qCAAmB,oBAAgB;YAE7B,cAAiB;YAAjB,+BAAiB;4BA1BpD,YAAY;YACZ,qBAAqB;YACrB,qBAAqB;YACrB,mBAAmB;YACnB,kBAAkB;YAClB,yBAAyB;YACzB,2BAA2B;;iFA4BtB,wBAAwB;cAxCpC,SAAS;2BACI,mBAAmB,cACjB,IAAI,iBACD,iBAAiB,CAAC,IAAI,WAE5B;oBACL,YAAY;oBACZ,qBAAqB;oBACrB,qBAAqB;oBACrB,mBAAmB;oBACnB,kBAAkB;oBAClB,yBAAyB;oBACzB,2BAA2B;iBAC9B,YACS;;;;;;;;;;;;;;;;;;;;;;;;KAwBT;;kBAIA,KAAK;;kBAGL,KAAK;;kBAGL,KAAK;;kBAGL,KAAK;;kBAGL,KAAK;;kBAGL,KAAK;;kBAGL,KAAK;;kBAGL,KAAK;;kBAQL,MAAM;;kFA/BE,wBAAwB"}

package/dist/public-api.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @mj-biz-apps/contracts-ng — the CLIENT BOOTSTRAP package.
+ *
+ * This is the package named in mj-app.json under packages.client with role "bootstrap". When the app
+ * is installed (or dev-linked), MJExplorer's auto-generated open-app-bootstrap.generated.ts gains a
+ * static `import '@mj-biz-apps/contracts-ng';` — ESBuild bundles it and module evaluation fires the
+ * @RegisterClass decorators that make our components discoverable.
+ *
+ * WHAT LIVES HERE
+ *   src/lib/generated/    — CodeGen Angular output (one form per entity; do not edit)
+ *   src/lib/form-panels/  — BaseFormPanel contributions (plan §6.4) — our UX, layered onto the
+ *                           GENERATED forms rather than replacing them
+ *   src/lib/custom/       — the few bespoke components (the modification editor, §6.4 / D-22)
+ *   src/lib/pages/        — BaseResourceComponent surfaces the nav points at (list, watchlist, …)
+ *
+ * THE V2 SHAPE, AND WHY IT IS SMALLER THAN V1'S. v1 replaced the generated Contract form with a
+ * custom one at priority 2 and hand-rolled a workspace/tab shell around it. v2 keeps every generated
+ * form registered and contributes panels into its slots — orders' current direction, adopted
+ * wholesale (plan §6.4). A full form replacement is a last resort; contracts expects to need none.
+ */
+import '@mj-biz-apps/contracts-entities';
+import './lib/generated/generated-forms.module';
+export { GeneratedFormsModule } from './lib/generated/generated-forms.module';
+export { mjBizAppsContractsContractFormComponent } from './lib/generated/Entities/mjBizAppsContractsContract/mjbizappscontractscontract.form.component';
+export { mjBizAppsContractsContractTemplateFormComponent } from './lib/generated/Entities/mjBizAppsContractsContractTemplate/mjbizappscontractscontracttemplate.form.component';
+export { mjBizAppsContractsContractTemplateModificationFormComponent } from './lib/generated/Entities/mjBizAppsContractsContractTemplateModification/mjbizappscontractscontracttemplatemodification.form.component';
+export { mjBizAppsContractsContractTemplateProvisionFormComponent } from './lib/generated/Entities/mjBizAppsContractsContractTemplateProvision/mjbizappscontractscontracttemplateprovision.form.component';
+export { mjBizAppsContractsContractTemplateTypeFormComponent } from './lib/generated/Entities/mjBizAppsContractsContractTemplateType/mjbizappscontractscontracttemplatetype.form.component';
+export { mjBizAppsContractsContractTypeFormComponent } from './lib/generated/Entities/mjBizAppsContractsContractType/mjbizappscontractscontracttype.form.component';
+export { MJCSectionBaseComponent, ContractsSectionResource, ContractsTemplatesSectionResource, ContractsConfigurationSectionResource, } from './lib/sections/contracts-sections.component';
+export { MJCSectionShellComponent } from './lib/sections/section-shell.component';
+export * from './lib/sections/section-nav.model';
+export * from './lib/data/entity-names';
+export { RecordFilesPanelBase, ContractFilesPanel, ContractTemplateFilesPanel } from './lib/form-panels/record-files.panel';
+export { MJCContractHeroPanel, MJCContractDatesPanel, MJCContractRenewalPanel, MJCContractLineagePanel, } from './lib/form-panels/contract.panels';
+export { MJCContractSupersedePanel } from './lib/form-panels/supersede.panel';
+export { MJCOrganizationAgreementsPanel } from './lib/form-panels/organization.panels';
+export * from './lib/pages/contract-grid.page';
+export { MJCModificationsPageComponent } from './lib/pages/modifications.page';
+export { MJCContractsDashboardPageComponent } from './lib/pages/contracts-dashboard.page';
+export { MJCAgreementVersionsPageComponent, MJCAllProvisionsPageComponent } from './lib/pages/templates.page';
+export { MJCContractTypesPageComponent, MJCTemplateTypesPageComponent, } from './lib/pages/configuration.page';
+export declare function LoadMjBizappsContractsClient(): void;
+//# sourceMappingURL=public-api.d.ts.map

package/dist/public-api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAOH,OAAO,iCAAiC,CAAC;AACzC,OAAO,wCAAwC,CAAC;AAEhD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAE,uCAAuC,EAAE,MAAM,+FAA+F,CAAC;AACxJ,OAAO,EAAE,+CAA+C,EAAE,MAAM,+GAA+G,CAAC;AAChL,OAAO,EAAE,2DAA2D,EAAE,MAAM,uIAAuI,CAAC;AACpN,OAAO,EAAE,wDAAwD,EAAE,MAAM,iIAAiI,CAAC;AAC3M,OAAO,EAAE,mDAAmD,EAAE,MAAM,uHAAuH,CAAC;AAC5L,OAAO,EAAE,2CAA2C,EAAE,MAAM,uGAAuG,CAAC;AAapK,OAAO,EACH,uBAAuB,EACvB,wBAAwB,EACxB,iCAAiC,EACjC,qCAAqC,GACxC,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AAClF,cAAc,kCAAkC,CAAC;AACjD,cAAc,yBAAyB,CAAC;AAiBxC,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAC5H,OAAO,EACH,oBAAoB,EACpB,qBAAqB,EACrB,uBAAuB,EACvB,uBAAuB,GAC1B,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,8BAA8B,EAAE,MAAM,uCAAuC,CAAC;AAuBvF,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EAAE,kCAAkC,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,iCAAiC,EAAE,6BAA6B,EAAE,MAAM,4BAA4B,CAAC;AAC9G,OAAO,EACH,6BAA6B,EAC7B,6BAA6B,GAChC,MAAM,gCAAgC,CAAC;AAExC,wBAAgB,4BAA4B,IAAI,IAAI,CAqBnD"}

package/dist/public-api.js

@@ -0,0 +1,105 @@
+/**
+ * @mj-biz-apps/contracts-ng — the CLIENT BOOTSTRAP package.
+ *
+ * This is the package named in mj-app.json under packages.client with role "bootstrap". When the app
+ * is installed (or dev-linked), MJExplorer's auto-generated open-app-bootstrap.generated.ts gains a
+ * static `import '@mj-biz-apps/contracts-ng';` — ESBuild bundles it and module evaluation fires the
+ * @RegisterClass decorators that make our components discoverable.
+ *
+ * WHAT LIVES HERE
+ *   src/lib/generated/    — CodeGen Angular output (one form per entity; do not edit)
+ *   src/lib/form-panels/  — BaseFormPanel contributions (plan §6.4) — our UX, layered onto the
+ *                           GENERATED forms rather than replacing them
+ *   src/lib/custom/       — the few bespoke components (the modification editor, §6.4 / D-22)
+ *   src/lib/pages/        — BaseResourceComponent surfaces the nav points at (list, watchlist, …)
+ *
+ * THE V2 SHAPE, AND WHY IT IS SMALLER THAN V1'S. v1 replaced the generated Contract form with a
+ * custom one at priority 2 and hand-rolled a workspace/tab shell around it. v2 keeps every generated
+ * form registered and contributes panels into its slots — orders' current direction, adopted
+ * wholesale (plan §6.4). A full form replacement is a last resort; contracts expects to need none.
+ */
+/* ============================================================================
+ * GENERATED FORMS. The side-effect imports fire the @RegisterClass decorators; the re-exports are
+ * what MJExplorer's class-registration manifest imports BY NAME. Without these exports the Explorer
+ * bundle fails to compile with TS2305 'has no exported member'.
+ * ========================================================================== */
+import '@mj-biz-apps/contracts-entities';
+import './lib/generated/generated-forms.module';
+import { GeneratedFormsModule } from './lib/generated/generated-forms.module';
+export { GeneratedFormsModule } from './lib/generated/generated-forms.module';
+export { mjBizAppsContractsContractFormComponent } from './lib/generated/Entities/mjBizAppsContractsContract/mjbizappscontractscontract.form.component';
+export { mjBizAppsContractsContractTemplateFormComponent } from './lib/generated/Entities/mjBizAppsContractsContractTemplate/mjbizappscontractscontracttemplate.form.component';
+export { mjBizAppsContractsContractTemplateModificationFormComponent } from './lib/generated/Entities/mjBizAppsContractsContractTemplateModification/mjbizappscontractscontracttemplatemodification.form.component';
+export { mjBizAppsContractsContractTemplateProvisionFormComponent } from './lib/generated/Entities/mjBizAppsContractsContractTemplateProvision/mjbizappscontractscontracttemplateprovision.form.component';
+export { mjBizAppsContractsContractTemplateTypeFormComponent } from './lib/generated/Entities/mjBizAppsContractsContractTemplateType/mjbizappscontractscontracttemplatetype.form.component';
+export { mjBizAppsContractsContractTypeFormComponent } from './lib/generated/Entities/mjBizAppsContractsContractType/mjbizappscontractscontracttype.form.component';
+/* ============================================================================
+ * EXPLORER SECTIONS — the three top-level tabs. Each @RegisterClass key must match a DriverClass in
+ * metadata/applications/.contracts-application.json; that pairing is the entire wiring, and both
+ * halves are required — metadata without a class renders a dead tab, a class without metadata never
+ * appears.
+ * ========================================================================== */
+import { ContractsConfigurationSectionResource, ContractsSectionResource, ContractsTemplatesSectionResource, } from './lib/sections/contracts-sections.component';
+export { MJCSectionBaseComponent, ContractsSectionResource, ContractsTemplatesSectionResource, ContractsConfigurationSectionResource, } from './lib/sections/contracts-sections.component';
+export { MJCSectionShellComponent } from './lib/sections/section-shell.component';
+export * from './lib/sections/section-nav.model';
+export * from './lib/data/entity-names';
+/* ============================================================================
+ * FORM PANELS — the app's UX, contributed onto the GENERATED forms (plan §6.4) rather than replacing
+ * them. Every one of these mounts itself: the slot host discovers registrations, so nothing here is
+ * referenced by a template. That is exactly why the anchors at the bottom are load-bearing.
+ * ========================================================================== */
+import { ContractFilesPanel, ContractTemplateFilesPanel } from './lib/form-panels/record-files.panel';
+import { MJCContractDatesPanel, MJCContractHeroPanel, MJCContractLineagePanel, MJCContractRenewalPanel, } from './lib/form-panels/contract.panels';
+import { MJCContractSupersedePanel } from './lib/form-panels/supersede.panel';
+import { MJCOrganizationAgreementsPanel } from './lib/form-panels/organization.panels';
+export { RecordFilesPanelBase, ContractFilesPanel, ContractTemplateFilesPanel } from './lib/form-panels/record-files.panel';
+export { MJCContractHeroPanel, MJCContractDatesPanel, MJCContractRenewalPanel, MJCContractLineagePanel, } from './lib/form-panels/contract.panels';
+export { MJCContractSupersedePanel } from './lib/form-panels/supersede.panel';
+export { MJCOrganizationAgreementsPanel } from './lib/form-panels/organization.panels';
+/* ============================================================================
+ * THE ONE SHARED CUSTOM COMPONENT (D-22) — the modification editor, rendered inline by the contract's
+ * Modifications panel. It is NOT a form replacement: the modification's own form is the GENERATED one.
+ *
+ * It used to be both. A priority-2 `BaseFormComponent` replacement (`MJCModificationFormComponent`)
+ * rendered this editor as the modification's whole form, loading the PARENT contract first so the
+ * editor could work through `contract.Modifications`. Opening a modification then showed nothing but
+ * "Loading the contract this modification belongs to…" — the parent load never completed the render,
+ * so the form had no fields, no dropdowns and no way to save. Deleted rather than debugged, because
+ * the generated form is strictly better here: CodeGen already emits `ContractID` and
+ * `ContractTemplateProvisionID` as `LinkType="Record"` fields, which `mj-form-field` renders as
+ * SEARCHABLE FK dropdowns, plus a `Modification Details` section holding `ModificationText` and
+ * `Notes`. That is exactly the shape a modification wants, and it is the same shape as creating a
+ * provision — which is what makes the two feel like one app.
+ *
+ * The lesson: replacing a form costs you every generated affordance (FK search, section grouping,
+ * validation display). Reach for a PANEL unless you are replacing all of it deliberately.
+ * ========================================================================== */
+/* Pages are exported so another app (or a dashboard) can host one directly; the sections resolve them
+ * internally, so nothing here depends on these being exported. */
+export * from './lib/pages/contract-grid.page';
+export { MJCModificationsPageComponent } from './lib/pages/modifications.page';
+export { MJCContractsDashboardPageComponent } from './lib/pages/contracts-dashboard.page';
+export { MJCAgreementVersionsPageComponent, MJCAllProvisionsPageComponent } from './lib/pages/templates.page';
+export { MJCContractTypesPageComponent, MJCTemplateTypesPageComponent, } from './lib/pages/configuration.page';
+export function LoadMjBizappsContractsClient() {
+    // Importing the modules above is what registers everything; the references below are
+    // ANTI-TREE-SHAKE ANCHORS. Without a live use, a production build can drop an import whose class is
+    // never referenced — and a dropped registration is a nav tab that mounts nothing, or a panel that
+    // silently never appears, with no error either way. One anchor per registration, every time.
+    void GeneratedFormsModule;
+    // Sections — each is a nav tab.
+    void ContractsSectionResource;
+    void ContractsTemplatesSectionResource;
+    void ContractsConfigurationSectionResource;
+    // Panels — none of these is referenced by any template, so they exist only because of this.
+    void ContractFilesPanel;
+    void ContractTemplateFilesPanel;
+    void MJCContractHeroPanel;
+    void MJCContractDatesPanel;
+    void MJCContractRenewalPanel;
+    void MJCContractLineagePanel;
+    void MJCContractSupersedePanel;
+    void MJCOrganizationAgreementsPanel;
+}
+//# sourceMappingURL=public-api.js.map

package/dist/public-api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-api.js","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH;;;;gFAIgF;AAChF,OAAO,iCAAiC,CAAC;AACzC,OAAO,wCAAwC,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAE,uCAAuC,EAAE,MAAM,+FAA+F,CAAC;AACxJ,OAAO,EAAE,+CAA+C,EAAE,MAAM,+GAA+G,CAAC;AAChL,OAAO,EAAE,2DAA2D,EAAE,MAAM,uIAAuI,CAAC;AACpN,OAAO,EAAE,wDAAwD,EAAE,MAAM,iIAAiI,CAAC;AAC3M,OAAO,EAAE,mDAAmD,EAAE,MAAM,uHAAuH,CAAC;AAC5L,OAAO,EAAE,2CAA2C,EAAE,MAAM,uGAAuG,CAAC;AAEpK;;;;;gFAKgF;AAChF,OAAO,EACH,qCAAqC,EACrC,wBAAwB,EACxB,iCAAiC,GACpC,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACH,uBAAuB,EACvB,wBAAwB,EACxB,iCAAiC,EACjC,qCAAqC,GACxC,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AAClF,cAAc,kCAAkC,CAAC;AACjD,cAAc,yBAAyB,CAAC;AAExC;;;;gFAIgF;AAChF,OAAO,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AACtG,OAAO,EACH,qBAAqB,EACrB,oBAAoB,EACpB,uBAAuB,EACvB,uBAAuB,GAC1B,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,8BAA8B,EAAE,MAAM,uCAAuC,CAAC;AAEvF,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAC5H,OAAO,EACH,oBAAoB,EACpB,qBAAqB,EACrB,uBAAuB,EACvB,uBAAuB,GAC1B,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,8BAA8B,EAAE,MAAM,uCAAuC,CAAC;AAEvF;;;;;;;;;;;;;;;;;gFAiBgF;AAEhF;kEACkE;AAClE,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EAAE,kCAAkC,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,iCAAiC,EAAE,6BAA6B,EAAE,MAAM,4BAA4B,CAAC;AAC9G,OAAO,EACH,6BAA6B,EAC7B,6BAA6B,GAChC,MAAM,gCAAgC,CAAC;AAExC,MAAM,UAAU,4BAA4B;IACxC,qFAAqF;IACrF,oGAAoG;IACpG,kGAAkG;IAClG,6FAA6F;IAC7F,KAAK,oBAAoB,CAAC;IAE1B,gCAAgC;IAChC,KAAK,wBAAwB,CAAC;IAC9B,KAAK,iCAAiC,CAAC;IACvC,KAAK,qCAAqC,CAAC;IAE3C,4FAA4F;IAC5F,KAAK,kBAAkB,CAAC;IACxB,KAAK,0BAA0B,CAAC;IAChC,KAAK,oBAAoB,CAAC;IAC1B,KAAK,qBAAqB,CAAC;IAC3B,KAAK,uBAAuB,CAAC;IAC7B,KAAK,uBAAuB,CAAC;IAC7B,KAAK,yBAAyB,CAAC;IAC/B,KAAK,8BAA8B,CAAC;AACxC,CAAC"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "mjdevManaged": "MJDEV-MANAGED: mjdev owns parts of this file — the \"packages/dev-apps/*\" workspaces glob, any dev-linked open-app dependencies (e.g. \"@mj-biz-apps/*\"), and the Angular \"overrides\" pin set. Do not hand-edit those; the tool wires and reverts them. They are left visible in git status, but the git-tree guard blocks committing them. See .mjdev-docs/MANAGED-FILES.md; revert with `mjdev git:stage-clean <slug> package.json`.",
+  "name": "@mj-biz-apps/contracts-ng",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Client bootstrap package - Angular components loaded by MJExplorer via the generated open-app bootstrap import. TODO(template): rename.",
+  "main": "dist/public-api.js",
+  "types": "dist/public-api.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MemberJunction/bizapps-contracts"
+  },
+  "license": "BUSL-1.1",
+  "dependencies": {
+    "@mj-biz-apps/contracts-entities": "^0.1.0"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=21.0.0 <22.0.0",
+    "@angular/core": ">=21.0.0 <22.0.0",
+    "@angular/forms": ">=21.0.0 <22.0.0",
+    "@memberjunction/core": "^6.1.0-edge.3",
+    "@memberjunction/core-entities": "^6.1.0-edge.3",
+    "@memberjunction/global": "^6.1.0-edge.3",
+    "@memberjunction/graphql-dataprovider": "^6.1.0-edge.3",
+    "@memberjunction/ng-base-forms": "^6.1.0-edge.3",
+    "@memberjunction/ng-entity-viewer": "^6.1.0-edge.3",
+    "@memberjunction/ng-file-storage": "^6.1.0-edge.3",
+    "@memberjunction/ng-hierarchy-tree": "^6.1.0-edge.3",
+    "@memberjunction/ng-link-directives": "^6.1.0-edge.3",
+    "@memberjunction/ng-shared": "^6.1.0-edge.3",
+    "@memberjunction/ng-ui-components": "^6.1.0-edge.3"
+  },
+  "devDependencies": {
+    "@angular/compiler": "21.1.3",
+    "@angular/compiler-cli": "21.1.3",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
+  },
+  "files": [
+    "/dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "ngc",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest"
+  }
+}