@growgroup/visual-editor 0.6.0 → 0.7.0

package/src/editor/components/EditorPropertyPanel.tsx

@@ -67,7 +67,8 @@ import {
 import { Checkbox } from "../../components/ui/checkbox";
 import { buildFilterString, buildTransformString } from "../utils/style-utils";
 import { useEditorContext } from "../EditorContext";
-import { useElementActions, useEditorColors } from "../hooks";
+import { useElementActions, useEditorColors, useInlineTextSelection } from "../hooks";
+import { MIXED } from "../utils/inline-text-style";
 import { FONT_WEIGHTS } from "../constants";
 import type { PanelSections, SelectedElementInfo } from "../types";
 import {
@@ -104,6 +105,8 @@ import {
   pxValue,
   MIN_ELEMENT_SIZE,
 } from "../utils/geometry";
+import { setElementAbsolute, setElementAuto, keepsInlineGeometry } from "../utils/free-layout";
+import { extractElementInfo } from "../utils/style-utils";
 import { convertInlineStylesToTailwind } from "../utils/tailwind-utils";
 import {
   isAspectRatioLocked,
@@ -418,6 +421,21 @@ const isPlainPxValue = (raw: string | number | undefined | null): boolean => {
   return /^-?\d+(\.\d+)?px$/.test(raw.trim());
 };
 
+/** サイズ欄の最小・最大。raw は SelectedElementInfo の読み戻し先 */
+// 2 列の格子に行優先で並べるので、左の列(W の下)が幅、右の列(H の下)が高さになる順にする
+const SIZE_LIMIT_FIELDS = [
+  { id: "min-w", prop: "minWidth", raw: "rawMinWidth", label: "最小", title: "最小幅(min-width)", dimension: "width" },
+  { id: "min-h", prop: "minHeight", raw: "rawMinHeight", label: "最小", title: "最小の高さ(min-height)", dimension: "height" },
+  { id: "max-w", prop: "maxWidth", raw: "rawMaxWidth", label: "最大", title: "最大幅(max-width)", dimension: "width" },
+  { id: "max-h", prop: "maxHeight", raw: "rawMaxHeight", label: "最大", title: "最大の高さ(max-height)", dimension: "height" },
+] as const;
+
+/**
+ * サイズ欄のラベルの列(W / H / 最小 / 最大)。幅をそろえて、どの行も箱の左端と右端が縦に並ぶようにする。
+ * 幅は「最小」の 2 文字(パネルでは 12px)が収まる 24px
+ */
+const SIZE_LABEL_CLASS = "text-[10px] text-gray-500 w-6 block whitespace-nowrap";
+
 /**
  * 表示値の決定
  * raw が var(--x) / % / vw など「px 以外の指定」なら、実測 px で上書きせず raw をそのまま返す。
@@ -463,7 +481,7 @@ function translateGroup(doc: Document, ids: string[], dx: number, dy: number): b
     if (dy !== 0) {
       el.style.top = pxValue((parseFloat(cs?.top ?? "") || 0) + dy);
     }
-    convertInlineStylesToTailwind(el, ["left", "top"]);
+    if (!keepsInlineGeometry(el)) convertInlineStylesToTailwind(el, ["left", "top"]);
     changed = true;
   });
 
@@ -517,7 +535,7 @@ function scaleGroup(
       el.style.height = `${newHeight}px`;
     }
 
-    convertInlineStylesToTailwind(el, ["left", "top", "width", "height"]);
+    if (!keepsInlineGeometry(el)) convertInlineStylesToTailwind(el, ["left", "top", "width", "height"]);
     changed = true;
   });
 
@@ -821,6 +839,7 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
   } = useEditorContext();
   const {
     updateElementStyle,
+    updateTextStyle,
     updateLinkAttribute,
     updateElementAttribute,
     deleteElement,
@@ -828,6 +847,14 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
     alignElements,
   } = useElementActions();
   const { colors: editorColors } = useEditorColors();
+  // テキストの一部を選んでいるとき、文字の欄(書体・太さ・大きさ・字間・色・斜体・下線)は
+  // その範囲の値を出し、変えるとその範囲だけに当てる(updateTextStyle)。揃っていなければ「混在」
+  const inlineText = useInlineTextSelection();
+  const partialText =
+    inlineText && selectedElement && inlineText.hostId === selectedElement.id ? inlineText : null;
+  const textFontWeight = partialText ? partialText.fontWeight : selectedElement?.fontWeight;
+  const textFontStyle = partialText ? partialText.fontStyle : selectedElement?.fontStyle;
+  const textDecorationLine = partialText ? partialText.textDecoration : selectedElement?.textDecoration;
 
   // Component instance management
   const {
@@ -860,6 +887,30 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
     const slot = root === el ? null : (el.closest("[data-slot]") as HTMLElement | null);
     return { root, isRoot: root === el, slotName: slot && root.contains(slot) && slot !== root ? slot.getAttribute("data-slot") : null };
   }, [selectedElement, getIframeDoc]);
+  /**
+   * 配置の切替(Figma の「絶対位置」トグル)。webpage だけに出す。
+   *
+   * slide は開いた時点で全部が絶対配置なので、このトグルには意味がない。
+   * webpage は流し込みが既定で、ここが「この要素だけ流れから外す」入口になる。
+   */
+  const setPositionMode = useCallback(
+    (mode: "auto" | "absolute") => {
+      const doc = getIframeDoc();
+      const el = selectedElement?.id
+        ? doc?.querySelector<HTMLElement>(`[data-element-id="${selectedElement.id}"]`)
+        : null;
+      if (!doc || !el) return;
+      const changed = mode === "absolute" ? setElementAbsolute(el, doc) : setElementAuto(el, doc);
+      if (!changed) return;
+      notifyIframeChange();
+      // 枠とパネルの数値をその場で追従させる(X/Y が使えるようになった/なくなったの反映)
+      refreshSelectionOverlay(doc);
+      const info = extractElementInfo(el, doc);
+      if (info) setSelectedElement(info);
+    },
+    [getIframeDoc, selectedElement?.id, notifyIframeChange, setSelectedElement],
+  );
+
   const selectedPart = useMemo(() => (selectedPartRoot ? partInfoOf(selectedPartRoot.root) : null), [selectedPartRoot]);
   const selectedPartLabel = useMemo(() => {
     if (!selectedPart) return "";
@@ -943,8 +994,18 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
     storageKey: 'editor-property-panel-width',
   });
 
+  // サイズ欄の「最小・最大」を開いているか(値が入っている要素では常に出す。これは空の要素で開いたとき)。
+  // 別の要素を選んだら閉じる
+  const [sizeLimitsOpen, setSizeLimitsOpen] = useState(false);
+  useEffect(() => {
+    setSizeLimitsOpen(false);
+  }, [selectedElement?.id]);
+
   const [openSections, setOpenSections] = useState<PanelSections>({
-    position: editorMode !== "webpage", // 流し込みのページでは詳細操作として畳む
+    // 以前は流し込みのページで畳んでいた(X/Y が効かず詳細操作だったため)。
+    // 自由配置の「配置: 自動 / 絶対」トグルがこの中に入り、流し込みを抜ける
+    // 入口になったので、webpage でも開いておく(畳んだままだと見つけられない)
+    position: true,
     layout: true, // レイアウトセクション
     appearance: true, // 外見セクション
     image: false, // 塗りに統合されたため非表示
@@ -1387,7 +1448,11 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
 
               {/* 位置 X/Y
                   LiveGeom で包むことで、ここだけがドラッグ中のフレーム更新を受ける。
-                  raw が var()/% 等の場合は実測 px で上書きしない（liveOrRaw 参照）。 */}
+                  raw が var()/% 等の場合は実測 px で上書きしない（liveOrRaw 参照）。
+
+                  webpage では上に「配置: 自動 / 絶対」を出す。流し込みの要素に
+                  left/top を書いても見た目は動かないので、絶対でないときは
+                  X/Y を触れなくして「効かない入力」を無くす。 */}
               <div>
                 <Label className="text-[10px] text-gray-500 mb-1 block">
                   位置
@@ -1397,39 +1462,77 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
                     const live = geometry?.members.find(
                       (m) => m.id === selectedElement.id,
                     );
+                    // 流し込みの要素かどうかは computed position が正。
+                    // 計測がまだなら従来どおり編集できる状態にしておく
+                    const isAbsolute = live ? live.canMove : true;
+                    const lockedHint =
+                      "絶対配置ではないため、X / Y を直接指定できません（上の「配置」を絶対にすると指定できます）";
                     return (
-                      <div className="grid grid-cols-2 gap-2">
-                        <VariableAwareUnitInput
-                          value={liveOrRaw(
-                            selectedElement.rawLeft,
-                            live?.styleLeft,
-                            selectedElement.x,
-                          )}
-                          onChange={(val) => updateElementStyle({ left: val })}
-                          units={POSITION_UNITS}
-                          defaultUnit="px"
-                          category="spacing"
-                          label="X"
-                          compact
-                          hideVariableLink
-                          conversionContext={conversionContext}
-                        />
-                        <VariableAwareUnitInput
-                          value={liveOrRaw(
-                            selectedElement.rawTop,
-                            live?.styleTop,
-                            selectedElement.y,
-                          )}
-                          onChange={(val) => updateElementStyle({ top: val })}
-                          units={POSITION_UNITS}
-                          defaultUnit="px"
-                          category="spacing"
-                          label="Y"
-                          compact
-                          hideVariableLink
-                          conversionContext={conversionContext}
-                        />
-                      </div>
+                      <>
+                        {editorMode === "webpage" && (
+                          <div
+                            className="mb-2 flex items-center gap-2"
+                            data-gg-position-mode={isAbsolute ? "absolute" : "auto"}
+                          >
+                            <span className="text-[10px] text-gray-500 shrink-0">配置</span>
+                            <div className="flex rounded overflow-hidden border border-[#4a4a4a]">
+                              <button
+                                type="button"
+                                onClick={() => setPositionMode("auto")}
+                                className={`px-2 h-6 text-[10px] ${!isAbsolute ? "bg-[#0d99ff] text-white" : "bg-[#383838] text-gray-400 hover:bg-[#4a4a4a]"}`}
+                                title="流し込み（親の並びに従う）"
+                              >
+                                自動
+                              </button>
+                              <button
+                                type="button"
+                                onClick={() => setPositionMode("absolute")}
+                                className={`px-2 h-6 text-[10px] ${isAbsolute ? "bg-[#0d99ff] text-white" : "bg-[#383838] text-gray-400 hover:bg-[#4a4a4a]"}`}
+                                title="絶対配置（今の位置のまま流れから外し、X / Y で動かせるようにする）"
+                              >
+                                絶対
+                              </button>
+                            </div>
+                          </div>
+                        )}
+                        <div
+                          className="grid grid-cols-2 gap-2"
+                          title={editorMode === "webpage" && !isAbsolute ? lockedHint : undefined}
+                        >
+                          <VariableAwareUnitInput
+                            value={liveOrRaw(
+                              selectedElement.rawLeft,
+                              live?.styleLeft,
+                              selectedElement.x,
+                            )}
+                            onChange={(val) => updateElementStyle({ left: val })}
+                            units={POSITION_UNITS}
+                            defaultUnit="px"
+                            category="spacing"
+                            label="X"
+                            compact
+                            hideVariableLink
+                            conversionContext={conversionContext}
+                            disabled={editorMode === "webpage" && !isAbsolute}
+                          />
+                          <VariableAwareUnitInput
+                            value={liveOrRaw(
+                              selectedElement.rawTop,
+                              live?.styleTop,
+                              selectedElement.y,
+                            )}
+                            onChange={(val) => updateElementStyle({ top: val })}
+                            units={POSITION_UNITS}
+                            defaultUnit="px"
+                            category="spacing"
+                            label="Y"
+                            compact
+                            hideVariableLink
+                            conversionContext={conversionContext}
+                            disabled={editorMode === "webpage" && !isAbsolute}
+                          />
+                        </div>
+                      </>
                     );
                   }}
                 </LiveGeom>
@@ -1526,7 +1629,7 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
               />
 
               {/* サイズ W/H */}
-              <div>
+              <div className="relative" data-size-section>
                 <Label className="text-[10px] text-gray-500 mb-1 block">
                   サイズ
                 </Label>
@@ -1612,11 +1715,7 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
                         });
                       }
                     }}
