@memberjunction/ng-dashboards 6.2.0-edge.5 → 6.2.0-edge.7

package/dist/VideoStudio/components/vs-archetype-editor.component.js

@@ -0,0 +1,1105 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, inject, Input, Output, } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { LogError, RunView } from '@memberjunction/core';
+import { VideoStudioEngine, } from '@memberjunction/core-entities';
+import { UUIDsEqual } from '@memberjunction/global';
+import { ArtifactsModule, FormatVideoTime, } from '@memberjunction/ng-artifacts';
+import { BaseAngularComponent } from '@memberjunction/ng-base-types';
+import { MJButtonDirective, MJDropdownComponent, MJNumericInputComponent, MJSwitchComponent, } from '@memberjunction/ng-ui-components';
+import { ARCHETYPE_CATEGORIES, BuildArchetypeBeatStripItems, DeriveBeatKeyFromLabel, ParseArchetypeDefaultFormats, STUDIO_VIDEO_FORMATS, } from '../video-studio-agent-context';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "@memberjunction/ng-artifacts";
+const _forTrack0 = ($index, $item) => $item.TrackId;
+function VSArchetypeEditorComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵelement(1, "i", 46);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r0.SaveError);
+} }
+function VSArchetypeEditorComponent_For_58_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 47);
+    i0.ɵɵlistener("click", function VSArchetypeEditorComponent_For_58_Template_button_click_0_listener() { const format_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.ToggleFormat(format_r3)); });
+    i0.ɵɵelement(1, "mj-video-format-glyph", 48);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const format_r3 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Toggleable", true)("Selected", ctx_r0.IsFormatSelected(format_r3))("disabled", ctx_r0.IsSaving);
+    i0.ɵɵattribute("data-testid", "vs-arch-editor-format-" + format_r3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Format", format_r3);
+} }
+function VSArchetypeEditorComponent_Conditional_66_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 33)(1, "span", 49);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 50);
+    i0.ɵɵlistener("click", function VSArchetypeEditorComponent_Conditional_66_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.FitBeatsToLength()); });
+    i0.ɵɵelementStart(4, "span");
+    i0.ɵɵtext(5, "Fit to length");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2(" Beats add up to ", ctx_r0.FormatTime(ctx_r0.BeatsTotalSeconds), " of ", ctx_r0.FormatTime(ctx_r0.DefaultDurationSeconds), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r0.IsSaving);
+} }
+function VSArchetypeEditorComponent_For_69_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 35)(1, "span", 51);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "input", 52);
+    i0.ɵɵlistener("ngModelChange", function VSArchetypeEditorComponent_For_69_Template_input_ngModelChange_3_listener($event) { const ɵ$index_137_r6 = i0.ɵɵrestoreView(_r5).$index; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnBeatLabelChange(ɵ$index_137_r6, $event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "input", 53);
+    i0.ɵɵlistener("ngModelChange", function VSArchetypeEditorComponent_For_69_Template_input_ngModelChange_4_listener($event) { const ɵ$index_137_r6 = i0.ɵɵrestoreView(_r5).$index; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnBeatPurposeChange(ɵ$index_137_r6, $event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 54)(6, "mj-numeric-input", 55);
+    i0.ɵɵlistener("ngModelChange", function VSArchetypeEditorComponent_For_69_Template_mj_numeric_input_ngModelChange_6_listener($event) { const ɵ$index_137_r6 = i0.ɵɵrestoreView(_r5).$index; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnBeatSecondsChange(ɵ$index_137_r6, $event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 56);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 57)(10, "button", 58);
+    i0.ɵɵlistener("click", function VSArchetypeEditorComponent_For_69_Template_button_click_10_listener() { const ɵ$index_137_r6 = i0.ɵɵrestoreView(_r5).$index; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.MoveBeatUp(ɵ$index_137_r6)); });
+    i0.ɵɵelement(11, "i", 59);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "button", 58);
+    i0.ɵɵlistener("click", function VSArchetypeEditorComponent_For_69_Template_button_click_12_listener() { const ɵ$index_137_r6 = i0.ɵɵrestoreView(_r5).$index; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.MoveBeatDown(ɵ$index_137_r6)); });
+    i0.ɵɵelement(13, "i", 60);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "button", 58);
+    i0.ɵɵlistener("click", function VSArchetypeEditorComponent_For_69_Template_button_click_14_listener() { const ɵ$index_137_r6 = i0.ɵɵrestoreView(_r5).$index; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.RemoveBeat(ɵ$index_137_r6)); });
+    i0.ɵɵelement(15, "i", 61);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const beat_r7 = ctx.$implicit;
+    const ɵ$index_137_r6 = ctx.$index;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("data-testid", "vs-arch-editor-beat-row-" + ɵ$index_137_r6);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ɵ$index_137_r6 + 1, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngModel", beat_r7.Label)("disabled", ctx_r0.IsSaving);
+    i0.ɵɵattribute("data-testid", "vs-arch-editor-beat-label-" + ɵ$index_137_r6)("aria-label", "Beat " + (ɵ$index_137_r6 + 1) + " label");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngModel", beat_r7.Purpose)("disabled", ctx_r0.IsSaving);
+    i0.ɵɵattribute("data-testid", "vs-arch-editor-beat-purpose-" + ɵ$index_137_r6)("aria-label", "Beat " + (ɵ$index_137_r6 + 1) + " purpose");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("AriaLabel", "Beat " + (ɵ$index_137_r6 + 1) + " seconds")("Min", 1)("Max", 600)("Step", 1)("Disabled", ctx_r0.IsSaving)("ngModel", beat_r7.Seconds);
+    i0.ɵɵattribute("data-testid", "vs-arch-editor-beat-seconds-" + ɵ$index_137_r6);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.FormatTime(beat_r7.Seconds), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("AriaLabel", "Move beat " + (ɵ$index_137_r6 + 1) + " up")("disabled", ctx_r0.IsSaving || ɵ$index_137_r6 === 0);
+    i0.ɵɵattribute("data-testid", "vs-arch-editor-beat-up-" + ɵ$index_137_r6);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("AriaLabel", "Move beat " + (ɵ$index_137_r6 + 1) + " down")("disabled", ctx_r0.IsSaving || ɵ$index_137_r6 === ctx_r0.Beats.length - 1);
+    i0.ɵɵattribute("data-testid", "vs-arch-editor-beat-down-" + ɵ$index_137_r6);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("AriaLabel", "Remove beat " + (ɵ$index_137_r6 + 1))("disabled", ctx_r0.IsSaving || ctx_r0.Beats.length <= 1);
+    i0.ɵɵattribute("data-testid", "vs-arch-editor-beat-remove-" + ɵ$index_137_r6);
+} }
+function VSArchetypeEditorComponent_Conditional_80_For_22_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 69)(1, "span", 70);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 71)(4, "mj-switch", 72);
+    i0.ɵɵtwoWayListener("ngModelChange", function VSArchetypeEditorComponent_Conditional_80_For_22_Template_mj_switch_ngModelChange_4_listener($event) { const beat_r10 = i0.ɵɵrestoreView(_r9).$implicit; i0.ɵɵtwoWayBindingSet(beat_r10.RequiresDataBinding, $event) || (beat_r10.RequiresDataBinding = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 6);
+    i0.ɵɵtext(6, "Data bound");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "input", 73);
+    i0.ɵɵtwoWayListener("ngModelChange", function VSArchetypeEditorComponent_Conditional_80_For_22_Template_input_ngModelChange_7_listener($event) { const beat_r10 = i0.ɵɵrestoreView(_r9).$implicit; i0.ɵɵtwoWayBindingSet(beat_r10.Guidance, $event) || (beat_r10.Guidance = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const beat_r10 = ctx.$implicit;
+    const ɵ$index_224_r11 = ctx.$index;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2(" ", ɵ$index_224_r11 + 1, ". ", beat_r10.Label || "Beat " + (ɵ$index_224_r11 + 1), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("AriaLabel", "Requires data binding for " + (beat_r10.Label || "Beat " + (ɵ$index_224_r11 + 1)))("Disabled", ctx_r0.IsSaving);
+    i0.ɵɵtwoWayProperty("ngModel", beat_r10.RequiresDataBinding);
+    i0.ɵɵattribute("data-testid", "vs-arch-editor-beat-databinding-" + ɵ$index_224_r11);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtwoWayProperty("ngModel", beat_r10.Guidance);
+    i0.ɵɵproperty("disabled", ctx_r0.IsSaving);
+    i0.ɵɵattribute("data-testid", "vs-arch-editor-beat-guidance-" + ɵ$index_224_r11)("aria-label", "Guidance for " + (beat_r10.Label || "Beat " + (ɵ$index_224_r11 + 1)));
+} }
+function VSArchetypeEditorComponent_Conditional_80_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 42)(1, "label", 3)(2, "span", 9);
+    i0.ɵɵtext(3, "Guidance (markdown)");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "textarea", 62);
+    i0.ɵɵtwoWayListener("ngModelChange", function VSArchetypeEditorComponent_Conditional_80_Template_textarea_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.Guidance, $event) || (ctx_r0.Guidance = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div", 63)(6, "div", 3)(7, "div", 4)(8, "span", 64);
+    i0.ɵɵtext(9, " Average cut cadence (s) ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "span", 65);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "mj-numeric-input", 66);
+    i0.ɵɵtwoWayListener("ngModelChange", function VSArchetypeEditorComponent_Conditional_80_Template_mj_numeric_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.PacingAvgSeconds, $event) || (ctx_r0.PacingAvgSeconds = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "label", 3)(14, "span", 9);
+    i0.ɵɵtext(15, "Hold rules");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "input", 67);
+    i0.ɵɵtwoWayListener("ngModelChange", function VSArchetypeEditorComponent_Conditional_80_Template_input_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.PacingHoldRules, $event) || (ctx_r0.PacingHoldRules = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(17, "div", 3)(18, "span", 9);
+    i0.ɵɵtext(19, "Beat data binding & guidance");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "div", 68);
+    i0.ɵɵrepeaterCreate(21, VSArchetypeEditorComponent_Conditional_80_For_22_Template, 8, 10, "div", 69, _forTrack0);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.Guidance);
+    i0.ɵɵproperty("disabled", ctx_r0.IsSaving);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.FormatTime(ctx_r0.PacingAvgSeconds), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Min", 0.5)("Max", 60)("Step", 0.5)("Disabled", ctx_r0.IsSaving);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.PacingAvgSeconds);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.PacingHoldRules);
+    i0.ɵɵproperty("disabled", ctx_r0.IsSaving);
+    i0.ɵɵadvance(5);
+    i0.ɵɵrepeater(ctx_r0.Beats);
+} }
+/**
+ * Dialog body component (`<vs-archetype-editor>`) for creating a company copy of any
+ * video archetype or editing an existing company archetype.
+ *
+ * Plan rules (§4.3, §12): shipped archetypes (`CompanyID === null`) are read-only
+ * templates; a company makes its own by copying one. `Name` is unique per company
+ * scope; `Category` is one of the 7 CHECK values; beats are persisted as a valid
+ * `VideoBeatTemplate[]` (`Key`, `Label`, `Purpose`, `MinDurationSeconds`,
+ * `MaxDurationSeconds`, `DefaultDurationSeconds`, optional `Guidance` and
+ * `RequiresDataBinding`); `Pacing` is `VideoPacing`. Saves go through the
+ * `MJ: Video Archetypes` entity object and refresh `VideoStudioEngine`.
+ */
+export class VSArchetypeEditorComponent extends BaseAngularComponent {
+    Mode = 'copy';
+    SourceArchetypeId = null;
+    EditingArchetypeId = null;
+    Archetypes = null;
+    Companies = null;
+    InitialCompanyId = null;
+    Saved = new EventEmitter();
+    Cancelled = new EventEmitter();
+    AvailableArchetypes = [];
+    AvailableCompanies = [];
+    StartFromOptions = [];
+    CategoryOptions = ARCHETYPE_CATEGORIES.map((cat) => ({
+        Value: cat,
+        Text: cat === 'DataStory' ? 'Data Story' : cat,
+    }));
+    AvailableFormats = STUDIO_VIDEO_FORMATS;
+    SelectedSourceId = '';
+    Name = '';
+    Category = 'Explainer';
+    CompanyID = '';
+    Description = '';
+    DefaultDurationSeconds = 60;
+    MinDurationSeconds = 30;
+    MaxDurationSeconds = 120;
+    SelectedFormats = ['16:9'];
+    DefaultInteractionMode = 'Autonomous';
+    Beats = [];
+    IsAdvancedOpen = false;
+    Guidance = '';
+    PacingAvgSeconds = 5;
+    PacingHoldRules = '';
+    IsSaving = false;
+    SaveError = null;
+    nextBeatTrackId = 1;
+    lastAutoSuggestedName = '';
+    sourcePacing = null;
+    companiesLoadError = null;
+    cdr = inject(ChangeDetectorRef);
+    async ngOnInit() {
+        await this.initializeEditor();
+    }
+    get IsEditingExistingCompanyArchetype() {
+        if (this.Mode !== 'edit' || !this.EditingArchetypeId) {
+            return false;
+        }
+        const target = this.findArchetypeById(this.EditingArchetypeId);
+        if (!target) {
+            return true;
+        }
+        return Boolean(target.CompanyID && target.CompanyID.trim().length > 0);
+    }
+    get BeatsTotalSeconds() {
+        return this.Beats.reduce((sum, beat) => sum + Math.max(1, Math.round(Number(beat.Seconds) || 1)), 0);
+    }
+    get BeatsSumSeconds() {
+        return this.BeatsTotalSeconds;
+    }
+    get HasBeatsDurationMismatch() {
+        return (this.Beats.length > 0 &&
+            this.BeatsTotalSeconds !== Math.max(1, Math.round(Number(this.DefaultDurationSeconds) || 1)));
+    }
+    get HasDurationMismatch() {
+        return this.HasBeatsDurationMismatch;
+    }
+    get LiveBeatStripItems() {
+        const keys = this.resolveBeatKeys();
+        return this.Beats.map((beat, idx) => {
+            const label = (beat.Label ?? '').trim() || `Beat ${idx + 1}`;
+            const seconds = Math.max(1, Math.round(Number(beat.Seconds) || 1));
+            const detail = (beat.Purpose ?? '').trim();
+            return {
+                Key: keys[idx],
+                Label: label,
+                Seconds: seconds,
+                ...(detail ? { Detail: detail } : {}),
+            };
+        });
+    }
+    FormatTime(seconds) {
+        const safe = Number.isFinite(seconds) && seconds >= 0 ? Math.round(seconds) : 0;
+        return FormatVideoTime(safe);
+    }
+    OnStartFromChange(sourceId) {
+        const trimmed = (sourceId ?? '').trim();
+        if (!trimmed) {
+            return;
+        }
+        this.SelectedSourceId = trimmed;
+        const source = this.findArchetypeById(trimmed);
+        if (!source) {
+            return;
+        }
+        this.applySourceArchetype(source, false);
+        this.cdr.markForCheck();
+    }
+    OnDefaultDurationChange(value) {
+        const numeric = typeof value === 'number' ? value : Number(value);
+        if (Number.isFinite(numeric) && numeric > 0) {
+            this.DefaultDurationSeconds = Math.max(1, Math.round(numeric));
+        }
+        this.cdr.markForCheck();
+    }
+    OnMinDurationChange(value) {
+        const numeric = typeof value === 'number' ? value : Number(value);
+        if (Number.isFinite(numeric) && numeric > 0) {
+            this.MinDurationSeconds = Math.max(1, Math.round(numeric));
+        }
+        this.cdr.markForCheck();
+    }
+    OnMaxDurationChange(value) {
+        const numeric = typeof value === 'number' ? value : Number(value);
+        if (Number.isFinite(numeric) && numeric > 0) {
+            this.MaxDurationSeconds = Math.max(1, Math.round(numeric));
+        }
+        this.cdr.markForCheck();
+    }
+    IsFormatSelected(format) {
+        return this.SelectedFormats.includes(format);
+    }
+    ToggleFormat(format) {
+        if (this.SelectedFormats.includes(format)) {
+            if (this.SelectedFormats.length > 1) {
+                this.SelectedFormats = this.SelectedFormats.filter((f) => f !== format);
+            }
+        }
+        else {
+            this.SelectedFormats = [...this.SelectedFormats, format];
+        }
+        this.cdr.markForCheck();
+    }
+    OnBeatLabelChange(index, label) {
+        const beat = this.Beats[index];
+        if (!beat) {
+            return;
+        }
+        beat.Label = label ?? '';
+        this.Beats = [...this.Beats];
+        this.cdr.markForCheck();
+    }
+    OnBeatPurposeChange(index, purpose) {
+        const beat = this.Beats[index];
+        if (!beat) {
+            return;
+        }
+        beat.Purpose = purpose ?? '';
+        this.Beats = [...this.Beats];
+        this.cdr.markForCheck();
+    }
+    OnBeatSecondsChange(index, value) {
+        const beat = this.Beats[index];
+        if (!beat) {
+            return;
+        }
+        const numeric = typeof value === 'number' ? value : Number(value);
+        const seconds = Number.isFinite(numeric) && numeric >= 1 ? Math.round(numeric) : 1;
+        beat.Seconds = seconds;
+        beat.MinDurationSeconds =
+            beat.MinDurationSeconds > 0
+                ? Math.min(beat.MinDurationSeconds, seconds)
+                : Math.max(1, Math.floor(seconds * 0.6));
+        beat.MaxDurationSeconds = Math.max(seconds, beat.MaxDurationSeconds || seconds);
+        this.Beats = [...this.Beats];
+        this.cdr.markForCheck();
+    }
+    MoveBeatUp(index) {
+        if (index <= 0 || index >= this.Beats.length) {
+            return;
+        }
+        const next = [...this.Beats];
+        const temp = next[index - 1];
+        next[index - 1] = next[index];
+        next[index] = temp;
+        this.Beats = next;
+        this.cdr.markForCheck();
+    }
+    MoveBeatDown(index) {
+        if (index < 0 || index >= this.Beats.length - 1) {
+            return;
+        }
+        const next = [...this.Beats];
+        const temp = next[index + 1];
+        next[index + 1] = next[index];
+        next[index] = temp;
+        this.Beats = next;
+        this.cdr.markForCheck();
+    }
+    RemoveBeat(index) {
+        if (this.Beats.length <= 1 || index < 0 || index >= this.Beats.length) {
+            return;
+        }
+        this.Beats = this.Beats.filter((_, idx) => idx !== index);
+        this.cdr.markForCheck();
+    }
+    AddBeat() {
+        const nextIdx = this.Beats.length + 1;
+        this.Beats = [
+            ...this.Beats,
+            {
+                TrackId: this.nextBeatTrackId++,
+                Key: '',
+                Label: `Beat ${nextIdx}`,
+                Purpose: 'Advance the story with a clear visual focus.',
+                Seconds: 5,
+                MinDurationSeconds: 3,
+                MaxDurationSeconds: 10,
+                Guidance: '',
+                RequiresDataBinding: false,
+            },
+        ];
+        this.cdr.markForCheck();
+    }
+    /**
+     * Scales all beat durations with {@link BuildArchetypeBeatStripItems} so their
+     * integer `Seconds` sum to `DefaultDurationSeconds`.
+     */
+    FitBeatsToLength() {
+        if (this.Beats.length === 0) {
+            return;
+        }
+        const targetDuration = Math.max(this.Beats.length, Math.round(Number(this.DefaultDurationSeconds) || 30));
+        this.DefaultDurationSeconds = targetDuration;
+        const keys = this.resolveBeatKeys();
+        const inputs = this.Beats.map((b, idx) => ({
+            Key: keys[idx],
+            Label: b.Label,
+            Purpose: b.Purpose,
+            DefaultDurationSeconds: Math.max(1, Math.round(Number(b.Seconds) || 1)),
+            MinDurationSeconds: b.MinDurationSeconds,
+            MaxDurationSeconds: b.MaxDurationSeconds,
+        }));
+        const scaled = BuildArchetypeBeatStripItems(inputs, targetDuration);
+        this.Beats = this.Beats.map((beat, idx) => {
+            const nextSeconds = scaled[idx]?.Seconds ?? beat.Seconds;
+            return {
+                ...beat,
+                Seconds: nextSeconds,
+                MinDurationSeconds: beat.MinDurationSeconds > 0
+                    ? Math.min(beat.MinDurationSeconds, nextSeconds)
+                    : Math.max(1, Math.floor(nextSeconds * 0.6)),
+                MaxDurationSeconds: Math.max(nextSeconds, beat.MaxDurationSeconds),
+            };
+        });
+        this.cdr.markForCheck();
+    }
+    ToggleAdvanced() {
+        this.IsAdvancedOpen = !this.IsAdvancedOpen;
+        this.cdr.markForCheck();
+    }
+    BuildBeatTemplatePayload() {
+        const keys = this.resolveBeatKeys();
+        return this.Beats.map((beat, idx) => {
+            const label = (beat.Label ?? '').trim() || `Beat ${idx + 1}`;
+            const key = keys[idx];
+            const purpose = (beat.Purpose ?? '').trim() || label;
+            const defaultDur = Math.max(1, Math.round(Number(beat.Seconds) || 1));
+            const rawMin = Number(beat.MinDurationSeconds);
+            const minDur = Number.isFinite(rawMin) && rawMin > 0
+                ? Math.min(defaultDur, rawMin)
+                : Math.max(1, Math.floor(defaultDur * 0.6));
+            const rawMax = Number(beat.MaxDurationSeconds);
+            const maxDur = Number.isFinite(rawMax) && rawMax >= defaultDur
+                ? rawMax
+                : Math.max(defaultDur, Math.ceil(defaultDur * 1.5));
+            const guidance = (beat.Guidance ?? '').trim();
+            return {
+                Key: key,
+                Label: label,
+                Purpose: purpose,
+                MinDurationSeconds: minDur,
+                MaxDurationSeconds: maxDur,
+                DefaultDurationSeconds: defaultDur,
+                ...(guidance ? { Guidance: guidance } : {}),
+                ...(beat.RequiresDataBinding ? { RequiresDataBinding: true } : {}),
+            };
+        });
+    }
+    BuildPacingPayload() {
+        const numericAvg = Number(this.PacingAvgSeconds);
+        const avg = Number.isFinite(numericAvg) && numericAvg > 0
+            ? numericAvg
+            : 5;
+        return {
+            ...(this.sourcePacing ?? {}),
+            AvgSecondsBetweenChanges: avg,
+            HoldRules: (this.PacingHoldRules ?? '').trim(),
+        };
+    }
+    Cancel() {
+        this.Cancelled.emit();
+    }
+    async Save() {
+        if (this.IsSaving) {
+            return;
+        }
+        const trimmedName = (this.Name ?? '').trim();
+        if (!trimmedName) {
+            this.SaveError = 'Please enter a name for the archetype.';
+            this.cdr.markForCheck();
+            return;
+        }
+        const companyId = (this.CompanyID ?? '').trim();
+        if (!companyId) {
+            this.SaveError =
+                this.companiesLoadError || 'Please select a company for this archetype.';
+            this.cdr.markForCheck();
+            return;
+        }
+        if (this.Beats.length === 0) {
+            this.SaveError = 'Add at least one beat to the archetype.';
+            this.cdr.markForCheck();
+            return;
+        }
+        const rawDefaultDur = Number(this.DefaultDurationSeconds);
+        const rawMinDur = Number(this.MinDurationSeconds);
+        const rawMaxDur = Number(this.MaxDurationSeconds);
+        if (!Number.isFinite(rawDefaultDur) ||
+            !Number.isFinite(rawMinDur) ||
+            !Number.isFinite(rawMaxDur) ||
+            rawMinDur < 1 ||
+            rawDefaultDur < 1 ||
+            rawMaxDur < 1 ||
+            rawMinDur > rawDefaultDur ||
+            rawDefaultDur > rawMaxDur) {
+            this.SaveError =
+                'Shortest length, default length, and longest length must satisfy Shortest <= Default <= Longest.';
+            this.cdr.markForCheck();
+            return;
+        }
+        const defaultDur = Math.round(rawDefaultDur);
+        const minDur = Math.round(rawMinDur);
+        const maxDur = Math.round(rawMaxDur);
+        const isEditing = this.IsEditingExistingCompanyArchetype;
+        const duplicate = this.AvailableArchetypes.find((arch) => {
+            if (!arch.CompanyID || !UUIDsEqual(arch.CompanyID, companyId)) {
+                return false;
+            }
+            if (isEditing && this.EditingArchetypeId && UUIDsEqual(arch.ID, this.EditingArchetypeId)) {
+                return false;
+            }
+            return (arch.Name ?? '').trim().toLowerCase() === trimmedName.toLowerCase();
+        });
+        if (duplicate) {
+            this.SaveError = `An archetype named "${trimmedName}" already exists for this company.`;
+            this.cdr.markForCheck();
+            return;
+        }
+        this.IsSaving = true;
+        this.SaveError = null;
+        this.cdr.markForCheck();
+        try {
+            const entity = await this.ProviderToUse.GetEntityObject('MJ: Video Archetypes', this.ProviderToUse.CurrentUser);
+            if (isEditing && this.EditingArchetypeId && typeof entity.Load === 'function') {
+                const loaded = await entity.Load(this.EditingArchetypeId);
+                if (!loaded) {
+                    this.SaveError = 'Unable to load the company archetype for editing.';
+                    return;
+                }
+            }
+            const beatTemplates = this.BuildBeatTemplatePayload();
+            const pacingPayload = this.BuildPacingPayload();
+            const formatsList = this.SelectedFormats.length > 0 ? this.SelectedFormats : ['16:9'];
+            entity.Name = trimmedName;
+            entity.Description = (this.Description ?? '').trim();
+            entity.Category = this.Category;
+            entity.CompanyID = companyId;
+            entity.DefaultDurationSeconds = defaultDur;
+            entity.MinDurationSeconds = minDur;
+            entity.MaxDurationSeconds = maxDur;
+            entity.DefaultFormats = formatsList.join(',');
+            entity.DefaultInteractionMode = (this.DefaultInteractionMode ||
+                'Autonomous');
+            entity.Guidance = (this.Guidance ?? '').trim() || null;
+            if (!isEditing) {
+                entity.Status = 'Active';
+            }
+            entity.BeatTemplate = JSON.stringify(beatTemplates);
+            try {
+                entity.BeatTemplateObject = beatTemplates;
+            }
+            catch {
+                // Test doubles that do not implement BaseEntity JSON accessors still keep BeatTemplate.
+            }
+            entity.Pacing = JSON.stringify(pacingPayload);
+            try {
+                entity.PacingObject = pacingPayload;
+            }
+            catch {
+                // Test doubles that do not implement BaseEntity JSON accessors still keep Pacing.
+            }
+            const saved = await entity.Save();
+            if (!saved) {
+                this.SaveError =
+                    entity.LatestResult?.CompleteMessage || 'Failed to save archetype.';
+                return;
+            }
+            try {
+                const engine = VideoStudioEngine.GetProviderInstance(this.ProviderToUse, VideoStudioEngine);
+                await engine.Config(true, this.ProviderToUse?.CurrentUser, this.ProviderToUse);
+            }
+            catch {
+                // Non-fatal in isolated component tests.
+            }
+            this.Saved.emit(entity.ID);
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            LogError(msg);
+            this.SaveError = msg;
+        }
+        finally {
+            this.IsSaving = false;
+            this.cdr.markForCheck();
+        }
+    }
+    resolveBeatKeys() {
+        const usedKeys = new Set();
+        for (const beat of this.Beats) {
+            const existing = (beat.Key ?? '').trim();
+            if (existing) {
+                usedKeys.add(existing);
+            }
+        }
+        return this.Beats.map((beat, idx) => {
+            const existing = (beat.Key ?? '').trim();
+            if (existing) {
+                return existing;
+            }
+            const label = (beat.Label ?? '').trim() || `Beat ${idx + 1}`;
+            return DeriveBeatKeyFromLabel(label, idx + 1, usedKeys);
+        });
+    }
+    async initializeEditor() {
+        if (Array.isArray(this.Archetypes) && this.Archetypes.length > 0) {
+            this.AvailableArchetypes = [...this.Archetypes];
+        }
+        else {
+            await this.loadEngineArchetypes();
+        }
+        if (Array.isArray(this.Companies) && this.Companies.length > 0) {
+            this.AvailableCompanies = [...this.Companies];
+        }
+        else {
+            await this.loadAvailableCompanies();
+        }
+        if (this.companiesLoadError) {
+            this.SaveError = this.companiesLoadError;
+        }
+        this.StartFromOptions = this.AvailableArchetypes.map((arch) => {
+            const isShipped = arch.IsShipped !== undefined ? arch.IsShipped : arch.CompanyID == null;
+            const scopeSuffix = isShipped
+                ? 'Shipped'
+                : (arch.CompanyName ?? arch.Company ?? 'Company');
+            return {
+                ID: arch.ID,
+                Label: `${arch.Name} (${scopeSuffix})`,
+            };
+        });
+        const initialId = (this.Mode === 'edit' && this.EditingArchetypeId
+            ? this.EditingArchetypeId
+            : this.SourceArchetypeId) ?? '';
+        const initialSource = initialId ? this.findArchetypeById(initialId) : null;
+        if (initialSource) {
+            this.SelectedSourceId = initialSource.ID;
+            this.applySourceArchetype(initialSource, true);
+        }
+        else {
+            this.SelectedSourceId = '';
+            this.Name = '';
+            this.Description = '';
+            this.Category = 'Explainer';
+            this.CompanyID = this.resolveInitialCompanyId(null);
+            this.DefaultDurationSeconds = 30;
+            this.MinDurationSeconds = 15;
+            this.MaxDurationSeconds = 60;
+            this.SelectedFormats = ['16:9'];
+            this.DefaultInteractionMode = 'Autonomous';
+            this.Guidance = '';
+            this.sourcePacing = null;
+            this.PacingAvgSeconds = 5;
+            this.PacingHoldRules = '';
+            this.Beats = [
+                {
+                    TrackId: this.nextBeatTrackId++,
+                    Key: '',
+                    Label: '',
+                    Purpose: '',
+                    Seconds: 30,
+                    MinDurationSeconds: 15,
+                    MaxDurationSeconds: 60,
+                    Guidance: '',
+                    RequiresDataBinding: false,
+                },
+            ];
+        }
+        this.cdr.markForCheck();
+    }
+    applySourceArchetype(source, isInitialLoad) {
+        const isEditingTarget = isInitialLoad &&
+            this.IsEditingExistingCompanyArchetype &&
+            this.EditingArchetypeId !== null &&
+            UUIDsEqual(source.ID, this.EditingArchetypeId);
+        if (isEditingTarget) {
+            this.Name = source.Name ?? '';
+            this.lastAutoSuggestedName = '';
+        }
+        else {
+            const copyName = `${source.Name} (Copy)`;
+            if (isInitialLoad || !this.Name.trim() || this.Name === this.lastAutoSuggestedName) {
+                this.Name = copyName;
+                this.lastAutoSuggestedName = copyName;
+            }
+        }
+        const rawCategory = (source.Category ?? 'Explainer').trim();
+        this.Category = ARCHETYPE_CATEGORIES.includes(rawCategory)
+            ? rawCategory
+            : 'Explainer';
+        this.Description = source.Description ?? '';
+        if (isInitialLoad) {
+            this.CompanyID = this.resolveInitialCompanyId(source.CompanyID ?? null);
+        }
+        const defaultDur = typeof source.DefaultDurationSeconds === 'number' &&
+            Number.isFinite(source.DefaultDurationSeconds) &&
+            source.DefaultDurationSeconds > 0
+            ? Math.round(source.DefaultDurationSeconds)
+            : 60;
+        const minDur = typeof source.MinDurationSeconds === 'number' &&
+            Number.isFinite(source.MinDurationSeconds) &&
+            source.MinDurationSeconds > 0
+            ? Math.round(source.MinDurationSeconds)
+            : 30;
+        const maxDur = typeof source.MaxDurationSeconds === 'number' &&
+            Number.isFinite(source.MaxDurationSeconds) &&
+            source.MaxDurationSeconds >= minDur
+            ? Math.round(source.MaxDurationSeconds)
+            : Math.max(defaultDur, 120);
+        this.DefaultDurationSeconds = defaultDur;
+        this.MinDurationSeconds = minDur;
+        this.MaxDurationSeconds = maxDur;
+        this.SelectedFormats = ParseArchetypeDefaultFormats(source.DefaultFormats);
+        this.DefaultInteractionMode = source.DefaultInteractionMode ?? 'Autonomous';
+        this.Guidance = source.Guidance ?? '';
+        const rawBeats = this.extractSourceBeats(source);
+        const scaledItems = BuildArchetypeBeatStripItems(rawBeats, defaultDur);
+        const allHaveExplicitDefault = rawBeats.length > 0 &&
+            rawBeats.every((b) => typeof b.DefaultDurationSeconds === 'number' && b.DefaultDurationSeconds > 0);
+        const rawExplicitSum = allHaveExplicitDefault
+            ? rawBeats.reduce((sum, b) => sum + (b.DefaultDurationSeconds ?? 0), 0)
+            : defaultDur;
+        const useScaledIntegerBeats = !allHaveExplicitDefault || Math.abs(rawExplicitSum - defaultDur) < 0.5;
+        if (rawBeats.length > 0) {
+            this.Beats = rawBeats.map((b, idx) => {
+                const seconds = useScaledIntegerBeats
+                    ? (scaledItems[idx]?.Seconds ?? 5)
+                    : Math.max(1, Math.round(b.DefaultDurationSeconds ?? 5));
+                return {
+                    TrackId: this.nextBeatTrackId++,
+                    Key: (b.Key ?? '').trim(),
+                    Label: (b.Label ?? b.Key ?? '').trim() || `Beat ${idx + 1}`,
+                    Purpose: (b.Purpose ?? '').trim(),
+                    Seconds: seconds,
+                    MinDurationSeconds: typeof b.MinDurationSeconds === 'number' &&
+                        Number.isFinite(b.MinDurationSeconds) &&
+                        b.MinDurationSeconds > 0
+                        ? b.MinDurationSeconds
+                        : Math.max(1, Math.floor(seconds * 0.6)),
+                    MaxDurationSeconds: typeof b.MaxDurationSeconds === 'number' &&
+                        Number.isFinite(b.MaxDurationSeconds) &&
+                        b.MaxDurationSeconds > 0
+                        ? b.MaxDurationSeconds
+                        : Math.max(seconds, Math.ceil(seconds * 1.5)),
+                    Guidance: (b.Guidance ?? '').trim(),
+                    RequiresDataBinding: Boolean(b.RequiresDataBinding),
+                };
+            });
+        }
+        else {
+            this.Beats = [
+                {
+                    TrackId: this.nextBeatTrackId++,
+                    Key: '',
+                    Label: 'Hook',
+                    Purpose: 'Open with the core takeaway.',
+                    Seconds: defaultDur,
+                    MinDurationSeconds: minDur,
+                    MaxDurationSeconds: maxDur,
+                    Guidance: '',
+                    RequiresDataBinding: false,
+                },
+            ];
+        }
+        const pacing = this.extractSourcePacing(source);
+        this.sourcePacing = pacing ? { ...pacing } : null;
+        this.PacingAvgSeconds =
+            pacing &&
+                typeof pacing.AvgSecondsBetweenChanges === 'number' &&
+                Number.isFinite(pacing.AvgSecondsBetweenChanges) &&
+                pacing.AvgSecondsBetweenChanges > 0
+                ? pacing.AvgSecondsBetweenChanges
+                : 5;
+        this.PacingHoldRules = pacing?.HoldRules ?? '';
+    }
+    extractSourceBeats(source) {
+        if (Array.isArray(source.Beats) && source.Beats.length > 0) {
+            return source.Beats;
+        }
+        if (Array.isArray(source.BeatTemplateObject) && source.BeatTemplateObject.length > 0) {
+            return source.BeatTemplateObject;
+        }
+        const rawJson = source.BeatTemplateRaw ?? source.BeatTemplate ?? null;
+        if (typeof rawJson === 'string' && rawJson.trim().startsWith('[')) {
+            try {
+                const parsed = JSON.parse(rawJson);
+                if (Array.isArray(parsed)) {
+                    return parsed;
+                }
+            }
+            catch {
+                return [];
+            }
+        }
+        return [];
+    }
+    extractSourcePacing(source) {
+        let parsedFromRaw = null;
+        const rawJson = source.PacingRaw ?? (typeof source.Pacing === 'string' ? source.Pacing : null);
+        if (typeof rawJson === 'string' && rawJson.trim().startsWith('{')) {
+            try {
+                const parsed = JSON.parse(rawJson);
+                if (parsed && typeof parsed === 'object') {
+                    parsedFromRaw = parsed;
+                }
+            }
+            catch {
+                parsedFromRaw = null;
+            }
+        }
+        const fromPacingObj = source.PacingObject && typeof source.PacingObject === 'object'
+            ? source.PacingObject
+            : null;
+        const fromPacingField = source.Pacing && typeof source.Pacing === 'object' ? source.Pacing : null;
+        if (!parsedFromRaw && !fromPacingObj && !fromPacingField) {
+            return null;
+        }
+        return {
+            ...(parsedFromRaw ?? {}),
+            ...(fromPacingField ?? {}),
+            ...(fromPacingObj ?? {}),
+        };
+    }
+    resolveInitialCompanyId(sourceCompanyId) {
+        if (this.InitialCompanyId &&
+            this.InitialCompanyId.trim().length > 0 &&
+            this.InitialCompanyId !== 'all') {
+            return this.InitialCompanyId.trim();
+        }
+        if (sourceCompanyId && sourceCompanyId.trim().length > 0) {
+            return sourceCompanyId.trim();
+        }
+        return this.AvailableCompanies[0]?.ID ?? '';
+    }
+    findArchetypeById(id) {
+        const trimmed = (id ?? '').trim();
+        if (!trimmed) {
+            return null;
+        }
+        return (this.AvailableArchetypes.find((a) => UUIDsEqual(a.ID, trimmed)) ?? null);
+    }
+    async loadEngineArchetypes() {
+        try {
+            const engine = VideoStudioEngine.GetProviderInstance(this.ProviderToUse, VideoStudioEngine);
+            await engine.Config(false, this.ProviderToUse?.CurrentUser, this.ProviderToUse);
+            this.AvailableArchetypes = [...(engine.Archetypes ?? [])];
+        }
+        catch {
+            this.AvailableArchetypes = [];
+        }
+    }
+    async loadAvailableCompanies() {
+        this.companiesLoadError = null;
+        try {
+            const rv = RunView.FromMetadataProvider(this.ProviderToUse);
+            const res = await rv.RunView({
+                EntityName: 'MJ: Companies',
+                Fields: ['ID', 'Name'],
+                OrderBy: 'Name ASC',
+                ResultType: 'simple',
+            });
+            if (!res.Success) {
+                const msg = res.ErrorMessage || 'Failed to load companies.';
+                LogError(msg);
+                this.companiesLoadError = `Couldn't load companies: ${msg}`;
+                return;
+            }
+            if (Array.isArray(res.Results)) {
+                this.AvailableCompanies = res.Results.map((r) => ({
+                    ID: r.ID,
+                    Name: r.Name,
+                }));
+            }
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            LogError(msg);
+            this.companiesLoadError = `Couldn't load companies: ${msg}`;
+        }
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵVSArchetypeEditorComponent_BaseFactory; return function VSArchetypeEditorComponent_Factory(__ngFactoryType__) { return (ɵVSArchetypeEditorComponent_BaseFactory || (ɵVSArchetypeEditorComponent_BaseFactory = i0.ɵɵgetInheritedFactory(VSArchetypeEditorComponent)))(__ngFactoryType__ || VSArchetypeEditorComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VSArchetypeEditorComponent, selectors: [["vs-archetype-editor"]], inputs: { Mode: "Mode", SourceArchetypeId: "SourceArchetypeId", EditingArchetypeId: "EditingArchetypeId", Archetypes: "Archetypes", Companies: "Companies", InitialCompanyId: "InitialCompanyId" }, outputs: { Saved: "Saved", Cancelled: "Cancelled" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 88, vars: 46, consts: [["data-testid", "vs-archetype-editor", 1, "vs-arch-editor"], [1, "vs-arch-editor__body"], ["role", "alert", "data-testid", "vs-arch-editor-error", 1, "vs-arch-editor__error"], [1, "vs-arch-editor__field"], [1, "vs-arch-editor__label-row"], ["id", "vs-arch-editor-start-from-label", 1, "vs-arch-editor__label"], [1, "vs-arch-editor__hint"], ["data-testid", "vs-arch-editor-start-from", "AriaLabelledBy", "vs-arch-editor-start-from-label", "Placeholder", "Choose an archetype to copy from...", "TextField", "Label", "ValueField", "ID", 3, "ngModelChange", "Data", "ValuePrimitive", "ngModel"], [1, "vs-arch-editor__row-3"], [1, "vs-arch-editor__label"], ["type", "text", "data-testid", "vs-arch-editor-name", "placeholder", "e.g. Quarterly Member Update", 1, "vs-arch-editor__input", 3, "ngModelChange", "ngModel", "disabled"], ["id", "vs-arch-editor-category-label", 1, "vs-arch-editor__label"], ["data-testid", "vs-arch-editor-category", "AriaLabelledBy", "vs-arch-editor-category-label", "TextField", "Text", "ValueField", "Value", 3, "ngModelChange", "Data", "ValuePrimitive", "ngModel"], ["id", "vs-arch-editor-company-label", 1, "vs-arch-editor__label"], ["data-testid", "vs-arch-editor-company", "AriaLabelledBy", "vs-arch-editor-company-label", "Placeholder", "Select a company...", "TextField", "Name", "ValueField", "ID", 3, "ngModelChange", "Data", "ValuePrimitive", "ngModel"], ["data-testid", "vs-arch-editor-description", "rows", "2", "placeholder", "Describe what this archetype is for and the story arc it follows...", 1, "vs-arch-editor__textarea", 3, "ngModelChange", "ngModel", "disabled"], [1, "vs-arch-editor__length-formats"], [1, "vs-arch-editor__length-group"], ["id", "vs-arch-editor-default-dur-label", 1, "vs-arch-editor__label"], ["data-testid", "vs-arch-editor-default-readout", 1, "vs-arch-editor__time-readout"], ["data-testid", "vs-arch-editor-default-duration", "AriaLabelledBy", "vs-arch-editor-default-dur-label", 3, "ngModelChange", "Min", "Max", "Step", "Disabled", "ngModel"], ["id", "vs-arch-editor-min-dur-label", 1, "vs-arch-editor__label"], ["data-testid", "vs-arch-editor-min-readout", 1, "vs-arch-editor__time-readout"], ["data-testid", "vs-arch-editor-min-duration", "AriaLabelledBy", "vs-arch-editor-min-dur-label", 3, "ngModelChange", "Min", "Max", "Step", "Disabled", "ngModel"], ["id", "vs-arch-editor-max-dur-label", 1, "vs-arch-editor__label"], ["data-testid", "vs-arch-editor-max-readout", 1, "vs-arch-editor__time-readout"], ["data-testid", "vs-arch-editor-max-duration", "AriaLabelledBy", "vs-arch-editor-max-dur-label", 3, "ngModelChange", "Min", "Max", "Step", "Disabled", "ngModel"], ["role", "group", "aria-label", "Default video formats", 1, "vs-arch-editor__format-toggles"], ["type", "button", "mjButton", "", "Variant", "outline", "Size", "sm", 3, "Toggleable", "Selected", "disabled"], ["data-testid", "vs-arch-editor-beats-section", 1, "vs-arch-editor__beats-section"], [1, "vs-arch-editor__beats-header"], ["data-testid", "vs-arch-editor-beats-sum", 1, "vs-arch-editor__time-readout"], ["data-testid", "vs-arch-editor-beat-strip", 3, "Beats"], ["data-testid", "vs-arch-editor-beats-mismatch", 1, "vs-arch-editor__mismatch"], [1, "vs-arch-editor__beat-rows"], [1, "vs-arch-editor__beat-row"], [1, "vs-arch-editor__beats-footer"], ["type", "button", "mjButton", "", "Variant", "outline", "Size", "sm", "data-testid", "vs-arch-editor-add-beat", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-plus"], [1, "vs-arch-editor__advanced"], ["type", "button", "data-testid", "vs-arch-editor-advanced-toggle", 1, "vs-arch-editor__advanced-toggle", 3, "click"], ["aria-hidden", "true", 1, "fa-solid"], ["data-testid", "vs-arch-editor-advanced-body", 1, "vs-arch-editor__advanced-body"], [1, "vs-arch-editor__footer"], ["type", "button", "mjButton", "", "Variant", "primary", "Size", "md", "data-testid", "vs-arch-editor-save", 3, "click", "disabled"], ["type", "button", "mjButton", "", "Variant", "secondary", "Size", "md", "data-testid", "vs-arch-editor-cancel", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-circle-exclamation"], ["type", "button", "mjButton", "", "Variant", "outline", "Size", "sm", 3, "click", "Toggleable", "Selected", "disabled"], ["Size", "sm", 3, "Format"], [1, "vs-arch-editor__mismatch-text"], ["type", "button", "mjButton", "", "Variant", "flat", "Size", "sm", "data-testid", "vs-arch-editor-fit-to-length", 3, "click", "disabled"], ["aria-hidden", "true", 1, "vs-arch-editor__beat-index"], ["type", "text", "placeholder", "Beat label", 1, "vs-arch-editor__input", "vs-arch-editor__beat-label-input", 3, "ngModelChange", "ngModel", "disabled"], ["type", "text", "placeholder", "What this beat accomplishes", 1, "vs-arch-editor__input", "vs-arch-editor__beat-purpose-input", 3, "ngModelChange", "ngModel", "disabled"], [1, "vs-arch-editor__beat-seconds-wrap"], [3, "ngModelChange", "AriaLabel", "Min", "Max", "Step", "Disabled", "ngModel"], [1, "vs-arch-editor__beat-time-readout"], [1, "vs-arch-editor__beat-actions"], ["type", "button", "mjButton", "", "Variant", "icon", "Size", "sm", 3, "click", "AriaLabel", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-arrow-up"], ["aria-hidden", "true", 1, "fa-solid", "fa-arrow-down"], ["aria-hidden", "true", 1, "fa-solid", "fa-trash-can"], ["data-testid", "vs-arch-editor-guidance", "rows", "3", "placeholder", "Markdown guidance for the Director and Storyboard...", 1, "vs-arch-editor__textarea", 3, "ngModelChange", "ngModel", "disabled"], [1, "vs-arch-editor__pacing-grid"], ["id", "vs-arch-editor-pacing-avg-label", 1, "vs-arch-editor__label"], [1, "vs-arch-editor__time-readout"], ["data-testid", "vs-arch-editor-pacing-avg", "AriaLabelledBy", "vs-arch-editor-pacing-avg-label", 3, "ngModelChange", "Min", "Max", "Step", "Disabled", "ngModel"], ["type", "text", "data-testid", "vs-arch-editor-pacing-hold-rules", "placeholder", "e.g. Hold key numbers and charts for at least 3 seconds", 1, "vs-arch-editor__input", 3, "ngModelChange", "ngModel", "disabled"], [1, "vs-arch-editor__advanced-beats"], [1, "vs-arch-editor__advanced-beat-row"], [1, "vs-arch-editor__advanced-beat-name"], [1, "vs-arch-editor__advanced-beat-switch"], [3, "ngModelChange", "AriaLabel", "Disabled", "ngModel"], ["type", "text", "placeholder", "Optional beat guidance...", 1, "vs-arch-editor__input", 3, "ngModelChange", "ngModel", "disabled"]], template: function VSArchetypeEditorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
+            i0.ɵɵconditionalCreate(2, VSArchetypeEditorComponent_Conditional_2_Template, 4, 1, "div", 2);
+            i0.ɵɵelementStart(3, "div", 3)(4, "div", 4)(5, "span", 5);
+            i0.ɵɵtext(6, " Start from ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(7, "span", 6);
+            i0.ɵɵtext(8, " Copies fields into this form without changing the original ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(9, "mj-dropdown", 7);
+            i0.ɵɵlistener("ngModelChange", function VSArchetypeEditorComponent_Template_mj_dropdown_ngModelChange_9_listener($event) { return ctx.OnStartFromChange($event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(10, "div", 8)(11, "label", 3)(12, "span", 9);
+            i0.ɵɵtext(13, "Name");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(14, "input", 10);
+            i0.ɵɵtwoWayListener("ngModelChange", function VSArchetypeEditorComponent_Template_input_ngModelChange_14_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.Name, $event) || (ctx.Name = $event); return $event; });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(15, "div", 3)(16, "span", 11);
+            i0.ɵɵtext(17, " Category ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(18, "mj-dropdown", 12);
+            i0.ɵɵtwoWayListener("ngModelChange", function VSArchetypeEditorComponent_Template_mj_dropdown_ngModelChange_18_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.Category, $event) || (ctx.Category = $event); return $event; });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(19, "div", 3)(20, "span", 13);
+            i0.ɵɵtext(21, " Company ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(22, "mj-dropdown", 14);
+            i0.ɵɵtwoWayListener("ngModelChange", function VSArchetypeEditorComponent_Template_mj_dropdown_ngModelChange_22_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.CompanyID, $event) || (ctx.CompanyID = $event); return $event; });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(23, "label", 3)(24, "div", 4)(25, "span", 9);
+            i0.ɵɵtext(26, "Description");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(27, "span", 6);
+            i0.ɵɵtext(28, " One short paragraph \u2014 the Director reads it to choose and shape this archetype ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(29, "textarea", 15);
+            i0.ɵɵtwoWayListener("ngModelChange", function VSArchetypeEditorComponent_Template_textarea_ngModelChange_29_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.Description, $event) || (ctx.Description = $event); return $event; });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(30, "div", 16)(31, "div", 17)(32, "div", 3)(33, "div", 4)(34, "span", 18);
+            i0.ɵɵtext(35, " Default length (s) ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(36, "span", 19);
+            i0.ɵɵtext(37);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(38, "mj-numeric-input", 20);
+            i0.ɵɵlistener("ngModelChange", function VSArchetypeEditorComponent_Template_mj_numeric_input_ngModelChange_38_listener($event) { return ctx.OnDefaultDurationChange($event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(39, "div", 3)(40, "div", 4)(41, "span", 21);
+            i0.ɵɵtext(42, " Shortest (s) ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(43, "span", 22);
+            i0.ɵɵtext(44);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(45, "mj-numeric-input", 23);
+            i0.ɵɵlistener("ngModelChange", function VSArchetypeEditorComponent_Template_mj_numeric_input_ngModelChange_45_listener($event) { return ctx.OnMinDurationChange($event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(46, "div", 3)(47, "div", 4)(48, "span", 24);
+            i0.ɵɵtext(49, " Longest (s) ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(50, "span", 25);
+            i0.ɵɵtext(51);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(52, "mj-numeric-input", 26);
+            i0.ɵɵlistener("ngModelChange", function VSArchetypeEditorComponent_Template_mj_numeric_input_ngModelChange_52_listener($event) { return ctx.OnMaxDurationChange($event); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(53, "div", 3)(54, "span", 9);
+            i0.ɵɵtext(55, "Formats");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(56, "div", 27);
+            i0.ɵɵrepeaterCreate(57, VSArchetypeEditorComponent_For_58_Template, 2, 5, "button", 28, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(59, "section", 29)(60, "div", 30)(61, "span", 9);
+            i0.ɵɵtext(62);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(63, "span", 31);
+            i0.ɵɵtext(64);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(65, "mj-video-beat-strip", 32);
+            i0.ɵɵconditionalCreate(66, VSArchetypeEditorComponent_Conditional_66_Template, 6, 3, "div", 33);
+            i0.ɵɵelementStart(67, "div", 34);
+            i0.ɵɵrepeaterCreate(68, VSArchetypeEditorComponent_For_69_Template, 16, 27, "div", 35, _forTrack0);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(70, "div", 36)(71, "button", 37);
+            i0.ɵɵlistener("click", function VSArchetypeEditorComponent_Template_button_click_71_listener() { return ctx.AddBeat(); });
+            i0.ɵɵelement(72, "i", 38);
+            i0.ɵɵelementStart(73, "span");
+            i0.ɵɵtext(74, "Add beat");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(75, "section", 39)(76, "button", 40);
+            i0.ɵɵlistener("click", function VSArchetypeEditorComponent_Template_button_click_76_listener() { return ctx.ToggleAdvanced(); });
+            i0.ɵɵelement(77, "i", 41);
+            i0.ɵɵelementStart(78, "span");
+            i0.ɵɵtext(79, "Advanced (guidance, pacing, data binding)");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(80, VSArchetypeEditorComponent_Conditional_80_Template, 23, 10, "div", 42);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(81, "footer", 43)(82, "button", 44);
+            i0.ɵɵlistener("click", function VSArchetypeEditorComponent_Template_button_click_82_listener() { return ctx.Save(); });
+            i0.ɵɵelementStart(83, "span");
+            i0.ɵɵtext(84);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(85, "button", 45);
+            i0.ɵɵlistener("click", function VSArchetypeEditorComponent_Template_button_click_85_listener() { return ctx.Cancel(); });
+            i0.ɵɵelementStart(86, "span");
+            i0.ɵɵtext(87, "Cancel");
+            i0.ɵɵelementEnd()()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.SaveError ? 2 : -1);
+            i0.ɵɵadvance(7);
+            i0.ɵɵproperty("Data", ctx.StartFromOptions)("ValuePrimitive", true)("ngModel", ctx.SelectedSourceId);
+            i0.ɵɵadvance(5);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.Name);
+            i0.ɵɵproperty("disabled", ctx.IsSaving);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("Data", ctx.CategoryOptions)("ValuePrimitive", true);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.Category);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("Data", ctx.AvailableCompanies)("ValuePrimitive", true);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.CompanyID);
+            i0.ɵɵadvance(7);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.Description);
+            i0.ɵɵproperty("disabled", ctx.IsSaving);
+            i0.ɵɵadvance(8);
+            i0.ɵɵtextInterpolate1(" ", ctx.FormatTime(ctx.DefaultDurationSeconds), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Min", 1)("Max", 600)("Step", 1)("Disabled", ctx.IsSaving)("ngModel", ctx.DefaultDurationSeconds);
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate1(" ", ctx.FormatTime(ctx.MinDurationSeconds), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Min", 1)("Max", 600)("Step", 1)("Disabled", ctx.IsSaving)("ngModel", ctx.MinDurationSeconds);
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate1(" ", ctx.FormatTime(ctx.MaxDurationSeconds), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Min", 1)("Max", 600)("Step", 1)("Disabled", ctx.IsSaving)("ngModel", ctx.MaxDurationSeconds);
+            i0.ɵɵadvance(5);
+            i0.ɵɵrepeater(ctx.AvailableFormats);
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate1(" Beats (", ctx.Beats.length, ") ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", ctx.FormatTime(ctx.BeatsTotalSeconds), " total ");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Beats", ctx.LiveBeatStripItems);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.HasBeatsDurationMismatch ? 66 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.Beats);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("disabled", ctx.IsSaving);
+            i0.ɵɵadvance(5);
+            i0.ɵɵattribute("aria-expanded", ctx.IsAdvancedOpen);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("fa-chevron-right", !ctx.IsAdvancedOpen)("fa-chevron-down", ctx.IsAdvancedOpen);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.IsAdvancedOpen ? 80 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("disabled", ctx.IsSaving);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.IsSaving ? "Saving..." : "Save");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("disabled", ctx.IsSaving);
+        } }, dependencies: [CommonModule,
+            FormsModule, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, ArtifactsModule, i2.MJVideoFormatGlyphComponent, i2.MJVideoBeatStripComponent, MJButtonDirective,
+            MJDropdownComponent,
+            MJNumericInputComponent,
+            MJSwitchComponent], styles: ["[_nghost-%COMP%] {\n  display: block;\n  width: 100%;\n}\n\n.vs-arch-editor[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-4);\n}\n\n.vs-arch-editor__body[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-4);\n  max-height: 70vh;\n  overflow-y: auto;\n  padding-right: var(--mj-space-1);\n}\n\n.vs-arch-editor__error[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-2-5) var(--mj-space-3);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-status-error-bg);\n  border: 1px solid var(--mj-status-error-border);\n  color: var(--mj-status-error-text);\n  font-size: var(--mj-text-xs);\n}\n\n.vs-arch-editor__field[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-1-5);\n  min-width: 0;\n}\n\n.vs-arch-editor__label-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--mj-space-2);\n  flex-wrap: wrap;\n}\n\n.vs-arch-editor__label[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.vs-arch-editor__hint[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n.vs-arch-editor__time-readout[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-medium);\n  font-variant-numeric: tabular-nums;\n  color: var(--mj-text-secondary);\n}\n\n.vs-arch-editor__row-3[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: minmax(180px, 1.4fr) minmax(140px, 1fr) minmax(150px, 1fr);\n  gap: var(--mj-space-3);\n}\n\n.vs-arch-editor__length-formats[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1.5fr 1fr;\n  gap: var(--mj-space-4);\n  align-items: end;\n}\n\n.vs-arch-editor__length-group[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--mj-space-2-5);\n}\n\n.vs-arch-editor__format-toggles[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--mj-space-2);\n}\n\n.vs-arch-editor__input[_ngcontent-%COMP%], \n.vs-arch-editor__textarea[_ngcontent-%COMP%] {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--mj-space-2) var(--mj-space-2-5);\n  border-radius: var(--mj-radius-md);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  font-size: var(--mj-text-sm);\n  transition: var(--mj-transition-fast);\n}\n\n.vs-arch-editor__textarea[_ngcontent-%COMP%] {\n  resize: vertical;\n  line-height: var(--mj-leading-normal);\n}\n\n.vs-arch-editor__input[_ngcontent-%COMP%]:focus-visible, \n.vs-arch-editor__textarea[_ngcontent-%COMP%]:focus-visible {\n  outline: none;\n  border-color: var(--mj-border-focus);\n  box-shadow: var(--mj-focus-ring);\n}\n\n.vs-arch-editor__beats-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-2-5);\n  padding: var(--mj-space-3-5);\n  border-radius: var(--mj-radius-lg);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n}\n\n.vs-arch-editor__beats-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mj-space-2);\n}\n\n.vs-arch-editor__mismatch[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mj-space-3);\n  padding: var(--mj-space-2) var(--mj-space-3);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-status-warning-bg);\n  border: 1px solid var(--mj-status-warning-border);\n  color: var(--mj-status-warning-text);\n  font-size: var(--mj-text-xs);\n  font-variant-numeric: tabular-nums;\n}\n\n.vs-arch-editor__mismatch-text[_ngcontent-%COMP%] {\n  font-weight: var(--mj-font-medium);\n}\n\n.vs-arch-editor__beat-rows[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-2);\n}\n\n.vs-arch-editor__beat-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto minmax(148px, 1.25fr) minmax(160px, 1.75fr) auto auto;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-2);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n}\n\n.vs-arch-editor__beat-index[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--mj-space-5);\n  height: var(--mj-space-5);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  font-variant-numeric: tabular-nums;\n}\n\n.vs-arch-editor__beat-seconds-wrap[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-1-5);\n  width: 6.5rem;\n}\n\n.vs-arch-editor__beat-time-readout[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  font-variant-numeric: tabular-nums;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n.vs-arch-editor__beat-actions[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n}\n\n.vs-arch-editor__beats-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n\n.vs-arch-editor__advanced[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-3);\n  border-top: 1px solid var(--mj-border-subtle);\n  padding-top: var(--mj-space-3);\n}\n\n.vs-arch-editor__advanced-toggle[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-1) var(--mj-space-1-5);\n  border: none;\n  border-radius: var(--mj-radius-sm);\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-family: inherit;\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  cursor: pointer;\n  align-self: flex-start;\n  transition: var(--mj-transition-fast);\n}\n\n.vs-arch-editor__advanced-toggle[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.vs-arch-editor__advanced-toggle[_ngcontent-%COMP%]:focus-visible {\n  outline: none;\n  box-shadow: var(--mj-focus-ring);\n}\n\n.vs-arch-editor__advanced-body[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-3);\n  padding: var(--mj-space-3);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n}\n\n.vs-arch-editor__pacing-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: minmax(140px, 0.7fr) 1.3fr;\n  gap: var(--mj-space-3);\n}\n\n.vs-arch-editor__advanced-beats[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-2);\n}\n\n.vs-arch-editor__advanced-beat-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: minmax(120px, 0.8fr) auto 1.2fr;\n  align-items: center;\n  gap: var(--mj-space-2-5);\n}\n\n.vs-arch-editor__advanced-beat-name[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.vs-arch-editor__advanced-beat-switch[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-1-5);\n}\n\n.vs-arch-editor__footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mj-space-3);\n  padding-top: var(--mj-space-3);\n  border-top: 1px solid var(--mj-border-default);\n}\n\n@media (max-width: 768px) {\n  .vs-arch-editor__row-3[_ngcontent-%COMP%], \n   .vs-arch-editor__length-formats[_ngcontent-%COMP%], \n   .vs-arch-editor__pacing-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .vs-arch-editor__beat-row[_ngcontent-%COMP%] {\n    grid-template-columns: auto 1fr;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .vs-arch-editor__input[_ngcontent-%COMP%], \n   .vs-arch-editor__textarea[_ngcontent-%COMP%], \n   .vs-arch-editor__advanced-toggle[_ngcontent-%COMP%] {\n    transition: none;\n  }\n}"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VSArchetypeEditorComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'vs-archetype-editor', imports: [
+                    CommonModule,
+                    FormsModule,
+                    ArtifactsModule,
+                    MJButtonDirective,
+                    MJDropdownComponent,
+                    MJNumericInputComponent,
+                    MJSwitchComponent,
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"vs-arch-editor\" data-testid=\"vs-archetype-editor\">\n  <div class=\"vs-arch-editor__body\">\n    @if (SaveError) {\n      <div\n        class=\"vs-arch-editor__error\"\n        role=\"alert\"\n        data-testid=\"vs-arch-editor-error\"\n      >\n        <i class=\"fa-solid fa-circle-exclamation\" aria-hidden=\"true\"></i>\n        <span>{{ SaveError }}</span>\n      </div>\n    }\n\n    <!-- Start from -->\n    <div class=\"vs-arch-editor__field\">\n      <div class=\"vs-arch-editor__label-row\">\n        <span class=\"vs-arch-editor__label\" id=\"vs-arch-editor-start-from-label\">\n          Start from\n        </span>\n        <span class=\"vs-arch-editor__hint\">\n          Copies fields into this form without changing the original\n        </span>\n      </div>\n      <mj-dropdown\n        data-testid=\"vs-arch-editor-start-from\"\n        AriaLabelledBy=\"vs-arch-editor-start-from-label\"\n        Placeholder=\"Choose an archetype to copy from...\"\n        [Data]=\"StartFromOptions\"\n        TextField=\"Label\"\n        ValueField=\"ID\"\n        [ValuePrimitive]=\"true\"\n        [ngModel]=\"SelectedSourceId\"\n        (ngModelChange)=\"OnStartFromChange($event)\"\n      ></mj-dropdown>\n    </div>\n\n    <!-- Name, Category, Company -->\n    <div class=\"vs-arch-editor__row-3\">\n      <label class=\"vs-arch-editor__field\">\n        <span class=\"vs-arch-editor__label\">Name</span>\n        <input\n          type=\"text\"\n          class=\"vs-arch-editor__input\"\n          data-testid=\"vs-arch-editor-name\"\n          placeholder=\"e.g. Quarterly Member Update\"\n          [(ngModel)]=\"Name\"\n          [disabled]=\"IsSaving\"\n        />\n      </label>\n\n      <div class=\"vs-arch-editor__field\">\n        <span class=\"vs-arch-editor__label\" id=\"vs-arch-editor-category-label\">\n          Category\n        </span>\n        <mj-dropdown\n          data-testid=\"vs-arch-editor-category\"\n          AriaLabelledBy=\"vs-arch-editor-category-label\"\n          [Data]=\"CategoryOptions\"\n          TextField=\"Text\"\n          ValueField=\"Value\"\n          [ValuePrimitive]=\"true\"\n          [(ngModel)]=\"Category\"\n        ></mj-dropdown>\n      </div>\n\n      <div class=\"vs-arch-editor__field\">\n        <span class=\"vs-arch-editor__label\" id=\"vs-arch-editor-company-label\">\n          Company\n        </span>\n        <mj-dropdown\n          data-testid=\"vs-arch-editor-company\"\n          AriaLabelledBy=\"vs-arch-editor-company-label\"\n          Placeholder=\"Select a company...\"\n          [Data]=\"AvailableCompanies\"\n          TextField=\"Name\"\n          ValueField=\"ID\"\n          [ValuePrimitive]=\"true\"\n          [(ngModel)]=\"CompanyID\"\n        ></mj-dropdown>\n      </div>\n    </div>\n\n    <!-- Description -->\n    <label class=\"vs-arch-editor__field\">\n      <div class=\"vs-arch-editor__label-row\">\n        <span class=\"vs-arch-editor__label\">Description</span>\n        <span class=\"vs-arch-editor__hint\">\n          One short paragraph \u2014 the Director reads it to choose and shape this archetype\n        </span>\n      </div>\n      <textarea\n        class=\"vs-arch-editor__textarea\"\n        data-testid=\"vs-arch-editor-description\"\n        rows=\"2\"\n        placeholder=\"Describe what this archetype is for and the story arc it follows...\"\n        [(ngModel)]=\"Description\"\n        [disabled]=\"IsSaving\"\n      ></textarea>\n    </label>\n\n    <!-- Length & Formats -->\n    <div class=\"vs-arch-editor__length-formats\">\n      <div class=\"vs-arch-editor__length-group\">\n        <div class=\"vs-arch-editor__field\">\n          <div class=\"vs-arch-editor__label-row\">\n            <span class=\"vs-arch-editor__label\" id=\"vs-arch-editor-default-dur-label\">\n              Default length (s)\n            </span>\n            <span\n              class=\"vs-arch-editor__time-readout\"\n              data-testid=\"vs-arch-editor-default-readout\"\n            >\n              {{ FormatTime(DefaultDurationSeconds) }}\n            </span>\n          </div>\n          <mj-numeric-input\n            data-testid=\"vs-arch-editor-default-duration\"\n            AriaLabelledBy=\"vs-arch-editor-default-dur-label\"\n            [Min]=\"1\"\n            [Max]=\"600\"\n            [Step]=\"1\"\n            [Disabled]=\"IsSaving\"\n            [ngModel]=\"DefaultDurationSeconds\"\n            (ngModelChange)=\"OnDefaultDurationChange($event)\"\n          ></mj-numeric-input>\n        </div>\n\n        <div class=\"vs-arch-editor__field\">\n          <div class=\"vs-arch-editor__label-row\">\n            <span class=\"vs-arch-editor__label\" id=\"vs-arch-editor-min-dur-label\">\n              Shortest (s)\n            </span>\n            <span\n              class=\"vs-arch-editor__time-readout\"\n              data-testid=\"vs-arch-editor-min-readout\"\n            >\n              {{ FormatTime(MinDurationSeconds) }}\n            </span>\n          </div>\n          <mj-numeric-input\n            data-testid=\"vs-arch-editor-min-duration\"\n            AriaLabelledBy=\"vs-arch-editor-min-dur-label\"\n            [Min]=\"1\"\n            [Max]=\"600\"\n            [Step]=\"1\"\n            [Disabled]=\"IsSaving\"\n            [ngModel]=\"MinDurationSeconds\"\n            (ngModelChange)=\"OnMinDurationChange($event)\"\n          ></mj-numeric-input>\n        </div>\n\n        <div class=\"vs-arch-editor__field\">\n          <div class=\"vs-arch-editor__label-row\">\n            <span class=\"vs-arch-editor__label\" id=\"vs-arch-editor-max-dur-label\">\n              Longest (s)\n            </span>\n            <span\n              class=\"vs-arch-editor__time-readout\"\n              data-testid=\"vs-arch-editor-max-readout\"\n            >\n              {{ FormatTime(MaxDurationSeconds) }}\n            </span>\n          </div>\n          <mj-numeric-input\n            data-testid=\"vs-arch-editor-max-duration\"\n            AriaLabelledBy=\"vs-arch-editor-max-dur-label\"\n            [Min]=\"1\"\n            [Max]=\"600\"\n            [Step]=\"1\"\n            [Disabled]=\"IsSaving\"\n            [ngModel]=\"MaxDurationSeconds\"\n            (ngModelChange)=\"OnMaxDurationChange($event)\"\n          ></mj-numeric-input>\n        </div>\n      </div>\n\n      <div class=\"vs-arch-editor__field\">\n        <span class=\"vs-arch-editor__label\">Formats</span>\n        <div\n          class=\"vs-arch-editor__format-toggles\"\n          role=\"group\"\n          aria-label=\"Default video formats\"\n        >\n          @for (format of AvailableFormats; track format) {\n            <button\n              type=\"button\"\n              mjButton\n              Variant=\"outline\"\n              Size=\"sm\"\n              [Toggleable]=\"true\"\n              [Selected]=\"IsFormatSelected(format)\"\n              [attr.data-testid]=\"'vs-arch-editor-format-' + format\"\n              [disabled]=\"IsSaving\"\n              (click)=\"ToggleFormat(format)\"\n            >\n              <mj-video-format-glyph [Format]=\"format\" Size=\"sm\"></mj-video-format-glyph>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Beats -->\n    <section class=\"vs-arch-editor__beats-section\" data-testid=\"vs-arch-editor-beats-section\">\n      <div class=\"vs-arch-editor__beats-header\">\n        <span class=\"vs-arch-editor__label\">\n          Beats ({{ Beats.length }})\n        </span>\n        <span class=\"vs-arch-editor__time-readout\" data-testid=\"vs-arch-editor-beats-sum\">\n          {{ FormatTime(BeatsTotalSeconds) }} total\n        </span>\n      </div>\n\n      <mj-video-beat-strip\n        data-testid=\"vs-arch-editor-beat-strip\"\n        [Beats]=\"LiveBeatStripItems\"\n      ></mj-video-beat-strip>\n\n      @if (HasBeatsDurationMismatch) {\n        <div\n          class=\"vs-arch-editor__mismatch\"\n          data-testid=\"vs-arch-editor-beats-mismatch\"\n        >\n          <span class=\"vs-arch-editor__mismatch-text\">\n            Beats add up to {{ FormatTime(BeatsTotalSeconds) }} of {{ FormatTime(DefaultDurationSeconds) }}\n          </span>\n          <button\n            type=\"button\"\n            mjButton\n            Variant=\"flat\"\n            Size=\"sm\"\n            data-testid=\"vs-arch-editor-fit-to-length\"\n            [disabled]=\"IsSaving\"\n            (click)=\"FitBeatsToLength()\"\n          >\n            <span>Fit to length</span>\n          </button>\n        </div>\n      }\n\n      <div class=\"vs-arch-editor__beat-rows\">\n        @for (beat of Beats; track beat.TrackId; let idx = $index) {\n          <div\n            class=\"vs-arch-editor__beat-row\"\n            [attr.data-testid]=\"'vs-arch-editor-beat-row-' + idx\"\n          >\n            <span class=\"vs-arch-editor__beat-index\" aria-hidden=\"true\">\n              {{ idx + 1 }}\n            </span>\n\n            <input\n              type=\"text\"\n              class=\"vs-arch-editor__input vs-arch-editor__beat-label-input\"\n              [attr.data-testid]=\"'vs-arch-editor-beat-label-' + idx\"\n              [attr.aria-label]=\"'Beat ' + (idx + 1) + ' label'\"\n              placeholder=\"Beat label\"\n              [ngModel]=\"beat.Label\"\n              (ngModelChange)=\"OnBeatLabelChange(idx, $event)\"\n              [disabled]=\"IsSaving\"\n            />\n\n            <input\n              type=\"text\"\n              class=\"vs-arch-editor__input vs-arch-editor__beat-purpose-input\"\n              [attr.data-testid]=\"'vs-arch-editor-beat-purpose-' + idx\"\n              [attr.aria-label]=\"'Beat ' + (idx + 1) + ' purpose'\"\n              placeholder=\"What this beat accomplishes\"\n              [ngModel]=\"beat.Purpose\"\n              (ngModelChange)=\"OnBeatPurposeChange(idx, $event)\"\n              [disabled]=\"IsSaving\"\n            />\n\n            <div class=\"vs-arch-editor__beat-seconds-wrap\">\n              <mj-numeric-input\n                [attr.data-testid]=\"'vs-arch-editor-beat-seconds-' + idx\"\n                [AriaLabel]=\"'Beat ' + (idx + 1) + ' seconds'\"\n                [Min]=\"1\"\n                [Max]=\"600\"\n                [Step]=\"1\"\n                [Disabled]=\"IsSaving\"\n                [ngModel]=\"beat.Seconds\"\n                (ngModelChange)=\"OnBeatSecondsChange(idx, $event)\"\n              ></mj-numeric-input>\n              <span class=\"vs-arch-editor__beat-time-readout\">\n                {{ FormatTime(beat.Seconds) }}\n              </span>\n            </div>\n\n            <div class=\"vs-arch-editor__beat-actions\">\n              <button\n                type=\"button\"\n                mjButton\n                Variant=\"icon\"\n                Size=\"sm\"\n                [AriaLabel]=\"'Move beat ' + (idx + 1) + ' up'\"\n                [attr.data-testid]=\"'vs-arch-editor-beat-up-' + idx\"\n                [disabled]=\"IsSaving || idx === 0\"\n                (click)=\"MoveBeatUp(idx)\"\n              >\n                <i class=\"fa-solid fa-arrow-up\" aria-hidden=\"true\"></i>\n              </button>\n              <button\n                type=\"button\"\n                mjButton\n                Variant=\"icon\"\n                Size=\"sm\"\n                [AriaLabel]=\"'Move beat ' + (idx + 1) + ' down'\"\n                [attr.data-testid]=\"'vs-arch-editor-beat-down-' + idx\"\n                [disabled]=\"IsSaving || idx === Beats.length - 1\"\n                (click)=\"MoveBeatDown(idx)\"\n              >\n                <i class=\"fa-solid fa-arrow-down\" aria-hidden=\"true\"></i>\n              </button>\n              <button\n                type=\"button\"\n                mjButton\n                Variant=\"icon\"\n                Size=\"sm\"\n                [AriaLabel]=\"'Remove beat ' + (idx + 1)\"\n                [attr.data-testid]=\"'vs-arch-editor-beat-remove-' + idx\"\n                [disabled]=\"IsSaving || Beats.length <= 1\"\n                (click)=\"RemoveBeat(idx)\"\n              >\n                <i class=\"fa-solid fa-trash-can\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          </div>\n        }\n      </div>\n\n      <div class=\"vs-arch-editor__beats-footer\">\n        <button\n          type=\"button\"\n          mjButton\n          Variant=\"outline\"\n          Size=\"sm\"\n          data-testid=\"vs-arch-editor-add-beat\"\n          [disabled]=\"IsSaving\"\n          (click)=\"AddBeat()\"\n        >\n          <i class=\"fa-solid fa-plus\" aria-hidden=\"true\"></i>\n          <span>Add beat</span>\n        </button>\n      </div>\n    </section>\n\n    <!-- Advanced (collapsed) -->\n    <section class=\"vs-arch-editor__advanced\">\n      <button\n        type=\"button\"\n        class=\"vs-arch-editor__advanced-toggle\"\n        data-testid=\"vs-arch-editor-advanced-toggle\"\n        [attr.aria-expanded]=\"IsAdvancedOpen\"\n        (click)=\"ToggleAdvanced()\"\n      >\n        <i\n          class=\"fa-solid\"\n          [class.fa-chevron-right]=\"!IsAdvancedOpen\"\n          [class.fa-chevron-down]=\"IsAdvancedOpen\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>Advanced (guidance, pacing, data binding)</span>\n      </button>\n\n      @if (IsAdvancedOpen) {\n        <div\n          class=\"vs-arch-editor__advanced-body\"\n          data-testid=\"vs-arch-editor-advanced-body\"\n        >\n          <label class=\"vs-arch-editor__field\">\n            <span class=\"vs-arch-editor__label\">Guidance (markdown)</span>\n            <textarea\n              class=\"vs-arch-editor__textarea\"\n              data-testid=\"vs-arch-editor-guidance\"\n              rows=\"3\"\n              placeholder=\"Markdown guidance for the Director and Storyboard...\"\n              [(ngModel)]=\"Guidance\"\n              [disabled]=\"IsSaving\"\n            ></textarea>\n          </label>\n\n          <div class=\"vs-arch-editor__pacing-grid\">\n            <div class=\"vs-arch-editor__field\">\n              <div class=\"vs-arch-editor__label-row\">\n                <span class=\"vs-arch-editor__label\" id=\"vs-arch-editor-pacing-avg-label\">\n                  Average cut cadence (s)\n                </span>\n                <span class=\"vs-arch-editor__time-readout\">\n                  {{ FormatTime(PacingAvgSeconds) }}\n                </span>\n              </div>\n              <mj-numeric-input\n                data-testid=\"vs-arch-editor-pacing-avg\"\n                AriaLabelledBy=\"vs-arch-editor-pacing-avg-label\"\n                [Min]=\"0.5\"\n                [Max]=\"60\"\n                [Step]=\"0.5\"\n                [Disabled]=\"IsSaving\"\n                [(ngModel)]=\"PacingAvgSeconds\"\n              ></mj-numeric-input>\n            </div>\n\n            <label class=\"vs-arch-editor__field\">\n              <span class=\"vs-arch-editor__label\">Hold rules</span>\n              <input\n                type=\"text\"\n                class=\"vs-arch-editor__input\"\n                data-testid=\"vs-arch-editor-pacing-hold-rules\"\n                placeholder=\"e.g. Hold key numbers and charts for at least 3 seconds\"\n                [(ngModel)]=\"PacingHoldRules\"\n                [disabled]=\"IsSaving\"\n              />\n            </label>\n          </div>\n\n          <div class=\"vs-arch-editor__field\">\n            <span class=\"vs-arch-editor__label\">Beat data binding &amp; guidance</span>\n            <div class=\"vs-arch-editor__advanced-beats\">\n              @for (beat of Beats; track beat.TrackId; let idx = $index) {\n                <div class=\"vs-arch-editor__advanced-beat-row\">\n                  <span class=\"vs-arch-editor__advanced-beat-name\">\n                    {{ idx + 1 }}. {{ beat.Label || 'Beat ' + (idx + 1) }}\n                  </span>\n                  <div class=\"vs-arch-editor__advanced-beat-switch\">\n                    <mj-switch\n                      [attr.data-testid]=\"'vs-arch-editor-beat-databinding-' + idx\"\n                      [AriaLabel]=\"'Requires data binding for ' + (beat.Label || 'Beat ' + (idx + 1))\"\n                      [Disabled]=\"IsSaving\"\n                      [(ngModel)]=\"beat.RequiresDataBinding\"\n                    ></mj-switch>\n                    <span class=\"vs-arch-editor__hint\">Data bound</span>\n                  </div>\n                  <input\n                    type=\"text\"\n                    class=\"vs-arch-editor__input\"\n                    [attr.data-testid]=\"'vs-arch-editor-beat-guidance-' + idx\"\n                    [attr.aria-label]=\"'Guidance for ' + (beat.Label || 'Beat ' + (idx + 1))\"\n                    placeholder=\"Optional beat guidance...\"\n                    [(ngModel)]=\"beat.Guidance\"\n                    [disabled]=\"IsSaving\"\n                  />\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      }\n    </section>\n  </div>\n\n  <footer class=\"vs-arch-editor__footer\">\n    <button\n      type=\"button\"\n      mjButton\n      Variant=\"primary\"\n      Size=\"md\"\n      data-testid=\"vs-arch-editor-save\"\n      [disabled]=\"IsSaving\"\n      (click)=\"Save()\"\n    >\n      <span>{{ IsSaving ? 'Saving...' : 'Save' }}</span>\n    </button>\n    <button\n      type=\"button\"\n      mjButton\n      Variant=\"secondary\"\n      Size=\"md\"\n      data-testid=\"vs-arch-editor-cancel\"\n      [disabled]=\"IsSaving\"\n      (click)=\"Cancel()\"\n    >\n      <span>Cancel</span>\n    </button>\n  </footer>\n</div>\n", styles: [":host {\n  display: block;\n  width: 100%;\n}\n\n.vs-arch-editor {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-4);\n}\n\n.vs-arch-editor__body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-4);\n  max-height: 70vh;\n  overflow-y: auto;\n  padding-right: var(--mj-space-1);\n}\n\n.vs-arch-editor__error {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-2-5) var(--mj-space-3);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-status-error-bg);\n  border: 1px solid var(--mj-status-error-border);\n  color: var(--mj-status-error-text);\n  font-size: var(--mj-text-xs);\n}\n\n.vs-arch-editor__field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-1-5);\n  min-width: 0;\n}\n\n.vs-arch-editor__label-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--mj-space-2);\n  flex-wrap: wrap;\n}\n\n.vs-arch-editor__label {\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.vs-arch-editor__hint {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n.vs-arch-editor__time-readout {\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-medium);\n  font-variant-numeric: tabular-nums;\n  color: var(--mj-text-secondary);\n}\n\n.vs-arch-editor__row-3 {\n  display: grid;\n  grid-template-columns: minmax(180px, 1.4fr) minmax(140px, 1fr) minmax(150px, 1fr);\n  gap: var(--mj-space-3);\n}\n\n.vs-arch-editor__length-formats {\n  display: grid;\n  grid-template-columns: 1.5fr 1fr;\n  gap: var(--mj-space-4);\n  align-items: end;\n}\n\n.vs-arch-editor__length-group {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--mj-space-2-5);\n}\n\n.vs-arch-editor__format-toggles {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--mj-space-2);\n}\n\n.vs-arch-editor__input,\n.vs-arch-editor__textarea {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--mj-space-2) var(--mj-space-2-5);\n  border-radius: var(--mj-radius-md);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  font-size: var(--mj-text-sm);\n  transition: var(--mj-transition-fast);\n}\n\n.vs-arch-editor__textarea {\n  resize: vertical;\n  line-height: var(--mj-leading-normal);\n}\n\n.vs-arch-editor__input:focus-visible,\n.vs-arch-editor__textarea:focus-visible {\n  outline: none;\n  border-color: var(--mj-border-focus);\n  box-shadow: var(--mj-focus-ring);\n}\n\n.vs-arch-editor__beats-section {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-2-5);\n  padding: var(--mj-space-3-5);\n  border-radius: var(--mj-radius-lg);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n}\n\n.vs-arch-editor__beats-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mj-space-2);\n}\n\n.vs-arch-editor__mismatch {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mj-space-3);\n  padding: var(--mj-space-2) var(--mj-space-3);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-status-warning-bg);\n  border: 1px solid var(--mj-status-warning-border);\n  color: var(--mj-status-warning-text);\n  font-size: var(--mj-text-xs);\n  font-variant-numeric: tabular-nums;\n}\n\n.vs-arch-editor__mismatch-text {\n  font-weight: var(--mj-font-medium);\n}\n\n.vs-arch-editor__beat-rows {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-2);\n}\n\n.vs-arch-editor__beat-row {\n  display: grid;\n  grid-template-columns: auto minmax(148px, 1.25fr) minmax(160px, 1.75fr) auto auto;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-2);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n}\n\n.vs-arch-editor__beat-index {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--mj-space-5);\n  height: var(--mj-space-5);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  font-variant-numeric: tabular-nums;\n}\n\n.vs-arch-editor__beat-seconds-wrap {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-1-5);\n  width: 6.5rem;\n}\n\n.vs-arch-editor__beat-time-readout {\n  font-size: var(--mj-text-xs);\n  font-variant-numeric: tabular-nums;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n.vs-arch-editor__beat-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n}\n\n.vs-arch-editor__beats-footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n\n.vs-arch-editor__advanced {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-3);\n  border-top: 1px solid var(--mj-border-subtle);\n  padding-top: var(--mj-space-3);\n}\n\n.vs-arch-editor__advanced-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-1) var(--mj-space-1-5);\n  border: none;\n  border-radius: var(--mj-radius-sm);\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-family: inherit;\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  cursor: pointer;\n  align-self: flex-start;\n  transition: var(--mj-transition-fast);\n}\n\n.vs-arch-editor__advanced-toggle:hover {\n  color: var(--mj-text-primary);\n}\n\n.vs-arch-editor__advanced-toggle:focus-visible {\n  outline: none;\n  box-shadow: var(--mj-focus-ring);\n}\n\n.vs-arch-editor__advanced-body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-3);\n  padding: var(--mj-space-3);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n}\n\n.vs-arch-editor__pacing-grid {\n  display: grid;\n  grid-template-columns: minmax(140px, 0.7fr) 1.3fr;\n  gap: var(--mj-space-3);\n}\n\n.vs-arch-editor__advanced-beats {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-2);\n}\n\n.vs-arch-editor__advanced-beat-row {\n  display: grid;\n  grid-template-columns: minmax(120px, 0.8fr) auto 1.2fr;\n  align-items: center;\n  gap: var(--mj-space-2-5);\n}\n\n.vs-arch-editor__advanced-beat-name {\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.vs-arch-editor__advanced-beat-switch {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-1-5);\n}\n\n.vs-arch-editor__footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mj-space-3);\n  padding-top: var(--mj-space-3);\n  border-top: 1px solid var(--mj-border-default);\n}\n\n@media (max-width: 768px) {\n  .vs-arch-editor__row-3,\n  .vs-arch-editor__length-formats,\n  .vs-arch-editor__pacing-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .vs-arch-editor__beat-row {\n    grid-template-columns: auto 1fr;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .vs-arch-editor__input,\n  .vs-arch-editor__textarea,\n  .vs-arch-editor__advanced-toggle {\n    transition: none;\n  }\n}\n"] }]
+    }], null, { Mode: [{
+            type: Input
+        }], SourceArchetypeId: [{
+            type: Input
+        }], EditingArchetypeId: [{
+            type: Input
+        }], Archetypes: [{
+            type: Input
+        }], Companies: [{
+            type: Input
+        }], InitialCompanyId: [{
+            type: Input
+        }], Saved: [{
+            type: Output
+        }], Cancelled: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(VSArchetypeEditorComponent, { className: "VSArchetypeEditorComponent", filePath: "src/VideoStudio/components/vs-archetype-editor.component.ts", lineNumber: 144 }); })();
+//# sourceMappingURL=vs-archetype-editor.component.js.map