@pitcher/canvas-ui 2026.1.14-143747-beta → 2026.1.15-103854-beta

package/canvas-ui.js

@@ -84630,6 +84630,10 @@ const defaultWhenUsedInSection = {
   is_editable: false,
   is_removable: false
 };
+const defaultWhenUsedInTemplate = {
+  is_editable: true,
+  is_removable: true
+};
 const SERVER_ONLY_PROPS = [
   "content_url",
   "thumbnail_url",
@@ -95692,111 +95696,115 @@ const _hoisted_14$h = {
   key: 0,
   class: "flex items-center ml-2"
 };
-const _hoisted_15$f = {
-  key: 2,
+const _hoisted_15$f = { class: "flex items-center" };
+const _hoisted_16$e = { key: 0 };
+const _hoisted_17$c = { class: "c-select-filter__popover w-[350px] rounded flex flex-col bg-base" };
+const _hoisted_18$a = { class: "pa-2 max-h-[300px] overflow-y-auto" };
+const _hoisted_19$a = {
+  key: 0,
   class: "flex items-center ml-2"
 };
-const _hoisted_16$e = { class: "flex flex-col w-full flex-1 min-h-0" };
-const _hoisted_17$c = {
+const _hoisted_20$9 = { class: "flex flex-col w-full flex-1 min-h-0" };
+const _hoisted_21$7 = {
   key: 0,
   class: "flex-1 overflow-y-auto bg-white w-full pl-1 pr-6 py-0"
 };
-const _hoisted_18$a = { class: "space-y-1 mt-4" };
-const _hoisted_19$a = ["onClick"];
-const _hoisted_20$9 = { class: "text-sm text-gray-700" };
-const _hoisted_21$7 = { class: "flex items-center mb-0" };
-const _hoisted_22$5 = { class: "text-sm font-bold text-gray-700" };
+const _hoisted_22$5 = { class: "space-y-1 mt-4" };
 const _hoisted_23$5 = ["onClick"];
-const _hoisted_24$5 = {
+const _hoisted_24$5 = { class: "text-sm text-gray-700" };
+const _hoisted_25$5 = { class: "flex items-center mb-0" };
+const _hoisted_26$5 = { class: "text-sm font-bold text-gray-700" };
+const _hoisted_27$5 = ["onClick"];
+const _hoisted_28$5 = {
   key: 0,
   class: "relative mr-4"
 };
-const _hoisted_25$5 = {
+const _hoisted_29$5 = {
   key: 0,
   class: "absolute inset-0 flex items-center justify-center bg-gray-200 bg-opacity-75 border-rounded-1"
 };
-const _hoisted_26$5 = {
+const _hoisted_30$4 = {
   key: 1,
   class: "w-18 h-14 border-rounded-1 mr-4 flex-shrink-0 bg-gray-200 flex items-center justify-center"
 };
-const _hoisted_27$5 = { class: "flex-1 min-w-0" };
-const _hoisted_28$5 = { class: "text-sm font-bold text-gray-900 truncate mb-1" };
-const _hoisted_29$5 = { class: "text-xs text-gray-500" };
-const _hoisted_30$4 = {
+const _hoisted_31$4 = { class: "flex-1 min-w-0" };
+const _hoisted_32$4 = { class: "text-sm font-bold text-gray-900 truncate mb-1" };
+const _hoisted_33$4 = { class: "text-xs text-gray-500" };
+const _hoisted_34$4 = {
   key: 1,
   class: "flex-1 overflow-y-auto bg-white w-full"
 };
-const _hoisted_31$4 = { class: "w-full px-0" };
-const _hoisted_32$4 = {
+const _hoisted_35$4 = { class: "w-full px-0" };
+const _hoisted_36$4 = {
   key: 0,
   class: "flex flex-col items-center justify-center text-center p-8 gap-4"
 };
-const _hoisted_33$4 = {
+const _hoisted_37$4 = {
   key: 0,
   class: "mb-0"
 };
-const _hoisted_34$4 = { class: "flex items-center px-0 pt-2 pb-1" };
-const _hoisted_35$4 = { class: "text-m font-semibold text-gray-900" };
-const _hoisted_36$4 = { class: "ml-2 text-sm text-gray-500" };
-const _hoisted_37$4 = ["data-result-selected", "onClick"];
-const _hoisted_38$4 = {
+const _hoisted_38$4 = { class: "flex items-center px-0 pt-2 pb-1" };
+const _hoisted_39$4 = { class: "text-m font-semibold text-gray-900" };
+const _hoisted_40$4 = { class: "ml-2 text-sm text-gray-500" };
+const _hoisted_41$4 = ["data-result-selected", "onClick"];
+const _hoisted_42$4 = {
   key: 1,
   class: "w-18 h-14 border-rounded-1 mr-4 flex-shrink-0 bg-gray-200 flex items-center justify-center"
 };
-const _hoisted_39$4 = { class: "flex-1 min-w-0" };
-const _hoisted_40$4 = { class: "text-sm font-bold text-gray-900 truncate mb-1" };
-const _hoisted_41$4 = ["innerHTML"];
-const _hoisted_42$4 = { class: "text-xs text-gray-500" };
-const _hoisted_43$4 = { class: "text-xs text-gray-400" };
-const _hoisted_44$4 = {
+const _hoisted_43$4 = { class: "flex-1 min-w-0" };
+const _hoisted_44$4 = { class: "text-sm font-bold text-gray-900 truncate mb-1" };
+const _hoisted_45$4 = ["innerHTML"];
+const _hoisted_46$4 = { class: "text-xs text-gray-500" };
+const _hoisted_47$4 = { class: "text-xs text-gray-400" };
+const _hoisted_48$4 = {
   key: 0,
   class: "px-0 py-0"
 };
-const _hoisted_45$4 = { key: 1 };
-const _hoisted_46$4 = { class: "flex items-center px-0 pt-2 pb-1" };
-const _hoisted_47$4 = { class: "text-m font-semibold text-gray-900" };
-const _hoisted_48$4 = { class: "ml-2 text-sm text-gray-500" };
-const _hoisted_49$4 = ["data-result-selected", "onClick"];
-const _hoisted_50$4 = { class: "w-18 h-14 border-rounded-1 mr-4 flex-shrink-0 bg-gray-200 flex items-center justify-center" };
-const _hoisted_51$3 = { class: "flex-1 min-w-0" };
-const _hoisted_52$3 = { class: "text-sm font-bold text-gray-900 truncate mb-1" };
-const _hoisted_53$3 = { class: "text-xs text-gray-500" };
-const _hoisted_54$2 = { class: "text-xs text-gray-400" };
-const _hoisted_55$2 = {
+const _hoisted_49$4 = { key: 1 };
+const _hoisted_50$4 = { class: "flex items-center px-0 pt-2 pb-1" };
+const _hoisted_51$3 = { class: "text-m font-semibold text-gray-900" };
+const _hoisted_52$3 = { class: "ml-2 text-sm text-gray-500" };
+const _hoisted_53$3 = ["data-result-selected", "onClick"];
+const _hoisted_54$2 = { class: "w-18 h-14 border-rounded-1 mr-4 flex-shrink-0 bg-gray-200 flex items-center justify-center" };
+const _hoisted_55$2 = { class: "flex-1 min-w-0" };
+const _hoisted_56$2 = { class: "text-sm font-bold text-gray-900 truncate mb-1" };
+const _hoisted_57$2 = { class: "text-xs text-gray-500" };
+const _hoisted_58$2 = { class: "text-xs text-gray-400" };
+const _hoisted_59$2 = {
   key: 0,
   class: "px-0 py-0"
 };
-const _hoisted_56$2 = {
+const _hoisted_60$2 = {
   key: 2,
   class: "flex flex-col items-center justify-center text-center p-8 gap-4"
 };
-const _hoisted_57$2 = {
+const _hoisted_61$2 = {
   key: 2,
   class: "flex-1 overflow-y-auto bg-white w-full"
 };
-const _hoisted_58$2 = { class: "w-full px-0" };
-const _hoisted_59$2 = {
+const _hoisted_62$2 = { class: "w-full px-0" };
+const _hoisted_63$2 = {
   key: 0,
   class: "flex flex-col items-center justify-center text-center p-8 gap-4"
 };
-const _hoisted_60$2 = { class: "flex items-center px-0 pt-2 pb-1" };
-const _hoisted_61$2 = { class: "text-m font-semibold text-gray-900" };
-const _hoisted_62$2 = { class: "ml-2 text-sm text-gray-500" };
-const _hoisted_63$2 = ["data-result-selected", "onClick"];
-const _hoisted_64$2 = {
+const _hoisted_64$2 = { class: "flex items-center px-0 pt-2 pb-1" };
+const _hoisted_65$2 = { class: "text-m font-semibold text-gray-900" };
+const _hoisted_66$2 = { class: "ml-2 text-sm text-gray-500" };
+const _hoisted_67$2 = ["data-result-selected", "onClick"];
+const _hoisted_68$2 = {
   key: 1,
   class: "w-18 h-14 border-rounded-1 mr-4 flex-shrink-0 bg-gray-200 flex items-center justify-center"
 };
-const _hoisted_65$2 = { class: "flex-1 min-w-0" };
-const _hoisted_66$2 = { class: "text-sm font-bold text-gray-900 truncate mb-1" };
-const _hoisted_67$2 = ["innerHTML"];
-const _hoisted_68$2 = { class: "text-xs text-gray-500" };
-const _hoisted_69$1 = { class: "text-xs text-gray-400" };
-const _hoisted_70$1 = {
+const _hoisted_69$1 = { class: "flex-1 min-w-0" };
+const _hoisted_70$1 = { class: "text-sm font-bold text-gray-900 truncate mb-1" };
+const _hoisted_71$1 = ["innerHTML"];
+const _hoisted_72$1 = { class: "text-xs text-gray-500" };
+const _hoisted_73$1 = { class: "text-xs text-gray-400" };
+const _hoisted_74$1 = {
   key: 0,
   class: "flex flex-col items-center justify-center text-center p-8 gap-4"
 };
-const _hoisted_71$1 = {
+const _hoisted_75$1 = {
   key: 0,
   class: "flex flex-wrap line-height-6 pt-4 pb-2 px-6 border-t border-gray-200 gap-y-4 gap-x-4"
 };
@@ -95823,6 +95831,7 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
     const selectedFileTypes = ref([]);
     const showFileTypeDropdown = ref(false);
     const selectedCanvasFilters = ref([]);
+    const showCanvasTypeDropdown = ref(false);
     const fileTypeOptions = [
       { label: "Folder", value: "folder" },
       { label: "PDF", value: "pdf" },
@@ -95835,6 +95844,42 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
       { label: "AR", value: "ar" },
       { label: "Web", value: "web" }
     ];
+    const canvasTypeOptions = computed(() => {
+      const options = [
+        { label: t("canvasUI.CAlgoliaSearch.canvasFilters.templates"), value: "template" },
+        { label: t("canvasUI.CAlgoliaSearch.canvasFilters.products"), value: "section" },
+        { label: t("canvasUI.CAlgoliaSearch.canvasFilters.blocks"), value: "block" }
+      ];
+      if (!props.isAdmin) {
+        options.unshift({ label: t("canvasUI.CAlgoliaSearch.canvasFilters.saved"), value: "saved_canvas" });
+      }
+      if (props.isAdmin) {
+        options.splice(1, 0, {
+          label: t("canvasUI.CAlgoliaSearch.canvasFilters.productTemplates"),
+          value: "product_template"
+        });
+      }
+      return options;
+    });
+    const ALLOWED_CANVAS_TYPES = ["saved_canvas", "template", "product_template", "section", "block"];
+    const ALLOWED_FILE_TYPES = [
+      "folder",
+      "pdf",
+      "image",
+      "audio",
+      "video",
+      "document",
+      "presentation",
+      "spreadsheet",
+      "ar",
+      "web"
+    ];
+    const visibleCanvasTypeOptions = computed(() => {
+      if (showRecentView.value || !searchQuery.value.trim()) {
+        return canvasTypeOptions.value;
+      }
+      return canvasTypeOptions.value.filter((option) => availableCanvasTypes.value.has(option.value));
+    });
     const hasActiveFilters = computed(() => selectedFileTypes.value.length > 0 || selectedCanvasFilters.value.length > 0);
     const clearAllFilters = () => {
       selectedFileTypes.value = [];
@@ -95845,7 +95890,9 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
       selectedFileTypes.value = [];
       selectedCanvasFilters.value = [];
       searchType.value = null;
-      if (searchQuery.value.trim()) {
+      if (searchQuery.value.trim() && (unfilteredContentResults.value.length > 0 || unfilteredCanvasResults.value.length > 0)) {
+        applyFiltersToResults();
+      } else if (searchQuery.value.trim()) {
         try {
           skipNextSuggestionFetch.value = true;
           await performSearch(searchQuery.value);
@@ -95981,8 +96028,11 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
     };
     const contentResults = ref([]);
     const canvasResults = ref([]);
+    const unfilteredContentResults = ref([]);
+    const unfilteredCanvasResults = ref([]);
     const isSearching = ref(false);
     const hasSearchCompleted = ref(false);
+    let currentSearchId = 0;
     const querySuggestions = ref([]);
     const selectedSuggestionIndex = ref(-1);
     const selectedResultIndex = ref(-1);
@@ -95999,6 +96049,44 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
       }
       return canvasResults.value;
     });
+    const availableFileTypes = computed(() => {
+      if (showRecentView.value || !searchQuery.value.trim()) {
+        return /* @__PURE__ */ new Set();
+      }
+      const types = /* @__PURE__ */ new Set();
+      unfilteredContentResults.value.forEach((item) => {
+        if (item.type === "folder") {
+          types.add("folder");
+        } else if (item.type === "file" && item.file_category) {
+          types.add(item.file_category);
+        }
+      });
+      return types;
+    });
+    const availableCanvasTypes = computed(() => {
+      if (showRecentView.value || !searchQuery.value.trim()) {
+        return /* @__PURE__ */ new Set();
+      }
+      const types = /* @__PURE__ */ new Set();
+      unfilteredCanvasResults.value.forEach((item) => {
+        if (item.content_type) {
+          types.add(item.content_type);
+        }
+      });
+      return types;
+    });
+    const visibleFileTypeOptions = computed(() => {
+      if (showRecentView.value || !searchQuery.value.trim()) {
+        return fileTypeOptions;
+      }
+      return fileTypeOptions.filter((option) => availableFileTypes.value.has(option.value));
+    });
+    const hasContentFilters = computed(() => {
+      return visibleFileTypeOptions.value.length > 0 || selectedFileTypes.value.length > 0;
+    });
+    const hasCanvasFilters = computed(() => {
+      return visibleCanvasTypeOptions.value.length > 0 || selectedCanvasFilters.value.length > 0;
+    });
     const shouldShowNoResults = computed(() => {
       if (showRecentView.value || !searchQuery.value.trim() || isSearching.value || !hasSearchCompleted.value) return false;
       if (searchType.value === "content") {
@@ -96042,6 +96130,32 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
     };
     watch(searchType, () => {
       selectedResultIndex.value = -1;
+      showFileTypeDropdown.value = false;
+      showCanvasTypeDropdown.value = false;
+    });
+    watch(visibleFileTypeOptions, (newOptions) => {
+      if (selectedFileTypes.value.length > 0) {
+        const availableValues = new Set(newOptions.map((option) => option.value));
+        const stillAvailable = selectedFileTypes.value.filter((type) => availableValues.has(type));
+        if (stillAvailable.length !== selectedFileTypes.value.length) {
+          selectedFileTypes.value = stillAvailable;
+          if (searchQuery.value.trim()) {
+            performSearch(searchQuery.value.trim());
+          }
+        }
+      }
+    });
+    watch(visibleCanvasTypeOptions, (newOptions) => {
+      if (selectedCanvasFilters.value.length > 0) {
+        const availableValues = new Set(newOptions.map((option) => option.value));
+        const stillAvailable = selectedCanvasFilters.value.filter((type) => availableValues.has(type));
+        if (stillAvailable.length !== selectedCanvasFilters.value.length) {
+          selectedCanvasFilters.value = stillAvailable;
+          if (searchQuery.value.trim()) {
+            performSearch(searchQuery.value.trim());
+          }
+        }
+      }
     });
     const scrollSelectedResultIntoView = () => {
       nextTick(() => {
@@ -96085,6 +96199,8 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
       if (!query.trim()) {
         contentResults.value = [];
         canvasResults.value = [];
+        unfilteredContentResults.value = [];
+        unfilteredCanvasResults.value = [];
         hasSearchCompleted.value = false;
         isSearching.value = false;
         searchError.value = null;
@@ -96093,59 +96209,51 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
       isSearching.value = true;
       hasSearchCompleted.value = false;
       searchError.value = null;
+      const searchId = ++currentSearchId;
       const shouldSkipSuggestionFetch = skipNextSuggestionFetch.value;
       if (shouldSkipSuggestionFetch) {
         skipNextSuggestionFetch.value = false;
       }
       try {
-        const ALLOWED_CANVAS_TYPES = ["saved_canvas", "template", "product_template", "section", "block"];
-        const ALLOWED_FILE_TYPES = [
-          "folder",
-          "pdf",
-          "image",
-          "audio",
-          "video",
-          "document",
-          "presentation",
-          "spreadsheet",
-          "ar",
-          "web"
-        ];
-        const validCanvasFilters = selectedCanvasFilters.value.filter((f) => ALLOWED_CANVAS_TYPES.includes(f));
-        if (selectedCanvasFilters.value.length > 0 && validCanvasFilters.length === 0) {
-          console.warn(
-            "[CAlgoliaSearch] All selected canvas filters are invalid and were removed:",
-            selectedCanvasFilters.value
-          );
-          selectedCanvasFilters.value = [];
-        } else if (validCanvasFilters.length < selectedCanvasFilters.value.length) {
-          const removedFilters = selectedCanvasFilters.value.filter((f) => !validCanvasFilters.includes(f));
-          console.warn("[CAlgoliaSearch] Some canvas filters were invalid and removed:", removedFilters);
+        const validCanvasFilters = selectedCanvasFilters.value.filter((filter) => ALLOWED_CANVAS_TYPES.includes(filter));
+        if (selectedCanvasFilters.value.length !== validCanvasFilters.length) {
+          const invalid = selectedCanvasFilters.value.filter((filter) => !ALLOWED_CANVAS_TYPES.includes(filter));
+          console.warn("[CAlgoliaSearch] Invalid canvas filters removed:", invalid);
           selectedCanvasFilters.value = validCanvasFilters;
         }
-        const canvasFilters = validCanvasFilters.length > 0 ? ` AND (${validCanvasFilters.map((filter) => `content_type:"${filter}"`).join(" OR ")})` : "";
-        const validFileTypes = selectedFileTypes.value.filter((t2) => ALLOWED_FILE_TYPES.includes(t2));
-        if (selectedFileTypes.value.length > 0 && validFileTypes.length === 0) {
-          console.warn(
-            "[CAlgoliaSearch] All selected file type filters are invalid and were removed:",
-            selectedFileTypes.value
-          );
-          selectedFileTypes.value = [];
-        } else if (validFileTypes.length < selectedFileTypes.value.length) {
-          const removedFilters = selectedFileTypes.value.filter((t2) => !validFileTypes.includes(t2));
-          console.warn("[CAlgoliaSearch] Some file type filters were invalid and removed:", removedFilters);
+        const validFileTypes = selectedFileTypes.value.filter((type) => ALLOWED_FILE_TYPES.includes(type));
+        if (selectedFileTypes.value.length !== validFileTypes.length) {
+          const invalid = selectedFileTypes.value.filter((type) => !ALLOWED_FILE_TYPES.includes(type));
+          console.warn("[CAlgoliaSearch] Invalid file type filters removed:", invalid);
           selectedFileTypes.value = validFileTypes;
         }
-        const contentFilters = validFileTypes.length > 0 ? ` AND (${validFileTypes.map((type) => type === "folder" ? `type:"${type}"` : `file_category:"${type}"`).join(" OR ")})` : "";
         const results = await searchViaBackend(query.trim(), {
-          canvas: canvasFilters,
-          content: contentFilters
+          canvas: "",
+          content: ""
         });
         if (query.trim() !== searchQuery.value.trim()) {
           return;
         }
-        contentResults.value = results.content?.hits || [];
-        canvasResults.value = results.canvas?.hits || [];
+        unfilteredContentResults.value = results.content?.hits || [];
+        unfilteredCanvasResults.value = results.canvas?.hits || [];
+        let filteredContent = unfilteredContentResults.value;
+        let filteredCanvas = unfilteredCanvasResults.value;
+        if (validFileTypes.length > 0) {
+          filteredContent = filteredContent.filter((item) => {
+            if (validFileTypes.includes("folder") && item.type === "folder") {
+              return true;
+            }
+            if (item.type === "file") {
+              return validFileTypes.includes(item.file_category);
+            }
+            return false;
+          });
+        }
+        if (validCanvasFilters.length > 0) {
+          filteredCanvas = filteredCanvas.filter((item) => validCanvasFilters.includes(item.content_type));
+        }
+        contentResults.value = filteredContent;
+        canvasResults.value = filteredCanvas;
         selectedResultIndex.value = -1;
         searchError.value = null;
         if (query.trim().length >= 2 && !shouldSkipSuggestionFetch) {
@@ -96158,23 +96266,27 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
         }
         await nextTick();
         setTimeout(() => {
-          isSearching.value = false;
-          hasSearchCompleted.value = true;
+          if (searchId === currentSearchId) {
+            isSearching.value = false;
+            hasSearchCompleted.value = true;
+          }
         }, 50);
       } catch (error) {
         console.error("Search error:", error);
-        contentResults.value = [];
-        canvasResults.value = [];
-        isSearching.value = false;
-        hasSearchCompleted.value = true;
-        if (error.message === "AUTH_REQUIRED") {
-          searchError.value = "Please sign in to search";
-        } else if (error.message === "AUTH_EXPIRED") {
-          searchError.value = "Your session has expired. Please sign in again";
-        } else if (error.message === "AUTH_FORBIDDEN") {
-          searchError.value = "You do not have permission to search this instance";
-        } else {
-          searchError.value = "Search failed. Please try again";
+        if (searchId === currentSearchId) {
+          contentResults.value = [];
+          canvasResults.value = [];
+          isSearching.value = false;
+          hasSearchCompleted.value = true;
+          if (error.message === "AUTH_REQUIRED") {
+            searchError.value = "Please sign in to search";
+          } else if (error.message === "AUTH_EXPIRED") {
+            searchError.value = "Your session has expired. Please sign in again";
+          } else if (error.message === "AUTH_FORBIDDEN") {
+            searchError.value = "You do not have permission to search this instance";
+          } else {
+            searchError.value = "Search failed. Please try again";
+          }
         }
       }
     };
@@ -96184,19 +96296,38 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
       if (!query || typeof query !== "string") return "";
       return query;
     }
+    function applyFiltersToResults() {
+      if (unfilteredContentResults.value.length === 0 && unfilteredCanvasResults.value.length === 0) {
+        return;
+      }
+      const validFileTypes = selectedFileTypes.value.filter((type) => ALLOWED_FILE_TYPES.includes(type));
+      const validCanvasFilters = selectedCanvasFilters.value.filter((type) => ALLOWED_CANVAS_TYPES.includes(type));
+      let filteredContent = unfilteredContentResults.value;
+      let filteredCanvas = unfilteredCanvasResults.value;
+      if (validFileTypes.length > 0) {
+        filteredContent = filteredContent.filter((item) => {
+          if (validFileTypes.includes("folder") && item.type === "folder") {
+            return true;
+          }
+          if (item.type === "file") {
+            return validFileTypes.includes(item.file_category);
+          }
+          return false;
+        });
+      }
+      if (validCanvasFilters.length > 0) {
+        filteredCanvas = filteredCanvas.filter((item) => validCanvasFilters.includes(item.content_type));
+      }
+      contentResults.value = filteredContent;
+      canvasResults.value = filteredCanvas;
+      selectedResultIndex.value = -1;
+    }
     const debouncedFilterSearch = () => {
       if (filterChangeTimer) clearTimeout(filterChangeTimer);
       if (searchTimer) clearTimeout(searchTimer);
       filterChangeTimer = setTimeout(async () => {
         if (searchQuery.value.trim() && !showRecentView.value) {
-          try {
-            skipNextSuggestionFetch.value = true;
-            await performSearch(searchQuery.value);
-          } catch (error) {
-            console.error("[debouncedFilterSearch] Search failed:", error);
-          } finally {
-            skipNextSuggestionFetch.value = false;
-          }
+          applyFiltersToResults();
         }
       }, 500);
     };
@@ -96222,6 +96353,8 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
         showRecentView.value = true;
         contentResults.value = [];
         canvasResults.value = [];
+        unfilteredContentResults.value = [];
+        unfilteredCanvasResults.value = [];
         querySuggestions.value = [];
         selectedSuggestionIndex.value = -1;
         selectedResultIndex.value = -1;
@@ -96235,6 +96368,8 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
       showRecentView.value = true;
       contentResults.value = [];
       canvasResults.value = [];
+      unfilteredContentResults.value = [];
+      unfilteredCanvasResults.value = [];
       querySuggestions.value = [];
       selectedSuggestionIndex.value = -1;
       selectedResultIndex.value = -1;
@@ -96359,31 +96494,31 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
       if (endChar < highlightValue.length) truncated = truncated + "...";
       return sanitizeHtml(truncated);
     };
-    const toggleCanvasFilter = (filterType) => {
-      if (selectedCanvasFilters.value.includes(filterType)) {
-        selectedCanvasFilters.value.splice(selectedCanvasFilters.value.indexOf(filterType), 1);
+    const handleFileTypeToggle = (value, checked) => {
+      if (checked) {
+        if (!selectedFileTypes.value.includes(value)) {
+          selectedFileTypes.value.push(value);
+        }
       } else {
-        selectedCanvasFilters.value.push(filterType);
+        selectedFileTypes.value = selectedFileTypes.value.filter((v) => v !== value);
       }
       debouncedFilterSearch();
     };
-    const clearCanvasFilters = () => {
-      selectedCanvasFilters.value = [];
-      debouncedFilterSearch();
-    };
-    const toggleFileType = (fileType, checked) => {
+    const handleCanvasTypeToggle = (value, checked) => {
       if (checked) {
-        if (!selectedFileTypes.value.includes(fileType)) {
-          selectedFileTypes.value.push(fileType);
+        if (!selectedCanvasFilters.value.includes(value)) {
+          selectedCanvasFilters.value.push(value);
         }
       } else {
-        const index = selectedFileTypes.value.indexOf(fileType);
-        if (index > -1) {
-          selectedFileTypes.value.splice(index, 1);
-        }
+        selectedCanvasFilters.value = selectedCanvasFilters.value.filter((v) => v !== value);
       }
       debouncedFilterSearch();
     };
+    const clearCanvasFilters = () => {
+      selectedCanvasFilters.value = [];
+      showCanvasTypeDropdown.value = false;
+      debouncedFilterSearch();
+    };
     const clearFileTypes = () => {
       selectedFileTypes.value = [];
       showFileTypeDropdown.value = false;
@@ -96554,7 +96689,7 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
         show: "",
         verticalAlignment: "top",
         "z-index": _ctx.zIndex,
-        "onUpdate:show": _cache[15] || (_cache[15] = ($event) => emit("toggleSearch", $event))
+        "onUpdate:show": _cache[12] || (_cache[12] = ($event) => emit("toggleSearch", $event))
       }, {
         default: withCtx(() => [
           createElementVNode("div", {
@@ -96563,7 +96698,7 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
           }, [
             createElementVNode("div", _hoisted_1$4w, [
               createElementVNode("div", _hoisted_2$3j, [
-                _cache[16] || (_cache[16] = createElementVNode("div", { class: "absolute left-2.5 top-1/2 transform -translate-y-1/2 z-10" }, [
+                _cache[13] || (_cache[13] = createElementVNode("div", { class: "absolute left-2.5 top-1/2 transform -translate-y-1/2 z-10" }, [
                   createElementVNode("i", { class: "c-icon far fa-search text-gray-400 text-l" })
                 ], -1)),
                 withDirectives(createElementVNode("input", {
@@ -96660,7 +96795,7 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
                     createElementVNode("span", null, toDisplayString(unref(t)("canvasUI.CAlgoliaSearch.tabs.pitchDecks")), 1)
                   ], 2)) : createCommentVNode("", true)
                 ]),
-                searchType.value ? (openBlock(), createElementBlock("div", _hoisted_9$O, [
+                searchType.value && (searchType.value === "content" && hasContentFilters.value || searchType.value === "canvases" && hasCanvasFilters.value) ? (openBlock(), createElementBlock("div", _hoisted_9$O, [
                   searchType.value === "content" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                     createVNode(unref(NPopover), {
                       class: "c-select-filter",
@@ -96696,24 +96831,23 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
                       default: withCtx(() => [
                         createElementVNode("div", _hoisted_12$p, [
                           createElementVNode("div", _hoisted_13$k, [
-                            (openBlock(), createElementBlock(Fragment, null, renderList(fileTypeOptions, (option) => {
-                              return createElementVNode("div", {
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(visibleFileTypeOptions.value, (option) => {
+                              return openBlock(), createElementBlock("div", {
                                 key: option.value,
                                 class: "w-full h-7 flex items-center"
                               }, [
                                 createVNode(unref(NCheckbox), {
                                   checked: selectedFileTypes.value.includes(option.value),
                                   class: "px-2 truncate",
-                                  "onUpdate:checked": (v) => toggleFileType(option.value, v),
-                                  value: option.value
+                                  "onUpdate:checked": (checked) => handleFileTypeToggle(option.value, checked)
                                 }, {
                                   default: withCtx(() => [
                                     createTextVNode(toDisplayString(option.label), 1)
                                   ]),
                                   _: 2
-                                }, 1032, ["checked", "onUpdate:checked", "value"])
+                                }, 1032, ["checked", "onUpdate:checked"])
                               ]);
-                            }), 64))
+                            }), 128))
                           ]),
                           createElementVNode("div", {
                             class: "pa-2",
@@ -96736,114 +96870,99 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
                       _: 1
                     }, 8, ["show"]),
                     hasActiveFilters.value ? (openBlock(), createElementBlock("div", _hoisted_14$h, [
-                      _cache[17] || (_cache[17] = createElementVNode("div", { class: "h-6 w-px bg-gray-300 mx-2" }, null, -1)),
+                      _cache[14] || (_cache[14] = createElementVNode("div", { class: "h-6 w-px bg-gray-300 mx-2" }, null, -1)),
                       createElementVNode("span", {
                         class: "text-sm text-gray-600 hover:text-gray-800 font-normal cursor-pointer",
                         onClick: clearAllFilters
                       }, toDisplayString(unref(t)("canvasUI.CAlgoliaSearch.filters.clear")), 1)
                     ])) : createCommentVNode("", true)
                   ], 64)) : searchType.value === "canvases" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                    !_ctx.isAdmin ? (openBlock(), createBlock(unref(NTag), {
-                      key: 0,
-                      class: "select-none cursor-pointer",
-                      style: normalizeStyle({
-                        "--n-color": selectedCanvasFilters.value.includes("saved_canvas") ? "var(--p-primary5)" : "var(--p-primary6)",
-                        "--n-border": "1px solid var(--p-primary5)",
-                        "--n-height": "28px"
-                      }),
-                      themeOverrides: {
-                        borderRadius: "4px"
-                      },
-                      onClick: _cache[8] || (_cache[8] = ($event) => toggleCanvasFilter("saved_canvas"))
-                    }, {
-                      default: withCtx(() => [
-                        createElementVNode("span", null, toDisplayString(unref(t)("canvasUI.CAlgoliaSearch.canvasFilters.saved")), 1)
-                      ]),
-                      _: 1
-                    }, 8, ["style"])) : createCommentVNode("", true),
-                    createVNode(unref(NTag), {
-                      class: "select-none cursor-pointer",
-                      style: normalizeStyle({
-                        "--n-color": selectedCanvasFilters.value.includes("template") ? "var(--p-primary5)" : "var(--p-primary6)",
-                        "--n-border": "1px solid var(--p-primary5)",
-                        "--n-height": "28px"
-                      }),
-                      themeOverrides: {
-                        borderRadius: "4px"
-                      },
-                      onClick: _cache[9] || (_cache[9] = ($event) => toggleCanvasFilter("template"))
-                    }, {
-                      default: withCtx(() => [
-                        createElementVNode("span", null, toDisplayString(unref(t)("canvasUI.CAlgoliaSearch.canvasFilters.templates")), 1)
-                      ]),
-                      _: 1
-                    }, 8, ["style"]),
-                    _ctx.isAdmin ? (openBlock(), createBlock(unref(NTag), {
-                      key: 1,
-                      class: "select-none cursor-pointer",
-                      style: normalizeStyle({
-                        "--n-color": selectedCanvasFilters.value.includes("product_template") ? "var(--p-primary5)" : "var(--p-primary6)",
-                        "--n-border": "1px solid var(--p-primary5)",
-                        "--n-height": "28px"
-                      }),
-                      themeOverrides: {
-                        borderRadius: "4px"
-                      },
-                      onClick: _cache[10] || (_cache[10] = ($event) => toggleCanvasFilter("product_template"))
-                    }, {
-                      default: withCtx(() => [
-                        createElementVNode("span", null, toDisplayString(unref(t)("canvasUI.CAlgoliaSearch.canvasFilters.productTemplates")), 1)
-                      ]),
-                      _: 1
-                    }, 8, ["style"])) : createCommentVNode("", true),
-                    createVNode(unref(NTag), {
-                      class: "select-none cursor-pointer",
-                      style: normalizeStyle({
-                        "--n-color": selectedCanvasFilters.value.includes("section") ? "var(--p-primary5)" : "var(--p-primary6)",
-                        "--n-border": "1px solid var(--p-primary5)",
-                        "--n-height": "28px"
-                      }),
-                      themeOverrides: {
-                        borderRadius: "4px"
-                      },
-                      onClick: _cache[11] || (_cache[11] = ($event) => toggleCanvasFilter("section"))
+                    createVNode(unref(NPopover), {
+                      class: "c-select-filter",
+                      placement: "bottom-start",
+                      raw: "",
+                      show: showCanvasTypeDropdown.value,
+                      "show-arrow": false,
+                      trigger: "manual",
+                      onClickoutside: _cache[9] || (_cache[9] = ($event) => showCanvasTypeDropdown.value = false)
                     }, {
-                      default: withCtx(() => [
-                        createElementVNode("span", null, toDisplayString(unref(t)("canvasUI.CAlgoliaSearch.canvasFilters.products")), 1)
+                      trigger: withCtx(() => [
+                        createVNode(unref(NTag), {
+                          class: "select-none cursor-pointer",
+                          style: normalizeStyle({
+                            "--n-color": selectedCanvasFilters.value.length ? "var(--p-primary5)" : "var(--p-primary6)",
+                            "--n-border": "1px solid var(--p-primary5)",
+                            "--n-height": "28px"
+                          }),
+                          themeOverrides: {
+                            borderRadius: "4px"
+                          },
+                          onClick: _cache[8] || (_cache[8] = ($event) => showCanvasTypeDropdown.value = !showCanvasTypeDropdown.value)
+                        }, {
+                          default: withCtx(() => [
+                            createElementVNode("div", _hoisted_15$f, [
+                              createElementVNode("span", null, toDisplayString(unref(t)("canvasUI.CAlgoliaSearch.filters.type")), 1),
+                              selectedCanvasFilters.value.length ? (openBlock(), createElementBlock("span", _hoisted_16$e, ": " + toDisplayString(selectedCanvasFilters.value.length), 1)) : createCommentVNode("", true)
+                            ])
+                          ]),
+                          _: 1
+                        }, 8, ["style"])
                       ]),
-                      _: 1
-                    }, 8, ["style"]),
-                    createVNode(unref(NTag), {
-                      class: "select-none cursor-pointer",
-                      style: normalizeStyle({
-                        "--n-color": selectedCanvasFilters.value.includes("block") ? "var(--p-primary5)" : "var(--p-primary6)",
-                        "--n-border": "1px solid var(--p-primary5)",
-                        "--n-height": "28px"
-                      }),
-                      themeOverrides: {
-                        borderRadius: "4px"
-                      },
-                      onClick: _cache[12] || (_cache[12] = ($event) => toggleCanvasFilter("block"))
-                    }, {
                       default: withCtx(() => [
-                        createElementVNode("span", null, toDisplayString(unref(t)("canvasUI.CAlgoliaSearch.canvasFilters.blocks")), 1)
+                        createElementVNode("div", _hoisted_17$c, [
+                          createElementVNode("div", _hoisted_18$a, [
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(visibleCanvasTypeOptions.value, (option) => {
+                              return openBlock(), createElementBlock("div", {
+                                key: option.value,
+                                class: "w-full h-7 flex items-center"
+                              }, [
+                                createVNode(unref(NCheckbox), {
+                                  checked: selectedCanvasFilters.value.includes(option.value),
+                                  class: "px-2 truncate",
+                                  "onUpdate:checked": (checked) => handleCanvasTypeToggle(option.value, checked)
+                                }, {
+                                  default: withCtx(() => [
+                                    createTextVNode(toDisplayString(option.label), 1)
+                                  ]),
+                                  _: 2
+                                }, 1032, ["checked", "onUpdate:checked"])
+                              ]);
+                            }), 128))
+                          ]),
+                          createElementVNode("div", {
+                            class: "pa-2",
+                            style: normalizeStyle({ borderTop: `1px solid ${unref(themeVars).primary5}` })
+                          }, [
+                            createVNode(CButton, {
+                              block: "",
+                              class: "pa-2",
+                              text: "",
+                              onClick: clearCanvasFilters
+                            }, {
+                              default: withCtx(() => [
+                                createTextVNode(toDisplayString(unref(t)("canvasUI.CAlgoliaSearch.filters.clear")), 1)
+                              ]),
+                              _: 1
+                            })
+                          ], 4)
+                        ])
                       ]),
                       _: 1
-                    }, 8, ["style"]),
-                    selectedCanvasFilters.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_15$f, [
-                      _cache[18] || (_cache[18] = createElementVNode("div", { class: "h-6 w-px bg-gray-300 mx-2" }, null, -1)),
+                    }, 8, ["show"]),
+                    hasActiveFilters.value ? (openBlock(), createElementBlock("div", _hoisted_19$a, [
+                      _cache[15] || (_cache[15] = createElementVNode("div", { class: "h-6 w-px bg-gray-300 mx-2" }, null, -1)),
                       createElementVNode("span", {
                         class: "text-sm text-gray-600 hover:text-gray-800 font-normal cursor-pointer",
-                        onClick: clearCanvasFilters
+                        onClick: clearAllFilters
                       }, toDisplayString(unref(t)("canvasUI.CAlgoliaSearch.filters.clear")), 1)
                     ])) : createCommentVNode("", true)
                   ], 64)) : createCommentVNode("", true)
                 ])) : createCommentVNode("", true)
               ])) : createCommentVNode("", true)
             ]),
-            createElementVNode("div", _hoisted_16$e, [
-              showRecentView.value ? (openBlock(), createElementBlock("div", _hoisted_17$c, [
-                createElementVNode("div", _hoisted_18$a, [
+            createElementVNode("div", _hoisted_20$9, [
+              showRecentView.value ? (openBlock(), createElementBlock("div", _hoisted_21$7, [
+                createElementVNode("div", _hoisted_22$5, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(recentSearches.value, (search) => {
                     return openBlock(), createElementBlock("div", {
                       key: search,
@@ -96856,14 +96975,14 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
                         icon: "clock-rotate-left",
                         size: "16"
                       }),
-                      createElementVNode("span", _hoisted_20$9, toDisplayString(search), 1)
-                    ], 8, _hoisted_19$a);
+                      createElementVNode("span", _hoisted_24$5, toDisplayString(search), 1)
+                    ], 8, _hoisted_23$5);
                   }), 128))
                 ]),
                 recentlyOpenedDocs.value.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                  _cache[19] || (_cache[19] = createElementVNode("hr", { class: "border-0 h-px bg-gray-200 mt-2 mb-3 w-full" }, null, -1)),
-                  createElementVNode("div", _hoisted_21$7, [
-                    createElementVNode("span", _hoisted_22$5, toDisplayString(unref(t)("canvasUI.components.fileViewer.recentlyOpened")), 1)
+                  _cache[16] || (_cache[16] = createElementVNode("hr", { class: "border-0 h-px bg-gray-200 mt-2 mb-3 w-full" }, null, -1)),
+                  createElementVNode("div", _hoisted_25$5, [
+                    createElementVNode("span", _hoisted_26$5, toDisplayString(unref(t)("canvasUI.components.fileViewer.recentlyOpened")), 1)
                   ]),
                   createElementVNode("div", {
                     class: normalizeClass(_ctx.isAdmin ? "space-y-2" : "space-y-0")
@@ -96877,7 +96996,7 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
                         ]),
                         onClick: ($event) => handleRecentDocClick(doc, doc.type)
                       }, [
-                        doc.type === "file" ? (openBlock(), createElementBlock("div", _hoisted_24$5, [
+                        doc.type === "file" ? (openBlock(), createElementBlock("div", _hoisted_28$5, [
                           createVNode(_sfc_main$6K, {
                             class: "h-14 border-rounded-1 overflow-hidden flex-0",
                             cover: "",
@@ -96886,7 +97005,7 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
                             src: recentThumbnails.value[doc.id] || "",
                             width: "72"
                           }, null, 8, ["file-data", "src"]),
-                          isLoadingThumbnails.value && !recentThumbnails.value[doc.id] ? (openBlock(), createElementBlock("div", _hoisted_25$5, [
+                          isLoadingThumbnails.value && !recentThumbnails.value[doc.id] ? (openBlock(), createElementBlock("div", _hoisted_29$5, [
                             createVNode(CIcon, {
                               class: "animate-spin",
                               color: "var(--p-primary)",
@@ -96894,7 +97013,7 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
                               size: "20"
                             })
                           ])) : createCommentVNode("", true)
-                        ])) : (openBlock(), createElementBlock("div", _hoisted_26$5, [
+                        ])) : (openBlock(), createElementBlock("div", _hoisted_30$4, [
                           doc.type === "canvas" ? (openBlock(), createBlock(CIcon, {
                             key: 0,
                             color: "var(--p-text2)",
@@ -96907,33 +97026,33 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
                             size: "32"
                           }))
                         ])),
-                        createElementVNode("div", _hoisted_27$5, [
-                          createElementVNode("h3", _hoisted_28$5, toDisplayString(doc.name), 1),
-                          createElementVNode("p", _hoisted_29$5, toDisplayString(doc.type === "canvas" ? formatCanvasType(doc.content_type) : doc.type === "folder" ? "Folder" : doc.file_category || "File"), 1)
+                        createElementVNode("div", _hoisted_31$4, [
+                          createElementVNode("h3", _hoisted_32$4, toDisplayString(doc.name), 1),
+                          createElementVNode("p", _hoisted_33$4, toDisplayString(doc.type === "canvas" ? formatCanvasType(doc.content_type) : doc.type === "folder" ? "Folder" : doc.file_category || "File"), 1)
                         ])
-                      ], 10, _hoisted_23$5);
+                      ], 10, _hoisted_27$5);
                     }), 128))
                   ], 2)
                 ], 64)) : createCommentVNode("", true)
-              ])) : !searchType.value ? (openBlock(), createElementBlock("div", _hoisted_30$4, [
-                createElementVNode("div", _hoisted_31$4, [
-                  isSearching.value ? (openBlock(), createElementBlock("div", _hoisted_32$4, [
+              ])) : !searchType.value ? (openBlock(), createElementBlock("div", _hoisted_34$4, [
+                createElementVNode("div", _hoisted_35$4, [
+                  isSearching.value ? (openBlock(), createElementBlock("div", _hoisted_36$4, [
                     createVNode(CIcon, {
                       class: "animate-spin text-6xl",
                       color: "var(--p-primary)",
                       icon: "spinner"
                     })
                   ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                    filteredContentFiles.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_33$4, [
-                      createElementVNode("div", _hoisted_34$4, [
+                    filteredContentFiles.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_37$4, [
+                      createElementVNode("div", _hoisted_38$4, [
                         createVNode(CIcon, {
                           class: "mr-2",
                           color: "var(--p-text2)",
                           icon: "folder",
                           size: "16"
                         }),
-                        createElementVNode("span", _hoisted_35$4, toDisplayString(unref(t)("canvasUI.CAlgoliaSearch.sections.content")), 1),
-                        createElementVNode("span", _hoisted_36$4, "(" + toDisplayString(filteredContentFiles.value.length) + ")", 1)
+                        createElementVNode("span", _hoisted_39$4, toDisplayString(unref(t)("canvasUI.CAlgoliaSearch.sections.content")), 1),
+                        createElementVNode("span", _hoisted_40$4, "(" + toDisplayString(filteredContentFiles.value.length) + ")", 1)
                       ]),
                       createElementVNode("div", null, [
                         (openBlock(true), createElementBlock(Fragment, null, renderList(filteredContentFiles.value.slice(0, 5), (item) => {
@@ -96955,30 +97074,30 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
                               "object-fit": "cover",
                               src: item.picture_url || "",
                               width: "72"
-                            }, null, 8, ["file-data", "src"])) : (openBlock(), createElementBlock("div", _hoisted_38$4, [
+                            }, null, 8, ["file-data", "src"])) : (openBlock(), createElementBlock("div", _hoisted_42$4, [
                               createVNode(CIcon, {
                                 color: "var(--p-text2)",
                                 icon: "folder",
                                 size: "32"
                               })
                             ])),
-                            createElementVNode("div", _hoisted_39$4, [
-                              createElementVNode("h3", _hoisted_40$4, toDisplayString(item.name), 1),
+                            createElementVNode("div", _hoisted_43$4, [
+                              createElementVNode("h3", _hoisted_44$4, toDisplayString(item.name), 1),
                               item.type === "file" && getSnippet(item) ? (openBlock(), createElementBlock("p", {
                                 key: 0,
                                 class: "text-xs text-gray-600 mb-1",
                                 innerHTML: getSnippet(item)
-                              }, null, 8, _hoisted_41$4)) : createCommentVNode("", true),
-                              createElementVNode("p", _hoisted_42$4, toDisplayString(item.type === "folder" ? "Folder" : item.file_category || item.content_type || "File"), 1)
+                              }, null, 8, _hoisted_45$4)) : createCommentVNode("", true),
+                              createElementVNode("p", _hoisted_46$4, toDisplayString(item.type === "folder" ? "Folder" : item.file_category || item.content_type || "File"), 1)
                             ]),
-                            createElementVNode("div", _hoisted_43$4, toDisplayString(item.type === "folder" ? item.parent_folder?.name || "" : item.folder?.name || ""), 1)
-                          ], 10, _hoisted_37$4);
+                            createElementVNode("div", _hoisted_47$4, toDisplayString(item.type === "folder" ? item.parent_folder?.name || "" : item.folder?.name || ""), 1)
+                          ], 10, _hoisted_41$4);
                         }), 128))
                       ]),
-                      filteredContentFiles.value.length > 5 ? (openBlock(), createElementBlock("div", _hoisted_44$4, [
+                      filteredContentFiles.value.length > 5 ? (openBlock(), createElementBlock("div", _hoisted_48$4, [
                         createElementVNode("span", {
                           class: "text-sm text-gray-600 hover:text-gray-800 font-bold flex items-center cursor-pointer",
-                          onClick: _cache[13] || (_cache[13] = ($event) => searchType.value = "content")
+                          onClick: _cache[10] || (_cache[10] = ($event) => searchType.value = "content")
                         }, [
                           createTextVNode(toDisplayString(unref(t)("canvasUI.CAlgoliaSearch.actions.viewAll")) + " ", 1),
                           createVNode(CIcon, {
@@ -96989,16 +97108,16 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
                         ])
                       ])) : createCommentVNode("", true)
                     ])) : createCommentVNode("", true),
-                    filteredCanvasFiles.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_45$4, [
-                      createElementVNode("div", _hoisted_46$4, [
+                    filteredCanvasFiles.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_49$4, [
+                      createElementVNode("div", _hoisted_50$4, [
                         createVNode(CIcon, {
                           class: "mr-2",
                           color: "var(--p-text2)",
                           icon: "presentation",
                           size: "16"
                         }),
-                        createElementVNode("span", _hoisted_47$4, toDisplayString(unref(t)("canvasUI.CAlgoliaSearch.sections.pitchDecks")), 1),
-                        createElementVNode("span", _hoisted_48$4, "(" + toDisplayString(filteredCanvasFiles.value.length) + ")", 1)
+                        createElementVNode("span", _hoisted_51$3, toDisplayString(unref(t)("canvasUI.CAlgoliaSearch.sections.pitchDecks")), 1),
+                        createElementVNode("span", _hoisted_52$3, "(" + toDisplayString(filteredCanvasFiles.value.length) + ")", 1)
                       ]),
                       createElementVNode("div", null, [
                         (openBlock(true), createElementBlock(Fragment, null, renderList(filteredCanvasFiles.value.slice(0, 5), (item) => {
@@ -97012,25 +97131,25 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
                             "data-result-selected": isResultSelected(item),
                             onClick: ($event) => handleResultClick(item, "canvas")
                           }, [
-                            createElementVNode("div", _hoisted_50$4, [
+                            createElementVNode("div", _hoisted_54$2, [
                               createVNode(CIcon, {
                                 color: "var(--p-text2)",
                                 icon: "presentation",
                                 size: "32"
                               })
                             ]),
-                            createElementVNode("div", _hoisted_51$3, [
-                              createElementVNode("h3", _hoisted_52$3, toDisplayString(item.name), 1),
-                              createElementVNode("p", _hoisted_53$3, toDisplayString(formatCanvasType(item.content_type)), 1)
+                            createElementVNode("div", _hoisted_55$2, [
+                              createElementVNode("h3", _hoisted_56$2, toDisplayString(item.name), 1),
+                              createElementVNode("p", _hoisted_57$2, toDisplayString(formatCanvasType(item.content_type)), 1)
                             ]),
-                            createElementVNode("div", _hoisted_54$2, toDisplayString(item.folder?.name || ""), 1)
-                          ], 10, _hoisted_49$4);
+                            createElementVNode("div", _hoisted_58$2, toDisplayString(item.folder?.name || ""), 1)
+                          ], 10, _hoisted_53$3);
                         }), 128))
                       ]),
-                      filteredCanvasFiles.value.length > 5 ? (openBlock(), createElementBlock("div", _hoisted_55$2, [
+                      filteredCanvasFiles.value.length > 5 ? (openBlock(), createElementBlock("div", _hoisted_59$2, [
                         createElementVNode("span", {
                           class: "text-sm text-gray-600 hover:text-gray-800 font-bold flex items-center cursor-pointer",
-                          onClick: _cache[14] || (_cache[14] = ($event) => searchType.value = "canvases")
+                          onClick: _cache[11] || (_cache[11] = ($event) => searchType.value = "canvases")
                         }, [
                           createTextVNode(toDisplayString(unref(t)("canvasUI.CAlgoliaSearch.actions.viewAll")) + " ", 1),
                           createVNode(CIcon, {
@@ -97041,7 +97160,7 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
                         ])
                       ])) : createCommentVNode("", true)
                     ])) : createCommentVNode("", true),
-                    searchError.value || shouldShowNoResults.value ? (openBlock(), createElementBlock("div", _hoisted_56$2, [
+                    searchError.value || shouldShowNoResults.value ? (openBlock(), createElementBlock("div", _hoisted_60$2, [
                       createVNode(CIcon, {
                         class: "text-6xl",
                         color: searchError.value ? "var(--p-error)" : "var(--p-text3)",
@@ -97054,16 +97173,16 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
                     ])) : createCommentVNode("", true)
                   ], 64))
                 ])
-              ])) : (openBlock(), createElementBlock("div", _hoisted_57$2, [
-                createElementVNode("div", _hoisted_58$2, [
-                  isSearching.value ? (openBlock(), createElementBlock("div", _hoisted_59$2, [
+              ])) : (openBlock(), createElementBlock("div", _hoisted_61$2, [
+                createElementVNode("div", _hoisted_62$2, [
+                  isSearching.value ? (openBlock(), createElementBlock("div", _hoisted_63$2, [
                     createVNode(CIcon, {
                       class: "animate-spin text-6xl",
                       color: "var(--p-primary)",
                       icon: "spinner"
                     })
                   ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                    createElementVNode("div", _hoisted_60$2, [
+                    createElementVNode("div", _hoisted_64$2, [
                       searchType.value === "content" ? (openBlock(), createBlock(CIcon, {
                         key: 0,
                         class: "mr-2",
@@ -97077,8 +97196,8 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
                         icon: "presentation",
                         size: "16"
                       })),
-                      createElementVNode("span", _hoisted_61$2, toDisplayString(searchType.value === "content" ? unref(t)("canvasUI.CAlgoliaSearch.sections.content") : unref(t)("canvasUI.CAlgoliaSearch.sections.pitchDecks")), 1),
-                      createElementVNode("span", _hoisted_62$2, " (" + toDisplayString(searchType.value === "content" ? filteredContentFiles.value.length : filteredCanvasFiles.value.length) + ") ", 1)
+                      createElementVNode("span", _hoisted_65$2, toDisplayString(searchType.value === "content" ? unref(t)("canvasUI.CAlgoliaSearch.sections.content") : unref(t)("canvasUI.CAlgoliaSearch.sections.pitchDecks")), 1),
+                      createElementVNode("span", _hoisted_66$2, " (" + toDisplayString(searchType.value === "content" ? filteredContentFiles.value.length : filteredCanvasFiles.value.length) + ") ", 1)
                     ]),
                     createElementVNode("div", null, [
                       (openBlock(true), createElementBlock(Fragment, null, renderList(searchType.value === "content" ? filteredContentFiles.value : filteredCanvasFiles.value, (item) => {
@@ -97103,7 +97222,7 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
                             "object-fit": "cover",
                             src: item.picture_url || "",
                             width: "72"
-                          }, null, 8, ["file-data", "src"])) : (openBlock(), createElementBlock("div", _hoisted_64$2, [
+                          }, null, 8, ["file-data", "src"])) : (openBlock(), createElementBlock("div", _hoisted_68$2, [
                             searchType.value === "content" ? (openBlock(), createBlock(CIcon, {
                               key: 0,
                               color: "var(--p-text2)",
@@ -97116,20 +97235,20 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
                               size: "32"
                             }))
                           ])),
-                          createElementVNode("div", _hoisted_65$2, [
-                            createElementVNode("h3", _hoisted_66$2, toDisplayString(item.name), 1),
+                          createElementVNode("div", _hoisted_69$1, [
+                            createElementVNode("h3", _hoisted_70$1, toDisplayString(item.name), 1),
                             searchType.value === "content" && item.type === "file" && getSnippet(item) ? (openBlock(), createElementBlock("p", {
                               key: 0,
                               class: "text-xs text-gray-600 mb-1",
                               innerHTML: getSnippet(item)
-                            }, null, 8, _hoisted_67$2)) : createCommentVNode("", true),
-                            createElementVNode("p", _hoisted_68$2, toDisplayString(searchType.value === "content" ? item.type === "folder" ? "Folder" : item.file_category || item.content_type || "File" : formatCanvasType(item.content_type)), 1)
+                            }, null, 8, _hoisted_71$1)) : createCommentVNode("", true),
+                            createElementVNode("p", _hoisted_72$1, toDisplayString(searchType.value === "content" ? item.type === "folder" ? "Folder" : item.file_category || item.content_type || "File" : formatCanvasType(item.content_type)), 1)
                           ]),
-                          createElementVNode("div", _hoisted_69$1, toDisplayString(searchType.value === "content" && item.type === "folder" ? item.parent_folder?.name || "" : item.folder?.name || ""), 1)
-                        ], 10, _hoisted_63$2);
+                          createElementVNode("div", _hoisted_73$1, toDisplayString(searchType.value === "content" && item.type === "folder" ? item.parent_folder?.name || "" : item.folder?.name || ""), 1)
+                        ], 10, _hoisted_67$2);
                       }), 128))
                     ]),
-                    searchError.value || shouldShowNoResults.value ? (openBlock(), createElementBlock("div", _hoisted_70$1, [
+                    searchError.value || shouldShowNoResults.value ? (openBlock(), createElementBlock("div", _hoisted_74$1, [
                       createVNode(CIcon, {
                         class: "text-6xl",
                         color: searchError.value ? "var(--p-error)" : "var(--p-text3)",
@@ -97144,7 +97263,7 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
                 ])
               ]))
             ]),
-            !showRecentView.value ? (openBlock(), createElementBlock("div", _hoisted_71$1, [
+            !showRecentView.value ? (openBlock(), createElementBlock("div", _hoisted_75$1, [
               createVNode(CShortcut, null, {
                 default: withCtx(() => [
                   createVNode(CShortcutIcon, { icon: "arrow-up" }),
@@ -97186,7 +97305,7 @@ const _sfc_main$5K = /* @__PURE__ */ defineComponent({
   }
 });
 
-const CAlgoliaSearch = /* @__PURE__ */ _export_sfc(_sfc_main$5K, [["__scopeId", "data-v-da2357d4"]]);
+const CAlgoliaSearch = /* @__PURE__ */ _export_sfc(_sfc_main$5K, [["__scopeId", "data-v-840d4fd4"]]);
 
 const BulletListExtended = BulletList.extend({
   addOptions() {
@@ -109616,9 +109735,11 @@ const _sfc_main$4U = /* @__PURE__ */ defineComponent({
 function filterByItemVisibility(items) {
   const isAdmin = state$3.appName.value === "admin";
   return items.reduce((acc, item) => {
+    const hasCountData = "files_count" in item || "folders_count" in item || "available_files_count" in item || "available_folders_count" in item;
     const filesCount = item.available_files_count ?? item.files_count ?? 0;
     const foldersCount = item.available_folders_count ?? item.folders_count ?? 0;
-    const shouldHideItem = item.name?.startsWith(".") || item.type == "folder" && filesCount === 0 && foldersCount === 0 || item.folder?.file_thumbnail_urls?.length === 0;
+    const isFolderEmpty = item.type == "folder" && hasCountData && filesCount === 0 && foldersCount === 0;
+    const shouldHideItem = item.name?.startsWith(".") || isFolderEmpty || item.folder?.file_thumbnail_urls?.length === 0;
     if (!shouldHideItem && !isAdmin || isAdmin) {
       acc.push({
         ...item,
@@ -109995,7 +110116,8 @@ const getInitialState$1 = () => ({
   // instance metadata template fields dictionary
   searchQuery: "",
   searchMetadataFilters: {},
-  filteredItems: []
+  filteredItems: [],
+  folderCache: {}
 });
 const state$2 = reactive(getInitialState$1());
 const fileOrderedStatuses = [FileStatusEnum.PENDING, FileStatusEnum.VIEWABLE];
@@ -110080,6 +110202,15 @@ function updateFolderState(folder) {
   state$2.folders = folder.folders;
   state$2.files = folder.files;
   state$2.currentFolderPath = folder.path;
+  folder.folders.forEach((subfolder) => {
+    state$2.folderCache[subfolder.id] = {
+      files_count: subfolder.files_count,
+      folders_count: subfolder.folders_count,
+      available_files_count: subfolder.available_files_count,
+      available_folders_count: subfolder.available_folders_count,
+      timestamp: Date.now()
+    };
+  });
   if (useAppStore$4().showFilteredResults.value) {
     const filesById = new Map(state$2.files.map((file) => [file.id, file]));
     state$2.filteredItems = state$2.filteredItems.map((filteredItem) => {
@@ -110344,7 +110475,24 @@ function init({
       }
       let filteredFolders = [];
       if (!hasMetadataFilters && foldersResponse.status === "fulfilled" && foldersResponse.value) {
-        filteredFolders = foldersResponse.value.results?.map((f) => ({ ...f, type: "folder" })) ?? [];
+        const foldersFromSearch = foldersResponse.value.results ?? [];
+        filteredFolders = foldersFromSearch.map((folder) => {
+          const cached = state$2.folderCache[folder.id];
+          if (cached) {
+            const result = {
+              ...folder,
+              type: "folder"
+            };
+            if (cached.files_count !== void 0) result.files_count = cached.files_count;
+            if (cached.folders_count !== void 0) result.folders_count = cached.folders_count;
+            if (cached.available_files_count !== void 0) result.available_files_count = cached.available_files_count;
+            if (cached.available_folders_count !== void 0) {
+              result.available_folders_count = cached.available_folders_count;
+            }
+            return result;
+          }
+          return { ...folder, type: "folder" };
+        });
       } else if (!hasMetadataFilters && !useAppStore$4().isLocalSearch.value) {
         console.error(
           "Failed to fetch folders:",
@@ -137726,19 +137874,37 @@ function useComponentPermissions({
       isAnyTypeOfAdmin: false
     }))
   );
-  const { canvasContent } = useCanvas$1();
+  const launchDarkly = inject(
+    "launchDarkly",
+    computed(() => ({}))
+  );
+  const { canvasContent, activeCanvas } = useCanvas$1();
   return computed(() => {
-    if (!usedInSectionId.value) return calculateCanvasPermissions(id.value, !!pitcherInfo.value?.isAnyTypeOfAdmin);
-    const parent = findParentByNodeId(canvasContent.value, id.value);
-    const canRemove = !!when_used_in_section.value?.is_removable;
-    const canEdit = !!when_used_in_section.value?.is_editable;
-    const canDuplicate = parent ? !!parent.when_used_in_section?.is_editable : false;
-    return {
-      hasSomethingEditable: canEdit || canRemove || canDuplicate,
-      canRemove,
-      canEdit,
-      canDuplicate
-    };
+    if (usedInSectionId.value) {
+      const parent = findParentByNodeId(canvasContent.value, id.value);
+      const canRemove = !!when_used_in_section.value?.is_removable;
+      const canEdit = !!when_used_in_section.value?.is_editable;
+      const canDuplicate = parent ? !!parent.when_used_in_section?.is_editable : false;
+      return {
+        hasSomethingEditable: canEdit || canRemove || canDuplicate,
+        canRemove,
+        canEdit,
+        canDuplicate
+      };
+    }
+    const hasExplicitPermissions = when_used_in_section.value !== null && when_used_in_section.value !== void 0 && (when_used_in_section.value.is_editable !== void 0 || when_used_in_section.value.is_removable !== void 0);
+    if (activeCanvas.value?.template?.id && launchDarkly.value.enable_template_component_permissions && hasExplicitPermissions) {
+      const canRemove = !!when_used_in_section.value?.is_removable;
+      const canEdit = !!when_used_in_section.value?.is_editable;
+      const canDuplicate = canEdit;
+      return {
+        hasSomethingEditable: canEdit || canRemove || canDuplicate,
+        canRemove,
+        canEdit,
+        canDuplicate
+      };
+    }
+    return calculateCanvasPermissions(id.value, !!pitcherInfo.value?.isAnyTypeOfAdmin);
   });
 }
 
@@ -156715,7 +156881,9 @@ const _sfc_main$1P = /* @__PURE__ */ defineComponent({
     visible: {},
     allow_admins_to_overwrite: { type: Boolean },
     style: {},
-    printModeIdx: {}
+    printModeIdx: {},
+    when_used_in_section: {},
+    usedInSectionId: { default: "" }
   },
   emits: ["style"],
   setup(__props, { emit: __emit }) {
@@ -156730,12 +156898,42 @@ const _sfc_main$1P = /* @__PURE__ */ defineComponent({
       computed(() => [])
     );
     const { isCompletionWizardEnabled, retriggerWizard } = useCanvasCompletionWizard();
-    const isEditable = computed(
-      () => isImpact.value ? !props.data.selection_strategy || props.data.selection_strategy === "free" || isCompletionWizardEnabled.value && wizardStepSectionListIds.value.includes(props.id) : true
-    );
-    const isRemovable = computed(
-      () => isImpact.value ? !props.data.selection_strategy || props.data.selection_strategy === "free" : true
-    );
+    const {
+      isImpact,
+      mode,
+      isEditMode,
+      componentSelectedMode,
+      isViewOnlyMode,
+      componentEditMode,
+      componentNodesById,
+      activeCanvas,
+      saveCanvasContentWithContext,
+      removeComponentById,
+      setComponentSelectedMode,
+      setComponentSettingsMode,
+      updateNodeDataById,
+      canvasContent
+    } = useCanvas$1();
+    const { id, usedInSectionId, when_used_in_section } = toRefs(props);
+    const componentPermissions = useComponentPermissions({
+      id,
+      usedInSectionId,
+      when_used_in_section
+    });
+    const isEditable = computed(() => {
+      if (!componentPermissions.value.canEdit) return false;
+      if (isImpact.value) {
+        return !props.data.selection_strategy || props.data.selection_strategy === "free" || isCompletionWizardEnabled.value && wizardStepSectionListIds.value.includes(props.id);
+      }
+      return true;
+    });
+    const isRemovable = computed(() => {
+      if (!componentPermissions.value.canRemove) return false;
+      if (isImpact.value) {
+        return !props.data.selection_strategy || props.data.selection_strategy === "free";
+      }
+      return true;
+    });
     const sectionSelectorAppSrc = computed(() => {
       if (!sectionSelectorApps.value?.length || !props.data.selection_app_name) return null;
       const relatedApp = sectionSelectorApps.value.find((app) => app.app_metadata?.name === props.data.selection_app_name);
@@ -156802,7 +157000,7 @@ const _sfc_main$1P = /* @__PURE__ */ defineComponent({
           async (selectedData) => {
             console.info(`[SectionList]: Received done callback for ${props.id} with data`, selectedData);
             if (!selectedData) return;
-            const sections = (selectedData?.section_ids || []).map((id) => ({ id: typeof id === "string" ? id : id.id }));
+            const sections = (selectedData?.section_ids || []).map((id2) => ({ id: typeof id2 === "string" ? id2 : id2.id }));
             const updatedData = { ...props.data, sections };
             updateNodeDataById(props.id, updatedData);
             const currentContext = cloneDeep(activeCanvas.value?.context || {});
@@ -156828,22 +157026,6 @@ const _sfc_main$1P = /* @__PURE__ */ defineComponent({
         sectionListRef.value?.toggleSectionSelector();
       }
     }
-    const {
-      isImpact,
-      mode,
-      isEditMode,
-      componentSelectedMode,
-      isViewOnlyMode,
-      componentEditMode,
-      componentNodesById,
-      activeCanvas,
-      saveCanvasContentWithContext,
-      removeComponentById,
-      setComponentSelectedMode,
-      setComponentSettingsMode,
-      updateNodeDataById,
-      canvasContent
-    } = useCanvas$1();
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         unref(shouldDisplayPlaceholderComponent)(unref(isEditMode), unref(mode), _ctx.visible) ? (openBlock(), createBlock(PlaceholderComponent, {
@@ -156851,25 +157033,25 @@ const _sfc_main$1P = /* @__PURE__ */ defineComponent({
           name: _ctx.tracking_id
         }, null, 8, ["name"])) : unref(isEditMode) && !unref(isViewOnlyMode) ? (openBlock(), createBlock(_sfc_main$34, {
           key: 1,
-          id: _ctx.id,
-          active: unref(componentEditMode) && unref(componentEditMode)?.id === _ctx.id,
+          id: unref(id),
+          active: unref(componentEditMode) && unref(componentEditMode)?.id === unref(id),
           class: normalizeClass({ "mt-12": sectionListName.value }),
           edit: isEditable.value,
           "exclude-stylables": [unref(ThemeComponentOptionEnum).COLOR_PICKER],
           remove: isRemovable.value,
-          selected: unref(componentSelectedMode) && unref(componentSelectedMode)?.id === _ctx.id,
+          selected: unref(componentSelectedMode) && unref(componentSelectedMode)?.id === unref(id),
           settings: "",
           stylable: "",
           style: normalizeStyle(unref(omit$1)(_ctx.style, "paddingBottom", "paddingLeft", "paddingTop", "paddingRight")),
           onEdit: handleEdit,
-          onRemove: _cache[0] || (_cache[0] = ($event) => unref(removeComponentById)(_ctx.id)),
-          onSelect: _cache[1] || (_cache[1] = ($event) => unref(setComponentSelectedMode)(_ctx.id)),
-          onSettings: _cache[2] || (_cache[2] = ($event) => unref(setComponentSettingsMode)(_ctx.id)),
+          onRemove: _cache[0] || (_cache[0] = ($event) => unref(removeComponentById)(unref(id))),
+          onSelect: _cache[1] || (_cache[1] = ($event) => unref(setComponentSelectedMode)(unref(id))),
+          onSettings: _cache[2] || (_cache[2] = ($event) => unref(setComponentSettingsMode)(unref(id))),
           onStyle: _cache[3] || (_cache[3] = ($event) => emit("style", $event))
         }, {
           default: withCtx(() => [
             createVNode(RawSectionList, mergeProps({
-              id: _ctx.id,
+              id: unref(id),
               ref_key: "sectionListRef",
               ref: sectionListRef,
               class: "pa-2",
@@ -156887,7 +157069,7 @@ const _sfc_main$1P = /* @__PURE__ */ defineComponent({
           _: 1
         }, 8, ["id", "active", "class", "edit", "exclude-stylables", "remove", "selected", "style"])) : (openBlock(), createBlock(RawSectionList, mergeProps({
           key: 2,
-          id: _ctx.id,
+          id: unref(id),
           data: _ctx.data
         }, unref(attrs), {
           "has-section-selector-app": !!sectionSelectorAppSrc.value,
@@ -159415,7 +159597,8 @@ const _sfc_main$1H = /* @__PURE__ */ defineComponent({
     autofill: {},
     linkable: {},
     autofill_content_types: {},
-    when_used_in_section: {}
+    when_used_in_section: {},
+    usedInSectionId: { default: "" }
   },
   emits: ["style"],
   setup(__props, { emit: __emit }) {
@@ -159426,12 +159609,42 @@ const _sfc_main$1H = /* @__PURE__ */ defineComponent({
       computed(() => [])
     );
     const { isCompletionWizardEnabled, retriggerWizard } = useCanvasCompletionWizard();
-    const isEditable = computed(
-      () => isImpact.value ? !props.data.selection_strategy || props.data.selection_strategy === "free" || isCompletionWizardEnabled.value && wizardStepSectionListIds.value.includes(props.id) : true
-    );
-    const isRemovable = computed(
-      () => isImpact.value ? !props.data.selection_strategy || props.data.selection_strategy === "free" : true
-    );
+    const {
+      isImpact,
+      mode,
+      isEditMode,
+      componentSelectedMode,
+      isViewOnlyMode,
+      componentEditMode,
+      componentNodesById,
+      activeCanvas,
+      saveCanvasContentWithContext,
+      removeComponentById,
+      setComponentSelectedMode,
+      setComponentSettingsMode,
+      updateNodeDataById,
+      canvasContent
+    } = useCanvas$1();
+    const { id, usedInSectionId, when_used_in_section } = toRefs(props);
+    const componentPermissions = useComponentPermissions({
+      id,
+      usedInSectionId,
+      when_used_in_section
+    });
+    const isEditable = computed(() => {
+      if (!componentPermissions.value.canEdit) return false;
+      if (isImpact.value) {
+        return !props.data.selection_strategy || props.data.selection_strategy === "free" || isCompletionWizardEnabled.value && wizardStepSectionListIds.value.includes(props.id);
+      }
+      return true;
+    });
+    const isRemovable = computed(() => {
+      if (!componentPermissions.value.canRemove) return false;
+      if (isImpact.value) {
+        return !props.data.selection_strategy || props.data.selection_strategy === "free";
+      }
+      return true;
+    });
     const sectionSelectorAppSrc = computed(() => {
       if (!sectionSelectorApps.value?.length || !props.data.selection_app_name) return null;
       const relatedApp = sectionSelectorApps.value.find((app) => app.app_metadata?.name === props.data.selection_app_name);
@@ -159497,7 +159710,7 @@ const _sfc_main$1H = /* @__PURE__ */ defineComponent({
           async (selectedData) => {
             console.info(`[SectionList]: Received done callback for ${props.id} with data`, selectedData);
             if (!selectedData) return;
-            const sections = (selectedData?.section_ids || []).map((id) => ({ id: typeof id === "string" ? id : id.id }));
+            const sections = (selectedData?.section_ids || []).map((id2) => ({ id: typeof id2 === "string" ? id2 : id2.id }));
             const updatedData = { ...props.data, sections };
             updateNodeDataById(props.id, updatedData);
             const currentContext = cloneDeep(activeCanvas.value?.context || {});
@@ -159523,22 +159736,6 @@ const _sfc_main$1H = /* @__PURE__ */ defineComponent({
         contentListRef.value?.toggleSectionSelector();
       }
     }
-    const {
-      isImpact,
-      mode,
-      isEditMode,
-      componentSelectedMode,
-      isViewOnlyMode,
-      componentEditMode,
-      componentNodesById,
-      activeCanvas,
-      saveCanvasContentWithContext,
-      removeComponentById,
-      setComponentSelectedMode,
-      setComponentSettingsMode,
-      updateNodeDataById,
-      canvasContent
-    } = useCanvas$1();
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         unref(shouldDisplayPlaceholderComponent)(unref(isEditMode), unref(mode), _ctx.visible) ? (openBlock(), createBlock(PlaceholderComponent, {
@@ -159546,25 +159743,25 @@ const _sfc_main$1H = /* @__PURE__ */ defineComponent({
           name: _ctx.tracking_id
         }, null, 8, ["name"])) : unref(isEditMode) && !unref(isViewOnlyMode) ? (openBlock(), createBlock(_sfc_main$34, {
           key: 1,
-          id: _ctx.id,
-          active: unref(componentEditMode) && unref(componentEditMode)?.id === _ctx.id,
+          id: unref(id),
+          active: unref(componentEditMode) && unref(componentEditMode)?.id === unref(id),
           class: normalizeClass({ "mt-12": componentName.value }),
           edit: isEditable.value,
           "exclude-stylables": [unref(ThemeComponentOptionEnum).COLOR_PICKER],
           remove: isRemovable.value,
-          selected: unref(componentSelectedMode) && unref(componentSelectedMode)?.id === _ctx.id,
+          selected: unref(componentSelectedMode) && unref(componentSelectedMode)?.id === unref(id),
           settings: "",
           stylable: "",
           style: normalizeStyle(unref(omit$1)(_ctx.style, "paddingBottom", "paddingLeft", "paddingTop", "paddingRight")),
           onEdit: handleEdit,
-          onRemove: _cache[0] || (_cache[0] = ($event) => unref(removeComponentById)(_ctx.id)),
-          onSelect: _cache[1] || (_cache[1] = ($event) => unref(setComponentSelectedMode)(_ctx.id)),
-          onSettings: _cache[2] || (_cache[2] = ($event) => unref(setComponentSettingsMode)(_ctx.id)),
+          onRemove: _cache[0] || (_cache[0] = ($event) => unref(removeComponentById)(unref(id))),
+          onSelect: _cache[1] || (_cache[1] = ($event) => unref(setComponentSelectedMode)(unref(id))),
+          onSettings: _cache[2] || (_cache[2] = ($event) => unref(setComponentSettingsMode)(unref(id))),
           onStyle: _cache[3] || (_cache[3] = ($event) => emit("style", $event))
         }, {
           default: withCtx(() => [
             createVNode(ContentListRaw, mergeProps({
-              id: _ctx.id,
+              id: unref(id),
               ref_key: "contentListRef",
               ref: contentListRef,
               class: ["pa-2", props.class],
@@ -159582,7 +159779,7 @@ const _sfc_main$1H = /* @__PURE__ */ defineComponent({
           _: 1
         }, 8, ["id", "active", "class", "edit", "exclude-stylables", "remove", "selected", "style"])) : (openBlock(), createBlock(ContentListRaw, mergeProps({
           key: 2,
-          id: _ctx.id,
+          id: unref(id),
           data: _ctx.data
         }, unref(attrs), {
           "has-section-selector-app": !!sectionSelectorAppSrc.value,
@@ -162494,7 +162691,7 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
     );
     const areSectionsSystemControlled = computed(() => launchDarkly.value?.are_sections_system_controlled);
     const allowEditOrRemove = computed(
-      () => (selectedComponentType.value === ComponentTypes.Text || selectedComponentType.value === ComponentTypes.Carousel || selectedComponentType.value === ComponentTypes.Multimedia) && isAdmin.value && isSection.value
+      () => isAdmin.value && ((selectedComponentType.value === ComponentTypes.Text || selectedComponentType.value === ComponentTypes.Carousel || selectedComponentType.value === ComponentTypes.Multimedia) && isSection.value || launchDarkly.value.enable_template_component_permissions && isCanvasTemplate.value)
     );
     const canSelectSectionListStrategy = computed(
       () => isAdmin.value && isCanvasTemplate.value && isSectionOrContentList.value
@@ -162556,7 +162753,8 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
       formValues.contentGridDataAccessor = value || "";
     }
     function getEditOrRemoveOption() {
-      const map = activeSettingsNode.value?.when_used_in_section ?? cloneDeep(defaultWhenUsedInSection);
+      const defaultPermissions = isCanvasTemplate.value && launchDarkly.value.enable_template_component_permissions ? cloneDeep(defaultWhenUsedInTemplate) : cloneDeep(defaultWhenUsedInSection);
+      const map = activeSettingsNode.value?.when_used_in_section ?? defaultPermissions;
       let value = "";
       value += map.is_editable ? "1" : "0";
       value += map.is_removable ? "1" : "0";
@@ -163057,7 +163255,7 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const ComponentDrawerSettings = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-dce6a881"]]);
+const ComponentDrawerSettings = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-a4296e5c"]]);
 
 function useConnectUpload() {
   async function uploadToConnect(formData) {
@@ -176290,10 +176488,10 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "ActionsToolbar",
   setup(__props) {
     useCssVars((_ctx) => ({
-      "c6ccac5c": unref(themeVars).primary4,
-      "3edbaaa2": unref(themeVars).primary,
-      "c6ccac58": unref(themeVars).primary6,
-      "0f45ae31": unref(themeVars).base
+      "6b5e9219": unref(themeVars).primary4,
+      "3d451d7b": unref(themeVars).primary,
+      "6b5e921b": unref(themeVars).primary6,
+      "42dfd1f8": unref(themeVars).base
     }));
     const {
       toggleContentPanel,
@@ -176521,7 +176719,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         return (nameMatch || createdByMatch || tagMatch) && metadataMatch;
       });
       const folderResults = folders.map((folder) => {
-        return {
+        const result = {
           id: folder.id,
           name: folder.name,
           folder_id: apiState.currentFolderId,
@@ -176533,6 +176731,11 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           file_thumbnail_urls: folder.file_thumbnail_urls,
           thumbnail_url: folder.thumbnail_url
         };
+        if (folder.files_count !== void 0) result.files_count = folder.files_count;
+        if (folder.folders_count !== void 0) result.folders_count = folder.folders_count;
+        if (folder.available_files_count !== void 0) result.available_files_count = folder.available_files_count;
+        if (folder.available_folders_count !== void 0) result.available_folders_count = folder.available_folders_count;
+        return result;
       });
       const fileResults = files.map((file) => {
         return {
@@ -176761,7 +176964,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-const ActionsToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-fecebf5a"]]);
+const ActionsToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-41ca4793"]]);
 
 const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "FavoritesTable",