@growgroup/visual-editor 0.4.1 → 0.7.0

package/src/editor/components/multi-page/MultiPageCanvasView.tsx

@@ -52,6 +52,7 @@ import { CanvasRulers } from './CanvasRulers';
 import { CanvasFrameDecor } from './CanvasFrameDecor';
 import { cn } from '../../../lib/utils';
 import { ArrowUpRight } from 'lucide-react';
+import { CollabPageDots } from '../../collab/CollabPresence';
 
 /** フレーム名の高さ(px、画面上)。フレームの上端との間隔 */
 const LABEL_HEIGHT = 20;
@@ -168,6 +169,8 @@ const FrameChrome = memo(function FrameChrome({ page, showLabel, showLink, isSel
             <span className="ed-frame-label-index">{page.index + 1}</span>
             <span className="ed-frame-label-title">{page.title || page.id}</span>
             {page.isDirty && <span className="ed-frame-label-dirty" aria-label="未保存の変更" />}
+            {/* 共同編集: このページに居る参加者の色の点(io.collab が無ければ何も出ない) */}
+            <CollabPageDots contentId={page.id} />
             {isBusy && <span className="ed-frame-label-loading" aria-label="読み込み中" />}
           </button>
           {page.href && showLink && (
@@ -206,9 +209,9 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
   const canvas = useMultiPageCanvas();
   const {
     pages,
-    bounds,
     viewStore,
     registerContainer,
+    shiftView,
     activatePage,
     activatingPageId,
     zoomToFit,
@@ -216,7 +219,7 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
     zoomToActual,
     rulersVisible,
     isInteracting,
-    initialViewRestored,
+    applyInitialView,
     getPreviewImageZoomCap,
     previewImageCapVersion,
   } = canvas;
@@ -244,6 +247,38 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
     return () => registerContainer(null);
   }, [registerContainer]);
 
+  // 左のパネルを出し入れする(部品パネルに替わる・幅をドラッグする・利用側のレールが変わるも同じ)と、
+  // 容器の左端が動く。位置は容器の左上が基準なので、そのままでは紙面もパネルの幅だけ一緒に動く。
+  // 動いた分だけ逆にずらして、紙面を画面上の同じ位置に留める(Figma と同じ。見える範囲が狭くなるだけ)。
+  // 入口ごとには手当てせず、容器の位置の変化そのものを見る。左端は幅と一緒にしか動かないので ResizeObserver で拾える。
+  // 呼ばれるのはレイアウトの後・描画の前で、viewStore は購読者(転写層の transform)へ同期で書くので、ずれた姿は描かれない
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    let last: { left: number; top: number } | null = null;
+    const observer = new ResizeObserver(() => {
+      const rect = el.getBoundingClientRect();
+      if (last) shiftView(last.left - rect.left, last.top - rect.top);
+      last = { left: rect.left, top: rect.top };
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [shiftView]);
+
+  // 容器は overflow: hidden で、位置は transform が持つ。ところがフォーカスを移すと(部品パネルを閉じたときに
+  // エディタへ戻す iframe.focus() など)、ブラウザは要素を見せようとして容器そのものをスクロールし、
+  // 紙面がずれたまま戻らない(縮小した構成ラフで縦に 61px。直す前の版から)。容器のスクロールは常に 0 へ戻す
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const reset = () => {
+      if (el.scrollTop) el.scrollTop = 0;
+      if (el.scrollLeft) el.scrollLeft = 0;
+    };
+    el.addEventListener('scroll', reset);
+    return () => el.removeEventListener('scroll', reset);
+  }, []);
+
   // ---- 倍率・位置の反映(React を通さない)
   const [coarseZoom, setCoarseZoom] = useState(() => viewStore.get().canvasZoom);
   const coarseZoomRef = useRef(coarseZoom);
@@ -319,26 +354,13 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
     };
   }, [zoomToFit, zoomToActual, zoomToPage, activePageId]);
 
