@memberjunction/ng-ui-components 6.1.0-edge.0 → 6.1.0-edge.2

package/dist/lib/tabs/tabs.scss

@@ -0,0 +1,242 @@
+/**
+ * MJ tab chrome — the ONE visual definition of a browser-style tab strip.
+ *
+ * Loaded globally by the application (see explorer-app's `styles.scss`), exactly like
+ * `button.scss`, so that components in DIFFERENT packages can share one look without either
+ * package depending on the other for styling. Two components consume it today:
+ *
+ *   - `mj-tabstrip`      (@memberjunction/ng-tabstrip) — tabs declared as projected children,
+ *                        addressed by positional index, bodies owned by the strip.
+ *   - `mj-workspace-tab-strip` (@memberjunction/ng-ui-components) — a data-driven strip over an
+ *                        array of draft descriptors, addressed by stable id, projecting nothing.
+ *
+ * Those two have genuinely different API contracts and keep their own state models. What they must
+ * NOT differ on is what a tab LOOKS like — hence this file. Anything here is chrome; anything a
+ * single strip alone needs (CDK drag affordances, scroll-button placement) stays in that
+ * component's own stylesheet.
+ *
+ * Design tokens only. The look is derived from the draft-workspace strip, which was the
+ * token-correct one: the older tabstrip styling used legacy `--gray-*` aliases that resolve to
+ * PRIMITIVES and therefore do not re-point in dark mode.
+ */
+
+/* Max tab width. Tabs size to their text and only grow to this cap, then ellipsize — a fixed width
+   leaves short tabs mostly empty. Overridable per strip by re-declaring the custom property. */
+.mj-tabs {
+  --mj-tab-max: 210px;
+  /* Sentinel read by `warnIfTabChromeMissing` (dev-mode guard): its absence on a rendered strip
+     means this sheet isn't loaded in the host app — the silent-unstyled failure mode. */
+  --mj-tabs-chrome-loaded: 1;
+}
+
+/* The bar = the scrolling tab list plus any pinned trailing control as siblings. The bottom rule
+   runs the full width here so it spans that control too, not just the tabs. */
+.mj-tabs__bar {
+  display: flex;
+  align-items: stretch;
+  /* Full-width baseline across the top of the surface — the consistent separator. The active tab
+     comes forward by COLOR rather than by clearing this line, because a seamless merge gets
+     clipped by the horizontal scroller. */
+  border-bottom: 1px solid var(--mj-border-default);
+  /* Breathing room above the tabs so they don't jam against a card's top edge or get cut by its
+     rounded corner — they read as tabs ON the surface, not sliced off. */
+  padding-top: 8px;
+  /* Tall enough that a horizontal scrollbar isn't cramped against the tabs. */
+  min-height: 46px;
+}
+
+.mj-tabs__list {
+  display: flex;
+  align-items: stretch;
+  gap: 4px;
+  /* Indented, not flush: the first tab lines up with the surface's content gutter. */
+  padding: 0 4px 0 12px;
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+  /* MUST be explicit: a `visible` axis paired with a non-`visible` one computes to `auto`, so
+     `overflow-x: auto` alone would make the strip vertically scrollable too. (`clip` is NOT an
+     option here — paired with an `auto` axis it computes to `hidden` per the same spec rule, which
+     is why nothing may give the list vertical overhang: a `hidden` axis is still programmatically
+     scrollable, and the browser scrolls a focused tab into view. See the tab's margin note.) */
+  overflow-y: hidden;
+  scrollbar-width: thin;
+}
+
+.mj-tabs__tab {
+  /* The tab's ACCENT — one color expressing what state the tab is in, consumed by the active
+     state's border and top line so they can never disagree (a warning-bordered tab under a
+     brand-blue accent line reads as two components arguing). Brand primary for an ordinary tab;
+     the lifecycle modifiers below re-point it to their status color. */
+  --mj-tab-accent: var(--mj-brand-primary);
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  /* Content-sized up to the cap; flex:none so a tab keeps its content width and the LIST scrolls on
+     overflow rather than the tabs squashing. */
+  max-width: var(--mj-tab-max, 210px);
+  flex: none;
+  min-width: 0;
+  padding: 8px 4px 8px 11px;
+  border: 1px solid var(--mj-border-default);
+  border-bottom: none;
+  border-radius: 8px 8px 0 0;
+  /* Inactive = the PAGE background (the darkest surface tier) so unselected tabs recede, while the
+     active tab on --mj-bg-surface comes forward. Consistent ordering in light AND dark. */
+  background: var(--mj-bg-page);
+  color: var(--mj-text-secondary);
+  font-family: inherit;
+  font-size: 13px;
+  /* Regular arrow over a tab body, like browser tabs — not the clicky finger. */
+  cursor: default;
+  /* NO negative bottom margin. The classic tab trick of -1px to overlap the bar's rule buys
+     nothing here — the active tab comes forward by COLOR and a brand accent, never by clearing
+     the baseline — and it cost a real bug: 1px of vertical overhang made the list scrollable by
+     exactly 1px, so the whole row jumped every time a tab took keyboard focus. The tab's bottom
+     edge simply meets the bar's rule; the active tab's own border matches it, so the seam reads
+     as continuous anyway. */
+  box-sizing: border-box;
+}
+
+.mj-tabs__tab:hover:not(.mj-tabs__tab--active) {
+  background: var(--mj-bg-surface-hover);
+  color: var(--mj-text-primary);
+}
+
+/* Focus lands on the TAB itself (it carries role="tab" and the roving tabindex), so the ring
+   belongs here rather than on anything nested. */
+.mj-tabs__tab:focus-visible,
+.mj-tabs__close:focus-visible,
+.mj-tabs__new:focus-visible {
+  outline: 2px solid var(--mj-border-focus);
+  outline-offset: -2px;
+}
+
+/* Optional lifecycle states — only the draft strip sets these today, but a tab that can be
+   rejected or completed should look the same wherever that concept turns up. INACTIVE tabs keep
+   subtler status borders (they should recede); the full-strength status color is carried by the
+   accent variable, which the active state consumes below. */
+.mj-tabs__tab--rejected {
+  --mj-tab-accent: var(--mj-status-warning);
+  border-color: var(--mj-status-warning-border, var(--mj-status-warning));
+  background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface-card));
+}
+.mj-tabs__tab--complete {
+  --mj-tab-accent: var(--mj-status-success);
+  border-color: color-mix(in srgb, var(--mj-status-success) 40%, var(--mj-border-default));
+}
+
+/* AFTER the lifecycle modifiers, deliberately: when a tab is both active and rejected/complete,
+   the active surface and the accent-colored border must win over the modifier's inactive styling. */
+.mj-tabs__tab--active {
+  /* Base surface + a top accent line, as an INSET shadow so it adds no height and shifts nothing.
+     Border and line both draw from --mj-tab-accent, so the ACTIVE tab's chrome states its status
+     in one voice: brand primary for an ordinary tab, warning when rejected, success when complete.
+     The status icon and accessible name carry the same information for anyone who can't rely on
+     the color alone. */
+  background: var(--mj-bg-surface);
+  border-color: var(--mj-tab-accent);
+  box-shadow: inset 0 2px 0 0 var(--mj-tab-accent);
+  color: var(--mj-text-primary);
+  font-weight: 600;
+}
+
+.mj-tabs__label {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.mj-tabs__icon {
+  flex: none;
+  font-size: 12px;
+}
+
+.mj-tabs__status-icon {
+  flex: none;
+  font-size: 12px;
+  color: var(--mj-status-warning);
+}
+
+/* Inline dot, present only when dirty — it PUSHES the label (so the ellipsis shifts left on a
+   capped tab) rather than occupying a permanently reserved slot. */
+.mj-tabs__dirty {
+  flex: none;
+  padding-left: 3px;
+  color: var(--mj-brand-primary);
+  font-size: 18px;
+  line-height: 0;
+  pointer-events: none;
+}
+
+/* Not in the tab order: the tab itself is the focus stop, and Delete closes it (ARIA APG's pattern
+   for closeable tabs). Kept as a real button so it retains an accessible name and a pointer target. */
+.mj-tabs__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  margin-left: auto;
+  margin-right: 6px;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--mj-text-muted);
+  cursor: pointer;
+  font-size: 11px;
+  flex: none;
+}
+.mj-tabs__close:hover {
+  background: var(--mj-bg-surface-hover);
+  color: var(--mj-text-primary);
+}
+
+/* Pinned trailing control (new-tab / overflow scroll buttons): flex:none keeps it at the edge of
+   the bar while the list scrolls behind it. */
+.mj-tabs__new {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  flex: none;
+  border: none;
+  border-left: 1px solid var(--mj-border-default);
+  background: var(--mj-bg-surface);
+  color: var(--mj-text-link);
+  font-size: 13px;
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+  /* Fill to the top of the surface — cancel the bar's top padding for this control only, so it
+     doesn't cut off early above the tab row. */
+  align-self: stretch;
+  margin-top: -8px;
+  /* Round only the OUTER corner; the tab-side edge stays square and flush against the divider that
+     separates it from the tabs, matching how browsers draw their +. */
+  border-radius: 0 8px 0 0;
+}
+.mj-tabs__new:hover {
+  background: var(--mj-bg-surface-hover);
+}
+
+/* Overflow scroll affordances — same chrome as the pinned control, no bottom rounding. */
+.mj-tabs__scroll {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 10px;
+  flex: none;
+  border: none;
+  background: var(--mj-bg-surface);
+  color: var(--mj-text-secondary);
+  cursor: pointer;
+  align-self: stretch;
+  margin-top: -8px;
+}
+.mj-tabs__scroll:hover {
+  background: var(--mj-bg-surface-hover);
+  color: var(--mj-text-primary);
+}