-                    label={
-                      <span className="text-[10px] text-gray-500 w-3 text-center block">
-                        W
-                      </span>
-                    }
+                    label={<span className={SIZE_LABEL_CLASS}>W</span>}
                     dimension="width"
                     canFill={isParentFlexContainer}
                     canHug={true}
@@ -1706,11 +1805,7 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
                         });
                       }
                     }}
-                    label={
-                      <span className="text-[10px] text-gray-500 w-3 text-center block">
-                        H
-                      </span>
-                    }
+                    label={<span className={SIZE_LABEL_CLASS}>H</span>}
                     dimension="height"
                     canFill={isParentFlexContainer}
                     canHug={true}
@@ -1722,6 +1817,58 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
                   </LiveGeom>
                 </div>
               </div>
+
+              {/* 最小・最大の幅と高さ(min-width / max-width / min-height / max-height)。
+                  既定では隠し、「+ 最小・最大」で出す。値が入っている要素では最初から出す。
+                  適用は W / H と同じ updateElementStyle(複数選択なら全要素に同じ値)。空にすると指定を消す */}
+              {(() => {
+                // 最小の 0(Tailwind の min-w-0。構成ラフに多い)は「制約なし」と見分けがつかないので、それだけでは開かない
+                const hasLimit = SIZE_LIMIT_FIELDS.some((f) => {
+                  const v = selectedElement[f.raw];
+                  return !!v && !(f.prop.startsWith("min") && /^0(px)?$/.test(v));
+                });
+                const visible = hasLimit || sizeLimitsOpen;
+                return (
+                  <>
+                    {!hasLimit && (
+                      <button
+                        type="button"
+                        data-size-limits-toggle
+                        aria-expanded={visible}
+                        onClick={() => setSizeLimitsOpen((v) => !v)}
+                        className="absolute right-0 top-0 text-[10px] text-gray-400 hover:text-white"
+                        title="最小・最大の幅と高さ"
+                      >
+                        {visible ? "− 最小・最大" : "+ 最小・最大"}
+                      </button>
+                    )}
+                    {visible && (
+                      <div className="grid grid-cols-2 gap-x-2 gap-y-1.5 mt-1.5" data-size-limits>
+                        {SIZE_LIMIT_FIELDS.map((f) => (
+                          <VariableAwareSizeInput
+                            key={f.id}
+                            fieldId={f.id}
+                            variant="limit"
+                            value={selectedElement[f.raw] ?? ""}
+                            mode="fixed"
+                            onChangeMode={() => {}}
+                            onChangeValue={(val) => updateElementStyle({ [f.prop]: val })}
+                            label={
+                              <span className={SIZE_LABEL_CLASS} title={f.title}>
+                                {f.label}
+                              </span>
+                            }
+                            placeholder="—"
+                            dimension={f.dimension}
+                            min={0}
+                            conversionContext={conversionContext}
+                          />
+                        ))}
+                      </div>
+                    )}
+                  </>
+                );
+              })()}
               {/* [修復] 「サイズ」ブロックの閉じタグ。
                   縦横比ロックの追加作業が中断され、この1つが欠けていた */}
               </div>
