@growgroup/visual-editor 0.7.2 → 0.8.1

package/src/editor/components/ppt/PptChrome.tsx

@@ -46,6 +46,7 @@ import { moveSlide, deleteSlide, duplicateSlide, updateSlideMeta, insertSlide }
 import { startCleanup } from '../../../components/SaveNote';
 import { unresolvedCount } from './PptComments';
 import { enterCropMode, type CropSession } from '../../utils/crop-mode';
+import { borderWidthStyles, summarizeBorder } from '../../utils/border-sides';
 import { useGoogleFonts } from '../../hooks/useGoogleFonts';
 import { DeckSlideRender } from '../../../components/DeckSlideRender';
 const PptDesignProposals = lazy(() => import('./PptDesignProposals').then((m) => ({ default: m.PptDesignProposals })));
@@ -270,7 +271,11 @@ function Dropdown({
 const PAINT_PROPS = new Set([
   'backgroundColor', 'background', 'backgroundImage', 'clipPath', 'borderRadius',
   'border', 'borderColor', 'borderWidth', 'borderStyle',
+  // 辺ごとの線も中身の図形へ(片側だけの線の読み書き。上の辺だけだと、枠の右・下・左を枠の外側から読んでいた)
   'borderTopWidth', 'borderTopStyle', 'borderTopColor',
+  'borderRightWidth', 'borderRightStyle', 'borderRightColor',
+  'borderBottomWidth', 'borderBottomStyle', 'borderBottomColor',
+  'borderLeftWidth', 'borderLeftStyle', 'borderLeftColor',
 ]);
 
 /** リボンが読む computed style の名前 → 選んだ文字の見た目(InlineTextSummary)の項目 */
@@ -1264,13 +1269,22 @@ export function PptRibbon({
 
   /** 枠線の色/太さを変えるとき、枠線が無ければ実線を立てる(PowerPointの挙動) */
   const ensureBorder = useCallback((styles: Record<string, string>) => {
-    const w = parseFloat(readComputed('border-top-width'));
-    const st = readComputed('border-top-style');
-    const out = { ...styles };
-    if (!('borderWidth' in out) && (!Number.isFinite(w) || w === 0)) out.borderWidth = '2px';
-    if (!('borderStyle' in out) && (st === 'none' || st === '')) out.borderStyle = 'solid';
+    // 片側だけの線(border-l-2 など)は上の辺が 0 なので、上だけ見ると「線が無い」と判定して
+    // 四辺に 2px を足していた。辺ごとに見て、線が見えていれば足さず、太さはその辺だけに当てる
+    const first = targets()[0];
+    const border = summarizeBorder({ getPropertyValue: readComputed }, first ? paintTarget(first) : null);
+    let out: Record<string, string> = { ...styles };
+    if ('borderWidth' in out && border.sides) {
+      const { borderWidth, ...rest } = out;
+      out = { ...rest, ...borderWidthStyles(borderWidth, border.sides) };
+    }
+    // 線が無ければ 2px を立てる(片側だけの線を 0 にしていたら、その辺に)
+    if (!('borderWidth' in styles) && (!Number.isFinite(border.width) || border.width === 0)) {
+      Object.assign(out, borderWidthStyles('2px', border.sides));
+    }
+    if (!('borderStyle' in out) && (border.style === 'none' || border.style === '')) out.borderStyle = 'solid';
     apply(out);
-  }, [readComputed, apply]);
+  }, [readComputed, apply, targets]);
 
   const borderRadiusPx = useMemo(() => {
     const v = parseFloat(readComputed('border-radius'));

package/src/editor/components/property-panel/BorderSection.tsx

@@ -16,6 +16,7 @@ import {
 } from '../../../components/ui/collapsible';
 import { Circle, ChevronRight } from 'lucide-react';
 import { rgbToHex } from '../../utils/style-utils';
+import { borderWidthStyles } from '../../utils/border-sides';
 import { BORDER_STYLES } from '../../constants';
 import type { SelectedElementInfo } from '../../types';
 
@@ -52,7 +53,8 @@ export function BorderSection({
               value={Math.round(selectedElement.borderWidth)}
               onChange={(e) =>
                 onStyleChange({
-                  borderWidth: `${e.target.value}px`,
+                  // 片側だけの線は、その辺の線幅だけを変える
+                  ...borderWidthStyles(`${e.target.value}px`, selectedElement.borderSides),
                   borderStyle:
                     selectedElement.borderStyle === 'none'
                       ? 'solid'

package/src/editor/hooks/useLinkNavigation.ts

@@ -1,5 +1,5 @@
 /**
- * ⌘ / Ctrl + クリックでリンク先へ移る(utils/link-navigation.ts)の、エディタ側の行き先。
+ * Alt(⌥)+ クリックでリンク先へ移る(utils/link-navigation.ts)の、エディタ側の行き先。
  *
  * ページの切替は、ページ一覧で切り替えるときと同じ経路を通す
  * (未保存の変更は FrontendVisualEditor.handleContentChange が保存してから移る):
@@ -122,7 +122,7 @@ export function useLinkNavigation() {
     [revealAnchor],
   );
 
-  /** 紙面に ⌘ / Ctrl + クリックの移動を付ける。戻り値は後始末 */
+  /** 紙面に Alt(⌥)+ クリックの移動を付ける。戻り値は後始末 */
   const setupLinkNavigation = useCallback(
     (iframeDoc: Document) => {
       const detach = attachLinkNavigation(iframeDoc, {

package/src/editor/types.ts

@@ -3,6 +3,8 @@
  * (スライド、ページ、コンポーネント等で共用)
  */
 
+import type { BorderSide } from './utils/border-sides';
+
 // 再エクスポート（既存の型）
 export type {
   EditorTool,
@@ -184,7 +186,9 @@ export interface SelectedElementInfo {
   rawFontSize?: string;       // font-size
   rawLineHeight?: string;     // line-height
   rawLetterSpacing?: string;  // letter-spacing
-  rawBorderWidth?: string;    // border-width
+  rawBorderWidth?: string;    // border-width(片側だけの線ならその辺の値)
+  /** 線が見えている辺が 1〜3 辺のときだけ、その辺(utils/border-sides.ts)。線幅の変更をその辺だけに当てる */
+  borderSides?: BorderSide[];
   rawGap?: string;            // gap (flexbox/grid)
   rawLeft?: string;           // left (position)
   rawTop?: string;            // top (position)

package/src/editor/utils/border-sides.ts

@@ -0,0 +1,112 @@
+/**
+ * 片側だけの線(`border-l-2` など)を、右パネル・リボンの「線」の欄で扱う。
+ *
+ * 欄は 1 本の線幅・スタイル・色しか持たない。以前は computed の `border-width` を
+ * parseFloat していたので、左だけ 2px の線は「0px」、スタイルは「none none none solid」と読めず、
+ * 線幅を変えると `border-[3px]` で四辺の枠になっていた。
+ * 線が見えている辺が 1〜3 辺なら、その辺の値を出し、線幅の変更もその辺だけに当てる。
+ */
+
+import { isBorderWidthClass, isZeroBorderWidthClass, type SideLetter } from './tailwind-utils';
+
+export type BorderSide = 'top' | 'right' | 'bottom' | 'left';
+
+export const BORDER_SIDES: readonly BorderSide[] = ['top', 'right', 'bottom', 'left'];
+
+const SIDE_WIDTH_PROPERTY: Record<BorderSide, string> = {
+  top: 'borderTopWidth',
+  right: 'borderRightWidth',
+  bottom: 'borderBottomWidth',
+  left: 'borderLeftWidth',
+};
+
+export interface BorderSummary {
+  width: number;
+  style: string;
+  color: string;
+  /**
+   * 線が見えている辺が 1〜3 辺のときだけ、その辺(上・右・下・左の順)。四辺とも・線なしは undefined。
+   * 線が見えていなくても、要素自身が 1〜3 辺だけに線幅を指定していればその辺(declaredBorderSides)
+   */
+  sides?: BorderSide[];
+}
+
+/**
+ * 線が見えていないとき(片側だけの線を線幅 0 にした・スタイルを「なし」にした)の辺を、要素自身の指定から読む。
+ * computed では辺が分からず、次に線幅を入れると四辺の枠になっていた(実エディタで確認)。
+ * インラインの辺ごとの線幅(border-left-width)と、辺の太さのクラス(border-l-0 / border-x-2)を見る。
+ * 四辺まとめての指定(インラインの border-width・border / border-2 クラス)があれば四辺とみなす
+ */
+export function declaredBorderSides(element: Element): BorderSide[] | undefined {
+  const inline = (element as HTMLElement).style;
+  const inlineSides = inline ? BORDER_SIDES.filter((side) => inline.getPropertyValue(`border-${side}-width`) !== '') : [];
+  if (inlineSides.length === BORDER_SIDES.length) return undefined;
+  if (inline?.getPropertyValue('border-width')) return undefined;
+  const classes = (element.getAttribute('class') || '').split(/\s+/).filter(Boolean);
+  // 四辺まとめての太さ(border / border-2。border-0 は除く)があれば、辺ごとの指定があっても四辺とみなす
+  if (classes.some((cls) => isBorderWidthClass(cls, '') && !isZeroBorderWidthClass(cls))) return undefined;
+  // 太さ 0 のクラス(border-b-0 など)は「線を消す指定」なので、辺を名乗るものとして数えない。
+  // 欄で線幅を 0 にしたときは、同時に書くインラインの辺ごとの線幅(上)で辺が分かる
+  const has = (letter: SideLetter) =>
+    classes.some((cls) => isBorderWidthClass(cls, letter) && !isZeroBorderWidthClass(cls));
+  const classSides: BorderSide[] = [];
+  // s / e は書字方向の始め・終わり、bs / be はブロック方向。LTR の横書きを既定として当てる
+  if (has('t') || has('y') || has('bs')) classSides.push('top');
+  if (has('r') || has('x') || has('e')) classSides.push('right');
+  if (has('b') || has('y') || has('be')) classSides.push('bottom');
+  if (has('l') || has('x') || has('s')) classSides.push('left');
+  // その辺を 0 にするクラス(border-x-2 border-l-0 の左)は、辺から外す
+  const zero = (letter: SideLetter) =>
+    classes.some((cls) => isBorderWidthClass(cls, letter) && isZeroBorderWidthClass(cls));
+  const zeroSides = new Set<BorderSide>();
+  if (zero('t') || zero('y') || zero('bs')) zeroSides.add('top');
+  if (zero('r') || zero('x') || zero('e')) zeroSides.add('right');
+  if (zero('b') || zero('y') || zero('be')) zeroSides.add('bottom');
+  if (zero('l') || zero('x') || zero('s')) zeroSides.add('left');
+  const sides = BORDER_SIDES.filter(
+    (side) => inlineSides.includes(side) || (classSides.includes(side) && !zeroSides.has(side)),
+  );
+  return sides.length > 0 && sides.length < BORDER_SIDES.length ? sides : undefined;
+}
+
+/**
+ * computed style(`getPropertyValue` を持つもの)から、「線」の欄に出す値。
+ * element を渡すと、線が見えていないときに要素自身の指定から辺を読む(declaredBorderSides)
+ */
+export function summarizeBorder(
+  style: Pick<CSSStyleDeclaration, 'getPropertyValue'>,
+  element?: Element | null,
+): BorderSummary {
+  const perSide = BORDER_SIDES.map((side) => ({
+    side,
+    width: parseFloat(style.getPropertyValue(`border-${side}-width`)) || 0,
+    style: style.getPropertyValue(`border-${side}-style`),
+    color: style.getPropertyValue(`border-${side}-color`),
+  }));
+  const shown = perSide.filter((s) => s.width > 0 && s.style !== 'none' && s.style !== 'hidden');
+  if (shown.length === 0 || shown.length === BORDER_SIDES.length) {
+    // 四辺とも・線なしは今までどおり(省略形の値)
+    const sides = shown.length === 0 && element ? declaredBorderSides(element) : undefined;
+    return {
+      width: parseFloat(style.getPropertyValue('border-width')) || 0,
+      style: sides ? style.getPropertyValue(`border-${sides[0]}-style`) : style.getPropertyValue('border-style'),
+      color: sides ? style.getPropertyValue(`border-${sides[0]}-color`) : style.getPropertyValue('border-color'),
+      ...(sides ? { sides } : {}),
+    };
+  }
+  const first = shown[0];
+  return { width: first.width, style: first.style, color: first.color, sides: shown.map((s) => s.side) };
+}
+
+/** 線幅の変更。片側だけの線なら、その辺の線幅(borderLeftWidth など)にする */
+export function borderWidthStyles(value: string, sides?: readonly BorderSide[]): Record<string, string> {
+  if (!sides || sides.length === 0 || sides.length === BORDER_SIDES.length) return { borderWidth: value };
+  const out: Record<string, string> = {};
+  for (const side of sides) out[SIDE_WIDTH_PROPERTY[side]] = value;
+  return out;
+}
+
+/** その辺の線幅の CSS プロパティ名(kebab)。インラインの生値を読むときに使う */
+export function borderSideWidthCss(side: BorderSide): string {
+  return `border-${side}-width`;
+}

package/src/editor/utils/dom-utils.ts

@@ -676,6 +676,11 @@ export function convertToAbsolutePositioning(iframeDoc: Document): number {
 
   // 1. まず全要素の現在の位置・サイズをキャプチャ（インライン要素は除外）
   const captures: ElementCapture[] = [];
+  // 変換しないインライン要素の、変換前の位置(自己検証で使う)。
+  // 変換しなかった要素は流れの中に残るので、ブロックの兄弟が絶対配置で流れから抜けると
+  // その分だけ上へ詰まる。例: <td><div>見出し</div><span class="mt-[10px] inline-block">ラベル</span></td>
+  // で見出しだけが抜け、ラベルが見出しに重なる
+  const skippedInline: { element: HTMLElement; rect: DOMRect }[] = [];
 
   editableElements.forEach((el) => {
     const element = el as HTMLElement;
@@ -694,6 +699,7 @@ export function convertToAbsolutePositioning(iframeDoc: Document): number {
 
     // インライン要素はスキップ(ただし flex/grid アイテムは除く)
     if (!isFlexOrGridItem && isInlineElement(element, computedStyle)) {
+      skippedInline.push({ element, rect: element.getBoundingClientRect() });
       return;
     }
 
@@ -725,6 +731,47 @@ export function convertToAbsolutePositioning(iframeDoc: Document): number {
     });
   });
 
+  // 1.5 編集対象でない、流れの中のブロックの兄弟も一緒に倒す。
+  // 部品(data-part)の中では data-slot だけが編集対象なので、スロットの間にある罫線(h-px の div)などは
+  // 流れに残る。兄弟が絶対配置で抜けると、その分だけ上へ詰まる(ヘッダーの罫線が 116px 上へ動いた実測)。
+  // 自己検証は編集対象しか見ていなかったので、崩れたまま確定していた。
+  // 位置を固定するだけで編集対象にはしない(data-editable は付けない)
+  const captured = new Set<HTMLElement>(captures.map((c) => c.element));
+  const parentsOfCaptured = new Set<HTMLElement>();
+  captures.forEach(({ parent }) => {
+    if (parent && parent !== iframeDoc.body && parent !== artboard) parentsOfCaptured.add(parent);
+  });
+  parentsOfCaptured.forEach((parent) => {
+    Array.from(parent.children).forEach((child) => {
+      const element = child as HTMLElement;
+      if (captured.has(element) || skippedInline.some((s) => s.element === element)) return;
+      if (element.classList.contains('selection-box') || element.classList.contains('gg-comment-layer')) return;
+      if (isNonEditableTag(element)) return;
+      const computedStyle = iframeDoc.defaultView!.getComputedStyle(element);
+      // 流れの外(absolute / fixed)・非表示は兄弟に影響されない
+      if (computedStyle.position === 'absolute' || computedStyle.position === 'fixed') return;
+      if (computedStyle.display === 'none') return;
+      const parentDisplay = iframeDoc.defaultView!.getComputedStyle(parent).display;
+      const isFlexOrGridItem = /(^|\s)(inline-)?(flex|grid)($|\s)/.test(parentDisplay);
+      if (!isFlexOrGridItem && isInlineElement(element, computedStyle)) {
+        skippedInline.push({ element, rect: element.getBoundingClientRect() });
+        return;
+      }
+      captured.add(element);
+      captures.push({
+        element,
+        rect: element.getBoundingClientRect(),
+        parent,
+        parentRect: parent.getBoundingClientRect(),
+        computedStyle,
+        parentComputedStyle: iframeDoc.defaultView!.getComputedStyle(parent),
+        originalTransform: computedStyle.transform,
+        scale,
+        prevStyle: element.getAttribute('style'),
+      });
+    });
+  });
+
   // 2. 親要素を処理（position: relative設定）
   //
   // [採寸より前にやる] offsetLeft/offsetTop は offsetParent 基準の値なので、
@@ -762,13 +809,18 @@ export function convertToAbsolutePositioning(iframeDoc: Document): number {
     if (element.offsetParent !== parent) return;
     // 寸法は offsetWidth(整数へ丸める)ではなく、rect の小数値を**切り上げ**て使う。
     // 例: 必要幅1227.4pxの文字列を1227pxで固定すると最後の1文字だけが折り返す
-    // (284pxの「テキスト」で実害)。位置は1px未満の誤差が折り返しを生まないので offset で良い
+    // (284pxの「テキスト」で実害)。位置は1px未満の誤差が折り返しを生まないので offset で良い。
+    // ただし rect は縮小した紙面の値で、ブラウザは 1/64px に丸めて返す(56px × 0.55 = 30.8 → 30.8125)。
+    // 倍率で割り戻すと 56.02 のように少しだけ大きくなり、そのまま切り上げると全部の要素が 1px 膨らむ
+    // (h-px の罫線が 2px、56px の帯が 57px になった実測)。丸めの分だけ引いてから切り上げる
     const s = capScale || 1;
+    const quantum = 1 / 64 / s + 0.005;
+    const ceilSize = (v: number) => Math.max(0, Math.ceil(v - quantum));
     offsets.set(element, {
       left: element.offsetLeft,
       top: element.offsetTop,
-      width: Math.ceil(rect.width / s),
-      height: Math.ceil(rect.height / s),
+      width: ceilSize(rect.width / s),
+      height: ceilSize(rect.height / s),
     });
   });
 
@@ -900,11 +952,21 @@ export function convertToAbsolutePositioning(iframeDoc: Document): number {
     const overY = element.scrollHeight - element.clientHeight > 2;
     return (overX || overY) && element.getAttribute('data-gg-pre-overflow') !== 'true';
   });
-  if (moved.length > 0) {
+  // 変換しなかったインライン要素も、流れの中で動いていないかを見る。
+  // 変換した要素だけを比べていたため、ブロックの兄弟が抜けて詰まったラベルを見逃し、
+  // 等倍で採寸が正確なキャンバス表示でだけ崩れた姿が確定していた
+  // (1 枚表示は縮小による端数で別の要素がずれ、たまたま巻き戻っていた)
+  const movedInline = skippedInline.filter(({ element, rect }) => {
+    const now = element.getBoundingClientRect();
+    return Math.abs(now.left - rect.left) > 1.5 || Math.abs(now.top - rect.top) > 1.5;
+  });
+  if (moved.length > 0 || movedInline.length > 0) {
     console.warn(
       '[convertToAbsolutePositioning] 変換で',
       moved.length,
-      '要素がずれたため巻き戻します(採寸タイミングの問題の可能性)',
+      '要素がずれた・変換しないインライン要素が',
+      movedInline.length,
+      '個動いたため巻き戻します(採寸タイミング、または流れに残る要素が詰まった可能性)',
     );
     captures.forEach(({ element, prevStyle }) => {
       if (prevStyle == null) element.removeAttribute('style');

package/src/editor/utils/link-navigation.ts

@@ -1,5 +1,5 @@
 /**
- * ⌘ / Ctrl + クリックで、紙面の中のリンク(`<a href>`)の先へ移る。
+ * Alt(Mac は ⌥ Option)+ クリックで、紙面の中のリンク(`<a href>`)の先へ移る。
  *
  * - 同じサイトのページ(contentList[].href と照らし合わせる) … そのページを編集中にする
  * - 同じページのアンカー(`#id`) … その要素が見える位置へ紙面を移す
@@ -7,19 +7,27 @@
  * - `mailto:` / `tel:` / `javascript:` など … 何もしない
  * - ページ一覧に無い同じオリジンの URL … 短く知らせる
  *
- * [既存の ⌘ / Ctrl クリックとの両立]
- * useElementSelection の mousedown では ⌘ / Ctrl は「階層を無視して最深要素を選ぶ」、
- * ⌘ + Shift は「最深要素の追加・解除」、⌘ + ドラッグは自由配置(useDragResize)、
- * ⌘ + ダブルクリックはテキスト編集。押した瞬間にはどれになるか決められないので、
- * ここは mousedown で候補を覚えるだけにして選択には手を出さず、
+ * [⌘ / Ctrl ではなく Alt にした理由]
+ * 0.7.0 では ⌘ / Ctrl + クリックで移っていたが、⌘ / Ctrl + クリックはレイヤーパネルでは
+ * 「選択に足す・外す」(EditorLayerPanel)、紙面では「最深要素を選ぶ」で、複数選択のつもりの
+ * ⌘ クリックがリンクの上だとページ移動になった。紙面のクリックで Alt が空いている:
+ * Alt の既存の意味はホバーの距離メジャー(useAltMeasure、mousemove だけ)・中心からのリサイズ
+ * (ハンドルのドラッグ)・ズームツールの縮小(zoom-tool の間。下で止める)で、クリックには無い。
+ *
+ * [紙面のクリックとの両立]
+ * useElementSelection の mousedown は Alt を見ない(Alt + クリックは素のクリックと同じ選択)。
+ * Alt + ドラッグは移動、Alt + ダブルクリックは素のダブルクリック(潜る・テキスト編集)。
+ * 押した瞬間にはどれになるか決められないので、ここは mousedown で候補を覚えるだけにして
+ * 選択には手を出さず、
  *   - 動かさずに離した(ドラッグではない)
- *   - Shift / Alt を押していない
+ *   - ⌘ / Ctrl / Shift を押していない(⌘ + Alt + クリックは最深要素を選ぶだけで移らない)
  *   - 2 回目の mousedown(ダブルクリック)が LINK_NAV_DELAY_MS 以内に来なかった
  *   - 押した点がテキスト編集中の要素の中ではない
- * ときだけ移る。リンクの中の深い要素を移らずに選びたいときは ⌘ + Alt + クリック。
+ * ときだけ移る。
  *
- * Mac は ⌘ だけ。Mac の Ctrl + クリックは右クリック扱い(contextmenu が出て click が来ない)で、
- * エディタのコンテキストメニューが開く。Windows などは Ctrl(と Meta)。
+ * Alt + クリックのリンクの既定の動作は、ブラウザによってはダウンロード(Chromium で実測)。
+ * 紙面のリンクの click は useElementSelection の handleClick が preventDefault するが、
+ * トリミング中は止めないので、Alt + クリックはここ(capture)でも必ず止める。
  */
 import { MARQUEE_DRAG_THRESHOLD } from '../constants';
 
@@ -175,17 +183,29 @@ export function clearPendingAnchor(id?: string): void {
 
 /**
  * 1 回目のクリックから移るまでの待ち。この間に 2 回目の mousedown が来たら
- * ダブルクリック(⌘ + ダブルクリック = テキスト編集)として移動を取り消す
+ * ダブルクリック(潜る・テキスト編集)として移動を取り消す
  */
 export const LINK_NAV_DELAY_MS = 350;
 
-/** ⌘ / Ctrl を押してリンクの上にいる間、紙面の <html> に付ける(カーソルを指にする) */
+/** Alt を押してリンクの上にいる間、紙面の <html> に付ける(カーソルを指にする) */
 export const LINK_NAV_ATTR = 'data-gg-link-nav';
 
 const OVERLAY_SELECTOR =
   '.selection-box,.marquee-selection-box,[data-editor-overlay],#gg-smart-guides,#gg-measure-layer';
-/** 描画・テキスト・コメント・手のひら・トリミングの間は、クリックに別の意味がある */
-const BLOCKING_BODY_CLASSES = ['draw-mode', 'text-mode', 'comment-mode', 'move-mode', 'pan-mode', 'panning', 'gg-cropping'];
+/**
+ * 描画・テキスト・コメント・手のひら・トリミング・ズームの間は、クリックに別の意味がある
+ * (ズームツールの Alt + クリックは縮小)
+ */
+const BLOCKING_BODY_CLASSES = [
+  'draw-mode',
+  'text-mode',
+  'comment-mode',
+  'move-mode',
+  'pan-mode',
+  'panning',
+  'gg-cropping',
+  'zoom-tool',
+];
 
 const isMac = () => {
   if (typeof navigator === 'undefined') return false;
@@ -226,7 +246,7 @@ export interface LinkNavigationOptions {
 }
 
 /**
- * 紙面(iframe の文書)に ⌘ / Ctrl + クリックの移動を付ける。戻り値は後始末
+ * 紙面(iframe の文書)に Alt + クリックの移動を付ける。戻り値は後始末
  */
 export function attachLinkNavigation(iframeDoc: Document, options: LinkNavigationOptions): () => void {
   const win = iframeDoc.defaultView;
@@ -234,9 +254,9 @@ export function attachLinkNavigation(iframeDoc: Document, options: LinkNavigatio
   const hostDoc = frameEl?.ownerDocument ?? null;
   const hostWin = hostDoc?.defaultView ?? null;
   const mac = isMac();
-  const mod = mac ? '⌘ ' : 'Ctrl + ';
-  const navKey = (e: MouseEvent | KeyboardEvent) => (mac ? e.metaKey : e.ctrlKey || e.metaKey);
-  const isNavKeyName = (key: string) => key === 'Meta' || (!mac && key === 'Control');
+  const mod = mac ? '⌥ ' : 'Alt + ';
+  /** Alt だけ。⌘ / Ctrl / Shift と一緒なら選択の操作(最深要素・追加)なので移らない */
+  const navKey = (e: MouseEvent | KeyboardEvent) => e.altKey && !e.metaKey && !e.ctrlKey && !e.shiftKey;
 
   let pointer: { x: number; y: number } | null = null;
   let modifier = false;
@@ -330,7 +350,7 @@ export function attachLinkNavigation(iframeDoc: Document, options: LinkNavigatio
     if (hint) hint.hidden = true;
   };
 
-  /** ⌘ / Ctrl を押してリンクの上にいれば、指のカーソルと行き先の案内を出す */
+  /** Alt を押してリンクの上にいれば、指のカーソルと行き先の案内を出す */
   const update = (buttons = 0) => {
     if (!modifier || !pointer || buttons !== 0 || blocked()) {
       disarm();
@@ -378,16 +398,26 @@ export function attachLinkNavigation(iframeDoc: Document, options: LinkNavigatio
   };
   const onKey = (e: KeyboardEvent) => {
     if (e.key === 'Escape') cancel();
-    if (!isNavKeyName(e.key)) {
-      // ⌘ を離したことに気づけなかった(別のウィンドウで離した等)ときの戻し
-      if (modifier && !navKey(e)) {
-        modifier = false;
-        disarm();
+    if (e.key === 'Alt') {
+      // Alt の keydown で altKey が立たない実装があっても、押したことを優先する
+      modifier = e.type === 'keydown' ? !(e.metaKey || e.ctrlKey || e.shiftKey) : navKey(e);
+      update();
+      return;
+    }
+    if (e.key === 'Meta' || e.key === 'Control' || e.key === 'Shift') {
+      // Alt を押したまま ⌘ / Ctrl / Shift を足す(移らなくなる)・離す(移れるようになる)
+      const next = navKey(e);
+      if (next !== modifier) {
+        modifier = next;
+        update();
       }
       return;
     }
-    modifier = e.type === 'keydown' ? true : navKey(e);
-    update();
+    // Alt を離したことに気づけなかった(別のウィンドウで離した等)ときの戻し
+    if (modifier && !navKey(e)) {
+      modifier = false;
+      disarm();
+    }
   };
   const onBlur = () => {
     modifier = false;
@@ -397,7 +427,7 @@ export function attachLinkNavigation(iframeDoc: Document, options: LinkNavigatio
   const onMouseDown = (e: MouseEvent) => {
     // 2 回目の mousedown(ダブルクリック)・別のクリックが来たら、前の移動は取り消す
     cancel();
-    if (e.button !== 0 || !navKey(e) || e.shiftKey || e.altKey) return;
+    if (e.button !== 0 || !navKey(e)) return;
     if (e.detail > 1 || blocked()) return;
     // 選択枠のハンドル(リサイズ・回転)を押したのはハンドルの操作。下にリンクがあっても移らない
     if ((e.target as Element | null)?.closest?.('[data-handle]')) return;
@@ -408,14 +438,16 @@ export function attachLinkNavigation(iframeDoc: Document, options: LinkNavigatio
   const moved = (e: MouseEvent, p: { x: number; y: number }) =>
     Math.abs(e.clientX - p.x) > MARQUEE_DRAG_THRESHOLD || Math.abs(e.clientY - p.y) > MARQUEE_DRAG_THRESHOLD;
   const onMouseUp = (e: MouseEvent) => {
-    // ⌘ + ドラッグ(自由配置)だった
+    // Alt + ドラッグ(移動)だった
     if (pending && moved(e, pending)) pending = null;
   };
   const onClick = (e: MouseEvent) => {
+    // 移らないとき(ズームツール・トリミング中・⌘ と一緒など)も、リンクのダウンロードはさせない
+    if (e.altKey && (e.target as Element | null)?.closest?.('a[href]')) e.preventDefault();
     const p = pending;
     pending = null;
     if (!p || e.button !== 0 || e.detail > 1) return;
-    if (!navKey(e) || e.shiftKey || e.altKey || moved(e, p)) return;
+    if (!navKey(e) || moved(e, p)) return;
     timer = setTimeout(() => {
       timer = null;
       // 待っている間にテキスト編集に入った・紙面が差し替わった・モードが変わった

package/src/editor/utils/style-utils.ts

@@ -5,6 +5,7 @@
 import type { SelectedElementInfo, ImageFillMode } from '../types';
 import { getArtboardScale } from './dom-utils';
 import { extractValueFromTailwindClass } from './tailwind-utils';
+import { summarizeBorder, borderSideWidthCss } from './border-sides';
 
 /**
  * RGB/RGBA色をHEXに変換
@@ -525,7 +526,11 @@ export function extractElementInfo(
   const rawFontSize = extractRawStyleValue(element.style.fontSize, 'fontSize');
   const rawLineHeight = extractRawStyleValue(element.style.lineHeight, 'lineHeight');
   const rawLetterSpacing = extractRawStyleValue(element.style.letterSpacing, 'letterSpacing');
-  const rawBorderWidth = extractRawStyleValue(element.style.borderWidth, 'borderWidth');
+  // 片側だけの線(border-l-2 など)は、見えている辺の値を出す(utils/border-sides.ts)
+  const border = summarizeBorder(style, element);
+  const rawBorderWidth = border.sides
+    ? extractRawStyleValue(element.style.getPropertyValue(borderSideWidthCss(border.sides[0])), 'borderWidth')
+    : extractRawStyleValue(element.style.borderWidth, 'borderWidth');
   const rawGap = extractRawStyleValue(element.style.gap, 'gap');
   // Position values (left/top)
   const rawLeft = extractRawStyleValue(element.style.left, 'left');
@@ -573,9 +578,10 @@ export function extractElementInfo(
     imagePositionX: parseBackgroundPositionX(style.backgroundPosition),
     imagePositionY: parseBackgroundPositionY(style.backgroundPosition),
     imageScale: parseBackgroundScale(style.backgroundSize),
-    borderWidth: parseFloat(style.borderWidth) || 0,
-    borderColor: style.borderColor,
-    borderStyle: style.borderStyle,
+    borderWidth: border.width,
+    borderColor: border.color,
+    borderStyle: border.style,
+    borderSides: border.sides,
     borderRadius: parseFloat(style.borderRadius) || 0,
     borderRadiusTopLeft: parseFloat(style.borderTopLeftRadius) || 0,
     borderRadiusTopRight: parseFloat(style.borderTopRightRadius) || 0,

package/src/editor/utils/tailwind-mappings.ts

@@ -94,13 +94,8 @@ export const TAILWIND_CONFLICT_GROUPS: Record<string, string[]> = {
   borderTopRightRadius: ['rounded-tr-'],
   borderBottomRightRadius: ['rounded-br-'],
   borderBottomLeftRadius: ['rounded-bl-'],
-  borderWidth: ['border-'],
-  borderTopWidth: ['border-t-'],
-  borderRightWidth: ['border-r-'],
-  borderBottomWidth: ['border-b-'],
-  borderLeftWidth: ['border-l-'],
-  borderColor: ['border-'],
-  borderStyle: ['border-solid', 'border-dashed', 'border-dotted', 'border-none'],
+  // borderWidth / border*Width / borderColor / borderStyle は tailwind-utils の removeConflictingClasses が
+  // クラスの形で見分けて消す(接頭辞 border- では太さ・色・スタイルが区別できない)
 
   // Typography
   // 注意: fontSize と color は両方 text- プレフィックスを使用するが、