package/dist/lib/workspace-tabs/workspace-card.component.d.ts

@@ -0,0 +1,63 @@
+import { EventEmitter } from '@angular/core';
+import { MJWorkspaceTab } from './workspace-tabs.types';
+import { MJTabReorder } from './workspace-tab-strip.component';
+import * as i0 from "@angular/core";
+/**
+ * `<mj-workspace-card>` — the reusable frame every "workspace" screen shares (a screen where the
+ * user builds several drafts in parallel, each in a tab). A THIN, slotted wrapper: it owns ONLY the
+ * invariant chrome —
+ *   • the card surface (border + rounded corners + contained scroll),
+ *   • the tab-strip row (delegated to `<mj-workspace-tab-strip>`, which carries all tab behavior),
+ *   • an identity band beside the tabs, and
+ *   • a single scrollable body —
+ * and PROJECTS everything that varies:
+ *   • `[workspaceHeader]` — the per-workshop identity band content (e.g. number/status/currency badges);
+ *   • the default slot — the workshop's form/body;
+ *   • `[workspaceFooterNote]` — an optional caption beside the standardized footer verbs.
+ *
+ * The card deliberately bakes in NO workshop-specific header; those differ per workshop and are
+ * projected. Height chain: `:host` fills its parent, the card fills the host, the body is the
+ * flex:1 scroller — so the BODY scrolls in place while the strip + identity band stay pinned.
+ *
+ * SIZING RULE for content inside the card: the card is a query container (`container-type: size`),
+ * so content sizes with CONTAINER units (`cqh`/`cqw`/`cqi`) — relative to the card as a pane —
+ * never viewport units (`vh`/`vw`), which break the moment the card sits in a split or a smaller
+ * window.
+ */
+export declare class MJWorkspaceCardComponent {
+    Tabs: MJWorkspaceTab[];
+    ActiveId: string | null;
+    NewTabLabel: string;
+    AriaLabel: string;
+    /** Passed through to the strip — see `MJWorkspaceTabStripComponent.AllowReorder`. */
+    AllowReorder: boolean;
+    /** Render the standardized action bar (confirm / save-as-draft / discard) below the body. */
+    ShowFooter: boolean;
+    /** The primary verb's label — the ONE thing that changes per workshop ("Create entry" / "Build batch"). */
+    ConfirmLabel: string;
+    /** Optional Font Awesome class for the confirm button (e.g. 'fa-solid fa-check'). */
+    ConfirmIcon: string | null;
+    ConfirmDisabled: boolean;
+    /** Tooltip / blocked-reason on the confirm button; falls back to ConfirmLabel. */
+    ConfirmTitle: string | null;
+    /** Show the spinner + busy label on the confirm button while an async confirm runs. */
+    ConfirmBusy: boolean;
+    ConfirmBusyLabel: string;
+    /** Whether the save-as-draft button appears (some workshops have no draft concept). */
+    ShowDraft: boolean;
+    DraftLabel: string;
+    DraftIcon: string | null;
+    DraftDisabled: boolean;
+    DiscardLabel: string;
+    TabSelected: EventEmitter<string>;
+    TabClosed: EventEmitter<string>;
+    NewTabRequested: EventEmitter<void>;
+    TabReordered: EventEmitter<MJTabReorder>;
+    /** The primary verb (create / build / …). */
+    Confirm: EventEmitter<void>;
+    SaveDraft: EventEmitter<void>;
+    Discard: EventEmitter<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJWorkspaceCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJWorkspaceCardComponent, "mj-workspace-card", never, { "Tabs": { "alias": "Tabs"; "required": false; }; "ActiveId": { "alias": "ActiveId"; "required": false; }; "NewTabLabel": { "alias": "NewTabLabel"; "required": false; }; "AriaLabel": { "alias": "AriaLabel"; "required": false; }; "AllowReorder": { "alias": "AllowReorder"; "required": false; }; "ShowFooter": { "alias": "ShowFooter"; "required": false; }; "ConfirmLabel": { "alias": "ConfirmLabel"; "required": false; }; "ConfirmIcon": { "alias": "ConfirmIcon"; "required": false; }; "ConfirmDisabled": { "alias": "ConfirmDisabled"; "required": false; }; "ConfirmTitle": { "alias": "ConfirmTitle"; "required": false; }; "ConfirmBusy": { "alias": "ConfirmBusy"; "required": false; }; "ConfirmBusyLabel": { "alias": "ConfirmBusyLabel"; "required": false; }; "ShowDraft": { "alias": "ShowDraft"; "required": false; }; "DraftLabel": { "alias": "DraftLabel"; "required": false; }; "DraftIcon": { "alias": "DraftIcon"; "required": false; }; "DraftDisabled": { "alias": "DraftDisabled"; "required": false; }; "DiscardLabel": { "alias": "DiscardLabel"; "required": false; }; }, { "TabSelected": "TabSelected"; "TabClosed": "TabClosed"; "NewTabRequested": "NewTabRequested"; "TabReordered": "TabReordered"; "Confirm": "Confirm"; "SaveDraft": "SaveDraft"; "Discard": "Discard"; }, never, ["[workspaceHeader]", "*", "[workspaceFooterNote]"], true, never>;
+}
+//# sourceMappingURL=workspace-card.component.d.ts.map

