@pitcher/canvas-ui 2026.1.19-125708 → 2026.1.19-140513-beta

package/canvas-ui.css

@@ -2667,7 +2667,7 @@ to {
   padding: 0;
 }
 
-.data-accessor-input[data-v-dce6a881] .n-input__prefix {
+.data-accessor-input[data-v-1ab19780] .n-input__prefix {
   margin-right: 0;
 }
 .cb-dynamic-data-table-settings {

package/canvas-ui.js

@@ -109730,18 +109730,16 @@ const _sfc_main$4U = /* @__PURE__ */ defineComponent({
 
 function filterByItemVisibility(items) {
   const isAdmin = state$3.appName.value === "admin";
-  const isSearchMode = state$3.showFilteredResults.value;
   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 isFolderEmpty = item.type == "folder" && hasCountData && filesCount === 0 && foldersCount === 0;
-    const isFolderWithoutData = item.type == "folder" && !hasCountData && isSearchMode;
     const shouldHideItem = item.name?.startsWith(".") || isFolderEmpty || item.folder?.file_thumbnail_urls?.length === 0;
     if (!shouldHideItem && !isAdmin || isAdmin) {
       acc.push({
         ...item,
-        opacity: isFolderWithoutData || shouldHideItem && isAdmin ? 0.5 : 1
+        opacity: shouldHideItem && isAdmin ? 0.5 : 1
       });
     }
     return acc;
@@ -110333,13 +110331,6 @@ function init({
         canvas_thumbnail_urls: []
       }
     ];
-    state$2.folderCache[folder.id] = {
-      files_count: 0,
-      folders_count: 0,
-      available_files_count: 0,
-      available_folders_count: 0,
-      timestamp: Date.now()
-    };
     return folder;
   };
   state$2.folderUpdater = async function(payload) {
@@ -110363,7 +110354,6 @@ function init({
   state$2.folderDeleter = async function(payload) {
     await onFolderDelete(payload);
     state$2.folders = state$2.folders.filter((folder) => folder.id !== payload);
-    delete state$2.folderCache[payload];
     useAppStore$4().removeSelectedItems([payload]);
   };
   state$2.folderFetcher = async function(folderId) {
@@ -110384,9 +110374,6 @@ function init({
     const response = await onFoldersDelete(payload);
     const deletedIdsSet = new Set(response.deleted_ids);
     state$2.folders = state$2.folders.filter((folder) => !deletedIdsSet.has(folder.id));
-    response.deleted_ids.forEach((id2) => {
-      delete state$2.folderCache[id2];
-    });
     useAppStore$4().removeSelectedItems(response.deleted_ids);
     return response;
   };
@@ -137883,19 +137870,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);
   });
 }
 
@@ -156872,7 +156877,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 }) {
@@ -156887,12 +156894,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);
@@ -156959,7 +156996,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 || {});
@@ -156985,22 +157022,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, {
@@ -157008,25 +157029,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",
@@ -157044,7 +157065,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,
@@ -159572,7 +159593,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 }) {
@@ -159582,17 +159604,43 @@ const _sfc_main$1H = /* @__PURE__ */ defineComponent({
       "sectionSelectorApps",
       computed(() => [])
     );
-    const launchDarkly = inject(
-      "launchDarkly",
-      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);
@@ -159611,7 +159659,6 @@ const _sfc_main$1H = /* @__PURE__ */ defineComponent({
     const attrs = useAttrs();
     const contentListRef = ref(null);
     const componentName = computed(() => {
-      if (!launchDarkly.value?.display_section_list_name) return;
       const node = componentNodesById.value[props.id];
       return node.tracking_id !== node.type ? node.tracking_id : "";
     });
@@ -159659,7 +159706,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 || {});
@@ -159685,22 +159732,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, {
@@ -159708,25 +159739,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],
@@ -159744,7 +159775,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,
@@ -162656,7 +162687,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
@@ -162718,7 +162749,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 ? { is_editable: true, is_removable: true } : 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";
@@ -163219,7 +163251,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-1ab19780"]]);
 
 function useConnectUpload() {
   async function uploadToConnect(formData) {