@@ -2107,30 +2254,39 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
                 />
               </CollapsibleTrigger>
               <CollapsibleContent className="space-y-2 pb-3">
+                {partialText && (
+                  <p data-typo-scope="selection" className="text-[10px] text-[#0d99ff]">
+                    選んだ文字だけに当てます(行間・配置は要素全体)
+                  </p>
+                )}
                 <div>
                   <Label className="text-[10px] text-gray-500">フォント</Label>
                   <GoogleFontPicker
-                    value={selectedElement.fontFamily}
+                    value={
+                      partialText
+                        ? partialText.fontFamily === MIXED ? "" : partialText.fontFamily
+                        : selectedElement.fontFamily
+                    }
                     onChange={(value) =>
-                      updateElementStyle({ fontFamily: value })
+                      updateTextStyle({ fontFamily: value })
                     }
                     iframeDoc={iframeRef.current?.contentDocument || null}
                     className="w-full"
                   />
                 </div>
                 <div className="grid grid-cols-2 gap-2">
-                  <div>
+                  <div data-typo-field="font-weight">
                     <Label className="text-[10px] text-gray-500">
                       ウェイト
                     </Label>
                     <Select
-                      value={selectedElement.fontWeight}
+                      value={textFontWeight === MIXED ? "" : textFontWeight}
                       onValueChange={(value) =>
-                        updateElementStyle({ fontWeight: value })
+                        updateTextStyle({ fontWeight: value })
                       }
                     >
                       <SelectTrigger className="h-7 text-xs bg-[#383838] border-[#444444] text-white">