package/dist/lib/workspace-tabs/workspace-card.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-card.component.d.ts","sourceRoot":"","sources":["../../../src/lib/workspace-tabs/workspace-card.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqD,YAAY,EAAE,MAAM,eAAe,CAAC;AAEhG,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAgC,YAAY,EAAE,MAAM,iCAAiC,CAAC;;AAG7F;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAwDa,wBAAwB;IAC1B,IAAI,EAAE,cAAc,EAAE,CAAM;IAC5B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC/B,WAAW,SAAS;IACpB,SAAS,SAAe;IACjC,qFAAqF;IAC5E,YAAY,UAAQ;IAG7B,6FAA6F;IACpF,UAAU,UAAS;IAC5B,2GAA2G;IAClG,YAAY,SAAa;IAClC,qFAAqF;IAC5E,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IAClC,eAAe,UAAS;IACjC,kFAAkF;IACzE,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC5C,uFAAuF;IAC9E,WAAW,UAAS;IACpB,gBAAgB,SAAc;IACvC,uFAAuF;IAC9E,SAAS,UAAQ;IACjB,UAAU,SAAmB;IAC7B,SAAS,EAAE,MAAM,GAAG,IAAI,CAA+B;IACvD,aAAa,UAAS;IACtB,YAAY,SAAa;IAExB,WAAW,uBAA8B;IACzC,SAAS,uBAA8B;IACvC,eAAe,qBAA4B;IAC3C,YAAY,6BAAoC;IAC1D,6CAA6C;IACnC,OAAO,qBAA4B;IACnC,SAAS,qBAA4B;IACrC,OAAO,qBAA4B;yCAnClC,wBAAwB;2CAAxB,wBAAwB;CAoCpC"}

