@pitcher/canvas-ui 2026.1.15-101627-beta → 2026.1.15-103854-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-a4296e5c] .n-input__prefix {
   margin-right: 0;
 }
 .cb-dynamic-data-table-settings {

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",
@@ -88214,7 +88218,7 @@ async function crmQueryAdaptive(payload) {
   try {
     const env = await highLevelApi.API.request("get_env");
     const isIos = env?.mode === "IOS";
-    const isSfdcSyncEnabled = env?.launch_darkly?.sfdc_offline_enabled === true;
+    const isSfdcSyncEnabled = env?.pitcher?.instance?.settings?.enable_sfdc_sync === true;
     useSmartStore = isIos && isSfdcSyncEnabled;
   } catch {
     useSmartStore = false;
@@ -137870,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);
   });
 }
 
@@ -156859,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 }) {
@@ -156874,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);
@@ -156946,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 || {});
@@ -156972,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, {
@@ -156995,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",
@@ -157031,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,
@@ -159559,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 }) {
@@ -159570,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);
@@ -159641,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 || {});
@@ -159667,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, {
@@ -159690,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],
@@ -159726,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,
@@ -162638,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
@@ -162700,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";
@@ -163201,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) {
@@ -181989,7 +182043,7 @@ function useSmartStore(env) {
         return false;
       }
       const isIos = envValue?.mode === "IOS";
-      const isSfdcSyncEnabled = envValue?.launch_darkly?.sfdc_offline_enabled === true;
+      const isSfdcSyncEnabled = envValue?.pitcher?.instance?.settings?.enable_sfdc_sync === true;
       return isIos && isSfdcSyncEnabled;
     } catch (error) {
       console.error("[useSmartStore] Error checking SmartStore availability:", error);