@shwfed/config 1.0.0

package/dist/runtime/components/block-layout-editor/index.vue

@@ -0,0 +1,1312 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { useEventListener } from "@vueuse/core";
+import { computed, onMounted, ref, watch } from "vue";
+import { Button } from "../ui/button";
+import { CommandGroup, CommandItem } from "../ui/command";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger
+} from "../ui/context-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupCombobox,
+  InputGroupNumberField
+} from "../ui/input-group";
+import { Field, FieldLabel } from "../ui/field";
+import useInfinitePlane from "../../composables/useInfinitePlane";
+import { findFreePlacement } from "../../share/layout";
+defineOptions({ name: "ShwfedBlockLayoutEditor" });
+const layouts = defineModel({ type: Array, ...{ required: true } });
+const activeIndex = defineModel("activeIndex", { type: Number, ...{ default: 0 } });
+const selectedItemIds = defineModel("selectedItemIds", { type: Array, ...{ default: () => [] } });
+const selectedSet = computed(() => new Set(selectedItemIds.value));
+function isSelected(id) {
+  return selectedSet.value.has(id);
+}
+function setSelection(ids) {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const id of ids) {
+    if (seen.has(id)) continue;
+    seen.add(id);
+    out.push(id);
+  }
+  selectedItemIds.value = out;
+}
+function addToSelection(ids) {
+  setSelection([...selectedItemIds.value, ...ids]);
+}
+function onItemClick(itemId, e) {
+  if (dragJustEnded) return;
+  if (e.shiftKey) addToSelection([itemId]);
+  else setSelection([itemId]);
+}
+function onItemContextMenu(itemId) {
+  if (!isSelected(itemId)) setSelection([itemId]);
+}
+const props = defineProps({
+  items: { type: Array, required: true },
+  findEntry: { type: Function, required: true },
+  getItemLabel: { type: Function, required: false },
+  itemNoun: { type: String, required: false },
+  pickerEntries: { type: Array, required: false },
+  canDelete: { type: Boolean, required: false }
+});
+const emit = defineEmits(["add-new", "drill-down", "delete-item", "delete-items"]);
+let pendingAddSilent = false;
+function captureAddModifiers(e) {
+  pendingAddSilent = e.metaKey || e.ctrlKey;
+}
+function emitAddNew(entry) {
+  const silent = pendingAddSilent;
+  pendingAddSilent = false;
+  emit("add-new", entry, { silent });
+}
+const itemNoun = computed(() => props.itemNoun ?? "\u5757");
+const CANVAS_STEP_PX = 24;
+const activeLayout = computed(() => layouts.value[activeIndex.value]);
+const GAP_DEFAULT = 4;
+const editorGaps = ref(/* @__PURE__ */ new Map());
+function getGap(i) {
+  const cached = editorGaps.value.get(i);
+  if (cached !== void 0) return cached;
+  return layouts.value[i]?.layout.gap ?? GAP_DEFAULT;
+}
+const activeGap = computed(() => getGap(activeIndex.value));
+const stepPx = computed(() => CANVAS_STEP_PX);
+function setGap(value) {
+  const n = typeof value === "number" ? value : Number(value);
+  if (!Number.isFinite(n) || n < 0) return;
+  const next = new Map(editorGaps.value);
+  next.set(activeIndex.value, Math.floor(n));
+  editorGaps.value = next;
+  writeTracks(activeIndex.value);
+}
+function frameSize(ls) {
+  let cols = 0;
+  let rows = 0;
+  for (const p of Object.values(ls.layout.placements)) {
+    const [, [x2, y2]] = p.area;
+    if (x2 - 1 > cols) cols = x2 - 1;
+    if (y2 - 1 > rows) rows = y2 - 1;
+  }
+  return { cols, rows };
+}
+const activeFrame = computed(() => activeLayout.value ? frameSize(activeLayout.value) : { cols: 0, rows: 0 });
+function setLayout(i, updater) {
+  const ls = layouts.value[i];
+  if (!ls) return;
+  const next = [...layouts.value];
+  next[i] = updater(ls);
+  layouts.value = next;
+}
+function writeTracks(i, nextPlacements) {
+  const gap = getGap(i);
+  const current = layouts.value[i];
+  if (!current) return;
+  const source = nextPlacements ?? current.layout.placements;
+  let minX = Infinity;
+  let minY = Infinity;
+  for (const p of Object.values(source)) {
+    if (p.area[0][0] < minX) minX = p.area[0][0];
+    if (p.area[0][1] < minY) minY = p.area[0][1];
+  }
+  const sx = Number.isFinite(minX) && minX !== 1 ? 1 - minX : 0;
+  const sy = Number.isFinite(minY) && minY !== 1 ? 1 - minY : 0;
+  const placements = sx || sy ? Object.fromEntries(
+    Object.entries(source).map(([id, p]) => {
+      const [[ax, ay], [bx, by]] = p.area;
+      return [id, { ...p, area: [[ax + sx, ay + sy], [bx + sx, by + sy]] }];
+    })
+  ) : source;
+  if (sx || sy) {
+    coordinate.value = {
+      x: coordinate.value.x - sx * stepPx.value,
+      y: coordinate.value.y - sy * stepPx.value
+    };
+  }
+  setLayout(i, (ls) => {
+    let cols = 0;
+    let rows = 0;
+    for (const p of Object.values(placements)) {
+      const [, [x2, y2]] = p.area;
+      if (x2 - 1 > cols) cols = x2 - 1;
+      if (y2 - 1 > rows) rows = y2 - 1;
+    }
+    const nextLayout = {
+      ...ls.layout,
+      placements,
+      columns: Math.max(1, cols),
+      rows: Math.max(1, rows),
+      ...gap > 0 ? { gap } : {}
+    };
+    if (gap === 0 && "gap" in nextLayout) delete nextLayout.gap;
+    return { ...ls, layout: nextLayout };
+  });
+}
+const isSpaceHeld = ref(false);
+function isTextInput(el) {
+  if (!(el instanceof HTMLElement)) return false;
+  const tag = el.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  if (el.isContentEditable) return true;
+  return false;
+}
+useEventListener("keydown", (e) => {
+  if (e.code !== "Space") return;
+  if (isTextInput(e.target)) return;
+  isSpaceHeld.value = true;
+  e.preventDefault();
+});
+useEventListener("keyup", (e) => {
+  if (e.code !== "Space") return;
+  isSpaceHeld.value = false;
+});
+useEventListener(() => window, "blur", () => {
+  isSpaceHeld.value = false;
+});
+const { planeRef, coordinate, bgStyle, isDragging: isPanning } = useInfinitePlane({
+  gap: CANVAS_STEP_PX,
+  enabled: isSpaceHeld
+});
+onMounted(() => recenterSoon());
+function recenter() {
+  const el = planeRef.value;
+  if (!el) return;
+  const rect = el.getBoundingClientRect();
+  const frame = activeFrame.value;
+  const frameW = frame.cols * stepPx.value;
+  const frameH = frame.rows * stepPx.value;
+  coordinate.value = {
+    x: Math.round((rect.width - frameW) / 2),
+    y: Math.round((rect.height - frameH) / 2)
+  };
+}
+function recenterSoon() {
+  requestAnimationFrame(() => recenter());
+}
+watch(activeIndex, () => recenterSoon());
+const placementEntries = computed(() => {
+  const ls = activeLayout.value;
+  if (!ls) return [];
+  return Object.entries(ls.layout.placements).map(([itemId, placement]) => ({ itemId, placement }));
+});
+const MARQUEE_THRESHOLD_PX = 3;
+const marquee = ref(null);
+function placementPxRect(p) {
+  const s = stepPx.value;
+  const inset = s * BLOCK_INSET_UNITS;
+  const [[x1, y1], [x2, y2]] = p.area;
+  return {
+    x: (x1 - 1) * s + inset + coordinate.value.x,
+    y: (y1 - 1) * s + inset + coordinate.value.y,
+    w: Math.max(0, (x2 - x1) * s - 2 * inset),
+    h: Math.max(0, (y2 - y1) * s - 2 * inset)
+  };
+}
+function marqueeCanvasBox(m) {
+  const r = canvasRef.value?.getBoundingClientRect();
+  if (!r) return null;
+  const ax = Math.min(m.origin.cx, m.current.cx) - r.left;
+  const ay = Math.min(m.origin.cy, m.current.cy) - r.top;
+  const bx = Math.max(m.origin.cx, m.current.cx) - r.left;
+  const by = Math.max(m.origin.cy, m.current.cy) - r.top;
+  return { x: ax, y: ay, w: bx - ax, h: by - ay };
+}
+const marqueeStyle = computed(() => {
+  const m = marquee.value;
+  if (!m || !m.active) return null;
+  const b = marqueeCanvasBox(m);
+  if (!b) return null;
+  return {
+    top: "0",
+    left: "0",
+    width: `${b.w}px`,
+    height: `${b.h}px`,
+    transform: `translate3d(${b.x}px, ${b.y}px, 0)`
+  };
+});
+function onPlaneMouseDown(e) {
+  if (e.button !== 0) return;
+  if (isSpaceHeld.value) return;
+  marquee.value = {
+    origin: { cx: e.clientX, cy: e.clientY },
+    current: { cx: e.clientX, cy: e.clientY },
+    shiftKey: e.shiftKey,
+    addBase: e.shiftKey ? [...selectedItemIds.value] : [],
+    active: false
+  };
+}
+useEventListener("mousemove", (e) => {
+  const m = marquee.value;
+  if (!m) return;
+  m.current = { cx: e.clientX, cy: e.clientY };
+  if (!m.active) {
+    const dx = Math.abs(m.current.cx - m.origin.cx);
+    const dy = Math.abs(m.current.cy - m.origin.cy);
+    if (dx >= MARQUEE_THRESHOLD_PX || dy >= MARQUEE_THRESHOLD_PX) m.active = true;
+  }
+});
+useEventListener("mouseup", () => {
+  const m = marquee.value;
+  if (!m) return;
+  marquee.value = null;
+  if (!m.active) {
+    if (!m.shiftKey) setSelection([]);
+    return;
+  }
+  const ls = activeLayout.value;
+  if (!ls) return;
+  const box = marqueeCanvasBox(m);
+  if (!box) return;
+  const hits = [];
+  for (const [id, p] of Object.entries(ls.layout.placements)) {
+    const pr = placementPxRect(p);
+    if (pr.x < box.x + box.w && pr.x + pr.w > box.x && pr.y < box.y + box.h && pr.y + pr.h > box.y) {
+      hits.push(id);
+    }
+  }
+  setSelection(m.shiftKey ? [...m.addBase, ...hits] : hits);
+});
+function getItem(itemId) {
+  return props.items.find((it) => it.id === itemId);
+}
+function resolveItemLabel(itemId) {
+  const it = getItem(itemId);
+  if (!it) return `\u672A\u77E5${itemNoun.value}`;
+  if (props.getItemLabel) return props.getItemLabel(it);
+  const fa = it;
+  if (typeof fa.displayName === "string" && fa.displayName.length > 0) return fa.displayName;
+  if (typeof fa.name === "string" && fa.name.length > 0) return fa.name;
+  return `\u672A\u547D\u540D${itemNoun.value}`;
+}
+function getItemIcon(itemId) {
+  const it = getItem(itemId);
+  if (!it) return "fluent:square-20-regular";
+  const entry = props.findEntry(it.type, it.compatibilityDate);
+  return entry?.metadata.icon ?? "fluent:square-20-regular";
+}
+const BLOCK_INSET_UNITS = 0.25;
+const drag = ref(null);
+let dragJustEnded = false;
+const UNBOUNDED = { minW: 1, maxW: Infinity, minH: 1, maxH: Infinity };
+function resolveBounds(itemId, start) {
+  const it = getItem(itemId);
+  if (!it) return UNBOUNDED;
+  const entry = props.findEntry(it.type, it.compatibilityDate);
+  if (!entry) return UNBOUNDED;
+  const { w, h } = entry.metadata;
+  const [[x1, y1], [x2, y2]] = start.area;
+  const spanW = x2 - x1;
+  const spanH = y2 - y1;
+  return {
+    minW: Math.min(w.min, spanW),
+    maxW: Math.max(w.max, spanW),
+    minH: Math.min(h.min, spanH),
+    maxH: Math.max(h.max, spanH)
+  };
+}
+function blockStyle(entry) {
+  const s = stepPx.value;
+  const inset = s * BLOCK_INSET_UNITS;
+  const d = drag.value;
+  const placement = d && d.starts[entry.itemId] ? applyDelta(d, entry.itemId) : entry.placement;
+  const [[x1, y1], [x2, y2]] = placement.area;
+  const cellX = (x1 - 1) * s + inset + coordinate.value.x;
+  const cellY = (y1 - 1) * s + inset + coordinate.value.y;
+  const cellW = Math.max(0, (x2 - x1) * s - 2 * inset);
+  const cellH = Math.max(0, (y2 - y1) * s - 2 * inset);
+  return {
+    top: "0",
+    left: "0",
+    width: `${cellW}px`,
+    height: `${cellH}px`,
+    transform: `translate3d(${cellX}px, ${cellY}px, 0)`
+  };
+}
+function blockInnerStyle(entry) {
+  const d = drag.value;
+  const placement = d && d.starts[entry.itemId] ? applyDelta(d, entry.itemId) : entry.placement;
+  const toFlex = (a) => a === "start" ? "flex-start" : a === "end" ? "flex-end" : "center";
+  return `justify-content: ${toFlex(placement.h)}; align-items: ${toFlex(placement.v)}`;
+}
+function blockPillStyle(entry) {
+  const d = drag.value;
+  const placement = d && d.starts[entry.itemId] ? applyDelta(d, entry.itemId) : entry.placement;
+  const parts = [];
+  if (!placement.h || placement.h === "stretch") parts.push("width: 100%");
+  if (!placement.v || placement.v === "stretch") parts.push("height: 100%");
+  return parts.join("; ");
+}
+function areasOverlap(a, b) {
+  return a[0][0] < b[1][0] && a[1][0] > b[0][0] && a[0][1] < b[1][1] && a[1][1] > b[0][1];
+}
+function hideItem(itemId) {
+  const i = activeIndex.value;
+  const ls = layouts.value[i];
+  if (!ls) return;
+  if (!ls.layout.placements[itemId]) return;
+  const { [itemId]: _removed, ...rest } = ls.layout.placements;
+  writeTracks(i, rest);
+}
+function emitDeleteMany(itemIds) {
+  emit("delete-items", [...itemIds]);
+}
+function hideItems(itemIds) {
+  const i = activeIndex.value;
+  const ls = layouts.value[i];
+  if (!ls) return;
+  const drop = new Set(itemIds);
+  const rest = {};
+  let changed = false;
+  for (const [id, p] of Object.entries(ls.layout.placements)) {
+    if (drop.has(id)) {
+      changed = true;
+      continue;
+    }
+    rest[id] = p;
+  }
+  if (!changed) return;
+  writeTracks(i, rest);
+}
+const alignItemClass = "inline-flex size-7 cursor-pointer items-center justify-center rounded-sm text-zinc-600 outline-none transition-colors hover:bg-zinc-100 hover:text-zinc-900 data-[state=checked]:bg-[color-mix(in_srgb,var(--primary)_12%,white)] data-[state=checked]:text-(--primary) [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
+function setAlignment(itemId, patch) {
+  setAlignmentMany([itemId], patch);
+}
+function setAlignmentMany(itemIds, patch) {
+  if (itemIds.length === 0) return;
+  setLayout(activeIndex.value, (ls) => {
+    const placements = { ...ls.layout.placements };
+    let changed = false;
+    for (const itemId of itemIds) {
+      const prev = placements[itemId];
+      if (!prev) continue;
+      const next = { ...prev, ...patch };
+      if (next.h === "stretch") delete next.h;
+      if (next.v === "stretch") delete next.v;
+      placements[itemId] = next;
+      changed = true;
+    }
+    if (!changed) return ls;
+    return { ...ls, layout: { ...ls.layout, placements } };
+  });
+}
+function sharedAlignment(axis) {
+  const ls = activeLayout.value;
+  if (!ls) return void 0;
+  let value;
+  let initialized = false;
+  for (const id of selectedItemIds.value) {
+    const p = ls.layout.placements[id];
+    if (!p) continue;
+    const v = p[axis] ?? "stretch";
+    if (!initialized) {
+      value = v;
+      initialized = true;
+    } else if (value !== v) return void 0;
+  }
+  return initialized ? value : void 0;
+}
+function beginDrag(kind, itemId, e) {
+  if (e.button !== 0) return;
+  const entry = placementEntries.value.find((p) => p.itemId === itemId);
+  if (!entry) return;
+  e.preventDefault();
+  e.stopPropagation();
+  let itemIds;
+  if (kind === "move" && isSelected(itemId) && selectedItemIds.value.length > 1) {
+    itemIds = [...selectedItemIds.value];
+  } else {
+    itemIds = [itemId];
+    if (kind === "move") setSelection([itemId]);
+  }
+  const starts = {};
+  for (const id of itemIds) {
+    const p = placementEntries.value.find((x) => x.itemId === id);
+    if (p) starts[id] = p.placement;
+  }
+  drag.value = {
+    kind,
+    itemIds,
+    anchorId: itemId,
+    origin: { x: e.clientX, y: e.clientY },
+    starts,
+    delta: { x: 0, y: 0, w: 0, h: 0 },
+    bounds: resolveBounds(itemId, entry.placement)
+  };
+}
+function applyDelta(d, itemId) {
+  const start = d.starts[itemId] ?? d.starts[d.anchorId];
+  const [[x1, y1], [x2, y2]] = start.area;
+  const spanW = x2 - x1;
+  const spanH = y2 - y1;
+  const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+  const { minW, maxW, minH, maxH } = d.bounds;
+  let area;
+  switch (d.kind) {
+    case "move": {
+      const nx1 = x1 + d.delta.x;
+      const ny1 = y1 + d.delta.y;
+      area = [[nx1, ny1], [nx1 + spanW, ny1 + spanH]];
+      break;
+    }
+    case "resize-e": {
+      const w = clamp(spanW + d.delta.w, minW, maxW);
+      area = [[x1, y1], [x1 + w, y2]];
+      break;
+    }
+    case "resize-s": {
+      const h = clamp(spanH + d.delta.h, minH, maxH);
+      area = [[x1, y1], [x2, y1 + h]];
+      break;
+    }
+    case "resize-w": {
+      const w = clamp(spanW + d.delta.w, minW, maxW);
+      area = [[x2 - w, y1], [x2, y2]];
+      break;
+    }
+    case "resize-n": {
+      const h = clamp(spanH + d.delta.h, minH, maxH);
+      area = [[x1, y2 - h], [x2, y2]];
+      break;
+    }
+    case "resize-se": {
+      const w = clamp(spanW + d.delta.w, minW, maxW);
+      const h = clamp(spanH + d.delta.h, minH, maxH);
+      area = [[x1, y1], [x1 + w, y1 + h]];
+      break;
+    }
+    case "resize-sw": {
+      const w = clamp(spanW + d.delta.w, minW, maxW);
+      const h = clamp(spanH + d.delta.h, minH, maxH);
+      area = [[x2 - w, y1], [x2, y1 + h]];
+      break;
+    }
+    case "resize-ne": {
+      const w = clamp(spanW + d.delta.w, minW, maxW);
+      const h = clamp(spanH + d.delta.h, minH, maxH);
+      area = [[x1, y2 - h], [x1 + w, y2]];
+      break;
+    }
+    case "resize-nw": {
+      const w = clamp(spanW + d.delta.w, minW, maxW);
+      const h = clamp(spanH + d.delta.h, minH, maxH);
+      area = [[x2 - w, y2 - h], [x2, y2]];
+      break;
+    }
+  }
+  return { ...start, area };
+}
+useEventListener("mousemove", (e) => {
+  const d = drag.value;
+  if (!d) return;
+  const s = stepPx.value;
+  const dx = Math.round((e.clientX - d.origin.x) / s);
+  const dy = Math.round((e.clientY - d.origin.y) / s);
+  switch (d.kind) {
+    case "move":
+      d.delta = { x: dx, y: dy, w: 0, h: 0 };
+      break;
+    case "resize-e":
+      d.delta = { x: 0, y: 0, w: dx, h: 0 };
+      break;
+    case "resize-s":
+      d.delta = { x: 0, y: 0, w: 0, h: dy };
+      break;
+    case "resize-w":
+      d.delta = { x: 0, y: 0, w: -dx, h: 0 };
+      break;
+    case "resize-n":
+      d.delta = { x: 0, y: 0, w: 0, h: -dy };
+      break;
+    case "resize-se":
+      d.delta = { x: 0, y: 0, w: dx, h: dy };
+      break;
+    case "resize-sw":
+      d.delta = { x: 0, y: 0, w: -dx, h: dy };
+      break;
+    case "resize-ne":
+      d.delta = { x: 0, y: 0, w: dx, h: -dy };
+      break;
+    case "resize-nw":
+      d.delta = { x: 0, y: 0, w: -dx, h: -dy };
+      break;
+  }
+});
+const dragInvalid = computed(() => {
+  const d = drag.value;
+  if (!d) return false;
+  const ls = activeLayout.value;
+  if (!ls) return false;
+  const moving = new Set(d.itemIds);
+  for (const id of d.itemIds) {
+    const cand = applyDelta(d, id).area;
+    for (const [otherId, p] of Object.entries(ls.layout.placements)) {
+      if (moving.has(otherId)) continue;
+      if (areasOverlap(cand, p.area)) return true;
+    }
+  }
+  return false;
+});
+const frameStyle = computed(() => {
+  const ls = activeLayout.value;
+  if (!ls) return null;
+  const placements = { ...ls.layout.placements };
+  const d = drag.value;
+  if (d) {
+    for (const id of d.itemIds) {
+      if (placements[id]) placements[id] = applyDelta(d, id);
+    }
+  }
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const p of Object.values(placements)) {
+    if (p.area[0][0] < minX) minX = p.area[0][0];
+    if (p.area[0][1] < minY) minY = p.area[0][1];
+    if (p.area[1][0] > maxX) maxX = p.area[1][0];
+    if (p.area[1][1] > maxY) maxY = p.area[1][1];
+  }
+  if (!Number.isFinite(minX)) return null;
+  const s = stepPx.value;
+  const tx = (minX - 1) * s + coordinate.value.x;
+  const ty = (minY - 1) * s + coordinate.value.y;
+  const w = (maxX - minX) * s;
+  const h = (maxY - minY) * s;
+  return {
+    top: "0",
+    left: "0",
+    width: `${w}px`,
+    height: `${h}px`,
+    transform: `translate3d(${tx}px, ${ty}px, 0)`
+  };
+});
+const frameOfOthers = computed(() => {
+  const ls = activeLayout.value;
+  if (!ls) return null;
+  const skip = new Set(drag.value?.itemIds ?? []);
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const [id, p] of Object.entries(ls.layout.placements)) {
+    if (skip.has(id)) continue;
+    if (p.area[0][0] < minX) minX = p.area[0][0];
+    if (p.area[0][1] < minY) minY = p.area[0][1];
+    if (p.area[1][0] > maxX) maxX = p.area[1][0];
+    if (p.area[1][1] > maxY) maxY = p.area[1][1];
+  }
+  if (!Number.isFinite(minX)) return null;
+  return { minX, minY, maxX, maxY };
+});
+const distanceIndicators = computed(() => {
+  const d = drag.value;
+  if (!d || d.kind !== "move") return [];
+  const ls = activeLayout.value;
+  if (!ls) return [];
+  let mx1 = Infinity;
+  let my1 = Infinity;
+  let mx2 = -Infinity;
+  let my2 = -Infinity;
+  for (const id of d.itemIds) {
+    if (!d.starts[id]) continue;
+    const [[ax, ay], [bx, by]] = applyDelta(d, id).area;
+    if (ax < mx1) mx1 = ax;
+    if (ay < my1) my1 = ay;
+    if (bx > mx2) mx2 = bx;
+    if (by > my2) my2 = by;
+  }
+  if (!Number.isFinite(mx1)) return [];
+  const moving = new Set(d.itemIds);
+  const others = [];
+  for (const [id, p] of Object.entries(ls.layout.placements)) {
+    if (moving.has(id)) continue;
+    others.push(p.area);
+  }
+  const fo = frameOfOthers.value;
+  if (others.length === 0 && !fo) return [];
+  const s = stepPx.value;
+  const cx = coordinate.value.x;
+  const cy = coordinate.value.y;
+  const out = [];
+  const pushVertical = (dir) => {
+    let bestUnits = Infinity;
+    let overlap = null;
+    let occupied = false;
+    for (const a of others) {
+      const [[ox1, oy1], [ox2, oy2]] = a;
+      if (ox2 <= mx1 || ox1 >= mx2) continue;
+      const u = dir === "top" ? my1 - oy2 : oy1 - my2;
+      if (u < 0) {
+        occupied = true;
+        continue;
+      }
+      if (u >= bestUnits) continue;
+      bestUnits = u;
+      overlap = { lo: Math.max(ox1, mx1), hi: Math.min(ox2, mx2) };
+    }
+    let units;
+    let midX;
+    if (Number.isFinite(bestUnits)) {
+      units = bestUnits;
+      midX = (overlap.lo + overlap.hi) / 2;
+    } else if (occupied || !fo) return;
+    else {
+      units = dir === "top" ? my1 - fo.minY : fo.maxY - my2;
+      midX = (mx1 + mx2) / 2;
+    }
+    if (units <= 1) return;
+    const pxX = (midX - 1) * s + cx;
+    const pxY = ((dir === "top" ? my1 - units : my2) - 1) * s + cy;
+    out.push({ dir, pxX, pxY, length: units * s, units });
+  };
+  const pushHorizontal = (dir) => {
+    let bestUnits = Infinity;
+    let overlap = null;
+    let occupied = false;
+    for (const a of others) {
+      const [[ox1, oy1], [ox2, oy2]] = a;
+      if (oy2 <= my1 || oy1 >= my2) continue;
+      const u = dir === "left" ? mx1 - ox2 : ox1 - mx2;
+      if (u < 0) {
+        occupied = true;
+        continue;
+      }
+      if (u >= bestUnits) continue;
+      bestUnits = u;
+      overlap = { lo: Math.max(oy1, my1), hi: Math.min(oy2, my2) };
+    }
+    let units;
+    let midY;
+    if (Number.isFinite(bestUnits)) {
+      units = bestUnits;
+      midY = (overlap.lo + overlap.hi) / 2;
+    } else if (occupied || !fo) return;
+    else {
+      units = dir === "left" ? mx1 - fo.minX : fo.maxX - mx2;
+      midY = (my1 + my2) / 2;
+    }
+    if (units <= 1) return;
+    const pxX = ((dir === "left" ? mx1 - units : mx2) - 1) * s + cx;
+    const pxY = (midY - 1) * s + cy;
+    out.push({ dir, pxX, pxY, length: units * s, units });
+  };
+  pushVertical("top");
+  pushVertical("bottom");
+  pushHorizontal("left");
+  pushHorizontal("right");
+  return out;
+});
+function indicatorStyle(ind) {
+  const isVertical = ind.dir === "top" || ind.dir === "bottom";
+  const w = isVertical ? 0 : ind.length;
+  const h = isVertical ? ind.length : 0;
+  return `top: 0; left: 0; width: ${w}px; height: ${h}px; transform: translate3d(${ind.pxX}px, ${ind.pxY}px, 0)`;
+}
+useEventListener("mouseup", () => {
+  const d = drag.value;
+  if (!d) return;
+  const moved = d.delta.x !== 0 || d.delta.y !== 0 || d.delta.w !== 0 || d.delta.h !== 0;
+  if (moved) {
+    dragJustEnded = true;
+    queueMicrotask(() => {
+      dragJustEnded = false;
+    });
+  }
+  if (dragInvalid.value) {
+    drag.value = null;
+    return;
+  }
+  if (!moved) {
+    drag.value = null;
+    return;
+  }
+  const ids = d.itemIds;
+  const next = { ...activeLayout.value.layout.placements };
+  for (const id of ids) {
+    if (!next[id]) continue;
+    next[id] = applyDelta(d, id);
+  }
+  drag.value = null;
+  writeTracks(activeIndex.value, next);
+});
+const unplacedItems = computed(() => {
+  const ls = activeLayout.value;
+  if (!ls) return [];
+  const placed = new Set(Object.keys(ls.layout.placements));
+  const out = [];
+  for (const it of props.items) {
+    if (placed.has(it.id)) continue;
+    const entry = props.findEntry(it.type, it.compatibilityDate);
+    if (!entry) continue;
+    out.push({
+      item: it,
+      label: resolveItemLabel(it.id),
+      icon: entry.metadata.icon,
+      initialW: entry.metadata.w.initial,
+      initialH: entry.metadata.h.initial
+    });
+  }
+  return out;
+});
+function placeUnplacedItem(entry) {
+  const i = activeIndex.value;
+  const ls = layouts.value[i];
+  if (!ls) return;
+  const placement = findFreePlacement(ls.layout.placements, entry.initialW, entry.initialH);
+  writeTracks(i, { ...ls.layout.placements, [entry.item.id]: placement });
+}
+const showPickerNewGroup = computed(
+  () => !!props.pickerEntries && props.pickerEntries.length > 0
+);
+const canvasRef = ref(null);
+const isFullscreen = ref(false);
+useEventListener(() => document, "fullscreenchange", () => {
+  isFullscreen.value = document.fullscreenElement === canvasRef.value;
+  recenterSoon();
+});
+function toggleFullscreen() {
+  const el = canvasRef.value;
+  if (!el) return;
+  if (document.fullscreenElement === el) {
+    document.exitFullscreen();
+  } else {
+    el.requestFullscreen();
+  }
+}
+</script>
+
+<template>
+  <div
+    ref="canvasRef"
+    class="relative overflow-hidden rounded border border-zinc-200 bg-zinc-50 select-none"
+    :class="[isFullscreen ? 'h-screen' : 'h-full']"
+  >
+    <div
+      ref="planeRef"
+      class="absolute inset-0"
+      :class="[isPanning ? 'cursor-grabbing' : isSpaceHeld ? 'cursor-grab' : '']"
+      :style="bgStyle"
+      @mousedown="onPlaneMouseDown"
+    />
+
+    <div
+      v-if="marqueeStyle"
+      class="absolute z-50 pointer-events-none rounded-sm border border-(--primary) bg-(--primary)/10"
+      :style="marqueeStyle"
+    />
+
+    <div
+      class="absolute top-3 right-3"
+      @mousedown.stop
+    >
+      <Button
+        variant="default"
+        size="sm"
+        :title="isFullscreen ? '\u9000\u51FA\u5168\u5C4F' : '\u5168\u5C4F'"
+        @click="toggleFullscreen"
+      >
+        <Icon :icon="isFullscreen ? 'fluent:full-screen-minimize-20-regular' : 'fluent:full-screen-maximize-20-regular'" />
+      </Button>
+    </div>
+
+    <div
+      v-if="frameStyle"
+      class="frame-outline absolute pointer-events-none rounded-md"
+      :style="frameStyle"
+    />
+
+    <ContextMenu
+      v-for="entry in placementEntries"
+      :key="entry.itemId"
+    >
+      <ContextMenuTrigger as-child>
+        <div
+          class="field-block rounded-md"
+          :class="[
+  drag && drag.itemIds.includes(entry.itemId) ? ['shadow-sm backdrop-blur-sm z-50', dragInvalid ? 'bg-red-200/50' : 'bg-white/50'] : ['shadow-xs bg-white'],
+  isSelected(entry.itemId) ? 'is-selected' : ''
+]"
+          :style="blockStyle(entry)"
+          @mousedown="beginDrag('move', entry.itemId, $event)"
+          @click="onItemClick(entry.itemId, $event)"
+          @contextmenu="onItemContextMenu(entry.itemId)"
+          @dblclick.stop="emit('drill-down', entry.itemId)"
+        >
+          <div
+            class="flex h-full p-1 pointer-events-none"
+            :style="blockInnerStyle(entry)"
+          >
+            <div
+              class="flex items-center justify-center gap-1.5 rounded-sm bg-zinc-100 px-1.5 py-0.5 text-sm text-zinc-700"
+              :style="blockPillStyle(entry)"
+            >
+              <Icon
+                :icon="getItemIcon(entry.itemId)"
+                class="size-4 shrink-0 text-zinc-400"
+              />
+              <span class="truncate">{{ resolveItemLabel(entry.itemId) }}</span>
+            </div>
+          </div>
+
+          <button
+            type="button"
+            class="drill-button"
+            :title="`\u7F16\u8F91${itemNoun}`"
+            @mousedown.stop
+            @click.stop="emit('drill-down', entry.itemId)"
+          >
+            <Icon
+              icon="fluent:arrow-up-right-20-regular"
+              class="size-3.5"
+            />
+          </button>
+
+          <template v-if="selectedItemIds.length === 1 && isSelected(entry.itemId)">
+            <div
+              class="resize-handle handle-n"
+              @mousedown="beginDrag('resize-n', entry.itemId, $event)"
+            />
+            <div
+              class="resize-handle handle-e"
+              @mousedown="beginDrag('resize-e', entry.itemId, $event)"
+            />
+            <div
+              class="resize-handle handle-s"
+              @mousedown="beginDrag('resize-s', entry.itemId, $event)"
+            />
+            <div
+              class="resize-handle handle-w"
+              @mousedown="beginDrag('resize-w', entry.itemId, $event)"
+            />
+            <div
+              class="resize-handle handle-nw"
+              @mousedown="beginDrag('resize-nw', entry.itemId, $event)"
+            />
+            <div
+              class="resize-handle handle-ne"
+              @mousedown="beginDrag('resize-ne', entry.itemId, $event)"
+            />
+            <div
+              class="resize-handle handle-sw"
+              @mousedown="beginDrag('resize-sw', entry.itemId, $event)"
+            />
+            <div
+              class="resize-handle handle-se"
+              @mousedown="beginDrag('resize-se', entry.itemId, $event)"
+            />
+          </template>
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent
+        class="min-w-auto p-1.5"
+        :to="isFullscreen ? canvasRef : null"
+      >
+        <template v-if="selectedItemIds.length > 1 && isSelected(entry.itemId)">
+          <ContextMenuRadioGroup
+            :model-value="sharedAlignment('h') ?? ''"
+            class="my-1 flex items-center justify-center gap-0.5"
+            @update:model-value="(v) => v && setAlignmentMany(selectedItemIds, { h: v })"
+          >
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <ContextMenuRadioItem
+                  value="start"
+                  hide-indicator
+                  :class="alignItemClass"
+                  @select.prevent
+                >
+                  <Icon icon="fluent:align-left-20-regular" />
+                </ContextMenuRadioItem>
+              </TooltipTrigger>
+              <TooltipContent :to="isFullscreen ? canvasRef : null">
+                左对齐
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <ContextMenuRadioItem
+                  value="center"
+                  hide-indicator
+                  :class="alignItemClass"
+                  @select.prevent
+                >
+                  <Icon icon="fluent:align-center-horizontal-20-regular" />
+                </ContextMenuRadioItem>
+              </TooltipTrigger>
+              <TooltipContent :to="isFullscreen ? canvasRef : null">
+                水平居中
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <ContextMenuRadioItem
+                  value="end"
+                  hide-indicator
+                  :class="alignItemClass"
+                  @select.prevent
+                >
+                  <Icon icon="fluent:align-right-20-regular" />
+                </ContextMenuRadioItem>
+              </TooltipTrigger>
+              <TooltipContent :to="isFullscreen ? canvasRef : null">
+                右对齐
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <ContextMenuRadioItem
+                  value="stretch"
+                  hide-indicator
+                  :class="alignItemClass"
+                  @select.prevent
+                >
+                  <Icon icon="fluent:arrow-autofit-width-20-regular" />
+                </ContextMenuRadioItem>
+              </TooltipTrigger>
+              <TooltipContent :to="isFullscreen ? canvasRef : null">
+                水平撑满
+              </TooltipContent>
+            </Tooltip>
+          </ContextMenuRadioGroup>
+          <ContextMenuRadioGroup
+            :model-value="sharedAlignment('v') ?? ''"
+            class="my-1 flex items-center justify-center gap-0.5"
+            @update:model-value="(v) => v && setAlignmentMany(selectedItemIds, { v })"
+          >
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <ContextMenuRadioItem
+                  value="start"
+                  hide-indicator
+                  :class="alignItemClass"
+                  @select.prevent
+                >
+                  <Icon icon="fluent:align-top-20-regular" />
+                </ContextMenuRadioItem>
+              </TooltipTrigger>
+              <TooltipContent :to="isFullscreen ? canvasRef : null">
+                顶部对齐
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <ContextMenuRadioItem
+                  value="center"
+                  hide-indicator
+                  :class="alignItemClass"
+                  @select.prevent
+                >
+                  <Icon icon="fluent:align-center-vertical-20-regular" />
+                </ContextMenuRadioItem>
+              </TooltipTrigger>
+              <TooltipContent :to="isFullscreen ? canvasRef : null">
+                垂直居中
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <ContextMenuRadioItem
+                  value="end"
+                  hide-indicator
+                  :class="alignItemClass"
+                  @select.prevent
+                >
+                  <Icon icon="fluent:align-bottom-20-regular" />
+                </ContextMenuRadioItem>
+              </TooltipTrigger>
+              <TooltipContent :to="isFullscreen ? canvasRef : null">
+                底部对齐
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <ContextMenuRadioItem
+                  value="stretch"
+                  hide-indicator
+                  :class="alignItemClass"
+                  @select.prevent
+                >
+                  <Icon icon="fluent:arrow-autofit-height-20-regular" />
+                </ContextMenuRadioItem>
+              </TooltipTrigger>
+              <TooltipContent :to="isFullscreen ? canvasRef : null">
+                垂直撑满
+              </TooltipContent>
+            </Tooltip>
+          </ContextMenuRadioGroup>
+          <ContextMenuSeparator />
+          <ContextMenuItem @select="hideItems(selectedItemIds)">
+            <Icon icon="fluent:eye-off-20-regular" />
+            <span>从当前布局移除 ({{ selectedItemIds.length }})</span>
+          </ContextMenuItem>
+          <ContextMenuItem
+            v-if="props.canDelete"
+            class="text-red-500 focus:text-red-600 hover:text-red-600 focus:bg-red-50 hover:bg-red-50 [&_svg:not([class*='text-'])]:text-red-400"
+            @select="emitDeleteMany(selectedItemIds)"
+          >
+            <Icon icon="fluent:delete-20-regular" />
+            <span>彻底删除 ({{ selectedItemIds.length }})</span>
+          </ContextMenuItem>
+        </template>
+        <template v-else>
+          <ContextMenuRadioGroup
+            :model-value="entry.placement.h ?? 'stretch'"
+            class="my-1 flex items-center justify-center gap-0.5"
+            @update:model-value="(v) => v && setAlignment(entry.itemId, { h: v })"
+          >
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <ContextMenuRadioItem
+                  value="start"
+                  hide-indicator
+                  :class="alignItemClass"
+                  @select.prevent
+                >
+                  <Icon icon="fluent:align-left-20-regular" />
+                </ContextMenuRadioItem>
+              </TooltipTrigger>
+              <TooltipContent :to="isFullscreen ? canvasRef : null">
+                左对齐
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <ContextMenuRadioItem
+                  value="center"
+                  hide-indicator
+                  :class="alignItemClass"
+                  @select.prevent
+                >
+                  <Icon icon="fluent:align-center-horizontal-20-regular" />
+                </ContextMenuRadioItem>
+              </TooltipTrigger>
+              <TooltipContent :to="isFullscreen ? canvasRef : null">
+                水平居中
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <ContextMenuRadioItem
+                  value="end"
+                  hide-indicator
+                  :class="alignItemClass"
+                  @select.prevent
+                >
+                  <Icon icon="fluent:align-right-20-regular" />
+                </ContextMenuRadioItem>
+              </TooltipTrigger>
+              <TooltipContent :to="isFullscreen ? canvasRef : null">
+                右对齐
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <ContextMenuRadioItem
+                  value="stretch"
+                  hide-indicator
+                  :class="alignItemClass"
+                  @select.prevent
+                >
+                  <Icon icon="fluent:arrow-autofit-width-20-regular" />
+                </ContextMenuRadioItem>
+              </TooltipTrigger>
+              <TooltipContent :to="isFullscreen ? canvasRef : null">
+                水平撑满
+              </TooltipContent>
+            </Tooltip>
+          </ContextMenuRadioGroup>
+          <ContextMenuRadioGroup
+            :model-value="entry.placement.v ?? 'stretch'"
+            class="my-1 flex items-center justify-center gap-0.5"
+            @update:model-value="(v) => v && setAlignment(entry.itemId, { v })"
+          >
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <ContextMenuRadioItem
+                  value="start"
+                  hide-indicator
+                  :class="alignItemClass"
+                  @select.prevent
+                >
+                  <Icon icon="fluent:align-top-20-regular" />
+                </ContextMenuRadioItem>
+              </TooltipTrigger>
+              <TooltipContent :to="isFullscreen ? canvasRef : null">
+                顶部对齐
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <ContextMenuRadioItem
+                  value="center"
+                  hide-indicator
+                  :class="alignItemClass"
+                  @select.prevent
+                >
+                  <Icon icon="fluent:align-center-vertical-20-regular" />
+                </ContextMenuRadioItem>
+              </TooltipTrigger>
+              <TooltipContent :to="isFullscreen ? canvasRef : null">
+                垂直居中
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <ContextMenuRadioItem
+                  value="end"
+                  hide-indicator
+                  :class="alignItemClass"
+                  @select.prevent
+                >
+                  <Icon icon="fluent:align-bottom-20-regular" />
+                </ContextMenuRadioItem>
+              </TooltipTrigger>
+              <TooltipContent :to="isFullscreen ? canvasRef : null">
+                底部对齐
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <ContextMenuRadioItem
+                  value="stretch"
+                  hide-indicator
+                  :class="alignItemClass"
+                  @select.prevent
+                >
+                  <Icon icon="fluent:arrow-autofit-height-20-regular" />
+                </ContextMenuRadioItem>
+              </TooltipTrigger>
+              <TooltipContent :to="isFullscreen ? canvasRef : null">
+                垂直撑满
+              </TooltipContent>
+            </Tooltip>
+          </ContextMenuRadioGroup>
+          <ContextMenuSeparator />
+          <ContextMenuItem @select="hideItem(entry.itemId)">
+            <Icon icon="fluent:eye-off-20-regular" />
+            <span>从当前布局移除</span>
+          </ContextMenuItem>
+          <ContextMenuItem
+            v-if="props.canDelete"
+            class="text-red-500 focus:text-red-600 hover:text-red-600 focus:bg-red-50 hover:bg-red-50 [&_svg:not([class*='text-'])]:text-red-400"
+            @select="emit('delete-item', entry.itemId)"
+          >
+            <Icon icon="fluent:delete-20-regular" />
+            <span>彻底删除</span>
+          </ContextMenuItem>
+        </template>
+      </ContextMenuContent>
+    </ContextMenu>
+
+    <template v-if="drag?.kind === 'move'">
+      <div
+        v-for="ind in distanceIndicators"
+        :key="ind.dir"
+        class="dist-indicator absolute pointer-events-none"
+        :class="`dist-${ind.dir}`"
+        :style="indicatorStyle(ind)"
+      >
+        <span class="dist-line" />
+        <span class="dist-label">{{ ind.units }}</span>
+        <span class="dist-line" />
+      </div>
+    </template>
+
+    <div
+      v-if="activeLayout"
+      class="absolute bottom-3 left-3 flex items-center gap-3 rounded-md bg-transparent px-3 py-2 font-mono text-sm opacity-50 transition-[opacity,background-color,backdrop-filter] hover:bg-white/95 hover:opacity-100 hover:backdrop-blur focus-within:bg-white/95 focus-within:opacity-100 focus-within:backdrop-blur"
+      @mousedown.stop
+    >
+      <Field
+        orientation="horizontal"
+        class="items-center gap-2"
+      >
+        <FieldLabel class="text-sm text-zinc-500">
+          间距
+        </FieldLabel>
+        <div class="gap-input w-20">
+          <InputGroup class="h-7">
+            <InputGroupNumberField
+              :model-value="activeGap"
+              :min="0"
+              :step="1"
+              class="font-mono"
+              @update:model-value="setGap"
+            />
+          </InputGroup>
+        </div>
+      </Field>
+    </div>
+
+    <div
+      v-if="activeLayout && (showPickerNewGroup || unplacedItems.length > 0)"
+      class="absolute bottom-3 right-3 w-60 rounded-md bg-white/95 backdrop-blur"
+      @mousedown.stop
+      @click.capture="captureAddModifiers"
+      @keydown.capture="captureAddModifiers"
+    >
+      <InputGroup>
+        <InputGroupAddon align="inline-start">
+          <Icon icon="fluent:add-20-regular" />
+        </InputGroupAddon>
+        <InputGroupCombobox
+          :placeholder="`\u6DFB\u52A0${itemNoun}`"
+          :to="isFullscreen ? canvasRef : null"
+        >
+          <CommandGroup
+            v-if="unplacedItems.length > 0"
+            heading="未放置"
+          >
+            <CommandItem
+              v-for="entry in unplacedItems"
+              :key="`existing:${entry.item.id}`"
+              :value="`existing:${entry.item.id}`"
+              @select="placeUnplacedItem(entry)"
+            >
+              <Icon
+                :icon="entry.icon"
+                class="size-4 shrink-0 text-zinc-400"
+              />
+              <span class="flex-1 truncate">{{ entry.label }}</span>
+              <span class="ml-auto text-[10px] tabular-nums text-zinc-400">
+                {{ entry.initialW }} × {{ entry.initialH }}
+              </span>
+            </CommandItem>
+          </CommandGroup>
+          <CommandGroup
+            v-if="showPickerNewGroup"
+            heading="组件"
+          >
+            <CommandItem
+              v-for="entry in props.pickerEntries"
+              :key="`new:${entry.type}@${entry.compatibilityDate}`"
+              :value="`new:${entry.type}@${entry.compatibilityDate}`"
+              @select="emitAddNew(entry)"
+            >
+              <Icon
+                :icon="entry.icon"
+                class="size-4 shrink-0"
+              />
+              <span class="flex-1 truncate">{{ entry.name }}</span>
+              <span class="ml-auto text-[10px] tabular-nums text-zinc-400">{{ entry.compatibilityDate }}</span>
+            </CommandItem>
+          </CommandGroup>
+        </InputGroupCombobox>
+      </InputGroup>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.field-block{border:1px solid #e4e4e7;cursor:move;position:absolute}.field-block.is-selected{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}.frame-outline{border:1px dashed hsla(240,5%,84%,.7)}.resize-handle{background:transparent;position:absolute}.handle-n{top:-3px}.handle-n,.handle-s{cursor:ns-resize;height:6px;left:12px;right:12px}.handle-s{bottom:-3px}.handle-e{right:-3px}.handle-e,.handle-w{bottom:12px;cursor:ew-resize;top:12px;width:6px}.handle-w{left:-3px}.handle-nw{cursor:nwse-resize;left:-3px}.handle-ne,.handle-nw{height:10px;top:-3px;width:10px}.handle-ne{cursor:nesw-resize;right:-3px}.handle-sw{cursor:nesw-resize;left:-3px}.handle-se,.handle-sw{bottom:-3px;height:10px;width:10px}.handle-se{cursor:nwse-resize;right:-3px}.drill-button{align-items:center;background:transparent;border-radius:4px;color:#71717a;cursor:pointer;display:inline-flex;height:22px;justify-content:center;opacity:0;position:absolute;right:4px;top:4px;transition:opacity .12s ease,background-color .12s ease,color .12s ease;width:22px;z-index:5}.drill-button:focus-visible,.field-block:hover .drill-button{opacity:1}.drill-button:hover{background:#f4f4f5;color:var(--primary)}.gap-input :deep(input){text-align:center}.dist-indicator{align-items:center;color:#f87171;display:flex;justify-content:center;z-index:40}.dist-bottom,.dist-top{flex-direction:column}.dist-left,.dist-right{flex-direction:row}.dist-line{background:currentColor;flex:1 1 0}.dist-bottom .dist-line,.dist-top .dist-line{width:1px}.dist-left .dist-line,.dist-right .dist-line{height:1px}.dist-label{background:#fafafa;border-radius:2px;color:#f87171;font-size:10px;font-variant-numeric:tabular-nums;line-height:1;padding:1px 4px}
+</style>