-  // 初回の表示: 前回の場所が保存されていて内容と重なるならそこへ。無ければ編集中のページを大きく
-  const initialViewDoneRef = useRef(false);
+  // 初回の表示: 容器の大きさとフレームの並びが揃ったところで 1 回(決め方は applyInitialView)
   useEffect(() => {
-    if (initialViewDoneRef.current || pages.length === 0) return;
+    if (pages.length === 0) return;
     const el = containerRef.current;
     if (!el || el.clientWidth === 0) return;
-    initialViewDoneRef.current = true;
-    if (initialViewRestored) {
-      const { canvasOffset: o, canvasZoom: z } = canvas.viewStore.get();
-      const left = o.x + bounds.minX * z;
-      const top = o.y + bounds.minY * z;
-      const right = o.x + bounds.maxX * z;
-      const bottom = o.y + bounds.maxY * z;
-      const intersects = right > 0 && left < el.clientWidth && bottom > 0 && top < el.clientHeight;
-      if (intersects) return;
-    }
-    if (activePageId) zoomToPage(activePageId);
-    else zoomToFit();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pages.length, activePageId]);
+    applyInitialView();
+  }, [pages.length, activePageId, applyInitialView]);
 
   const [hoverId, setHoverId] = useState<string | null>(null);
   const handleHover = useCallback((id: string | null) => {

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

@@ -21,6 +21,8 @@ import { generateElementId, updateSelectionBox } from '../../utils/dom-utils';
 import { alignElements, distributeElements, type AlignMode, type DistributeAxis } from '../../utils/align-elements';
 import { isEyeDropperSupported, pickScreenColor } from '../../utils/eyedropper';
 import { applyTextHighlight, applyTextColor } from '../../utils/text-highlight';
+import { INLINE_TEXT_PROPERTIES, MIXED, applyInlineTextStyle, getInlineTextRange, type InlineTextSummary } from '../../utils/inline-text-style';
+import { useInlineTextSelection } from '../../hooks/useInlineTextSelection';
 import { SHAPE_GROUPS, setPendingShape, pendingShape, shapeStyles, type ShapeDef } from '../../utils/shape-library';
 import { applyShadowPreset, paintTarget } from '../../utils/element-effects';
 import {
@@ -271,9 +273,21 @@ const PAINT_PROPS = new Set([
   'borderTopWidth', 'borderTopStyle', 'borderTopColor',
 ]);
 
+/** リボンが読む computed style の名前 → 選んだ文字の見た目(InlineTextSummary)の項目 */
+const INLINE_SUMMARY_KEYS: Record<string, keyof InlineTextSummary> = {
+  'font-size': 'fontSize',
+  'font-weight': 'fontWeight',
+  'font-style': 'fontStyle',
+  'text-decoration-line': 'textDecoration',
+  'letter-spacing': 'letterSpacing',
+  color: 'color',
+  'font-family': 'fontFamily',
+};
+
 function useSelectionStyle() {
   const { getIframeDoc, selectedElement, selectedElementIds, notifyIframeChange } =
     useEditorContext();
+  const inlineText = useInlineTextSelection();
 
   const targets = useCallback((): HTMLElement[] => {
     const doc = getIframeDoc();
@@ -292,6 +306,18 @@ function useSelectionStyle() {
     (styles: Record<string, string>) => {
       const els = targets();
       if (!els.length) return;
+      // テキストの一部を選んでいれば、文字の属性はその範囲だけに当てる(右パネルと同じ)
+      const doc = getIframeDoc();
+      const id = els.length === 1 ? els[0].getAttribute('data-element-id') : null;
+      const partial =
+        doc && id && Object.keys(styles).every((k) => INLINE_TEXT_PROPERTIES.has(k))
+          ? getInlineTextRange(doc, id)
+          : null;
+      if (partial) {
+        applyInlineTextStyle(partial, styles);
+        notifyIframeChange();
+        return;
+      }
       for (const el of els) {
         for (const [k, v] of Object.entries(styles)) {
           // 効果用の枠が選択されている場合、塗り・枠線・切り抜きは中身の図形へ、
@@ -302,19 +328,27 @@ function useSelectionStyle() {
       }
       notifyIframeChange();
     },
-    [targets, notifyIframeChange],
+    [targets, notifyIframeChange, getIframeDoc],
   );
 
   const readComputed = useCallback(
     (prop: string): string => {
       const els = targets();
       if (!els.length) return '';
+      const key = INLINE_SUMMARY_KEYS[prop];
+      if (
+        key && inlineText && els.length === 1 &&
+        inlineText.hostId === els[0].getAttribute('data-element-id') &&
+        inlineText[key] !== MIXED
+      ) {
+        return inlineText[key];
+      }
       const camel = prop.replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());
       const el = PAINT_PROPS.has(camel) ? paintTarget(els[0]) : els[0];
       const win = el.ownerDocument.defaultView;
       return win ? win.getComputedStyle(el).getPropertyValue(prop) : '';
     },
-    [targets],
+    [targets, inlineText],
   );
 
   /** 属性の付け外し(アニメーション data-anim 等)。null で除去 */
@@ -1164,10 +1198,18 @@ export function PptRibbon({
     (color: string) => {
       const doc = getIframeDoc();
       if (!doc) return;
-      if (applyTextColor(doc, targets(), color)) notifyIframeChange();
+      // テキストの一部を選んでいれば、大きさ・太字と同じ経路(apply)で当てる。
+      // 色の入力は選んでいる間ずっと change が来るので、毎回 span を足さずに同じ span へ当て、履歴も 1 段にまとめる
+      const els = targets();
+      const id = els.length === 1 ? els[0].getAttribute('data-element-id') : null;
+      if (id && getInlineTextRange(doc, id)) {
+        apply({ color });
+        return;
+      }
+      if (applyTextColor(doc, els, color)) notifyIframeChange();
       setRev((n) => n + 1);
     },
-    [getIframeDoc, targets, notifyIframeChange],
+    [getIframeDoc, targets, notifyIframeChange, apply],
   );
   // 実機同様、選択が無くなったらコンテキストタブを閉じる
   useEffect(() => {

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

@@ -23,6 +23,7 @@ import { useDeck, applyDeck } from '../../../components/viewer/useDeck';
 import { commentAction, type SlideComment } from '../../../lib/deck';
 import { can, io, type CommentRect, type EditorDeck } from '../../../io';
 import { useResizablePanel } from '../../hooks/useResizablePanel';
+import { readStorage, writeStorage } from '../../utils/storage';
 import { ConfirmDialog } from '../shell/ConfirmDialog';
 import { PPT_PALETTES, type PptTheme } from './PptChrome';
 
@@ -155,18 +156,12 @@ export function findAnchored(root: HTMLElement, value: string, label?: string):
 }
 
 export function loadAuthor(): string {
-  try {
-    return localStorage.getItem(AUTHOR_KEY) || '';
-  } catch {
-    return '';
-  }
+  return readStorage(AUTHOR_KEY) || '';
 }
 
 /** 名前を記憶する。右パネルとコメントボードで同じ置き場を使う */
 export function storeAuthor(value: string): void {
-  try {
-    localStorage.setItem(AUTHOR_KEY, value);
-  } catch { /* 記憶できなくても続行 */ }
+  writeStorage(AUTHOR_KEY, value);
 }
 
 /** 未解決コメント数(サムネイルのバッジ用) */

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

@@ -45,6 +45,15 @@ interface VariableAwareSizeInputProps {
   dimension?: 'width' | 'height';
   /** 単位変換コンテキスト */
   conversionContext?: UnitConversionContext;
+  /** 欄の名前(data-size-field)。省略時は dimension から w / h */
+  fieldId?: string;
+  /**
+   * 'size' … W / H(固定・Fill・Hug を切り替える)
+   * 'limit' … 最小・最大の幅と高さ。空にできる(空 = 指定なし)。モードの切替とメニューの矢印は出さない
+   */
+  variant?: 'size' | 'limit';
+  /** 値が空のときに出す文字(variant="limit") */
+  placeholder?: string;
 }
 
 export function VariableAwareSizeInput({
@@ -60,6 +69,9 @@ export function VariableAwareSizeInput({
   canHug = false,
   dimension = 'width',
   conversionContext,
+  fieldId,
+  variant = 'size',
+  placeholder,
 }: VariableAwareSizeInputProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
@@ -94,6 +106,9 @@ export function VariableAwareSizeInput({
     return variables.find(v => v.cssName === varName);
   }, [isLinked, value, variables]);
 
+  // 最小・最大の欄で指定が無い
+  const isEmpty = variant === 'limit' && (value === '' || value === undefined || value === null);
+
   // 値と単位をパース
   const parsed = useMemo(() => {
     if (isLinked) {
@@ -135,11 +150,12 @@ export function VariableAwareSizeInput({
 
   // 表示値
   const displayValue = useMemo(() => {
+    if (isEmpty) return '';
     if (isLinked && linkedVariable) {
       return linkedVariable.name;
     }
     return parsed.numericValue;
-  }, [isLinked, linkedVariable, parsed]);
+  }, [isEmpty, isLinked, linkedVariable, parsed]);
 
   // 変数を選択
   const handleSelectVariable = useCallback((variable: CSSVariableDefinition) => {
@@ -155,9 +171,9 @@ export function VariableAwareSizeInput({
     if (linkedVariable) {
       onChangeValue(linkedVariable.value);
     } else {
-      onChangeValue('auto');
+      onChangeValue(variant === 'limit' ? '' : 'auto');
     }
-  }, [linkedVariable, onChangeValue]);
+  }, [linkedVariable, onChangeValue, variant]);
 
   // モード変更
   const handleModeChange = useCallback((newMode: SizeMode) => {
@@ -170,6 +186,12 @@ export function VariableAwareSizeInput({
     const newValue = e.target.value;
     setLocalValue(newValue);
 
+    // 最小・最大の欄は、空にすると指定を消す
+    if (variant === 'limit' && newValue.trim() === '') {
+      onChangeValue('');
+      return;
+    }
+
     const num = parseFloat(newValue);
     if (!isNaN(num)) {
       let clampedValue = num;
@@ -177,11 +199,16 @@ export function VariableAwareSizeInput({
       if (max !== undefined) clampedValue = Math.min(max, clampedValue);
       onChangeValue(formatValueWithUnit(clampedValue, currentUnit));
     }
-  }, [onChangeValue, min, max, currentUnit]);
+  }, [onChangeValue, min, max, currentUnit, variant]);
 
   // 単位変更（値を変換）
   const handleUnitChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
     const newUnit = e.target.value;
+    // 指定が無いときは単位だけ覚える(0 を書き込まない)
+    if (isEmpty) {
+      setTrackedUnit(newUnit);
+      return;
+    }
     const context: UnitConversionContext = {
       ...conversionContext,
       property: dimension === 'height' ? 'height' : 'width',
@@ -190,14 +217,14 @@ export function VariableAwareSizeInput({
     // 新しい単位を追跡
     setTrackedUnit(newUnit);
     onChangeValue(formatValueWithUnit(convertedValue, newUnit));
-  }, [onChangeValue, parsed.numericValue, currentUnit, conversionContext, dimension]);
+  }, [onChangeValue, parsed.numericValue, currentUnit, conversionContext, dimension, isEmpty]);
 
   // 入力のフォーカス時
   const handleInputFocus = useCallback(() => {
-    if (!isLinked) {
-      setLocalValue(String(Math.round(parsed.numericValue)));
-    }
-  }, [isLinked, parsed.numericValue]);
+    if (isLinked || isEmpty) return;
+    // W / H は整数で打つ前提で丸める。最小・最大は入っている値をそのまま出す
+    setLocalValue(String(variant === 'limit' ? parsed.numericValue : Math.round(parsed.numericValue)));
+  }, [isLinked, isEmpty, variant, parsed.numericValue]);
 
   // 現在の値から変数を作成
   const handleCreateVariable = useCallback(() => {
@@ -291,24 +318,36 @@ export function VariableAwareSizeInput({
     [disabled, isLinked, mode, parsed, min, max, currentUnit, onChangeValue]
   );
 
+  // 単位の欄が付くのは固定値で変数に紐づいていないときだけ
+  const hasUnit = mode === 'fixed' && !isLinked;
+
   return (
-    <div className="flex items-center gap-0.5 group/size-input">
+    // [.group] 外の group はパネルの共通の入力の見た目(高さ 32px・左右 8px の余白の塗り)を中に当てないための印。
+    // 中の数値と単位は枠を持たず、箱(下の .group.h-5)が 1 つの入力として見える
+    <div
+      className="group flex items-center gap-1 min-w-0"
+      data-size-field={fieldId ?? (dimension === 'height' ? 'h' : 'w')}
+    >
       {/* Label area (W/H) */}
       {label && <div className="shrink-0">{label}</div>}
 
       <Popover open={isOpen} onOpenChange={setIsOpen}>
         <PopoverTrigger asChild>
+          {/* [幅] 以前は固定値の箱を w-14(56px)に決め打ちし、その外に単位(40px)を置いていたため、
+              数値に使える幅が 26px しか残らず「1499」「1820」が切れていた。
+              箱はモードによらず列の残りをすべて使い、数値・単位・モード切替をこの中に並べる */}
           <div
+            data-size-box
             className={cn(
-              "flex items-center h-5 bg-[#383838] border border-[#4a4a4a] rounded-l cursor-pointer",
+              "group flex flex-1 min-w-0 items-center h-5 bg-[#383838] border border-[#4a4a4a] rounded cursor-pointer",
               "hover:border-[#5d5d5d]",
+              variant === 'limit' && "pr-1",
               disabled && "opacity-50 cursor-not-allowed",
-              isOpen && "ring-1 ring-[#0d99ff] border-[#0d99ff]",
-              mode === 'fixed' ? 'w-14' : 'flex-1'
+              isOpen && "ring-1 ring-[#0d99ff] border-[#0d99ff]"
             )}
           >
             {/* コンテンツ */}
-            <div className="flex-1 min-w-0 h-full flex items-center px-1.5">
+            <div className="flex-1 min-w-0 h-full flex items-center pl-1.5">
               {mode === 'fixed' ? (
                 isLinked ? (
                   <div className="flex items-center gap-0.5 flex-1 min-w-0">
@@ -335,13 +374,16 @@ export function VariableAwareSizeInput({
                     ref={inputRef}
                     type="number"
                     value={localValue || displayValue}
+                    placeholder={placeholder}
                     onChange={handleInputChange}
                     onFocus={handleInputFocus}
+                    // 打ちかけの文字は外れたら捨てる(次に選んだ要素の値の上に残さない)
+                    onBlur={() => setLocalValue('')}
                     onMouseDown={handleMouseDown}
                     onClick={(e) => e.stopPropagation()}
                     disabled={disabled}
                     className={cn(
-                      "w-full bg-transparent border-none outline-none text-gray-200 text-[10px]",
+                      "w-full min-w-0 p-0 bg-transparent border-none outline-none text-gray-200 text-[10px] tabular-nums",
                       "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
                       isDragging ? "cursor-ew-resize" : "cursor-ew-resize"
                     )}
@@ -358,14 +400,40 @@ export function VariableAwareSizeInput({
               )}
             </div>
 
-            {/* ドロップダウンアイコン */}
-            <button
-              type="button"
-              className="h-full px-0.5 flex items-center justify-center text-gray-500 hover:text-white transition-colors"
-              disabled={disabled}
-            >
-              <ChevronDown className="h-2.5 w-2.5" />
-            </button>
+            {/* 単位セレクター（fixed モードで変数リンクがない場合のみ）。
+                箱の中にあるので、押してもモード切替のメニューは開かない */}
+            {hasUnit && (
+              <select
+                value={currentUnit}
+                onChange={handleUnitChange}
+                onClick={(e) => e.stopPropagation()}
+                onMouseDown={(e) => e.stopPropagation()}
+                onPointerDown={(e) => e.stopPropagation()}
+                disabled={disabled}
+                title="単位"
+                data-size-unit
+                className={cn(
+                  "h-full shrink-0 px-0.5 appearance-none bg-transparent border-none outline-none",
+                  "text-[9px] text-gray-400 hover:text-white cursor-pointer",
+                  "disabled:text-gray-500"
+                )}
+              >
+                {unitList.map((u) => (
+                  <option key={u} value={u}>{u}</option>
+                ))}
+              </select>
+            )}
+
+            {/* ドロップダウンアイコン(最小・最大の欄は幅を数値に回すので出さない。箱を押せばメニューは開く) */}
+            {variant === 'size' && (
+              <button
+                type="button"
+                className="h-full w-4 shrink-0 flex items-center justify-center text-gray-500 hover:text-white transition-colors"
+                disabled={disabled}
+              >
+                <ChevronDown className="h-2.5 w-2.5" />
+              </button>
+            )}
           </div>
         </PopoverTrigger>
 
@@ -391,7 +459,8 @@ export function VariableAwareSizeInput({
           </div>
 
           <ScrollArea className="max-h-56">
-            {/* リサイズモード */}
+            {/* リサイズモード(最小・最大の欄では出さない) */}
+            {variant === 'size' && (
             <div className="p-1 border-b border-[#444444]">
               <div className="px-2 py-0.5 text-[9px] text-gray-500 uppercase">
                 リサイズ
@@ -452,6 +521,7 @@ export function VariableAwareSizeInput({
                 {mode === 'hug' && <span>✓</span>}
               </button>
             </div>
+            )}
 
             {/* スペーシング変数 */}
             <div className="p-1">
@@ -557,32 +627,6 @@ export function VariableAwareSizeInput({
         </PopoverContent>
       </Popover>
 
-      {/* 単位セレクター（fixed モードで変数リンクがない場合のみ） */}
-      {mode === 'fixed' && !isLinked && (
-        <select
-          value={currentUnit}
-          onChange={handleUnitChange}
-          disabled={disabled}
-          className={cn(
-            "h-5 w-10 px-0 text-[8px] border border-l-0 rounded-r border-[#4a4a4a]",
-            "bg-[#4a4a4a] text-gray-300 focus:outline-none focus:border-[#0d99ff]",
-            "disabled:bg-[#383838] disabled:text-gray-500 cursor-pointer"
-          )}
-        >
-          {unitList.map((u) => (
-            <option key={u} value={u}>{u}</option>
-          ))}
-        </select>
-      )}
-
-      {/* fill/hug モードまたはリンク時は角丸を調整 */}
-      {(mode !== 'fixed' || isLinked) && (
-        <style>{`
-          :global(.group\\/size-input > div:first-of-type > div:first-child) {
-            border-radius: 0.25rem !important;
-          }
-        `}</style>
-      )}
     </div>
   );
 }

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

@@ -58,6 +58,8 @@ export interface VariableAwareUnitInputProps {
   hideVariableLink?: boolean;
   /** 単位変換コンテキスト */
   conversionContext?: UnitConversionContext;
+  /** 選んだ文字の中で値が揃っていない。欄を空にして「混在」と出し、打ったときだけ値を返す */
+  mixed?: boolean;
 }
 
 // ============================================
@@ -80,6 +82,7 @@ export function VariableAwareUnitInput({
   enableScrubbing = true,
   hideVariableLink = false,
   conversionContext,
+  mixed = false,
 }: VariableAwareUnitInputProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const [isOpen, setIsOpen] = useState(false);
@@ -165,6 +168,8 @@ export function VariableAwareUnitInput({
       const inputValue = e.target.value;
 
       if (inputValue === "" || inputValue === "-") {
+        // 混在のまま消しただけなら何も当てない(0 にしない)
+        if (mixed) return;
         onChange(formatValueWithUnit(0, currentUnit));
         return;
       }
@@ -178,7 +183,7 @@ export function VariableAwareUnitInput({
 
       onChange(formatValueWithUnit(clampedValue, currentUnit));
     },
-    [onChange, currentUnit, min, max]
+    [onChange, currentUnit, min, max, mixed]
   );
 
   // 単位変更ハンドラ（値を変換）
@@ -272,7 +277,7 @@ export function VariableAwareUnitInput({
   // 改善: クリックでフォーカスを許可し、ドラッグ閾値を超えた場合のみスクラブを開始
   const handleMouseDown = useCallback(
     (e: React.MouseEvent<HTMLInputElement>) => {
-      if (!enableScrubbing || disabled || isLinked) return;
+      if (!enableScrubbing || disabled || isLinked || mixed) return;
       if (e.button !== 0) return;
       // 既にフォーカスされている場合は通常の入力を許可
       if (document.activeElement === inputRef.current) return;
@@ -325,13 +330,13 @@ export function VariableAwareUnitInput({
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
     },
-    [enableScrubbing, disabled, isLinked, parsed, step, min, max, currentUnit, onChange]
+    [enableScrubbing, disabled, isLinked, parsed, step, min, max, currentUnit, onChange, mixed]
   );
 
   // キーボード操作
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (disabled || isLinked) return;
+      if (disabled || isLinked || mixed) return;
 
       const multiplier = e.shiftKey ? 10 : 1;
       let newValue = parsed.numericValue;
@@ -351,7 +356,7 @@ export function VariableAwareUnitInput({
 
       onChange(formatValueWithUnit(newValue, currentUnit));
     },
-    [disabled, isLinked, parsed, step, min, max, currentUnit, onChange]
+    [disabled, isLinked, parsed, step, min, max, currentUnit, onChange, mixed]
   );
 
   const inputWidth = compact ? "w-10" : "w-12";
@@ -493,7 +498,8 @@ export function VariableAwareUnitInput({
         <input
           ref={inputRef}
           type={isLinked ? "text" : "number"}
-          value={isLinked ? (linkedVariable?.name ?? extractVariableName(String(value)) ?? "") : parsed.numericValue}
+          value={isLinked ? (linkedVariable?.name ?? extractVariableName(String(value)) ?? "") : mixed ? "" : parsed.numericValue}
+          placeholder={mixed && !isLinked ? "混在" : undefined}
           onChange={handleNumberChange}
           onMouseDown={handleMouseDown}
           onKeyDown={handleKeyDown}

package/src/editor/components/shell/EditorTopBar.tsx

@@ -27,6 +27,8 @@ import { useEditorContext } from '../../EditorContext';
 import { getCleanHtml } from '../../utils/html-utils';
 import { startExport, waitForExport, downloadExport, type ExportFormat } from '../../../lib/export';
 import { can } from '../../../io';
+import { CollabPresence, CollabStatusPill } from '../../collab/CollabPresence';
+import { useCollabSelector, selectCollabPageActive, flushCollab } from '../../collab/store';
 
 export type EditorSaveStatus = 'saved' | 'dirty' | 'saving' | 'error';
 
@@ -108,6 +110,7 @@ export function EditorTopBar({
   const pal = palette ?? FIGMA_PALETTE;
   const share = SHARE_COLOR[variant];
   const { getIframeDoc, html, saving, hasChanges } = useEditorContext();
+  const collabPageActive = useCollabSelector(selectCollabPageActive);
   const [exporting, setExporting] = useState<string | null>(null);
 
   /**
@@ -116,6 +119,13 @@ export function EditorTopBar({
    */
   const handleSave = async () => {
     try {
+      // 共同編集でそのページの部屋に入っている間は、ファイルへ書くのは書き戻し役。
+      // ここでは「まだ送っていない変更を今すぐ送る」だけにして、二重に書かせない
+      if (collabPageActive) {
+        flushCollab();
+        toast.success('同期済み', { description: '共同編集中の変更は、書き戻し役がファイルへ保存します' });
+        return;
+      }
       const doc = getIframeDoc();
       // 保存してもエディタは閉じない。保存は作業の中断ではない
       await onSave(doc ? getCleanHtml(doc) : html);
@@ -216,7 +226,9 @@ export function EditorTopBar({
       {/* 右: UI固有の操作 / 自動保存 / 保存 / プレビュー / 共有 / …/ 閉じる */}
       <div className="flex shrink-0 items-center gap-1.5">
         {rightExtra}
-        <SaveStatusPill variant={variant} status={saveStatus} pal={pal} />
+        <CollabPresence />
+        {/* 共同編集でページの部屋に入っている間は、保存の状態の代わりに接続状態を出す(ファイルに書くのは書き戻し役) */}
+        {collabPageActive ? <CollabStatusPill /> : <SaveStatusPill variant={variant} status={saveStatus} pal={pal} />}
         <button
           data-topbar="save"
           onClick={() => void handleSave()}

package/src/editor/components/shell/PagesPanel.tsx

@@ -17,6 +17,7 @@ import { useDeck } from '../../../components/viewer/useDeck';
 import { DeckSlideRender } from '../../../components/DeckSlideRender';
 import { flushAutoSave } from '../../autosave';
 import { useMultiPageCanvasOptional } from '../../contexts/MultiPageCanvasContext';
+import { CollabPageDots } from '../../collab/CollabPresence';
 
 /**
  * スライド描画はメモ化する。パネル幅の変更や他ページの選択で親が再レンダーしても、
@@ -120,6 +121,8 @@ export function PagesPanel({ page, height = '33vh' }: { page: number; height?: s
               )}
             </span>
             <span className="min-w-0 flex-1 self-center text-xs leading-relaxed">{s.title || "無題"}</span>
+            {/* 共同編集: このページに居る参加者の色の点(io.collab が無ければ何も出ない) */}
+            <span className="self-center"><CollabPageDots contentId={canvas?.pages[i]?.id ?? String(n)} /></span>
           </button>
         );
       })}