package/dist/lib/workspace-tabs/workspace-card.component.js

@@ -0,0 +1,256 @@
+import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MJWorkspaceTabStripComponent } from './workspace-tab-strip.component';
+import { MJButtonDirective } from '../button/button.directive';
+import * as i0 from "@angular/core";
+const _c0 = [[["", "workspaceHeader", ""]], "*", [["", "workspaceFooterNote", ""]]];
+const _c1 = ["[workspaceHeader]", "*", "[workspaceFooterNote]"];
+function MJWorkspaceCardComponent_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 10);
+    i0.ɵɵtext(1);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.ConfirmBusyLabel, " ");
+} }
+function MJWorkspaceCardComponent_Conditional_7_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 12);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassMap(ctx_r1.ConfirmIcon);
+} }
+function MJWorkspaceCardComponent_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJWorkspaceCardComponent_Conditional_7_Conditional_3_Conditional_0_Template, 1, 2, "i", 11);
+    i0.ɵɵtext(1);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.ConfirmIcon ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.ConfirmLabel, " ");
+} }
+function MJWorkspaceCardComponent_Conditional_7_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 12);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassMap(ctx_r1.DraftIcon);
+} }
+function MJWorkspaceCardComponent_Conditional_7_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 13);
+    i0.ɵɵlistener("click", function MJWorkspaceCardComponent_Conditional_7_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SaveDraft.emit()); });
+    i0.ɵɵconditionalCreate(1, MJWorkspaceCardComponent_Conditional_7_Conditional_4_Conditional_1_Template, 1, 2, "i", 11);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("disabled", ctx_r1.DraftDisabled);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.DraftIcon ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.DraftLabel, " ");
+} }
+function MJWorkspaceCardComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "footer", 5)(1, "button", 6);
+    i0.ɵɵlistener("click", function MJWorkspaceCardComponent_Conditional_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Confirm.emit()); });
+    i0.ɵɵconditionalCreate(2, MJWorkspaceCardComponent_Conditional_7_Conditional_2_Template, 2, 1)(3, MJWorkspaceCardComponent_Conditional_7_Conditional_3_Template, 2, 2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, MJWorkspaceCardComponent_Conditional_7_Conditional_4_Template, 3, 3, "button", 7);
+    i0.ɵɵelementStart(5, "button", 8);
+    i0.ɵɵlistener("click", function MJWorkspaceCardComponent_Conditional_7_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Discard.emit()); });
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 9);
+    i0.ɵɵprojection(8, 2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r1.ConfirmDisabled || ctx_r1.ConfirmBusy)("title", ctx_r1.ConfirmTitle || ctx_r1.ConfirmLabel);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ConfirmBusy ? 2 : 3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.ShowDraft ? 4 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.DiscardLabel);
+} }
+/**
+ * `<mj-workspace-card>` — the reusable frame every "workspace" screen shares (a screen where the
+ * user builds several drafts in parallel, each in a tab). A THIN, slotted wrapper: it owns ONLY the
+ * invariant chrome —
+ *   • the card surface (border + rounded corners + contained scroll),
+ *   • the tab-strip row (delegated to `<mj-workspace-tab-strip>`, which carries all tab behavior),
+ *   • an identity band beside the tabs, and
+ *   • a single scrollable body —
+ * and PROJECTS everything that varies:
+ *   • `[workspaceHeader]` — the per-workshop identity band content (e.g. number/status/currency badges);
+ *   • the default slot — the workshop's form/body;
+ *   • `[workspaceFooterNote]` — an optional caption beside the standardized footer verbs.
+ *
+ * The card deliberately bakes in NO workshop-specific header; those differ per workshop and are
+ * projected. Height chain: `:host` fills its parent, the card fills the host, the body is the
+ * flex:1 scroller — so the BODY scrolls in place while the strip + identity band stay pinned.
+ *
+ * SIZING RULE for content inside the card: the card is a query container (`container-type: size`),
+ * so content sizes with CONTAINER units (`cqh`/`cqw`/`cqi`) — relative to the card as a pane —
+ * never viewport units (`vh`/`vw`), which break the moment the card sits in a split or a smaller
+ * window.
+ */
+export class MJWorkspaceCardComponent {
+    Tabs = [];
+    ActiveId = null;
+    NewTabLabel = 'New';
+    AriaLabel = 'Workspace';
+    /** Passed through to the strip — see `MJWorkspaceTabStripComponent.AllowReorder`. */
+    AllowReorder = true;
+    // ── Standardized footer (opt-in) ────────────────────────────────────────────
+    /** Render the standardized action bar (confirm / save-as-draft / discard) below the body. */
+    ShowFooter = false;
+    /** The primary verb's label — the ONE thing that changes per workshop ("Create entry" / "Build batch"). */
+    ConfirmLabel = 'Confirm';
+    /** Optional Font Awesome class for the confirm button (e.g. 'fa-solid fa-check'). */
+    ConfirmIcon = null;
+    ConfirmDisabled = false;
+    /** Tooltip / blocked-reason on the confirm button; falls back to ConfirmLabel. */
+    ConfirmTitle = null;
+    /** Show the spinner + busy label on the confirm button while an async confirm runs. */
+    ConfirmBusy = false;
+    ConfirmBusyLabel = 'Working…';
+    /** Whether the save-as-draft button appears (some workshops have no draft concept). */
+    ShowDraft = true;
+    DraftLabel = 'Keep as draft';
+    DraftIcon = 'fa-regular fa-floppy-disk';
+    DraftDisabled = false;
+    DiscardLabel = 'Discard';
+    TabSelected = new EventEmitter();
+    TabClosed = new EventEmitter();
+    NewTabRequested = new EventEmitter();
+    TabReordered = new EventEmitter();
+    /** The primary verb (create / build / …). */
+    Confirm = new EventEmitter();
+    SaveDraft = new EventEmitter();
+    Discard = new EventEmitter();
+    static ɵfac = function MJWorkspaceCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJWorkspaceCardComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJWorkspaceCardComponent, selectors: [["mj-workspace-card"]], inputs: { Tabs: "Tabs", ActiveId: "ActiveId", NewTabLabel: "NewTabLabel", AriaLabel: "AriaLabel", AllowReorder: "AllowReorder", ShowFooter: "ShowFooter", ConfirmLabel: "ConfirmLabel", ConfirmIcon: "ConfirmIcon", ConfirmDisabled: "ConfirmDisabled", ConfirmTitle: "ConfirmTitle", ConfirmBusy: "ConfirmBusy", ConfirmBusyLabel: "ConfirmBusyLabel", ShowDraft: "ShowDraft", DraftLabel: "DraftLabel", DraftIcon: "DraftIcon", DraftDisabled: "DraftDisabled", DiscardLabel: "DiscardLabel" }, outputs: { TabSelected: "TabSelected", TabClosed: "TabClosed", NewTabRequested: "NewTabRequested", TabReordered: "TabReordered", Confirm: "Confirm", SaveDraft: "SaveDraft", Discard: "Discard" }, ngContentSelectors: _c1, decls: 8, vars: 6, consts: [[1, "ws-card"], [1, "ws-card__head"], [3, "TabSelected", "TabClosed", "NewTabRequested", "TabReordered", "Tabs", "ActiveId", "NewTabLabel", "AllowReorder"], [1, "ws-card__headmeta"], [1, "ws-card__body"], [1, "ws-card__foot"], ["type", "button", "mjButton", "", "variant", "primary", 3, "click", "disabled", "title"], ["type", "button", "mjButton", "", "variant", "outline", 3, "disabled"], ["type", "button", "mjButton", "", "variant", "flat", 3, "click"], [1, "ws-card__footnote"], ["aria-hidden", "true", 1, "fa-solid", "fa-spinner", "fa-spin"], ["aria-hidden", "true", 3, "class"], ["aria-hidden", "true"], ["type", "button", "mjButton", "", "variant", "outline", 3, "click", "disabled"]], template: function MJWorkspaceCardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0);
+            i0.ɵɵelementStart(0, "section", 0)(1, "header", 1)(2, "mj-workspace-tab-strip", 2);
+            i0.ɵɵlistener("TabSelected", function MJWorkspaceCardComponent_Template_mj_workspace_tab_strip_TabSelected_2_listener($event) { return ctx.TabSelected.emit($event); })("TabClosed", function MJWorkspaceCardComponent_Template_mj_workspace_tab_strip_TabClosed_2_listener($event) { return ctx.TabClosed.emit($event); })("NewTabRequested", function MJWorkspaceCardComponent_Template_mj_workspace_tab_strip_NewTabRequested_2_listener() { return ctx.NewTabRequested.emit(); })("TabReordered", function MJWorkspaceCardComponent_Template_mj_workspace_tab_strip_TabReordered_2_listener($event) { return ctx.TabReordered.emit($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(3, "div", 3);
+            i0.ɵɵprojection(4);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(5, "div", 4);
+            i0.ɵɵprojection(6, 1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(7, MJWorkspaceCardComponent_Conditional_7_Template, 9, 5, "footer", 5);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵattribute("aria-label", ctx.AriaLabel);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("Tabs", ctx.Tabs)("ActiveId", ctx.ActiveId)("NewTabLabel", ctx.NewTabLabel)("AllowReorder", ctx.AllowReorder);
+            i0.ɵɵadvance(5);
+            i0.ɵɵconditional(ctx.ShowFooter ? 7 : -1);
+        } }, dependencies: [CommonModule, MJWorkspaceTabStripComponent, MJButtonDirective], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n\n\n.ws-card[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  overflow: hidden;\n  \n\n\n\n\n  container-type: size;\n  container-name: workspace;\n}\n\n.ws-card__head[_ngcontent-%COMP%] {\n  flex: none;\n}\n\n\n\n.ws-card__headmeta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n  padding: 10px 14px;\n}\n\n\n.ws-card__headmeta[_ngcontent-%COMP%]:empty {\n  display: none;\n}\n\n\n\n\n.ws-card__body[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 0 14px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n\n\n\n\n.ws-card__foot[_ngcontent-%COMP%] {\n  flex: none;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n  padding: 4px 14px 12px;\n}\n\n\n.ws-card__footnote[_ngcontent-%COMP%] {\n  margin-left: auto;\n  max-width: 46ch;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n.ws-card__footnote[_ngcontent-%COMP%]:empty {\n  display: none;\n}"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJWorkspaceCardComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-workspace-card', imports: [CommonModule, MJWorkspaceTabStripComponent, MJButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <section class="ws-card" [attr.aria-label]="AriaLabel">
+      <header class="ws-card__head">
+        <mj-workspace-tab-strip
+          [Tabs]="Tabs"
+          [ActiveId]="ActiveId"
+          [NewTabLabel]="NewTabLabel"
+          [AllowReorder]="AllowReorder"
+          (TabSelected)="TabSelected.emit($event)"
+          (TabClosed)="TabClosed.emit($event)"
+          (NewTabRequested)="NewTabRequested.emit()"
+          (TabReordered)="TabReordered.emit($event)">
+        </mj-workspace-tab-strip>
+        <div class="ws-card__headmeta">
+          <ng-content select="[workspaceHeader]"></ng-content>
+        </div>
+      </header>
+      <div class="ws-card__body">
+        <ng-content></ng-content>
+      </div>
+      <!-- Standardized action bar: the SAME three verbs on every workspace — a primary
+           confirm/submit whose LABEL is the only thing that varies per use case, a neutral
+           save-as-draft, and a neutral discard — so no workshop hand-rolls its own footer. Pinned
+           below the scrolling body. Opt-in via [ShowFooter]; the [workspaceFooterNote] slot carries
+           any per-workshop caption beside the buttons. Confirm sits LEFT of the neutral verbs per
+           the MJ dialog-button convention. -->
+      @if (ShowFooter) {
+        <footer class="ws-card__foot">
+          <button type="button" mjButton variant="primary"
+            [disabled]="ConfirmDisabled || ConfirmBusy"
+            [title]="ConfirmTitle || ConfirmLabel"
+            (click)="Confirm.emit()">
+            @if (ConfirmBusy) {
+              <i class="fa-solid fa-spinner fa-spin" aria-hidden="true"></i> {{ ConfirmBusyLabel }}
+            } @else {
+              @if (ConfirmIcon) { <i [class]="ConfirmIcon" aria-hidden="true"></i> } {{ ConfirmLabel }}
+            }
+          </button>
+          @if (ShowDraft) {
+            <button type="button" mjButton variant="outline" [disabled]="DraftDisabled" (click)="SaveDraft.emit()">
+              @if (DraftIcon) { <i [class]="DraftIcon" aria-hidden="true"></i> } {{ DraftLabel }}
+            </button>
+          }
+          <button type="button" mjButton variant="flat" (click)="Discard.emit()">{{ DiscardLabel }}</button>
+          <span class="ws-card__footnote"><ng-content select="[workspaceFooterNote]"></ng-content></span>
+        </footer>
+      }
+    </section>
+  `, styles: ["/* The reusable workspace card frame \u2014 design tokens only. The height chain (host fills parent \u2192 card\n   fills host \u2192 body is the flex:1 scroller) is load-bearing: it's what lets the BODY scroll in place\n   while the tab strip + identity band stay pinned. */\n\n:host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n/* One object against the page: --mj-bg-surface, rounded, with the body's scroll contained inside. */\n.ws-card {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  overflow: hidden;\n  /* SIZING CONTAINER (design rule, Marcelo 2026-07-21): the card is a query container, so content\n     inside sizes with CONTAINER units (cqh/cqw/cqi) \u2014 relative to THIS card (a window/pane), never the\n     viewport (vh/vw). vh would size to the whole screen regardless of the pane the card sits in. The\n     card's own size comes from the flex chain (parent-driven), so size containment is safe here. */\n  container-type: size;\n  container-name: workspace;\n}\n\n.ws-card__head {\n  flex: none;\n}\n\n/* Identity band below the tab row (never in line with the tabs) \u2014 the slot the workshop projects into. */\n.ws-card__headmeta {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n  padding: 10px 14px;\n}\n/* Collapse the band entirely when the workshop projects nothing into it (no empty padded strip). */\n.ws-card__headmeta:empty {\n  display: none;\n}\n\n/* The single scrollable body. Standard gutters + a stacked-column default (the compact-workspace\n   layout); a workshop's projected content flows here. */\n.ws-card__body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 0 14px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n/* The standardized action bar \u2014 pinned below the scrolling body, so the verbs stay reachable without\n   scrolling to the end of a long form. NO top border (Marcelo 2026-07-21): the buttons should read as\n   part of the sheet, not a boxed-off strip \u2014 the card's own frame is the only border we want. */\n.ws-card__foot {\n  flex: none;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n  padding: 4px 14px 12px;\n}\n/* Per-workshop caption beside the verbs (projected). Collapses when nothing is slotted. */\n.ws-card__footnote {\n  margin-left: auto;\n  max-width: 46ch;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n.ws-card__footnote:empty {\n  display: none;\n}\n"] }]
+    }], null, { Tabs: [{
+            type: Input
+        }], ActiveId: [{
+            type: Input
+        }], NewTabLabel: [{
+            type: Input
+        }], AriaLabel: [{
+            type: Input
+        }], AllowReorder: [{
+            type: Input
+        }], ShowFooter: [{
+            type: Input
+        }], ConfirmLabel: [{
+            type: Input
+        }], ConfirmIcon: [{
+            type: Input
+        }], ConfirmDisabled: [{
+            type: Input
+        }], ConfirmTitle: [{
+            type: Input
+        }], ConfirmBusy: [{
+            type: Input
+        }], ConfirmBusyLabel: [{
+            type: Input
+        }], ShowDraft: [{
+            type: Input
+        }], DraftLabel: [{
+            type: Input
+        }], DraftIcon: [{
+            type: Input
+        }], DraftDisabled: [{
+            type: Input
+        }], DiscardLabel: [{
+            type: Input
+        }], TabSelected: [{
+            type: Output
+        }], TabClosed: [{
+            type: Output
+        }], NewTabRequested: [{
+            type: Output
+        }], TabReordered: [{
+            type: Output
+        }], Confirm: [{
+            type: Output
+        }], SaveDraft: [{
+            type: Output
+        }], Discard: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJWorkspaceCardComponent, { className: "MJWorkspaceCardComponent", filePath: "lib/workspace-tabs/workspace-card.component.ts", lineNumber: 85 }); })();
+//# sourceMappingURL=workspace-card.component.js.map

package/dist/lib/workspace-tabs/workspace-card.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-card.component.js","sourceRoot":"","sources":["../../../src/lib/workspace-tabs/workspace-card.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MJWorkspaceTab } from './workspace-tabs.types';\nimport { MJWorkspaceTabStripComponent, MJTabReorder } from './workspace-tab-strip.component';\nimport { MJButtonDirective } from '../button/button.directive';\n\n/**\n * `<mj-workspace-card>` — the reusable frame every \"workspace\" screen shares (a screen where the\n * user builds several drafts in parallel, each in a tab). A THIN, slotted wrapper: it owns ONLY the\n * invariant chrome —\n *   • the card surface (border + rounded corners + contained scroll),\n *   • the tab-strip row (delegated to `<mj-workspace-tab-strip>`, which carries all tab behavior),\n *   • an identity band beside the tabs, and\n *   • a single scrollable body —\n * and PROJECTS everything that varies:\n *   • `[workspaceHeader]` — the per-workshop identity band content (e.g. number/status/currency badges);\n *   • the default slot — the workshop's form/body;\n *   • `[workspaceFooterNote]` — an optional caption beside the standardized footer verbs.\n *\n * The card deliberately bakes in NO workshop-specific header; those differ per workshop and are\n * projected. Height chain: `:host` fills its parent, the card fills the host, the body is the\n * flex:1 scroller — so the BODY scrolls in place while the strip + identity band stay pinned.\n *\n * SIZING RULE for content inside the card: the card is a query container (`container-type: size`),\n * so content sizes with CONTAINER units (`cqh`/`cqw`/`cqi`) — relative to the card as a pane —\n * never viewport units (`vh`/`vw`), which break the moment the card sits in a split or a smaller\n * window.\n */\n@Component({\n  standalone: true,\n  selector: 'mj-workspace-card',\n  imports: [CommonModule, MJWorkspaceTabStripComponent, MJButtonDirective],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <section class=\"ws-card\" [attr.aria-label]=\"AriaLabel\">\n      <header class=\"ws-card__head\">\n        <mj-workspace-tab-strip\n          [Tabs]=\"Tabs\"\n          [ActiveId]=\"ActiveId\"\n          [NewTabLabel]=\"NewTabLabel\"\n          [AllowReorder]=\"AllowReorder\"\n          (TabSelected)=\"TabSelected.emit($event)\"\n          (TabClosed)=\"TabClosed.emit($event)\"\n          (NewTabRequested)=\"NewTabRequested.emit()\"\n          (TabReordered)=\"TabReordered.emit($event)\">\n        </mj-workspace-tab-strip>\n        <div class=\"ws-card__headmeta\">\n          <ng-content select=\"[workspaceHeader]\"></ng-content>\n        </div>\n      </header>\n      <div class=\"ws-card__body\">\n        <ng-content></ng-content>\n      </div>\n      <!-- Standardized action bar: the SAME three verbs on every workspace — a primary\n           confirm/submit whose LABEL is the only thing that varies per use case, a neutral\n           save-as-draft, and a neutral discard — so no workshop hand-rolls its own footer. Pinned\n           below the scrolling body. Opt-in via [ShowFooter]; the [workspaceFooterNote] slot carries\n           any per-workshop caption beside the buttons. Confirm sits LEFT of the neutral verbs per\n           the MJ dialog-button convention. -->\n      @if (ShowFooter) {\n        <footer class=\"ws-card__foot\">\n          <button type=\"button\" mjButton variant=\"primary\"\n            [disabled]=\"ConfirmDisabled || ConfirmBusy\"\n            [title]=\"ConfirmTitle || ConfirmLabel\"\n            (click)=\"Confirm.emit()\">\n            @if (ConfirmBusy) {\n              <i class=\"fa-solid fa-spinner fa-spin\" aria-hidden=\"true\"></i> {{ ConfirmBusyLabel }}\n            } @else {\n              @if (ConfirmIcon) { <i [class]=\"ConfirmIcon\" aria-hidden=\"true\"></i> } {{ ConfirmLabel }}\n            }\n          </button>\n          @if (ShowDraft) {\n            <button type=\"button\" mjButton variant=\"outline\" [disabled]=\"DraftDisabled\" (click)=\"SaveDraft.emit()\">\n              @if (DraftIcon) { <i [class]=\"DraftIcon\" aria-hidden=\"true\"></i> } {{ DraftLabel }}\n            </button>\n          }\n          <button type=\"button\" mjButton variant=\"flat\" (click)=\"Discard.emit()\">{{ DiscardLabel }}</button>\n          <span class=\"ws-card__footnote\"><ng-content select=\"[workspaceFooterNote]\"></ng-content></span>\n        </footer>\n      }\n    </section>\n  `,\n  styleUrls: ['./workspace-card.component.css'],\n})\nexport class MJWorkspaceCardComponent {\n  @Input() Tabs: MJWorkspaceTab[] = [];\n  @Input() ActiveId: string | null = null;\n  @Input() NewTabLabel = 'New';\n  @Input() AriaLabel = 'Workspace';\n  /** Passed through to the strip — see `MJWorkspaceTabStripComponent.AllowReorder`. */\n  @Input() AllowReorder = true;\n\n  // ── Standardized footer (opt-in) ────────────────────────────────────────────\n  /** Render the standardized action bar (confirm / save-as-draft / discard) below the body. */\n  @Input() ShowFooter = false;\n  /** The primary verb's label — the ONE thing that changes per workshop (\"Create entry\" / \"Build batch\"). */\n  @Input() ConfirmLabel = 'Confirm';\n  /** Optional Font Awesome class for the confirm button (e.g. 'fa-solid fa-check'). */\n  @Input() ConfirmIcon: string | null = null;\n  @Input() ConfirmDisabled = false;\n  /** Tooltip / blocked-reason on the confirm button; falls back to ConfirmLabel. */\n  @Input() ConfirmTitle: string | null = null;\n  /** Show the spinner + busy label on the confirm button while an async confirm runs. */\n  @Input() ConfirmBusy = false;\n  @Input() ConfirmBusyLabel = 'Working…';\n  /** Whether the save-as-draft button appears (some workshops have no draft concept). */\n  @Input() ShowDraft = true;\n  @Input() DraftLabel = 'Keep as draft';\n  @Input() DraftIcon: string | null = 'fa-regular fa-floppy-disk';\n  @Input() DraftDisabled = false;\n  @Input() DiscardLabel = 'Discard';\n\n  @Output() TabSelected = new EventEmitter<string>();\n  @Output() TabClosed = new EventEmitter<string>();\n  @Output() NewTabRequested = new EventEmitter<void>();\n  @Output() TabReordered = new EventEmitter<MJTabReorder>();\n  /** The primary verb (create / build / …). */\n  @Output() Confirm = new EventEmitter<void>();\n  @Output() SaveDraft = new EventEmitter<void>();\n  @Output() Discard = new EventEmitter<void>();\n}\n"]}

package/dist/lib/workspace-tabs/workspace-tab-store.d.ts

@@ -0,0 +1,47 @@
+import { MJWorkspaceTab, MJWorkspaceTabState } from './workspace-tabs.types';
+/**
+ * The pure, framework-free state machine behind `<mj-workspace-tab-strip>`.
+ *
+ * Deliberately extracted from the component so the tab semantics are exhaustively unit-testable in
+ * isolation (see `__tests__/workspace-tab-store.test.ts`); the Angular shell around it stays thin.
+ * No Angular, no DB, no app types — synchronous and total.
+ *
+ * v1 semantics: session-scoped only. Nothing here touches persistence.
+ */
+export declare class MJWorkspaceTabStore<TState = unknown> {
+    private tabs;
+    private activeId;
+    /** Current tabs, in strip order. Returns a copy — callers must not mutate internal state. */
+    get Tabs(): MJWorkspaceTab<TState>[];
+    get ActiveId(): string | null;
+    get ActiveTab(): MJWorkspaceTab<TState> | null;
+    get Count(): number;
+    /** True when any tab holds unsaved edits — the "you'll lose work" signal for the host. */
+    get HasDirtyTabs(): boolean;
+    /**
+     * Add a tab and make it active. An existing tab with the same Id is NOT duplicated — it is
+     * activated instead (re-opening the same draft focuses it, which is what a user means).
+     */
+    Open(tab: MJWorkspaceTab<TState>): MJWorkspaceTab<TState>;
+    Activate(id: string): boolean;
+    /**
+     * Close a tab. When the closed tab was active, activation falls to its NEIGHBOUR — the tab to its
+     * right, else the one to its left, else null. (Closing the tab you're looking at should land you
+     * somewhere sensible, not on nothing.)
+     */
+    Close(id: string): boolean;
+    /** Replace a tab's host-owned payload. Marks the tab dirty unless told otherwise. */
+    UpdateState(id: string, state: TState, markDirty?: boolean): boolean;
+    /** Move a tab through its lifecycle. Clears the rejection reason on any non-rejected state. */
+    SetStatus(id: string, status: MJWorkspaceTabState, rejectionReason?: string | null): boolean;
+    /** Mark a tab saved/clean without touching its payload. */
+    MarkClean(id: string): boolean;
+    /**
+     * Move a tab from one position to another (drag-reorder). Active tab + payloads are untouched — only
+     * strip ORDER changes. Out-of-range or no-op indices return false and change nothing.
+     */
+    Reorder(fromIndex: number, toIndex: number): boolean;
+    /** Drop every tab (session end / explicit discard-all). */
+    Clear(): void;
+}
+//# sourceMappingURL=workspace-tab-store.d.ts.map

package/dist/lib/workspace-tabs/workspace-tab-store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-tab-store.d.ts","sourceRoot":"","sources":["../../../src/lib/workspace-tabs/workspace-tab-store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7E;;;;;;;;GAQG;AACH,qBAAa,mBAAmB,CAAC,MAAM,GAAG,OAAO;IAC/C,OAAO,CAAC,IAAI,CAAgC;IAC5C,OAAO,CAAC,QAAQ,CAAuB;IAEvC,6FAA6F;IAC7F,IAAW,IAAI,IAAI,cAAc,CAAC,MAAM,CAAC,EAAE,CAE1C;IAED,IAAW,QAAQ,IAAI,MAAM,GAAG,IAAI,CAEnC;IAED,IAAW,SAAS,IAAI,cAAc,CAAC,MAAM,CAAC,GAAG,IAAI,CAEpD;IAED,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED,0FAA0F;IAC1F,IAAW,YAAY,IAAI,OAAO,CAEjC;IAED;;;OAGG;IACI,IAAI,CAAC,GAAG,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC;IAWzD,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;IAMpC;;;;OAIG;IACI,KAAK,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;IAcjC,qFAAqF;IAC9E,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,UAAO,GAAG,OAAO;IAQxE,+FAA+F;IACxF,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,mBAAmB,EAAE,eAAe,GAAE,MAAM,GAAG,IAAW,GAAG,OAAO;IAQzG,2DAA2D;IACpD,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;IAOrC;;;OAGG;IACI,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO;IAQ3D,2DAA2D;IACpD,KAAK,IAAI,IAAI;CAIrB"}