@blokkli/editor 2.0.0-alpha.46 → 2.0.0-alpha.48

package/dist/runtime/editor/features/hover/Renderer/vertex.glsl

@@ -31,6 +31,7 @@ uniform vec3 u_color_accent;
 uniform vec3 u_color_teal;
 uniform vec3 u_color_white;
 uniform vec3 u_color_lime;
+uniform vec3 u_color_yellow;
 
 // The transformed quad for the fragment shader.
 out vec4 v_quad;
@@ -140,8 +141,10 @@ void main() {
   v_dash_cycle = 14.0 - u_scale * 1.0;
   v_rect_size_artboard = vec2(hoverPos.z, hoverPos.w);
 
-  // Select color based on type: 0 = mono, 1 = accent, 2 = teal, 3 = white (inverted), 4 = lime (library)
-  if (hoverType > 3.5) {
+  // Select color based on type: 0 = mono, 1 = accent, 2 = teal, 3 = white (inverted), 4 = lime (library), 5 = yellow (restricted)
+  if (hoverType > 4.5) {
+    v_color = u_color_yellow;
+  } else if (hoverType > 3.5) {
     v_color = u_color_lime;
   } else if (hoverType > 2.5) {
     v_color = u_color_white;

package/dist/runtime/editor/features/library/index.vue

@@ -3,6 +3,7 @@
     v-if="isReusable"
     id="library_detach"
     :title="$t('libraryDetach', 'Detach from library')"
+    :disabled="detachDisabledReason"
     icon="reusable-detach"
     edit-only
     multiple
@@ -13,7 +14,7 @@
     v-else-if="!isReusable"
     id="library_make_reusable"
     :title="$t('libraryAdd', 'Add to library...')"
-    :disabled="!canMakeReusable"
+    :disabled="makeReusableDisabledReason"
     edit-only
     icon="reusable"
     :weight="-70"
@@ -82,6 +83,12 @@ const showReusableDialog = useDialog("library-reusable", "center");
 const userCanCreateLibraryItem = computed(
   () => permissions.hasPermission("create_library_item")
 );
+const canAddFromLibrary = computed(
+  () => permissions.checkBlockBundlePermission(fromLibraryBlockBundle, "add")
+);
+const canEditFromLibrary = computed(
+  () => permissions.checkBlockBundlePermission(fromLibraryBlockBundle, "edit")
+);
 async function selectNewlyAdded(cb) {
   const uuidsBefore = state.getAllUuids();
   await cb();
@@ -93,7 +100,7 @@ async function selectNewlyAdded(cb) {
   eventBus.emit("select", newUuid);
 }
 const onDetach = async () => {
-  if (!adapter.detachReusableBlock || !selection.uuids.value.length) {
+  if (!adapter.detachReusableBlock || !selection.uuids.value.length || detachDisabledReason.value) {
     return;
   }
   await selectNewlyAdded(
@@ -106,7 +113,7 @@ const onDetach = async () => {
 };
 const placedAction = ref(null);
 const onAddLibraryItem = async (uuid) => {
-  if (!placedAction.value || !adapter.addLibraryItem) {
+  if (!placedAction.value || !adapter.addLibraryItem || !canAddFromLibrary.value) {
     return;
   }
   await state.mutateWithLoadingState(
@@ -166,9 +173,46 @@ const fromLibraryAllowedInList = computed(() => {
   }
   return types.allowedTypesInList.value.includes(fromLibraryBlockBundle);
 });
-const canMakeReusable = computed(
-  () => !isReusable.value && itemBundle?.value?.allowReusable && fromLibraryAllowedInList.value && userCanCreateLibraryItem.value
-);
+const detachDisabledReason = computed(() => {
+  if (!canEditFromLibrary.value) {
+    return $t(
+      "libraryDetachNoPermission",
+      "You do not have permission to detach this block."
+    );
+  }
+  return false;
+});
+const makeReusableDisabledReason = computed(() => {
+  if (isReusable.value) {
+    return false;
+  }
+  if (!userCanCreateLibraryItem.value) {
+    return $t(
+      "libraryAddNoPermission",
+      "You do not have permission to create library items."
+    );
+  }
+  const item = selection.item.value;
+  if (item && !permissions.checkBlockBundlePermission(item.bundle, "edit")) {
+    return $t(
+      "libraryAddNoEditPermission",
+      "You do not have permission to edit this block."
+    );
+  }
+  if (!itemBundle?.value?.allowReusable) {
+    return $t(
+      "libraryAddNotSupported",
+      "This block type cannot be made reusable."
+    );
+  }
+  if (!fromLibraryAllowedInList.value) {
+    return $t(
+      "libraryAddNotAllowedInField",
+      "Reusable blocks are not allowed in this field."
+    );
+  }
+  return false;
+});
 const editingLibraryItem = ref(null);
 onBlokkliEvent("library:edit-item", function(e) {
   editingLibraryItem.value = {
@@ -186,7 +230,7 @@ function onSubmitLibraryItem() {
 }
 defineDropHandler("reusable", {
   async execute({ items, host, afterUuid }) {
-    if (adapter.addLibraryItem) {
+    if (adapter.addLibraryItem && canAddFromLibrary.value) {
       await state.mutateWithLoadingState(
         () => adapter.addLibraryItem({
           libraryItemUuid: items[0].libraryItemUuid,
@@ -198,7 +242,7 @@ defineDropHandler("reusable", {
   }
 });
 defineAddAction(() => {
-  if (!adapter.addLibraryItem || !adapter.getLibraryItems || !isSupportedOnEntity.value) {
+  if (!adapter.addLibraryItem || !adapter.getLibraryItems || !isSupportedOnEntity.value || !canAddFromLibrary.value) {
     return;
   }
   return {

package/dist/runtime/editor/features/media-library/Library/FilterSelect/index.d.vue.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    label: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    modelValue?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/media-library/Library/FilterSelect/index.vue

@@ -0,0 +1,168 @@
+<template>
+  <div
+    ref="root"
+    class="bk-media-library-filter-select"
+    :class="{ 'bk-is-open': isOpen }"
+    @keydown.stop="onKeydown"
+  >
+    <button type="button" @click="toggle">
+      <div>
+        <span class="bk-media-library-filter-select-label">{{ label }}</span>
+        <span
+          v-if="selectedLabel"
+          class="bk-media-library-filter-select-value"
+          >{{ selectedLabel }}</span
+        >
+      </div>
+      <Icon name="bk_mdi_arrow_drop_down" />
+    </button>
+    <div
+      v-if="isOpen"
+      class="bk-media-library-filter-select-dropdown bk-scrollbar-dark"
+    >
+      <div
+        v-if="options.length > 10"
+        class="bk-media-library-filter-select-search"
+      >
+        <input
+          ref="searchInput"
+          v-model="search"
+          class="bk-form-input bk-is-small"
+          type="text"
+          :placeholder="$t('filterSelectSearch', 'Search...')"
+        />
+      </div>
+      <ul ref="listEl">
+        <li v-for="(option, index) in filteredOptions" :key="option.value">
+          <button
+            type="button"
+            :class="{
+  'bk-is-active': option.value === modelValue,
+  'bk-is-highlighted': index === highlightedIndex
+}"
+            @click="select(option.value)"
+            @mouseenter="highlightedIndex = index"
+          >
+            {{ option.label }}
+          </button>
+        </li>
+        <li
+          v-if="!filteredOptions.length"
+          class="bk-media-library-filter-select-empty"
+        >
+          {{ $t("filterSelectNoResults", "No results") }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  computed,
+  nextTick,
+  watch,
+  useTemplateRef,
+  onBeforeUnmount,
+  useBlokkli
+} from "#imports";
+import { Icon } from "#blokkli/editor/components";
+const { $t } = useBlokkli();
+const props = defineProps({
+  label: { type: String, required: true },
+  options: { type: Array, required: true },
+  modelValue: { type: String, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const isOpen = ref(false);
+const search = ref("");
+const highlightedIndex = ref(-1);
+const searchInput = useTemplateRef("searchInput");
+const root = useTemplateRef("root");
+const listEl = useTemplateRef("listEl");
+const selectedLabel = computed(() => {
+  const option = props.options.find((o) => o.value === props.modelValue);
+  return option?.label ?? "";
+});
+const filteredOptions = computed(() => {
+  if (!search.value) {
+    return props.options;
+  }
+  const term = search.value.toLowerCase();
+  return props.options.filter((o) => o.label.toLowerCase().includes(term));
+});
+watch(filteredOptions, () => {
+  highlightedIndex.value = -1;
+});
+function scrollToHighlighted() {
+  if (!listEl.value || highlightedIndex.value < 0) {
+    return;
+  }
+  const buttons = listEl.value.querySelectorAll("button");
+  buttons[highlightedIndex.value]?.scrollIntoView({ block: "nearest" });
+}
+function toggle() {
+  isOpen.value = !isOpen.value;
+  if (isOpen.value) {
+    search.value = "";
+    highlightedIndex.value = -1;
+    nextTick(() => {
+      searchInput.value?.focus();
+    });
+  }
+}
+function select(value) {
+  emit("update:modelValue", value);
+  isOpen.value = false;
+}
+function onKeydown(e) {
+  if (!isOpen.value) {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      toggle();
+    }
+    return;
+  }
+  const options = filteredOptions.value;
+  switch (e.key) {
+    case "ArrowDown":
+      e.preventDefault();
+      highlightedIndex.value = highlightedIndex.value < options.length - 1 ? highlightedIndex.value + 1 : 0;
+      nextTick(scrollToHighlighted);
+      break;
+    case "ArrowUp":
+      e.preventDefault();
+      highlightedIndex.value = highlightedIndex.value > 0 ? highlightedIndex.value - 1 : options.length - 1;
+      nextTick(scrollToHighlighted);
+      break;
+    case "Enter": {
+      e.preventDefault();
+      const option = options[highlightedIndex.value];
+      if (option) {
+        select(option.value);
+      }
+      break;
+    }
+    case "Escape":
+      e.preventDefault();
+      isOpen.value = false;
+      break;
+  }
+}
+function onClickOutside(e) {
+  if (root.value && !root.value.contains(e.target)) {
+    isOpen.value = false;
+  }
+}
+watch(isOpen, (open) => {
+  if (open) {
+    document.addEventListener("click", onClickOutside, true);
+  } else {
+    document.removeEventListener("click", onClickOutside, true);
+  }
+});
+onBeforeUnmount(() => {
+  document.removeEventListener("click", onClickOutside, true);
+});
+</script>

package/dist/runtime/editor/features/media-library/Library/FilterSelect/index.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    label: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    modelValue?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/media-library/Library/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bk bk-media-library">
+  <div class="bk bk-media-library bk-scrollbar-light">
     <div v-if="status === 'pending'" class="bk-loading">
       <Icon name="loader" />
     </div>
@@ -18,20 +18,12 @@
             :placeholder="filter.placeholder"
           />
         </label>
-        <label v-else-if="filter.type === 'options'" class="bk-form-select">
-          <div v-if="!filterValues[filter.name]">
-            {{ filter.label }}
-          </div>
-          <select v-model="filterValues[filter.name]">
-            <option
-              v-for="option in filter.options"
-              :key="option.value"
-              :value="option.value"
-            >
-              {{ option.label }}
-            </option>
-          </select>
-        </label>
+        <FilterSelect
+          v-else-if="filter.type === 'options'"
+          v-model="filterValues[filter.name]"
+          :label="filter.label"
+          :options="filter.options"
+        />
         <FormToggle
           v-else-if="filter.type === 'checkbox'"
           v-model="filterValues[filter.name]"
@@ -41,7 +33,7 @@
     </div>
     <div
       ref="listEl"
-      class="bk-media-library-items bk-scrollbar-light"
+      class="bk-media-library-items"
       :class="'bk-is-' + listView"
     >
       <Sortli no-transition :get-drag-items="getDragItems" :build-item>
@@ -85,6 +77,7 @@ import {
   FormToggle
 } from "#blokkli/editor/components";
 import Item from "./Item.vue";
+import FilterSelect from "./FilterSelect/index.vue";
 import { falsy } from "#blokkli/helpers";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
 defineProps({
@@ -139,6 +132,7 @@ const toggleListView = () => {
   listView.value = listView.value === "grid" ? "horizontal" : "grid";
 };
 const filterValues = ref({});
+const defaultsApplied = ref(false);
 watch(key, () => {
   page.value = 0;
 });
@@ -162,6 +156,17 @@ const items = computed(() => data.value?.items || []);
 const filters = computed(() => {
   return data.value?.filters ?? [];
 });
+watch(filters, (newFilters) => {
+  if (defaultsApplied.value || !newFilters.length) {
+    return;
+  }
+  defaultsApplied.value = true;
+  for (const filter of newFilters) {
+    if ("defaultValue" in filter && filter.defaultValue !== void 0 && filterValues.value[filter.name] === void 0) {
+      filterValues.value[filter.name] = filter.defaultValue;
+    }
+  }
+});
 const firstSelectedBundle = computed(() => {
   if (selected.value.length) {
     const item = items.value.find((v) => v.mediaId === selected.value[0]);

package/dist/runtime/editor/features/media-library/index.vue

@@ -30,7 +30,7 @@ defineBlokkliFeature({
   description: "Implements a media library to easily drag and drop media like images or videos.",
   requiredAdapterMethods: ["mediaLibraryGetResults", "mediaLibraryAddBlock"]
 });
-const { $t, adapter, state, types, directive } = useBlokkli();
+const { $t, adapter, state, types, directive, permissions } = useBlokkli();
 const ERROR_MESSAGE = $t(
   "mediaLibraryReplaceFailed",
   "Failed to replace media."
@@ -55,6 +55,9 @@ defineDropAreas((dragItems) => {
       return;
     }
     const isBlock = field.type === itemEntityType;
+    if (isBlock && (!permissions.checkBlockBundlePermission(field.bundle, "edit") || permissions.blockHasRestrictedAncestor(field.uuid))) {
+      return;
+    }
     const draggableHost = {
       uuid: field.uuid,
       type: field.type,
@@ -106,7 +109,9 @@ defineDropHandler("media_library", {
       return [];
     }
     const item = items[0];
-    return field.allowedBundles.filter((b) => item.itemBundles.includes(b));
+    return field.allowedBundles.filter(
+      (b) => item.itemBundles.includes(b) && permissions.checkBlockBundlePermission(b, "add")
+    );
   },
   async execute({ items, host, afterUuid, bundle }) {
     if (adapter.mediaLibraryAddBlock && items.length === 1) {

package/dist/runtime/editor/features/multi-select/Renderer/index.vue

@@ -15,7 +15,7 @@ import {
 } from "twgl.js";
 import { RectangleBufferCollector } from "#blokkli/editor/helpers/webgl";
 import { defineRenderer, useDebugLogger } from "#blokkli/editor/composables";
-const { eventBus, dom, theme, animation, ui, blocks } = useBlokkli();
+const { eventBus, dom, theme, animation, ui, blocks, permissions } = useBlokkli();
 const logger = useDebugLogger();
 const props = defineProps({
   startX: { type: Number, required: true },
@@ -43,6 +43,9 @@ class MultiSelectRectangleBufferCollector extends RectangleBufferCollector {
       if (!block) {
         continue;
       }
+      if (permissions.blockHasRestrictedAncestor(uuid)) {
+        continue;
+      }
       const el = dom.getDragElement(block);
       if (!el) {
         continue;

package/dist/runtime/editor/features/search/index.vue

@@ -58,7 +58,7 @@ defineBlokkliFeature({
   label: "Search",
   description: "Provides an overlay with shortcut to search for blocks on the current page or existing content to add as blocks."
 });
-const { $t, selection, ui, adapter, state, types, directive } = useBlokkli();
+const { $t, selection, ui, adapter, state, types, directive, permissions } = useBlokkli();
 const ERROR_MESSAGE = $t(
   "searchContentReplaceFailed",
   "Failed to replace content."
@@ -79,6 +79,9 @@ defineDropAreas((dragItems) => {
     if (field.type !== itemEntityType) {
       return;
     }
+    if (!permissions.checkBlockBundlePermission(field.bundle, "edit") || permissions.blockHasRestrictedAncestor(field.uuid)) {
+      return;
+    }
     const config = types.getDroppableFieldConfig(field.fieldName, field);
     const allowedBundles = config.allowed.find(
       (v) => v.type === searchItem.entityType
@@ -115,7 +118,9 @@ defineDropAreas((dragItems) => {
 defineDropHandler("search_content", {
   resolveBundles({ items, field }) {
     const item = items[0];
-    return field.allowedBundles.filter((b) => item.itemBundles.includes(b));
+    return field.allowedBundles.filter(
+      (b) => item.itemBundles.includes(b) && permissions.checkBlockBundlePermission(b, "add")
+    );
   },
   async execute({ items, host, afterUuid, bundle }) {
     if (!adapter.addContentSearchItem) {

package/dist/runtime/editor/features/selection/AddButtons/Renderer/index.vue

@@ -52,7 +52,7 @@ const currentUuid = ref("");
 const currentBundleLabel = ref("");
 const currentSingleAllowedBundleLabel = ref(null);
 const tooltipData = computed(() => {
-  if (hoveredCircle.value < 0) {
+  if (hoveredCircle.value < 0 || ui.openTooltip.value) {
     return null;
   }
   const index = hoveredCircle.value;

package/dist/runtime/editor/features/selection/AddButtons/index.vue

@@ -8,9 +8,11 @@
         :anchor-el="addData.anchorEl"
         :anchor-coordinates="addData.anchorCoordinates"
         :label="addData.label"
+        :field="addData.field"
         @select="onSelectBundle"
         @close="closeOverlay"
         @action="onSelectAction"
+        @fragment="onSelectFragment"
       />
     </BlokkliTransition>
   </Teleport>
@@ -59,7 +61,9 @@ const {
   fields,
   animation,
   context,
-  selection
+  selection,
+  permissions,
+  adapter
 } = useBlokkli();
 const isLocked = ref(false);
 const shouldRender = computed(() => {
@@ -258,6 +262,21 @@ function onSelectAction(action) {
   });
   closeOverlay();
 }
+async function onSelectFragment(name) {
+  const fragmentsAddBlock = adapter.fragmentsAddBlock;
+  if (!addData.value || !fragmentsAddBlock) {
+    return;
+  }
+  const { host, preceedingUuid } = addData.value;
+  closeOverlay();
+  await state.mutateWithLoadingState(
+    () => fragmentsAddBlock({
+      name,
+      host: { ...host },
+      preceedingUuid
+    })
+  );
+}
 const cache = /* @__PURE__ */ new Map();
 function clearAllCache() {
   cache.clear();
@@ -349,7 +368,12 @@ onBlokkliEvent("state:reloaded", () => {
   }
 });
 function setAddData(key, field, label, preceedingUuid, anchorEl, anchorCoordinates) {
-  const allowedBundles = field.allowedBundles;
+  if (field.hostEntityType === itemEntityType && (!permissions.checkBlockBundlePermission(field.hostEntityBundle, "edit") || permissions.blockHasRestrictedAncestor(field.hostEntityUuid))) {
+    return;
+  }
+  const allowedBundles = field.allowedBundles.filter(
+    (v) => permissions.checkBlockBundlePermission(v, "add")
+  );
   if (allowedBundles.length === 0) {
     return;
   }

package/dist/runtime/editor/features/selection/Renderer/index.vue

@@ -22,7 +22,7 @@ const props = defineProps({
   blocks: { type: Array, required: true },
   hasHostSelected: { type: Boolean, required: true }
 });
-const { animation, theme, dom, ui, state } = useBlokkli();
+const { animation, theme, dom, ui, state, permissions } = useBlokkli();
 class SelectionRectangleBufferCollector extends RectangleBufferCollector {
   uuids = [];
   lastCount = 0;
@@ -50,7 +50,8 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector {
             y: 0,
             radius: [0, 0, 0, 0],
             isInverted: false,
-            isFromLibrary: false
+            isFromLibrary: false,
+            isRestricted: false
           },
           3
           // Type 3 = host selection
@@ -70,8 +71,11 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector {
         }
         const style = ui.lowPerformanceMode.value ? null : theme.getDraggableStyle(el);
         const isFromLibrary = state.fromLibraryUuids.value.includes(block.uuid);
+        const isRestricted = !permissions.checkBlockBundlePermission(block.bundle, "edit") || !permissions.checkBlockBundlePermission(block.bundle, "delete") || !permissions.checkBlockBundlePermission(block.bundle, "add");
         let type = 0;
-        if (isFromLibrary) {
+        if (isRestricted) {
+          type = 4;
+        } else if (isFromLibrary) {
           type = 2;
         } else if (style?.isInverted) {
           type = 1;
@@ -85,7 +89,8 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector {
             y: rect.y,
             radius: style?.radius ?? [0, 0, 0, 0],
             isInverted: !!style?.isInverted,
-            isFromLibrary
+            isFromLibrary,
+            isRestricted
           },
           type
         );
@@ -141,6 +146,15 @@ const getColorLibrary = useTransitionedValue(() => {
   }
   return theme.lime.value.normal;
 });
+const getColorRestricted = useTransitionedValue(() => {
+  if (selectionColorOverride.value) {
+    return selectionColorOverride.value;
+  }
+  if (hasTransformingStyle.value) {
+    return theme.orange.value.normal;
+  }
+  return theme.yellow.value.normal;
+});
 const getColorHost = useTransitionedValue(() => {
   return theme.mono.value[700];
 });
@@ -161,6 +175,7 @@ const { collector } = defineRenderer("selection-overlay", {
       u_color_default: toShaderColor(getColorDefault()),
       u_color_inverted: toShaderColor(getColorInverted()),
       u_color_library: toShaderColor(getColorLibrary()),
+      u_color_restricted: toShaderColor(getColorRestricted()),
       u_color_host: toShaderColor(getColorHost()),
       u_artboard_size: [
         ui.artboardSize.value.width,
@@ -187,6 +202,7 @@ const { collector } = defineRenderer("selection-overlay", {
     const colorDefault = rgbaToCss(getColorDefault());
     const colorInverted = rgbaToCss(getColorInverted());
     const colorLibrary = rgbaToCss(getColorLibrary());
+    const colorRestricted = rgbaToCss(getColorRestricted());
     const colorHost = rgbaToCss(getColorHost());
     const smoothstepValue = Math.max(
       0,
@@ -196,7 +212,9 @@ const { collector } = defineRenderer("selection-overlay", {
     for (let i = 0; i < rects.length; i++) {
       const rect = rects[i];
       let strokeColor = colorDefault;
-      if (rect.isFromLibrary) {
+      if (rect.isRestricted) {
+        strokeColor = colorRestricted;
+      } else if (rect.isFromLibrary) {
         strokeColor = colorLibrary;
       } else if (rect.isInverted) {
         strokeColor = colorInverted;

package/dist/runtime/editor/features/selection/Renderer/vertex.glsl

@@ -21,6 +21,7 @@ uniform vec2 u_resolution;
 uniform vec3 u_color_default;
 uniform vec3 u_color_inverted;
 uniform vec3 u_color_library;
+uniform vec3 u_color_restricted;
 uniform vec3 u_color_host;
 
 // The transformed quad for the fragment shader.
@@ -86,9 +87,11 @@ void main() {
 
   v_rect_width = adjusted_quad.x;
 
-  // Set color based on type: 0=default, 1=inverted, 2=library, 3=host
+  // Set color based on type: 0=default, 1=inverted, 2=library, 3=host, 4=restricted
   v_color = u_color_default;
-  if (a_rect_type > 2.5) {
+  if (a_rect_type > 3.5) {
+    v_color = u_color_restricted;
+  } else if (a_rect_type > 2.5) {
     v_color = u_color_host;
   } else if (a_rect_type > 1.5) {
     v_color = u_color_library;