-                        <SelectValue />
+                        <SelectValue placeholder={textFontWeight === MIXED ? "混在" : undefined} />
                       </SelectTrigger>
                       <SelectContent>
                         {FONT_WEIGHTS.map((w) => (
@@ -2141,13 +2297,18 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
                       </SelectContent>
                     </Select>
                   </div>
-                  <div>
+                  <div data-typo-field="font-size">
                     <span className="text-[10px] text-gray-500 mb-1 block">
                       サイズ
                     </span>
                     <VariableAwareUnitInput
-                      value={selectedElement.rawFontSize || `${Math.round(selectedElement.fontSize)}px`}
-                      onChange={(val) => updateElementStyle({ fontSize: val })}
+                      value={
+                        partialText
+                          ? partialText.fontSize === MIXED ? "" : `${Math.round(parseFloat(partialText.fontSize) * 100) / 100}px`
+                          : selectedElement.rawFontSize || `${Math.round(selectedElement.fontSize)}px`
+                      }
+                      mixed={partialText?.fontSize === MIXED}
+                      onChange={(val) => updateTextStyle({ fontSize: val })}
                       units={FONT_SIZE_UNITS}
                       defaultUnit="px"
                       category="typography"
@@ -2191,14 +2352,14 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
                       variant="ghost"
                       size="icon"
                       onClick={() =>
-                        updateElementStyle({
+                        updateTextStyle({
                           fontWeight:
-                            selectedElement.fontWeight === "700"
+                            textFontWeight === "700"
                               ? "400"
                               : "700",
                         })
                       }
-                      className={`h-7 w-7 text-gray-400 ${selectedElement.fontWeight === "700" ? "bg-[#0d99ff] text-white" : "hover:bg-[#4a4a4a] hover:text-white"}`}
+                      className={`h-7 w-7 text-gray-400 ${textFontWeight === "700" ? "bg-[#0d99ff] text-white" : "hover:bg-[#4a4a4a] hover:text-white"}`}
                     >
                       <Bold className="w-3.5 h-3.5" />
                     </Button>
@@ -2206,14 +2367,14 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
                       variant="ghost"
                       size="icon"
                       onClick={() =>
-                        updateElementStyle({
+                        updateTextStyle({
                           fontStyle:
-                            selectedElement.fontStyle === "italic"
+                            textFontStyle === "italic"
                               ? "normal"
                               : "italic",
                         })
                       }
-                      className={`h-7 w-7 text-gray-400 ${selectedElement.fontStyle === "italic" ? "bg-[#0d99ff] text-white" : "hover:bg-[#4a4a4a] hover:text-white"}`}
+                      className={`h-7 w-7 text-gray-400 ${textFontStyle === "italic" ? "bg-[#0d99ff] text-white" : "hover:bg-[#4a4a4a] hover:text-white"}`}
                     >
                       <Italic className="w-3.5 h-3.5" />
                     </Button>
@@ -2221,22 +2382,22 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
                       variant="ghost"
                       size="icon"
                       onClick={() =>
-                        updateElementStyle({
+                        updateTextStyle({
                           textDecoration:
-                            selectedElement.textDecoration?.includes(
+                            textDecorationLine?.includes(
                               "underline",
                             )
                               ? "none"
                               : "underline",
                         })
                       }
-                      className={`h-7 w-7 text-gray-400 ${selectedElement.textDecoration?.includes("underline") ? "bg-[#0d99ff] text-white" : "hover:bg-[#4a4a4a] hover:text-white"}`}
+                      className={`h-7 w-7 text-gray-400 ${textDecorationLine?.includes("underline") ? "bg-[#0d99ff] text-white" : "hover:bg-[#4a4a4a] hover:text-white"}`}
                     >
                       <Underline className="w-3.5 h-3.5" />
                     </Button>
                   </div>
                   <div className="grid grid-cols-2 gap-2 mt-2">
-                    <div>
+                    <div data-typo-field="line-height">
                       <span className="text-[10px] text-gray-500 mb-1 block">
                         行間
                       </span>
@@ -2258,17 +2419,22 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
                         conversionContext={conversionContext}
                       />
                     </div>
-                    <div>
+                    <div data-typo-field="letter-spacing">
                       <span className="text-[10px] text-gray-500 mb-1 block">
                         文字間
                       </span>
                       <VariableAwareUnitInput
-                        value={selectedElement.rawLetterSpacing || (() => {
-                          const ls = selectedElement.letterSpacing;
-                          if (!ls || ls === "normal") return "0em";
-                          return ls;
-                        })()}
-                        onChange={(val) => updateElementStyle({ letterSpacing: val })}
+                        value={
+                          partialText
+                            ? partialText.letterSpacing === MIXED ? "" : partialText.letterSpacing === "normal" ? "0em" : partialText.letterSpacing
+                            : selectedElement.rawLetterSpacing || (() => {
+                                const ls = selectedElement.letterSpacing;
+                                if (!ls || ls === "normal") return "0em";
+                                return ls;
+                              })()
+                        }
+                        mixed={partialText?.letterSpacing === MIXED}
+                        onChange={(val) => updateTextStyle({ letterSpacing: val })}
                         units={LETTER_SPACING_UNITS}
                         defaultUnit="em"
                         category="typography"
@@ -2280,13 +2446,14 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
                     </div>
                   </div>
                 </div>
+                <div data-typo-field="color">
                 <FigmaColorPicker
-                  label="文字色"
+                  label={partialText?.color === MIXED ? "文字色(混在)" : "文字色"}
                   value={parseCssToFillConfig(
-                    selectedElement.color,
+                    partialText && partialText.color !== MIXED ? partialText.color : selectedElement.color,
                     undefined,
                     undefined,
-                    selectedElement.rawColor,
+                    partialText ? undefined : selectedElement.rawColor,
                   )}
                   onChange={(config) => {
                     if (config.type === "solid" && config.color) {
@@ -2295,22 +2462,23 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
                         const r = parseInt(config.color.slice(1, 3), 16);
                         const g = parseInt(config.color.slice(3, 5), 16);
                         const b = parseInt(config.color.slice(5, 7), 16);
-                        updateElementStyle({
+                        updateTextStyle({
                           color: `rgba(${r}, ${g}, ${b}, ${opacity / 100})`,
                         });
                       } else {
-                        updateElementStyle({ color: config.color });
+                        updateTextStyle({ color: config.color });
                       }
                     }
                   }}
                   onVariableSelect={(varRef) => {
-                    updateElementStyle({ color: varRef });
+                    updateTextStyle({ color: varRef });
                   }}
                   presetColors={colorPresets}
                   showImageTab={false}
                   showVariablesTab={true}
                   onClose={restoreFocus}
                 />
+                </div>
               </CollapsibleContent>
             </Collapsible>
           )}

package/src/editor/components/EditorSidebar.tsx

@@ -32,7 +32,7 @@ export function EditorSidebar() {
     iframeRef,
   } = useEditorContext();
 
-  const { updateElementStyle } = useElementActions();
+  const { updateElementStyle, updateTextStyle } = useElementActions();
 
   // レイヤーノードの展開/折りたたみ
   const toggleNode = (nodeId: string) => {
@@ -177,7 +177,7 @@ export function EditorSidebar() {
                 onOpenChange={(open) =>
                   setOpenSections((prev) => ({ ...prev, typography: open }))
                 }
-                onStyleChange={updateElementStyle}
+                onStyleChange={updateTextStyle}
                 iframeDoc={iframeRef.current?.contentDocument || null}
               />
 

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

@@ -209,9 +209,9 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
   const canvas = useMultiPageCanvas();
   const {
     pages,
-    bounds,
     viewStore,
     registerContainer,
+    shiftView,
     activatePage,
     activatingPageId,
     zoomToFit,
@@ -219,7 +219,7 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
     zoomToActual,
     rulersVisible,
     isInteracting,
-    initialViewRestored,
+    applyInitialView,
     getPreviewImageZoomCap,
     previewImageCapVersion,
   } = canvas;
@@ -247,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);
@@ -322,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) => {