@revenexx/editor 0.1.0

package/dist/runtime/editor/features/dragging-overlay/DragItems/index.vue

@@ -0,0 +1,518 @@
+<template>
+  <div
+    class="bk-vars bk-dragging-overlay"
+    :style
+    :class="[
+  { 'bk-is-touch': isTouch },
+  { 'bk-is-active': !!activeLabel },
+  { bk: !isExisting }
+]"
+  >
+    <DragItem v-for="(rect, i) in rects" :key="i" v-bind="rect" />
+  </div>
+  <div
+    v-show="activeLabel"
+    ref="labelEl"
+    class="bk bk-dragging-overlay-label"
+    :class="labelPosition.className"
+    :style="styleLabel"
+  >
+    <Icon name="bk_mdi_drag_pan" />
+    <p v-html="currentActiveLabel" />
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  watch,
+  computed,
+  useBlokkli,
+  onMounted,
+  onBeforeUnmount,
+  useTemplateRef
+} from "#imports";
+import { falsy } from "#blokkli/helpers";
+import { realBackgroundColor } from "#blokkli/editor/helpers/dom";
+import { isInsideRect } from "#blokkli/editor/helpers/geometry";
+import { Icon } from "#blokkli/editor/components";
+import DragItem, {} from "./DragItem.vue";
+const { dom, ui, types, theme } = useBlokkli();
+const props = defineProps({
+  items: { type: Array, required: true },
+  x: { type: Number, required: true },
+  y: { type: Number, required: true },
+  startCoords: { type: Object, required: true },
+  isTouch: { type: Boolean, required: true },
+  color: { type: String, required: false },
+  backgroundColor: { type: String, required: false },
+  activeLabel: { type: String, required: false },
+  activeRect: { type: Object, required: false }
+});
+const MAX_WIDTH = 350;
+const MAX_HEIGHT = 200;
+const LABEL_GAP = 20;
+const labelEl = useTemplateRef("labelEl");
+const labelWidth = ref(0);
+const labelHeight = ref(0);
+const isExisting = computed(
+  () => !!props.items.find((v) => v.itemType === "existing")
+);
+const currentActiveLabel = ref("");
+const currentColor = ref("");
+const currentBackgroundColor = ref("");
+watch(
+  () => props.activeLabel,
+  function(label) {
+    if (label) {
+      currentActiveLabel.value = label;
+    }
+  }
+);
+watch(
+  () => props.backgroundColor,
+  function(color) {
+    if (color) {
+      currentBackgroundColor.value = color;
+    }
+  }
+);
+watch(
+  () => props.color,
+  function(color) {
+    if (color) {
+      currentColor.value = color;
+    }
+  }
+);
+const width = ref(10);
+const height = ref(10);
+const offsetX = ref(0);
+const offsetY = ref(0);
+const translateX = computed(() => {
+  if (props.isTouch) {
+    return window.innerWidth / 2 - width.value / 2;
+  }
+  return props.x - offsetX.value;
+});
+const translateY = computed(() => {
+  if (props.isTouch) {
+    return -50 - 20 + Math.max(0, height.value - 100);
+  }
+  return props.y - offsetY.value;
+});
+const style = computed(() => {
+  return {
+    width: width.value + "px",
+    height: height.value + "px",
+    transform: `translate(${translateX.value}px, ${translateY.value}px)`,
+    "--bk-active-background-color": props.backgroundColor && props.activeLabel ? props.backgroundColor : "rgba(255,255,255,0)",
+    "--bk-active-color": props.color && props.activeLabel ? props.color : "rgba(255,255,255,0)"
+  };
+});
+function rangesOverlap(aStart, aEnd, bStart, bEnd) {
+  return aStart < bEnd && aEnd > bStart;
+}
+function resolveVerticalPlacement(activeRect, dragItemsRect, lw, lh, vw, vh, gap) {
+  const x = Math.min(
+    Math.max(0, activeRect.x + activeRect.width / 2 - lw / 2),
+    vw - lw
+  );
+  const overlapsHorizontally = rangesOverlap(
+    x,
+    x + lw,
+    dragItemsRect.x,
+    dragItemsRect.x + dragItemsRect.width
+  );
+  let topEdge = activeRect.y;
+  if (overlapsHorizontally) {
+    topEdge = Math.min(topEdge, dragItemsRect.y);
+  }
+  let y = topEdge - lh - gap;
+  let placement = "top";
+  if (y < 0) {
+    let bottomEdge = activeRect.y + activeRect.height;
+    if (overlapsHorizontally) {
+      bottomEdge = Math.max(bottomEdge, dragItemsRect.y + dragItemsRect.height);
+    }
+    y = bottomEdge + gap;
+    placement = "bottom";
+  }
+  y = Math.min(Math.max(0, y), vh - lh);
+  return { x, y, placement, className: `bk-is-${placement}` };
+}
+function resolveHorizontalPlacement(activeRect, dragItemsRect, lw, lh, vw, vh, gap) {
+  const y = Math.min(
+    Math.max(0, activeRect.y + activeRect.height / 2 - lh / 2),
+    vh - lh
+  );
+  const overlapsVertically = rangesOverlap(
+    y,
+    y + lh,
+    dragItemsRect.y,
+    dragItemsRect.y + dragItemsRect.height
+  );
+  let leftEdge = activeRect.x;
+  if (overlapsVertically) {
+    leftEdge = Math.min(leftEdge, dragItemsRect.x);
+  }
+  let x = leftEdge - lw - gap;
+  let placement = "left";
+  if (x < 0) {
+    let rightEdge = activeRect.x + activeRect.width;
+    if (overlapsVertically) {
+      rightEdge = Math.max(rightEdge, dragItemsRect.x + dragItemsRect.width);
+    }
+    x = rightEdge + gap;
+    placement = "right";
+  }
+  x = Math.min(Math.max(0, x), vw - lw);
+  return { x, y, placement, className: `bk-is-${placement}` };
+}
+const labelPosition = computed(() => {
+  if (props.activeRect && !props.isTouch) {
+    const vw = ui.viewport.value.width;
+    const vh = ui.viewport.value.height;
+    const lw = labelWidth.value;
+    const lh = labelHeight.value;
+    const gap = LABEL_GAP;
+    const dragItemsRect = {
+      x: translateX.value,
+      y: translateY.value,
+      width: width.value,
+      height: height.value
+    };
+    const useHorizontal = props.activeRect.width >= props.activeRect.height && props.activeRect.width < vw / 2;
+    if (useHorizontal) {
+      return resolveHorizontalPlacement(
+        props.activeRect,
+        dragItemsRect,
+        lw,
+        lh,
+        vw,
+        vh,
+        gap
+      );
+    }
+    return resolveVerticalPlacement(
+      props.activeRect,
+      dragItemsRect,
+      lw,
+      lh,
+      vw,
+      vh,
+      gap
+    );
+  }
+  const x = Math.min(
+    Math.max(10, translateX.value - labelWidth.value / 2 + width.value / 2),
+    ui.viewport.value.width - labelWidth.value
+  );
+  const y = Math.max(10, translateY.value - labelHeight.value - 20);
+  return { x, y, placement: "top", className: "bk-is-top" };
+});
+const styleLabel = computed(() => {
+  const { x, y } = labelPosition.value;
+  return {
+    transform: `translate(${x}px, ${y}px)`,
+    "--bk-active-background-color": props.backgroundColor && props.activeLabel ? props.backgroundColor : "rgba(255,255,255,0)",
+    "--bk-active-color": props.color && props.activeLabel ? props.color : "rgba(255,255,255,0)"
+  };
+});
+function getRect() {
+  return {
+    x: translateX.value,
+    y: translateY.value,
+    width: width.value,
+    height: height.value
+  };
+}
+defineExpose({ getRect });
+const rects = ref([]);
+function getDraggingBounds(mouse, rect, maxWidth, maxHeight) {
+  const widthScale = rect.width > 0 ? maxWidth / rect.width : 1;
+  const heightScale = rect.height > 0 ? maxHeight / rect.height : 1;
+  const scale = Math.min(widthScale, heightScale, 1);
+  let effectiveWidth = rect.width * scale;
+  let effectiveHeight = rect.height * scale;
+  if (Math.abs(rect.width - effectiveWidth) < 10 || Math.abs(rect.height - effectiveHeight) < 10) {
+    effectiveWidth = rect.width;
+    effectiveHeight = rect.height;
+  }
+  const relativeX = mouse.x - rect.x;
+  const relativeY = mouse.y - rect.y;
+  const proportionX = rect.width > 0 ? relativeX / rect.width : 0;
+  const proportionY = rect.height > 0 ? relativeY / rect.height : 0;
+  const effectiveRelativeX = effectiveWidth * proportionX;
+  const effectiveRelativeY = effectiveHeight * proportionY;
+  const finalX = mouse.x - effectiveRelativeX;
+  const finalY = mouse.y - effectiveRelativeY;
+  return {
+    x: finalX,
+    y: finalY,
+    width: effectiveWidth,
+    height: effectiveHeight
+  };
+}
+let resizeObserver = null;
+function onResize(entries) {
+  const entry = entries[0];
+  if (!entry) {
+    return;
+  }
+  labelWidth.value = entry.borderBoxSize[0]?.inlineSize ?? 0;
+  labelHeight.value = entry.borderBoxSize[0]?.blockSize ?? 0;
+}
+onMounted(() => {
+  if (labelEl.value) {
+    resizeObserver = new ResizeObserver(onResize);
+    resizeObserver.observe(labelEl.value);
+  }
+  const elRects = props.items.map((item, index) => {
+    const element = item.itemType === "existing" ? dom.getDragElement(item) : item.element();
+    if (!element) {
+      return;
+    }
+    return {
+      rect: element.getBoundingClientRect(),
+      element,
+      item,
+      index
+    };
+  }).filter(falsy);
+  const boundRect = elRects.find(
+    (v) => isInsideRect(props.startCoords.x, props.startCoords.y, v.rect)
+  ) || elRects[0];
+  if (!boundRect) {
+    return;
+  }
+  const mouseInsideBound = isInsideRect(
+    props.startCoords.x,
+    props.startCoords.y,
+    boundRect.rect
+  );
+  const bounds = getDraggingBounds(
+    props.startCoords,
+    boundRect.rect,
+    MAX_WIDTH,
+    MAX_HEIGHT
+  );
+  let boundsX = props.isTouch ? 0 : bounds.x;
+  let boundsY = props.isTouch ? translateY.value : bounds.y;
+  if (!mouseInsideBound && !props.isTouch) {
+    if (isExisting.value) {
+      boundsX = props.startCoords.x - 20;
+      boundsY = props.startCoords.y - 20;
+    } else {
+      boundsX = props.startCoords.x - bounds.width / 2;
+      boundsY = props.startCoords.y - bounds.height / 2;
+    }
+  }
+  offsetX.value = props.startCoords.x - boundsX;
+  offsetY.value = props.startCoords.y - boundsY;
+  width.value = bounds.width;
+  height.value = bounds.height;
+  rects.value = elRects.map((item) => {
+    const isTop = item.index === boundRect.index;
+    const rect = item.rect;
+    const element = item.item.itemType === "existing" ? dom.getDragElement(item.item) : item.item.element();
+    if (!element) {
+      return;
+    }
+    const baseRect = element.getBoundingClientRect();
+    const targetScaleX = Math.min(bounds.width / item.element.offsetWidth, 1);
+    const targetScaleY = targetScaleX;
+    const originX = 0;
+    const originY = 0;
+    const from = {
+      opacity: isTop ? 1 : 0.9,
+      // Use offsetWidth/offsetHeight (layout size without transforms) as denominator.
+      // baseRect includes both artboard scale and element's own transforms.
+      // offsetWidth is the layout size (no transforms).
+      // The ratio gives us the total scale factor needed (can be > 1 when zoomed in).
+      scaleX: baseRect.width / item.element.offsetWidth,
+      scaleY: baseRect.height / item.element.offsetHeight,
+      x: props.isTouch ? rect.x - translateX.value : rect.x - boundsX,
+      y: props.isTouch ? -rect.height - (window.innerHeight - bounds.height - rect.y - rect.height + translateY.value) : rect.y - boundsY
+    };
+    const to = {
+      opacity: isTop ? 1 : 0.1,
+      x: 0,
+      y: 0,
+      scaleX: targetScaleX,
+      scaleY: targetScaleY
+    };
+    const markup = (elRects.length < 6 || isTop) && !ui.lowPerformanceMode.value ? dom.getDropElementMarkup(item.item, true) : "";
+    let bundle;
+    let label = "";
+    if (!markup) {
+      if ("itemBundle" in item.item) {
+        bundle = item.item.itemBundle;
+        if (bundle) {
+          const definition = types.getBlockBundleDefinition(bundle);
+          if (definition) {
+            label = definition.label;
+          }
+        }
+      }
+    }
+    const borderRadius = isTop ? theme.getDraggableStyle(item.element).radiusMin : 4;
+    return {
+      isTop,
+      from: ui.lowPerformanceMode.value || !mouseInsideBound && !isExisting.value || item.item.itemType === "existing" && item.item.isCopy ? to : from,
+      to,
+      width: item.element.offsetWidth,
+      height: item.element.offsetHeight,
+      transformOrigin: `${originX}px ${originY}px`,
+      markup,
+      background: item.item.itemType === "existing" ? realBackgroundColor(item.element) : "",
+      prevVisibility: item.item.itemType === "existing" && !item.item.isCopy || item.item.itemType === "existing_structure" ? item.element.style.visibility : void 0,
+      element: item.element,
+      bundle,
+      label,
+      borderRadius
+    };
+  }).filter(falsy);
+  elRects.forEach((item) => {
+    if (item.item.itemType === "existing" || item.item.itemType === "existing_structure") {
+      if (item.item.itemType === "existing" && item.item.isCopy) {
+        return;
+      }
+      item.element.style.visibility = "hidden";
+    }
+  });
+});
+onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+  }
+  rects.value.forEach((item) => {
+    if (item.prevVisibility !== void 0) {
+      item.element.style.visibility = item.prevVisibility;
+    }
+  });
+});
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk.bk-dragging-overlay-label {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  border-radius: 4px;
+  padding: 8px;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-family: "Flink Neue Condensed", "PB Inter", ui-sans-serif, sans-serif;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  z-index: calc(var(--bk-z-index-base) + 250000) /* "dragging-overlay" */;
+  background-color: rgb(var(--bk-active-background-color));
+  color: rgb(var(--bk-active-color));
+  filter: drop-shadow(0 0 25px rgb(0 0 0/.1)) drop-shadow(0 8px 10px rgb(0 0 0/.1));
+  outline: 1px solid rgb(var(--bk-active-background-color)/.5);
+  will-change: transform,contents,opacity;
+}
+.bk.bk-dragging-overlay-label>p {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.bk.bk-dragging-overlay-label span.bk-is-block,.bk.bk-dragging-overlay-label span.bk-is-host {
+  --bk-tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
+  max-width: 70px;
+  min-width: 0px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk.bk-dragging-overlay-label span.bk-is-block:nth-last-child(2),.bk.bk-dragging-overlay-label span.bk-is-host:nth-last-child(2) {
+  max-width: none;
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+}
+.bk.bk-dragging-overlay-label span.bk-is-field {
+  min-width: 0px;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  --bk-tw-tracking: var(--tracking-wide, 0.025em);
+  letter-spacing: var(--tracking-wide, 0.025em);
+  text-transform: uppercase;
+  padding-inline: 8px;
+  padding-top: 4px;
+  padding-bottom: 2px;
+  background-color: rgb(var(--bk-active-color)/.15);
+  border: 1px solid rgb(var(--bk-active-color)/.25);
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+}
+.bk.bk-dragging-overlay-label span.bk-is-field:last-child {
+  background-color: rgb(var(--bk-active-color));
+  border-color: rgb(var(--bk-active-color));
+  color: rgb(var(--bk-active-background-color));
+}
+.bk.bk-dragging-overlay-label .bk-icon {
+  width: 15px;
+  height: 15px;
+}
+.bk.bk-dragging-overlay-label svg {
+  fill: currentcolor;
+}
+.bk.bk-dragging-overlay-label {
+  --bk-caret-size: 12px;
+  --bk-caret-outline-size: calc(var(--bk-caret-size) + 1px);
+}
+.bk.bk-dragging-overlay-label:after,.bk.bk-dragging-overlay-label:before {
+  content: "";
+  position: absolute;
+  border: var(--bk-caret-size) solid transparent;
+}
+.bk.bk-dragging-overlay-label:before {
+  border-width: var(--bk-caret-outline-size);
+}
+.bk.bk-dragging-overlay-label.bk-is-bottom:after,.bk.bk-dragging-overlay-label.bk-is-bottom:before,.bk.bk-dragging-overlay-label.bk-is-top:after,.bk.bk-dragging-overlay-label.bk-is-top:before {
+  left: calc(1 / 2 * 100%);
+  --bk-tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+}
+.bk.bk-dragging-overlay-label.bk-is-top:before {
+  top: 100%;
+  border-top-color: rgb(var(--bk-active-background-color)/.5);
+}
+.bk.bk-dragging-overlay-label.bk-is-top:after {
+  top: 100%;
+  border-top-color: rgb(var(--bk-active-background-color));
+}
+.bk.bk-dragging-overlay-label.bk-is-bottom:before {
+  bottom: 100%;
+  border-bottom-color: rgb(var(--bk-active-background-color)/.5);
+}
+.bk.bk-dragging-overlay-label.bk-is-bottom:after {
+  bottom: 100%;
+  border-bottom-color: rgb(var(--bk-active-background-color));
+}
+.bk.bk-dragging-overlay-label.bk-is-left:after,.bk.bk-dragging-overlay-label.bk-is-left:before,.bk.bk-dragging-overlay-label.bk-is-right:after,.bk.bk-dragging-overlay-label.bk-is-right:before {
+  top: calc(1 / 2 * 100%);
+  --bk-tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+}
+.bk.bk-dragging-overlay-label.bk-is-left:before {
+  left: 100%;
+  border-left-color: rgb(var(--bk-active-background-color)/.5);
+}
+.bk.bk-dragging-overlay-label.bk-is-left:after {
+  left: 100%;
+  border-left-color: rgb(var(--bk-active-background-color));
+}
+.bk.bk-dragging-overlay-label.bk-is-right:before {
+  right: 100%;
+  border-right-color: rgb(var(--bk-active-background-color)/.5);
+}
+.bk.bk-dragging-overlay-label.bk-is-right:after {
+  right: 100%;
+  border-right-color: rgb(var(--bk-active-background-color));
+}
+</style>

package/dist/runtime/editor/features/dragging-overlay/DragItems/index.vue.d.ts

@@ -0,0 +1,31 @@
+import type { Coord, Rectangle } from '#blokkli/editor/types/geometry';
+import type { DraggableItem } from '#blokkli/editor/types/draggable';
+type __VLS_Props = {
+    /**
+     * The items being dragged/placed.
+     */
+    items: DraggableItem[];
+    /**
+     * The current x position of the cursor.
+     */
+    x: number;
+    /**
+     * The current y position of the cursor.
+     */
+    y: number;
+    /**
+     * The coordinates when the dragging action was started.
+     */
+    startCoords: Coord;
+    isTouch: boolean;
+    color?: string;
+    backgroundColor?: string;
+    activeLabel?: string;
+    activeRect?: Rectangle;
+};
+declare function getRect(): Rectangle;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    getRect: typeof getRect;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/dragging-overlay/Renderer/fragment.glsl

@@ -0,0 +1,152 @@
+#version 300 es
+
+precision highp float;
+
+in float v_intersecting;
+in float v_is_hover_area;
+in float v_is_field;
+in float v_is_drop_area;
+in float v_is_vertical;
+in vec4 v_quad;
+in vec3 v_color;
+in vec3 v_grad_start;
+in vec3 v_grad_end;
+in vec3 v_border_outer;
+in vec3 v_border_inner;
+
+// Optimized varyings - values computed once per vertex instead of per pixel
+in vec2 v_size;
+in vec2 v_location;
+in vec2 v_size_inner;
+in float v_thickness;
+in float v_border_width;
+in float v_edge_softness;
+in float v_radius_outer;
+in float v_radius_inner;
+in float v_fill_alpha;
+
+out vec4 fragColor;
+
+uniform float u_scale;
+uniform float u_dpi;
+uniform vec2 u_resolution;
+uniform float u_active_hover_nesting_level;
+
+const float OUTER_BORDER_PX = 2.5;
+const float INNER_BORDER_PX = 2.0;
+const float INNER_BORDER_SOFTNESS_PX = 0.5;
+const float OUTER_BORDER_SOFTNESS_PX = 0.3;
+
+float roundedBoxSDF(vec2 CenterPosition, vec2 Size, float Radius) {
+  return length(max(abs(CenterPosition) - Size + Radius, 0.0)) - Radius;
+}
+
+void main() {
+  bool isHoverArea = v_is_hover_area >= 1.0;
+  bool isField = v_is_field >= 0.5;
+  bool isDropArea = v_is_drop_area >= 0.5;
+
+  // Compute different distance for inside and outside using pre-computed values
+  float distanceOuter = roundedBoxSDF(
+    v_location - gl_FragCoord.xy,
+    v_size / 2.0,
+    v_radius_outer
+  );
+  float distanceInner = roundedBoxSDF(
+    v_location - gl_FragCoord.xy,
+    v_size_inner / 2.0,
+    v_radius_inner
+  );
+
+  float alphaOuter =
+    1.0 -
+    smoothstep(-v_edge_softness, v_edge_softness, distanceOuter - v_thickness);
+  float alphaInner =
+    1.0 -
+    smoothstep(-v_edge_softness, v_edge_softness, distanceInner - v_thickness);
+
+  // Alpha value for the border.
+  float alphaBorder = clamp(alphaOuter - alphaInner, 0.0, 1.0);
+
+  float adjustedAlphaFill = alphaInner * v_fill_alpha;
+
+  if (v_is_hover_area >= 1.0) {
+    // If nesting level is 0, don't render the fill (border only)
+    if (u_active_hover_nesting_level < 0.5) {
+      adjustedAlphaFill = 0.0;
+    } else {
+      adjustedAlphaFill *= 0.1;
+    }
+  }
+
+  vec3 fillColor = v_color;
+  vec3 borderOuter = v_color;
+  vec3 borderInner = v_color;
+  if (isField || isDropArea) {
+    vec2 minCorner = v_location - v_size * 0.5;
+    vec2 uv = (gl_FragCoord.xy - minCorner) / v_size;
+    float t = uv.y;
+    t = clamp(t, 0.0, 1.0);
+    fillColor = mix(v_grad_start, v_grad_end, t);
+    borderOuter = v_border_outer;
+    borderInner = v_border_inner;
+  }
+
+  if (isField || isDropArea) {
+    vec2 pos = gl_FragCoord.xy - v_location;
+    float soft = v_edge_softness;
+    float outerBorderWidth = OUTER_BORDER_PX;
+    float innerBorderWidth = INNER_BORDER_PX;
+
+    float distOuter = roundedBoxSDF(pos, v_size / 2.0, v_radius_outer);
+    float inside = 1.0 - smoothstep(-soft, soft, distOuter);
+    float distFromOuter = -distOuter; // distance inside from outer edge in px
+
+    float outerBand = 0.0;
+    if (OUTER_BORDER_SOFTNESS_PX <= 0.0) {
+      outerBand = inside * step(0.0, distFromOuter) * step(distFromOuter, outerBorderWidth);
+    } else {
+      float s = OUTER_BORDER_SOFTNESS_PX;
+      outerBand = inside *
+        smoothstep(0.0, s, distFromOuter) *
+        (1.0 - smoothstep(outerBorderWidth - s, outerBorderWidth + s, distFromOuter));
+    }
+    float innerBand = 0.0;
+    if (INNER_BORDER_SOFTNESS_PX <= 0.0) {
+      innerBand = inside *
+        step(outerBorderWidth, distFromOuter) *
+        step(distFromOuter, outerBorderWidth + innerBorderWidth);
+    } else {
+      float s = INNER_BORDER_SOFTNESS_PX;
+      innerBand = inside *
+        smoothstep(outerBorderWidth - s, outerBorderWidth + s, distFromOuter) *
+        (1.0 - smoothstep(outerBorderWidth + innerBorderWidth - s, outerBorderWidth + innerBorderWidth + s, distFromOuter));
+    }
+    float fillMask = inside * step(outerBorderWidth + innerBorderWidth, distFromOuter);
+
+    vec3 color = fillColor;
+    color = mix(color, borderOuter, outerBand);
+    color = mix(color, borderInner, innerBand);
+
+    float a = isDropArea
+      ? (v_intersecting >= 0.5 ? 0.6 : 0.3)
+      : (v_intersecting >= 0.5 ? 1.0 : 0.7);
+    float alpha = max(fillMask, max(outerBand, innerBand)) * a;
+    if (alpha <= 0.0) {
+      discard;
+    }
+    fragColor = vec4(color, alpha);
+    return;
+  }
+
+  if (alphaBorder > 0.0) {
+    float a = isHoverArea ? 0.6 : 1.0;
+    fragColor = vec4(v_color, a);
+    return;
+  } else if (adjustedAlphaFill > 0.0) {
+    fragColor = vec4(fillColor, adjustedAlphaFill);
+    return;
+  }
+
+  discard;
+}