@memberjunction/ng-dashboards 6.2.0-edge.6 → 6.2.0-edge.8

package/dist/VideoStudio/resources/video-studio-brand-kits-resource.component.js

@@ -0,0 +1,600 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, } from '@angular/core';
+import { CompositeKey, LogError } from '@memberjunction/core';
+import { BrandKitEngine, MJEnvironmentEntityExtended, } from '@memberjunction/core-entities';
+import { RegisterClass, UUIDsEqual } from '@memberjunction/global';
+import { GraphQLDataProvider, GraphQLFileStorageClient, } from '@memberjunction/graphql-dataprovider';
+import { GetVideoStatusBadgeVariant } from '@memberjunction/ng-artifacts';
+import { DeleteBrandKitWithAssets } from '@memberjunction/ng-brand-kits';
+import { BaseResourceComponent } from '@memberjunction/ng-shared';
+import { MJConfirmService } from '@memberjunction/ng-ui-components';
+import { BRAND_KIT_STATUS_FILTERS, BuildBrandKitsAgentContext, FilterBrandKitCards, MapBrandKitToCard, ResolveVideoStudioItem, } from '../video-studio-agent-context';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-shared-generic";
+import * as i2 from "@memberjunction/ng-artifacts";
+import * as i3 from "@memberjunction/ng-brand-kits";
+import * as i4 from "../components/vs-studio-slide-in.component";
+import * as i5 from "@memberjunction/ng-ui-components";
+const _forTrack0 = ($index, $item) => $item.ID;
+const _forTrack1 = ($index, $item) => $item.Name + $item.Value;
+function VideoStudioBrandKitsResourceComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵelement(1, "mj-loading", 17);
+    i0.ɵɵelementEnd();
+} }
+function VideoStudioBrandKitsResourceComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-empty-state", 18);
+    i0.ɵɵlistener("ActionClicked", function VideoStudioBrandKitsResourceComponent_Conditional_17_Template_mj_empty_state_ActionClicked_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Refresh()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Message", ctx_r1.LoadError);
+} }
+function VideoStudioBrandKitsResourceComponent_Conditional_18_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-empty-state", 21);
+    i0.ɵɵlistener("ActionClicked", function VideoStudioBrandKitsResourceComponent_Conditional_18_Conditional_0_Template_mj_empty_state_ActionClicked_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.CreateNewBrandKit()); });
+    i0.ɵɵelementEnd();
+} }
+function VideoStudioBrandKitsResourceComponent_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-empty-state", 22);
+    i0.ɵɵlistener("ActionClicked", function VideoStudioBrandKitsResourceComponent_Conditional_18_Conditional_1_Template_mj_empty_state_ActionClicked_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ResetFiltersAndSearch()); });
+    i0.ɵɵelementEnd();
+} }
+function VideoStudioBrandKitsResourceComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, VideoStudioBrandKitsResourceComponent_Conditional_18_Conditional_0_Template, 1, 0, "mj-empty-state", 19)(1, VideoStudioBrandKitsResourceComponent_Conditional_18_Conditional_1_Template, 1, 0, "mj-empty-state", 20);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r1.AllBrandKits.length === 0 ? 0 : 1);
+} }
+function VideoStudioBrandKitsResourceComponent_Conditional_19_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵelement(1, "i", 26);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.DeleteError);
+} }
+function VideoStudioBrandKitsResourceComponent_Conditional_19_For_3_Conditional_2_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 45);
+} if (rf & 2) {
+    const swatch_r7 = ctx.$implicit;
+    i0.ɵɵstyleProp("background-color", swatch_r7.Value);
+    i0.ɵɵproperty("title", swatch_r7.Name + " (" + swatch_r7.Value + ")");
+} }
+function VideoStudioBrandKitsResourceComponent_Conditional_19_For_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, VideoStudioBrandKitsResourceComponent_Conditional_19_For_3_Conditional_2_For_1_Template, 1, 3, "div", 44, _forTrack1);
+} if (rf & 2) {
+    const kit_r6 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵrepeater(kit_r6.Swatches);
+} }
+function VideoStudioBrandKitsResourceComponent_Conditional_19_For_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 29)(1, "span");
+    i0.ɵɵtext(2, "No palette swatches configured");
+    i0.ɵɵelementEnd()();
+} }
+function VideoStudioBrandKitsResourceComponent_Conditional_19_For_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 34);
+} if (rf & 2) {
+    const kit_r6 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("src", kit_r6.PrimaryLogoUrl, i0.ɵɵsanitizeUrl)("alt", kit_r6.Name + " logo");
+} }
+function VideoStudioBrandKitsResourceComponent_Conditional_19_For_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 35);
+} }
+function VideoStudioBrandKitsResourceComponent_Conditional_19_For_3_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mj-video-badge", 37);
+    i0.ɵɵtext(1, " Default ");
+    i0.ɵɵelementEnd();
+} }
+function VideoStudioBrandKitsResourceComponent_Conditional_19_For_3_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "article", 27);
+    i0.ɵɵlistener("click", function VideoStudioBrandKitsResourceComponent_Conditional_19_For_3_Template_article_click_0_listener() { const kit_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OpenBrandKit(kit_r6)); })("keydown.enter", function VideoStudioBrandKitsResourceComponent_Conditional_19_For_3_Template_article_keydown_enter_0_listener($event) { const kit_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView($event.target === $event.currentTarget && ctx_r1.OpenBrandKit(kit_r6)); })("keydown.space", function VideoStudioBrandKitsResourceComponent_Conditional_19_For_3_Template_article_keydown_space_0_listener($event) { const kit_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); $event.target === $event.currentTarget && $event.preventDefault(); return i0.ɵɵresetView($event.target === $event.currentTarget && ctx_r1.OpenBrandKit(kit_r6)); });
+    i0.ɵɵelementStart(1, "div", 28);
+    i0.ɵɵconditionalCreate(2, VideoStudioBrandKitsResourceComponent_Conditional_19_For_3_Conditional_2_Template, 2, 0)(3, VideoStudioBrandKitsResourceComponent_Conditional_19_For_3_Conditional_3_Template, 3, 0, "div", 29);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 30)(5, "div", 31)(6, "div", 32)(7, "div", 33);
+    i0.ɵɵconditionalCreate(8, VideoStudioBrandKitsResourceComponent_Conditional_19_For_3_Conditional_8_Template, 1, 2, "img", 34)(9, VideoStudioBrandKitsResourceComponent_Conditional_19_For_3_Conditional_9_Template, 1, 0, "i", 35);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "h3", 36);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(12, VideoStudioBrandKitsResourceComponent_Conditional_19_For_3_Conditional_12_Template, 2, 0, "mj-video-badge", 37);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "mj-video-badge", 38);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(15, "div", 39)(16, "span", 40);
+    i0.ɵɵelement(17, "i", 41);
+    i0.ɵɵelementStart(18, "span");
+    i0.ɵɵtext(19);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(20, "button", 42);
+    i0.ɵɵlistener("click", function VideoStudioBrandKitsResourceComponent_Conditional_19_For_3_Template_button_click_20_listener($event) { const kit_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.DeleteBrandKit(kit_r6, $event)); })("keydown.enter", function VideoStudioBrandKitsResourceComponent_Conditional_19_For_3_Template_button_keydown_enter_20_listener($event) { return $event.stopPropagation(); })("keydown.space", function VideoStudioBrandKitsResourceComponent_Conditional_19_For_3_Template_button_keydown_space_20_listener($event) { return $event.stopPropagation(); });
+    i0.ɵɵelement(21, "i", 43);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const kit_r6 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵattribute("data-testid", "brand-kit-card-" + kit_r6.ID);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(kit_r6.Swatches.length > 0 ? 2 : 3);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(kit_r6.PrimaryLogoUrl ? 8 : 9);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("title", kit_r6.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", kit_r6.Name, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(kit_r6.IsDefault ? 12 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Variant", ctx_r1.StatusBadgeVariant(kit_r6.Status));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", kit_r6.Status, " ");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(kit_r6.CompanyName || "Workspace default");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("AriaLabel", "Delete " + kit_r6.Name)("disabled", ctx_r1.DeletingKitId === kit_r6.ID);
+    i0.ɵɵattribute("data-testid", "brand-kit-delete-" + kit_r6.ID);
+} }
+function VideoStudioBrandKitsResourceComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, VideoStudioBrandKitsResourceComponent_Conditional_19_Conditional_0_Template, 4, 1, "div", 23);
+    i0.ɵɵelementStart(1, "div", 24);
+    i0.ɵɵrepeaterCreate(2, VideoStudioBrandKitsResourceComponent_Conditional_19_For_3_Template, 22, 12, "article", 25, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r1.DeleteError ? 0 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.FilteredBrandKits);
+} }
+function VideoStudioBrandKitsResourceComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-dialog", 46);
+    i0.ɵɵlistener("Close", function VideoStudioBrandKitsResourceComponent_Conditional_20_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseBrandKitCreator()); });
+    i0.ɵɵelementStart(1, "mj-brand-kit-creator", 47);
+    i0.ɵɵlistener("Saved", function VideoStudioBrandKitsResourceComponent_Conditional_20_Template_mj_brand_kit_creator_Saved_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnBrandKitCreatorSaved($event)); })("Cancelled", function VideoStudioBrandKitsResourceComponent_Conditional_20_Template_mj_brand_kit_creator_Cancelled_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseBrandKitCreator()); })("OpenMoreSettings", function VideoStudioBrandKitsResourceComponent_Conditional_20_Template_mj_brand_kit_creator_OpenMoreSettings_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnBrandKitCreatorOpenMoreSettings($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Visible", true);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Provider", ctx_r1.ProviderToUse);
+} }
+/**
+ * Brand Kits resource tab for the Video Studio application.
+ *
+ * Displays all `MJ: Brand Kits` from `BrandKitEngine` as cards showing the kit
+ * name, primary logo thumbnail, company scope (or "Workspace default"), default
+ * star indicator, status badge, color palette swatch strip (`kit.StyleObject.Palette`),
+ * and asset count (`engine.GetAssets(kit.ID).length`).
+ */
+let VideoStudioBrandKitsResourceComponent = class VideoStudioBrandKitsResourceComponent extends BaseResourceComponent {
+    IsLoading = false;
+    LoadError = null;
+    DeleteError = null;
+    DeletingKitId = null;
+    IsBrandKitCreatorOpen = false;
+    AllBrandKits = [];
+    FilteredBrandKits = [];
+    SelectedBrandKit = null;
+    SearchText = '';
+    StatusFilter = 'all';
+    CompanyFilter = 'all';
+    FilterFields = [];
+    FilterValues = {
+        status: null,
+        companyId: null,
+    };
+    PageContext = this.buildBrandKitsContext();
+    PageTools = this.buildBrandKitsClientTools();
+    kitsById = new Map();
+    cdr = inject(ChangeDetectorRef);
+    confirmService = inject(MJConfirmService);
+    get CurrentUser() {
+        return this.ProviderToUse?.CurrentUser ?? null;
+    }
+    get EnvironmentId() {
+        return (this.Data?.Configuration?.['environmentId'] ||
+            MJEnvironmentEntityExtended.DefaultEnvironmentID);
+    }
+    get ApplicationId() {
+        return this.Data?.Configuration?.['applicationId'] ?? '';
+    }
+    async ngOnInit() {
+        super.ngOnInit();
+        await this.LoadBrandKits(false);
+        this.NotifyLoadComplete();
+    }
+    async GetResourceDisplayName(_data) {
+        return 'Brand Kits';
+    }
+    async GetResourceIconClass(_data) {
+        return 'fa-solid fa-palette';
+    }
+    get TotalCount() {
+        return this.AllBrandKits.length;
+    }
+    get FilteredCount() {
+        return this.FilteredBrandKits.length;
+    }
+    get ActivePopoverFilterCount() {
+        let count = 0;
+        if (this.StatusFilter && this.StatusFilter !== 'all') {
+            count++;
+        }
+        if (this.CompanyFilter && this.CompanyFilter !== 'all') {
+            count++;
+        }
+        return count;
+    }
+    async Refresh() {
+        await this.LoadBrandKits(true);
+    }
+    async LoadBrandKits(forceRefresh = false) {
+        this.IsLoading = true;
+        this.LoadError = null;
+        this.DeleteError = null;
+        this.cdr.markForCheck();
+        try {
+            const engine = BrandKitEngine.GetProviderInstance(this.ProviderToUse, BrandKitEngine);
+            await engine.Config(forceRefresh, undefined, this.ProviderToUse);
+            const kits = engine.BrandKits;
+            this.kitsById.clear();
+            for (const kit of kits) {
+                this.kitsById.set(kit.ID, kit);
+            }
+            this.AllBrandKits = kits.map((kit) => this.mapKitToCard(kit, engine));
+            this.rebuildFilterFieldOptions();
+            this.applyFiltersAndSync();
+            await this.mintLogoUrls(this.AllBrandKits);
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            LogError(msg);
+            this.LoadError = msg;
+        }
+        finally {
+            this.IsLoading = false;
+            this.syncAgentContext();
+            this.cdr.markForCheck();
+        }
+    }
+    OnSearchChange(value) {
+        this.SearchText = value;
+        this.applyFiltersAndSync();
+    }
+    OnFilterValuesChange(values) {
+        this.FilterValues = { ...values };
+        const rawStatus = typeof values['status'] === 'string' ? values['status'] : '';
+        this.StatusFilter = BRAND_KIT_STATUS_FILTERS.includes(rawStatus)
+            ? rawStatus
+            : 'all';
+        const rawCompany = typeof values['companyId'] === 'string' ? values['companyId'] : '';
+        this.CompanyFilter = rawCompany.trim() ? rawCompany.trim() : 'all';
+        this.applyFiltersAndSync();
+    }
+    ClearAllFilters() {
+        this.StatusFilter = 'all';
+        this.CompanyFilter = 'all';
+        this.FilterValues = {
+            status: null,
+            companyId: null,
+        };
+        this.applyFiltersAndSync();
+    }
+    ResetFiltersAndSearch() {
+        this.ClearAllFilters();
+        this.OnSearchChange('');
+    }
+    StatusBadgeVariant(status) {
+        return GetVideoStatusBadgeVariant(status);
+    }
+    CreateNewBrandKit() {
+        this.IsBrandKitCreatorOpen = true;
+        this.cdr.markForCheck();
+    }
+    CloseBrandKitCreator() {
+        this.IsBrandKitCreatorOpen = false;
+        this.cdr.markForCheck();
+    }
+    async OnBrandKitCreatorSaved(newBrandKitId) {
+        await this.LoadBrandKits(true);
+        const created = this.AllBrandKits.find((k) => UUIDsEqual(k.ID, newBrandKitId));
+        if (created) {
+            this.SelectedBrandKit = created;
+            this.syncAgentContext();
+        }
+        this.cdr.markForCheck();
+    }
+    OnBrandKitCreatorOpenMoreSettings(brandKitId) {
+        this.IsBrandKitCreatorOpen = false;
+        this.navigationService.OpenEntityRecord('MJ: Brand Kits', CompositeKey.FromID(brandKitId));
+        this.cdr.markForCheck();
+    }
+    OpenBrandKit(item) {
+        this.SelectedBrandKit = item;
+        this.syncAgentContext();
+        this.navigationService.OpenEntityRecord('MJ: Brand Kits', CompositeKey.FromID(item.ID));
+        this.cdr.markForCheck();
+    }
+    async DeleteBrandKit(card, event) {
+        event?.stopPropagation();
+        const kit = this.kitsById.get(card.ID);
+        if (!kit || this.DeletingKitId) {
+            return;
+        }
+        const confirmed = await this.confirmService.ConfirmDelete({
+            title: 'Delete brand kit',
+            message: `Delete "${card.Name}" and its ${card.AssetCount} asset(s)?`,
+        });
+        if (!confirmed) {
+            return;
+        }
+        this.DeletingKitId = card.ID;
+        this.DeleteError = null;
+        this.cdr.markForCheck();
+        try {
+            const result = await DeleteBrandKitWithAssets(kit, this.ProviderToUse);
+            if (!result.Success) {
+                this.DeleteError = result.ErrorMessage || 'Failed to delete brand kit.';
+                return;
+            }
+            await this.LoadBrandKits(true);
+        }
+        finally {
+            this.DeletingKitId = null;
+            this.cdr.markForCheck();
+        }
+    }
+    // ============================================================================
+    // AI Agent Client Tools
+    //
+    // SAFETY BOUNDARY: The Brand Kits surface exposes ONLY read, search, filter,
+    // open-for-viewing, and refresh tools to the AI agent. No create, edit, copy,
+    // share, or delete tools are exposed.
+    // ============================================================================
+    buildBrandKitsClientTools() {
+        // SAFETY BOUNDARY: Read-only navigation, search, filter, open-record, and refresh tools only.
+        return [
+            {
+                Name: 'SearchBrandKits',
+                Description: 'Search brand kits by name, description, company scope, or status. Read-only filter operation.',
+                ParameterSchema: {
+                    type: 'object',
+                    properties: { query: { type: 'string' } },
+                    required: ['query'],
+                },
+                Handler: async (params) => {
+                    // SAFETY BOUNDARY: Only updates local search filter state.
+                    const query = typeof params?.['query'] === 'string' ? params['query'] : '';
+                    this.OnSearchChange(query);
+                    return { Success: true };
+                },
+            },
+            {
+                Name: 'FilterBrandKits',
+                Description: 'Filter brand kits by companyId ("all", "org-wide", or a specific Company ID) and/or status ("all", "Active", "Inactive"). Read-only filter operation.',
+                ParameterSchema: {
+                    type: 'object',
+                    properties: {
+                        companyId: { type: 'string' },
+                        status: { type: 'string', enum: ['all', 'Active', 'Inactive'] },
+                    },
+                },
+                Handler: async (params) => {
+                    // SAFETY BOUNDARY: Only updates local filter state; never modifies records.
+                    if (typeof params?.['status'] === 'string') {
+                        const rawStatus = params['status'];
+                        this.StatusFilter = BRAND_KIT_STATUS_FILTERS.includes(rawStatus)
+                            ? rawStatus
+                            : 'all';
+                        this.FilterValues['status'] = this.StatusFilter === 'all' ? null : this.StatusFilter;
+                    }
+                    if (typeof params?.['companyId'] === 'string') {
+                        this.CompanyFilter = params['companyId'].trim() || 'all';
+                        this.FilterValues['companyId'] =
+                            this.CompanyFilter === 'all' ? null : this.CompanyFilter;
+                    }
+                    this.applyFiltersAndSync();
+                    return { Success: true };
+                },
+            },
+            {
+                Name: 'ClearBrandKitFilters',
+                Description: 'Reset all search and popover filters on the Brand Kits surface.',
+                ParameterSchema: { type: 'object', properties: {} },
+                Handler: async () => {
+                    // SAFETY BOUNDARY: Read-only filter reset.
+                    this.SearchText = '';
+                    this.ClearAllFilters();
+                    return { Success: true };
+                },
+            },
+            {
+                Name: 'OpenBrandKit',
+                Description: 'Open an existing Brand Kit record for viewing by its ID or Name. Does NOT create or mutate any record.',
+                ParameterSchema: {
+                    type: 'object',
+                    properties: { brandKit: { type: 'string' } },
+                    required: ['brandKit'],
+                },
+                Handler: async (params) => {
+                    // SAFETY BOUNDARY: Opens the entity record for viewing via NavigationService; no writes.
+                    const resolved = ResolveVideoStudioItem(params?.['brandKit'], this.AllBrandKits, 'brand kit');
+                    if (!resolved.Ok) {
+                        return { Success: false, ErrorMessage: resolved.Error };
+                    }
+                    this.OpenBrandKit(resolved.Item);
+                    return { Success: true };
+                },
+            },
+            {
+                Name: 'RefreshBrandKits',
+                Description: 'Reload Brand Kits from the server. Read-only operation.',
+                ParameterSchema: { type: 'object', properties: {} },
+                Handler: async () => {
+                    // SAFETY BOUNDARY: Read-only data reload.
+                    await this.Refresh();
+                    return { Success: true };
+                },
+            },
+        ];
+    }
+    mapKitToCard(kit, engine) {
+        return MapBrandKitToCard(kit, engine.GetAssets(kit.ID));
+    }
+    async mintLogoUrls(cards) {
+        if (!(this.ProviderToUse instanceof GraphQLDataProvider)) {
+            return;
+        }
+        const client = new GraphQLFileStorageClient(this.ProviderToUse);
+        const cardsWithLogos = cards.filter((c) => Boolean(c.PrimaryLogoFileID));
+        if (cardsWithLogos.length === 0) {
+            return;
+        }
+        await Promise.all(cardsWithLogos.map(async (card) => {
+            if (!card.PrimaryLogoFileID) {
+                return;
+            }
+            try {
+                const token = await client.CreateMediaAccessToken(card.PrimaryLogoFileID);
+                if (token.Success && token.Url) {
+                    card.PrimaryLogoUrl = token.Url;
+                }
+            }
+            catch (err) {
+                // Non-fatal: card renders fallback icon when logo token minting fails.
+                LogError(err instanceof Error ? err.message : String(err));
+            }
+        }));
+        this.cdr.markForCheck();
+    }
+    rebuildFilterFieldOptions() {
+        const companies = new Map();
+        for (const item of this.AllBrandKits) {
+            if (item.CompanyID) {
+                companies.set(item.CompanyID, item.CompanyName || item.CompanyID);
+            }
+        }
+        this.FilterFields = [
+            {
+                key: 'status',
+                label: 'Status',
+                type: 'dropdown',
+                options: [
+                    { value: 'Active', text: 'Active' },
+                    { value: 'Inactive', text: 'Inactive' },
+                ],
+            },
+            {
+                key: 'companyId',
+                label: 'Company scope',
+                type: 'dropdown',
+                options: [
+                    { value: 'org-wide', text: 'Workspace default' },
+                    ...Array.from(companies.entries())
+                        .sort((a, b) => a[1].localeCompare(b[1]))
+                        .map(([value, text]) => ({ value, text })),
+                ],
+            },
+        ];
+    }
+    currentFilterState() {
+        return {
+            SearchQuery: this.SearchText,
+            Status: this.StatusFilter,
+            CompanyID: this.CompanyFilter,
+        };
+    }
+    applyFiltersAndSync() {
+        this.FilteredBrandKits = FilterBrandKitCards(this.AllBrandKits, this.currentFilterState());
+        this.syncAgentContext();
+        this.cdr.markForCheck();
+    }
+    buildBrandKitsContext() {
+        const availableCompanies = Array.from(new Set(this.AllBrandKits.map((k) => k.CompanyName ?? '').filter((c) => Boolean(c))));
+        const matchingCompany = this.AllBrandKits.find((k) => k.CompanyID && UUIDsEqual(k.CompanyID, this.CompanyFilter));
+        return BuildBrandKitsAgentContext({
+            AllCards: this.AllBrandKits,
+            FilteredCards: this.FilteredBrandKits,
+            Filters: this.currentFilterState(),
+            CompanyFilterName: this.CompanyFilter === 'org-wide'
+                ? 'Org-wide'
+                : (matchingCompany?.CompanyName ?? null),
+            AvailableCompanyNames: availableCompanies,
+            IsLoading: this.IsLoading,
+        });
+    }
+    syncAgentContext() {
+        this.PageContext = this.buildBrandKitsContext();
+        this.navigationService.SetAgentContext(this, this.PageContext);
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵVideoStudioBrandKitsResourceComponent_BaseFactory; return function VideoStudioBrandKitsResourceComponent_Factory(__ngFactoryType__) { return (ɵVideoStudioBrandKitsResourceComponent_BaseFactory || (ɵVideoStudioBrandKitsResourceComponent_BaseFactory = i0.ɵɵgetInheritedFactory(VideoStudioBrandKitsResourceComponent)))(__ngFactoryType__ || VideoStudioBrandKitsResourceComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VideoStudioBrandKitsResourceComponent, selectors: [["mj-video-studio-brand-kits-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 22, vars: 20, consts: [[1, "vs-resource-shell"], [1, "vs-resource-shell__page"], ["Title", "Brand Kits", "Icon", "fa-solid fa-palette", "Subtitle", "Configure palettes, typography, logos, soundtracks, and generation policies for video productions"], ["meta", ""], ["Label", "Brand kits", 3, "Count", "Total"], ["actions", ""], [3, "Clicked", "Loading"], ["type", "button", "mjButton", "", "Variant", "primary", "data-testid", "new-brand-kit-button", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-plus"], ["toolbar", ""], ["Placeholder", "Search brand kits by name, description, or company...", 3, "ValueChange", "Value"], ["Label", "Filters", "Icon", "fa-solid fa-filter", 3, "ClearAllRequested", "ActiveCount", "ShowClearAll"], [3, "ValuesChange", "Fields", "Values", "ShowReset"], ["data-testid", "brand-kits-loading", 1, "vs-loading-state"], ["role", "alert", "data-testid", "brand-kits-error", "Icon", "fa-solid fa-triangle-exclamation", "Variant", "error", "Title", "Unable to load brand kits", "ActionText", "Try again", "ActionIcon", "fa-solid fa-rotate", 3, "Message"], ["Title", "New brand kit", "Size", "lg", 3, "Visible"], [3, "Provider", "CurrentUser", "EnvironmentId", "ApplicationId", "PageSource", "PageContext", "PageTools", "FallbackBrandKitId", "HeaderTitle"], ["Text", "Loading brand kits...", "Size", "medium"], ["role", "alert", "data-testid", "brand-kits-error", "Icon", "fa-solid fa-triangle-exclamation", "Variant", "error", "Title", "Unable to load brand kits", "ActionText", "Try again", "ActionIcon", "fa-solid fa-rotate", 3, "ActionClicked", "Message"], ["data-testid", "brand-kits-empty", "Icon", "fa-solid fa-palette", "Variant", "empty", "Title", "No brand kits defined yet", "Message", "Create a brand kit to establish your palette, typography, logos, and generation policies.", "ActionText", "New brand kit", "ActionIcon", "fa-solid fa-plus"], ["data-testid", "brand-kits-empty", "Icon", "fa-solid fa-palette", "Variant", "no-results", "Title", "No brand kits match your filters", "Message", "Try clearing your search query or adjusting the active filter selections.", "ActionText", "Reset filters", "ActionIcon", "fa-solid fa-filter-circle-xmark"], ["data-testid", "brand-kits-empty", "Icon", "fa-solid fa-palette", "Variant", "empty", "Title", "No brand kits defined yet", "Message", "Create a brand kit to establish your palette, typography, logos, and generation policies.", "ActionText", "New brand kit", "ActionIcon", "fa-solid fa-plus", 3, "ActionClicked"], ["data-testid", "brand-kits-empty", "Icon", "fa-solid fa-palette", "Variant", "no-results", "Title", "No brand kits match your filters", "Message", "Try clearing your search query or adjusting the active filter selections.", "ActionText", "Reset filters", "ActionIcon", "fa-solid fa-filter-circle-xmark", 3, "ActionClicked"], ["role", "alert", "data-testid", "brand-kits-delete-error", 1, "vs-delete-error-banner"], ["data-testid", "brand-kits-grid", 1, "vs-brand-kits-grid"], ["tabindex", "0", "role", "button", 1, "vs-brand-kit-card"], ["aria-hidden", "true", 1, "fa-solid", "fa-circle-exclamation"], ["tabindex", "0", "role", "button", 1, "vs-brand-kit-card", 3, "click", "keydown.enter", "keydown.space"], ["data-testid", "brand-kit-palette-strip", 1, "vs-palette-strip"], [1, "vs-palette-empty"], [1, "vs-brand-kit-body"], [1, "vs-brand-kit-header"], [1, "vs-brand-kit-title-group"], ["data-testid", "brand-kit-logo-thumb", 1, "vs-brand-kit-logo-thumb"], ["loading", "lazy", 1, "vs-brand-kit-logo-img", 3, "src", "alt"], ["aria-hidden", "true", 1, "fa-solid", "fa-palette"], [1, "vs-brand-kit-title", 3, "title"], ["Variant", "neutral", "Icon", "fa-solid fa-star", "title", "Default brand kit", "data-testid", "brand-kit-default-star"], ["data-testid", "brand-kit-status-badge", 3, "Variant"], [1, "vs-brand-kit-footer"], ["data-testid", "brand-kit-company-badge", 1, "vs-brand-kit-meta-item"], ["aria-hidden", "true", 1, "fa-solid", "fa-building"], ["type", "button", "mjButton", "", "Variant", "icon", "Size", "sm", 3, "click", "keydown.enter", "keydown.space", "AriaLabel", "disabled"], ["aria-hidden", "true", 1, "fa-regular", "fa-trash-can"], [1, "vs-palette-swatch", 3, "background-color", "title"], [1, "vs-palette-swatch", 3, "title"], ["Title", "New brand kit", "Size", "lg", 3, "Close", "Visible"], [3, "Saved", "Cancelled", "OpenMoreSettings", "Provider"]], template: function VideoStudioBrandKitsResourceComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "mj-page-layout", 1)(2, "mj-page-header", 2)(3, "div", 3);
+            i0.ɵɵelement(4, "mj-stat-badge", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "div", 5)(6, "mj-refresh-button", 6);
+            i0.ɵɵlistener("Clicked", function VideoStudioBrandKitsResourceComponent_Template_mj_refresh_button_Clicked_6_listener() { return ctx.Refresh(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(7, "button", 7);
+            i0.ɵɵlistener("click", function VideoStudioBrandKitsResourceComponent_Template_button_click_7_listener() { return ctx.CreateNewBrandKit(); });
+            i0.ɵɵelement(8, "i", 8);
+            i0.ɵɵelementStart(9, "span");
+            i0.ɵɵtext(10, "New brand kit");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(11, "div", 9)(12, "mj-page-search", 10);
+            i0.ɵɵlistener("ValueChange", function VideoStudioBrandKitsResourceComponent_Template_mj_page_search_ValueChange_12_listener($event) { return ctx.OnSearchChange($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(13, "mj-filter-popover", 11);
+            i0.ɵɵlistener("ClearAllRequested", function VideoStudioBrandKitsResourceComponent_Template_mj_filter_popover_ClearAllRequested_13_listener() { return ctx.ClearAllFilters(); });
+            i0.ɵɵelementStart(14, "mj-filter-panel", 12);
+            i0.ɵɵlistener("ValuesChange", function VideoStudioBrandKitsResourceComponent_Template_mj_filter_panel_ValuesChange_14_listener($event) { return ctx.OnFilterValuesChange($event); });
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(15, "mj-page-body");
+            i0.ɵɵconditionalCreate(16, VideoStudioBrandKitsResourceComponent_Conditional_16_Template, 2, 0, "div", 13)(17, VideoStudioBrandKitsResourceComponent_Conditional_17_Template, 1, 1, "mj-empty-state", 14)(18, VideoStudioBrandKitsResourceComponent_Conditional_18_Template, 2, 1)(19, VideoStudioBrandKitsResourceComponent_Conditional_19_Template, 4, 1);
+            i0.ɵɵconditionalCreate(20, VideoStudioBrandKitsResourceComponent_Conditional_20_Template, 2, 2, "mj-dialog", 15);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(21, "vs-studio-slide-in", 16);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("Count", ctx.FilteredCount)("Total", ctx.TotalCount);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("Loading", ctx.IsLoading);
+            i0.ɵɵadvance(6);
+            i0.ɵɵproperty("Value", ctx.SearchText);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ActiveCount", ctx.ActivePopoverFilterCount)("ShowClearAll", ctx.ActivePopoverFilterCount > 0);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Fields", ctx.FilterFields)("Values", ctx.FilterValues)("ShowReset", false);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.IsLoading && ctx.AllBrandKits.length === 0 ? 16 : ctx.LoadError ? 17 : ctx.FilteredBrandKits.length === 0 ? 18 : 19);
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.IsBrandKitCreatorOpen ? 20 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Provider", ctx.ProviderToUse)("CurrentUser", ctx.CurrentUser)("EnvironmentId", ctx.EnvironmentId)("ApplicationId", ctx.ApplicationId)("PageSource", ctx)("PageContext", ctx.PageContext)("PageTools", ctx.PageTools)("FallbackBrandKitId", (ctx.SelectedBrandKit == null ? null : ctx.SelectedBrandKit.ID) ?? null)("HeaderTitle", "Video Studio");
+        } }, dependencies: [i1.LoadingComponent, i2.MJVideoBadgeComponent, i3.BrandKitCreatorComponent, i4.VSStudioSlideInComponent, i5.MJButtonDirective, i5.MJDialogComponent, i5.MJEmptyStateComponent, i5.MJPageLayoutComponent, i5.MJPageHeaderComponent, i5.MJPageBodyComponent, i5.MJPageSearchComponent, i5.MJFilterPopoverComponent, i5.MJFilterPanelComponent, i5.MJRefreshButtonComponent, i5.MJStatBadgeComponent], styles: ["[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n.vs-loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 320px;\n  padding: var(--mj-space-8);\n  text-align: center;\n  background: var(--mj-bg-surface-card);\n  border: 1px dashed var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n}\n\n.vs-delete-error-banner[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin-bottom: var(--mj-space-3-5);\n  padding: var(--mj-space-2-5) var(--mj-space-3-5);\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n  border: 1px solid var(--mj-status-error-border);\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-sm);\n}\n\n.vs-brand-kits-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: var(--mj-space-4);\n  align-content: start;\n}\n\n.vs-brand-kit-card[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  overflow: hidden;\n  cursor: pointer;\n  transition: var(--mj-transition-fast);\n}\n\n.vs-brand-kit-card[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  border-color: var(--mj-border-strong);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.vs-brand-kit-card[_ngcontent-%COMP%]:focus-visible {\n  outline: none;\n  box-shadow: var(--mj-focus-ring);\n}\n\n.vs-palette-strip[_ngcontent-%COMP%] {\n  display: flex;\n  height: var(--mj-space-11);\n  width: 100%;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.vs-palette-swatch[_ngcontent-%COMP%] {\n  flex: 1 1 0;\n  height: 100%;\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n  transition: var(--mj-transition-fast);\n}\n\n.vs-palette-swatch[_ngcontent-%COMP%]:hover {\n  flex-grow: 1.4;\n}\n\n.vs-palette-empty[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n.vs-brand-kit-body[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-2-5);\n  padding: var(--mj-space-4);\n  flex: 1;\n}\n\n.vs-brand-kit-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--mj-space-2-5);\n}\n\n.vs-brand-kit-title-group[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  min-width: 0;\n}\n\n.vs-brand-kit-logo-thumb[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--mj-space-7);\n  height: var(--mj-space-7);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.vs-brand-kit-logo-img[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n.vs-brand-kit-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.vs-brand-kit-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mj-space-2);\n  margin-top: auto;\n  padding-top: var(--mj-space-2);\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.vs-brand-kit-meta-item[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-1-5);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n}\n\n.vs-resource-shell[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.vs-resource-shell__page[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .vs-brand-kit-card[_ngcontent-%COMP%], \n   .vs-palette-swatch[_ngcontent-%COMP%] {\n    transition: none;\n  }\n}"], changeDetection: 0 });
+};
+VideoStudioBrandKitsResourceComponent = __decorate([
+    RegisterClass(BaseResourceComponent, 'VideoStudioBrandKitsResource')
+], VideoStudioBrandKitsResourceComponent);
+export { VideoStudioBrandKitsResourceComponent };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VideoStudioBrandKitsResourceComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-video-studio-brand-kits-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"vs-resource-shell\">\n  <mj-page-layout class=\"vs-resource-shell__page\">\n    <mj-page-header\n      Title=\"Brand Kits\"\n      Icon=\"fa-solid fa-palette\"\n      Subtitle=\"Configure palettes, typography, logos, soundtracks, and generation policies for video productions\"\n    >\n    <div meta>\n      <mj-stat-badge\n        [Count]=\"FilteredCount\"\n        [Total]=\"TotalCount\"\n        Label=\"Brand kits\"\n      />\n    </div>\n\n    <div actions>\n      <mj-refresh-button\n        [Loading]=\"IsLoading\"\n        (Clicked)=\"Refresh()\"\n      />\n      <button\n        type=\"button\"\n        mjButton\n        Variant=\"primary\"\n        data-testid=\"new-brand-kit-button\"\n        (click)=\"CreateNewBrandKit()\"\n      >\n        <i class=\"fa-solid fa-plus\" aria-hidden=\"true\"></i>\n        <span>New brand kit</span>\n      </button>\n    </div>\n\n    <div toolbar>\n      <mj-page-search\n        Placeholder=\"Search brand kits by name, description, or company...\"\n        [Value]=\"SearchText\"\n        (ValueChange)=\"OnSearchChange($event)\"\n      />\n      <mj-filter-popover\n        Label=\"Filters\"\n        Icon=\"fa-solid fa-filter\"\n        [ActiveCount]=\"ActivePopoverFilterCount\"\n        [ShowClearAll]=\"ActivePopoverFilterCount > 0\"\n        (ClearAllRequested)=\"ClearAllFilters()\"\n      >\n        <mj-filter-panel\n          [Fields]=\"FilterFields\"\n          [Values]=\"FilterValues\"\n          [ShowReset]=\"false\"\n          (ValuesChange)=\"OnFilterValuesChange($event)\"\n        />\n      </mj-filter-popover>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body>\n    @if (IsLoading && AllBrandKits.length === 0) {\n      <div class=\"vs-loading-state\" data-testid=\"brand-kits-loading\">\n        <mj-loading Text=\"Loading brand kits...\" Size=\"medium\" />\n      </div>\n    } @else if (LoadError) {\n      <mj-empty-state\n        role=\"alert\"\n        data-testid=\"brand-kits-error\"\n        Icon=\"fa-solid fa-triangle-exclamation\"\n        Variant=\"error\"\n        Title=\"Unable to load brand kits\"\n        [Message]=\"LoadError\"\n        ActionText=\"Try again\"\n        ActionIcon=\"fa-solid fa-rotate\"\n        (ActionClicked)=\"Refresh()\"\n      ></mj-empty-state>\n    } @else if (FilteredBrandKits.length === 0) {\n      @if (AllBrandKits.length === 0) {\n        <mj-empty-state\n          data-testid=\"brand-kits-empty\"\n          Icon=\"fa-solid fa-palette\"\n          Variant=\"empty\"\n          Title=\"No brand kits defined yet\"\n          Message=\"Create a brand kit to establish your palette, typography, logos, and generation policies.\"\n          ActionText=\"New brand kit\"\n          ActionIcon=\"fa-solid fa-plus\"\n          (ActionClicked)=\"CreateNewBrandKit()\"\n        ></mj-empty-state>\n      } @else {\n        <mj-empty-state\n          data-testid=\"brand-kits-empty\"\n          Icon=\"fa-solid fa-palette\"\n          Variant=\"no-results\"\n          Title=\"No brand kits match your filters\"\n          Message=\"Try clearing your search query or adjusting the active filter selections.\"\n          ActionText=\"Reset filters\"\n          ActionIcon=\"fa-solid fa-filter-circle-xmark\"\n          (ActionClicked)=\"ResetFiltersAndSearch()\"\n        ></mj-empty-state>\n      }\n    } @else {\n      @if (DeleteError) {\n        <div class=\"vs-delete-error-banner\" role=\"alert\" data-testid=\"brand-kits-delete-error\">\n          <i class=\"fa-solid fa-circle-exclamation\" aria-hidden=\"true\"></i>\n          <span>{{ DeleteError }}</span>\n        </div>\n      }\n      <div class=\"vs-brand-kits-grid\" data-testid=\"brand-kits-grid\">\n        @for (kit of FilteredBrandKits; track kit.ID) {\n          <article\n            class=\"vs-brand-kit-card\"\n            [attr.data-testid]=\"'brand-kit-card-' + kit.ID\"\n            tabindex=\"0\"\n            role=\"button\"\n            (click)=\"OpenBrandKit(kit)\"\n            (keydown.enter)=\"$event.target === $event.currentTarget && OpenBrandKit(kit)\"\n            (keydown.space)=\"$event.target === $event.currentTarget && $event.preventDefault(); $event.target === $event.currentTarget && OpenBrandKit(kit)\"\n          >\n            <div class=\"vs-palette-strip\" data-testid=\"brand-kit-palette-strip\">\n              @if (kit.Swatches.length > 0) {\n                @for (swatch of kit.Swatches; track swatch.Name + swatch.Value) {\n                  <div\n                    class=\"vs-palette-swatch\"\n                    [style.background-color]=\"swatch.Value\"\n                    [title]=\"swatch.Name + ' (' + swatch.Value + ')'\"\n                  ></div>\n                }\n              } @else {\n                <div class=\"vs-palette-empty\">\n                  <span>No palette swatches configured</span>\n                </div>\n              }\n            </div>\n\n            <div class=\"vs-brand-kit-body\">\n              <div class=\"vs-brand-kit-header\">\n                <div class=\"vs-brand-kit-title-group\">\n                  <div class=\"vs-brand-kit-logo-thumb\" data-testid=\"brand-kit-logo-thumb\">\n                    @if (kit.PrimaryLogoUrl) {\n                      <img\n                        class=\"vs-brand-kit-logo-img\"\n                        [src]=\"kit.PrimaryLogoUrl\"\n                        [alt]=\"kit.Name + ' logo'\"\n                        loading=\"lazy\"\n                      />\n                    } @else {\n                      <i class=\"fa-solid fa-palette\" aria-hidden=\"true\"></i>\n                    }\n                  </div>\n                  <h3 class=\"vs-brand-kit-title\" [title]=\"kit.Name\">\n                    {{ kit.Name }}\n                  </h3>\n                  @if (kit.IsDefault) {\n                    <mj-video-badge\n                      Variant=\"neutral\"\n                      Icon=\"fa-solid fa-star\"\n                      title=\"Default brand kit\"\n                      data-testid=\"brand-kit-default-star\"\n                    >\n                      Default\n                    </mj-video-badge>\n                  }\n                </div>\n\n                <mj-video-badge\n                  [Variant]=\"StatusBadgeVariant(kit.Status)\"\n                  data-testid=\"brand-kit-status-badge\"\n                >\n                  {{ kit.Status }}\n                </mj-video-badge>\n              </div>\n\n              <div class=\"vs-brand-kit-footer\">\n                <span class=\"vs-brand-kit-meta-item\" data-testid=\"brand-kit-company-badge\">\n                  <i class=\"fa-solid fa-building\" aria-hidden=\"true\"></i>\n                  <span>{{ kit.CompanyName || 'Workspace default' }}</span>\n                </span>\n\n                <button\n                  type=\"button\"\n                  mjButton\n                  Variant=\"icon\"\n                  Size=\"sm\"\n                  [AriaLabel]=\"'Delete ' + kit.Name\"\n                  [attr.data-testid]=\"'brand-kit-delete-' + kit.ID\"\n                  [disabled]=\"DeletingKitId === kit.ID\"\n                  (click)=\"DeleteBrandKit(kit, $event)\"\n                  (keydown.enter)=\"$event.stopPropagation()\"\n                  (keydown.space)=\"$event.stopPropagation()\"\n                >\n                  <i class=\"fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\n                </button>\n              </div>\n            </div>\n          </article>\n        }\n      </div>\n    }\n\n    @if (IsBrandKitCreatorOpen) {\n      <mj-dialog\n        [Visible]=\"true\"\n        Title=\"New brand kit\"\n        Size=\"lg\"\n        (Close)=\"CloseBrandKitCreator()\"\n      >\n        <mj-brand-kit-creator\n          [Provider]=\"ProviderToUse\"\n          (Saved)=\"OnBrandKitCreatorSaved($event)\"\n          (Cancelled)=\"CloseBrandKitCreator()\"\n          (OpenMoreSettings)=\"OnBrandKitCreatorOpenMoreSettings($event)\"\n        ></mj-brand-kit-creator>\n      </mj-dialog>\n    }\n  </mj-page-body>\n  </mj-page-layout>\n\n  <vs-studio-slide-in\n    [Provider]=\"ProviderToUse\"\n    [CurrentUser]=\"CurrentUser\"\n    [EnvironmentId]=\"EnvironmentId\"\n    [ApplicationId]=\"ApplicationId\"\n    [PageSource]=\"this\"\n    [PageContext]=\"PageContext\"\n    [PageTools]=\"PageTools\"\n    [FallbackBrandKitId]=\"SelectedBrandKit?.ID ?? null\"\n    [HeaderTitle]=\"'Video Studio'\"\n  ></vs-studio-slide-in>\n</div>\n", styles: [":host {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n.vs-loading-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 320px;\n  padding: var(--mj-space-8);\n  text-align: center;\n  background: var(--mj-bg-surface-card);\n  border: 1px dashed var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n}\n\n.vs-delete-error-banner {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin-bottom: var(--mj-space-3-5);\n  padding: var(--mj-space-2-5) var(--mj-space-3-5);\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error-text);\n  border: 1px solid var(--mj-status-error-border);\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-sm);\n}\n\n.vs-brand-kits-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: var(--mj-space-4);\n  align-content: start;\n}\n\n.vs-brand-kit-card {\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  overflow: hidden;\n  cursor: pointer;\n  transition: var(--mj-transition-fast);\n}\n\n.vs-brand-kit-card:hover {\n  transform: translateY(-2px);\n  border-color: var(--mj-border-strong);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.vs-brand-kit-card:focus-visible {\n  outline: none;\n  box-shadow: var(--mj-focus-ring);\n}\n\n.vs-palette-strip {\n  display: flex;\n  height: var(--mj-space-11);\n  width: 100%;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.vs-palette-swatch {\n  flex: 1 1 0;\n  height: 100%;\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n  transition: var(--mj-transition-fast);\n}\n\n.vs-palette-swatch:hover {\n  flex-grow: 1.4;\n}\n\n.vs-palette-empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n.vs-brand-kit-body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-2-5);\n  padding: var(--mj-space-4);\n  flex: 1;\n}\n\n.vs-brand-kit-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--mj-space-2-5);\n}\n\n.vs-brand-kit-title-group {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  min-width: 0;\n}\n\n.vs-brand-kit-logo-thumb {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--mj-space-7);\n  height: var(--mj-space-7);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.vs-brand-kit-logo-img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n.vs-brand-kit-title {\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.vs-brand-kit-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mj-space-2);\n  margin-top: auto;\n  padding-top: var(--mj-space-2);\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.vs-brand-kit-meta-item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-1-5);\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-secondary);\n}\n\n.vs-resource-shell {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.vs-resource-shell__page {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .vs-brand-kit-card,\n  .vs-palette-swatch {\n    transition: none;\n  }\n}\n"] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(VideoStudioBrandKitsResourceComponent, { className: "VideoStudioBrandKitsResourceComponent", filePath: "src/VideoStudio/resources/video-studio-brand-kits-resource.component.ts", lineNumber: 54 }); })();
+//# sourceMappingURL=video-studio-brand-kits-resource.component.js.map