<!-- @generated-by: docs-svg-kit v1 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" width="960" height="960" font-family="-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif">
  <metadata>docs-svg-kit/v1</metadata>
  <defs>
    <style>
      .canvas-bg { fill: #ECECEC; }

      .doc-heading { font-size: 26px; fill: #0a0a0a; font-weight: 600; letter-spacing: -0.3px; }
      .doc-sub { font-size: 14px; fill: #6b7280; }
      .col-title { font-size: 16px; fill: #0a0a0a; font-weight: 600; letter-spacing: -0.2px; }
      .step-label { font-size: 11px; fill: #6b7280; font-weight: 500; text-transform: uppercase; letter-spacing: 0.6px; }
      .caption { font-size: 13px; fill: #6b7280; }
      .label-mono { font-size: 12px; fill: #0a0a0a; font-family: 'SF Mono', Menlo, Consolas, monospace; }

      .sel-outline { fill: none; stroke: #0D99FF; stroke-width: 1; shape-rendering: crispEdges; }
      .handle { fill: #ffffff; stroke: #0D99FF; stroke-width: 1; shape-rendering: crispEdges; }
      .baseline { stroke: #0D99FF; stroke-width: 0.5; opacity: 0.55; shape-rendering: crispEdges; }

      .ghost { fill: none; stroke: #b5b5b5; stroke-width: 1; stroke-dasharray: 3 3; shape-rendering: crispEdges; }

      .pin-line { stroke: #FF3B30; stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.6; }

      .badge { fill: #0D99FF; }
      .badge-text { font-size: 10px; fill: #ffffff; font-family: 'SF Mono', Menlo, Consolas, monospace; font-weight: 600; letter-spacing: 0.3px; }

      .node-text { font-size: 22px; fill: #0a0a0a; letter-spacing: -0.3px; }

      .arrow { stroke: #9ca3af; stroke-width: 1.25; fill: none; }
      .arrow-head { fill: #9ca3af; }
      .arrow-red { stroke: #FF3B30; stroke-width: 1.25; fill: none; opacity: 0.85; }
      .arrow-red-head { fill: #FF3B30; }

      .legend-box { fill: #ffffff; stroke: #e5e5e5; stroke-width: 1; }
    </style>

    <marker id="ah" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" class="arrow-head"/>
    </marker>
    <marker id="ah-red" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" class="arrow-red-head"/>
    </marker>

    <filter id="badge-shadow" x="-20%" y="-20%" width="140%" height="200%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="1.2"/>
      <feOffset dx="0" dy="1" result="offset"/>
      <feComponentTransfer><feFuncA type="linear" slope="0.22"/></feComponentTransfer>
      <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>

    <filter id="pin-shadow" x="-200%" y="-200%" width="500%" height="500%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="1"/>
      <feOffset dx="0" dy="0.5" result="o"/>
      <feComponentTransfer><feFuncA type="linear" slope="0.4"/></feComponentTransfer>
      <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>

    <!-- Anchor pin: drawn so that (cx, cy) is the literal anchor point.
         No <symbol> indirection — placed directly with translate(). -->
    <g id="anchor-pin">
      <circle cx="0" cy="0" r="9" fill="#FF3B30" opacity="0.18"/>
      <circle cx="0" cy="0" r="5.5" fill="#FF3B30"/>
      <circle cx="0" cy="0" r="2" fill="#ffffff"/>
    </g>
  </defs>

  <rect class="canvas-bg" width="960" height="960"/>

  <text x="480" y="58" class="doc-heading" text-anchor="middle">Alignment is preserved</text>
  <text x="480" y="84" class="doc-sub" text-anchor="middle">The anchor side stays fixed. The opposite side moves in.</text>

  <!-- column dividers -->
  <line x1="320" y1="120" x2="320" y2="780" stroke="#dcdcdc" stroke-width="1"/>
  <line x1="640" y1="120" x2="640" y2="780" stroke="#dcdcdc" stroke-width="1"/>

  <!-- =============================================================
       Geometry plan (per column, inside the group transform):
         BEFORE box: 280 × 90  at (0, 0)..(280, 90)   ← y-center = 45
         AFTER  box: 140 × 90, position depends on alignment
                     LEFT   :   0..140
                     CENTER :  70..210  (centered on x=140)
                     RIGHT  : 140..280  (right edge stays at 280)
       Anchor pin center (in box-local coords):
         LEFT   : (  0, 45)
         CENTER : (140, 45)
         RIGHT  : (280, 45)
       Pin is a <g> placed via translate(cx, cy), so position is exact.
     ============================================================= -->

  <!-- ============================================================ -->
  <!-- LEFT-aligned                                                 -->
  <!-- ============================================================ -->
  <text x="160" y="148" class="step-label" text-anchor="middle">Text aligned</text>
  <text x="160" y="172" class="col-title" text-anchor="middle">Left</text>

  <!-- BEFORE -->
  <g transform="translate(20, 220)">
    <rect x="0.5" y="0.5" width="279" height="89" class="sel-outline"/>
    <text x="14" y="56" class="node-text">Hello world</text>
    <line x1="0.5" y1="64.5" x2="279.5" y2="64.5" class="baseline"/>
    <rect x="-3.5" y="-3.5" width="7" height="7" class="handle"/>
    <rect x="276.5" y="-3.5" width="7" height="7" class="handle"/>
    <rect x="-3.5" y="86.5" width="7" height="7" class="handle"/>
    <rect x="276.5" y="86.5" width="7" height="7" class="handle"/>

    <!-- anchor on left edge, vertically centered -->
    <g transform="translate(0, 45)" filter="url(#pin-shadow)">
      <use href="#anchor-pin"/>
    </g>

    <g transform="translate(103, 100)" filter="url(#badge-shadow)">
      <rect x="0" y="0" width="74" height="20" rx="4" class="badge"/>
      <text x="37" y="14" class="badge-text" text-anchor="middle">280 × 90</text>
    </g>
  </g>

  <line x1="160" y1="365" x2="160" y2="412" class="arrow" marker-end="url(#ah)"/>

  <!-- AFTER -->
  <g transform="translate(20, 432)">
    <rect x="0.5" y="0.5" width="279" height="89" class="ghost"/>
    <rect x="0.5" y="0.5" width="139" height="89" class="sel-outline"/>
    <text x="14" y="56" class="node-text">Hello world</text>
    <line x1="0.5" y1="64.5" x2="139.5" y2="64.5" class="baseline"/>
    <rect x="-3.5" y="-3.5" width="7" height="7" class="handle"/>
    <rect x="136.5" y="-3.5" width="7" height="7" class="handle"/>
    <rect x="-3.5" y="86.5" width="7" height="7" class="handle"/>
    <rect x="136.5" y="86.5" width="7" height="7" class="handle"/>

    <!-- pin still on left edge -->
    <g transform="translate(0, 45)" filter="url(#pin-shadow)">
      <use href="#anchor-pin"/>
    </g>
    <line x1="0" y1="-12" x2="0" y2="102" class="pin-line"/>

    <!-- inward arrow on the moving (right) edge: from old right (280) toward new right (140) -->
    <line x1="270" y1="45" x2="148" y2="45" class="arrow-red" marker-end="url(#ah-red)" stroke-dasharray="3 2"/>

    <g transform="translate(33, 100)" filter="url(#badge-shadow)">
      <rect x="0" y="0" width="74" height="20" rx="4" class="badge"/>
      <text x="37" y="14" class="badge-text" text-anchor="middle">auto × 90</text>
    </g>
  </g>

  <text x="160" y="650" class="caption" text-anchor="middle">Left edge stays put.</text>
  <text x="160" y="670" class="caption" text-anchor="middle">Right edge moves in.</text>

  <!-- ============================================================ -->
  <!-- CENTER-aligned                                               -->
  <!-- ============================================================ -->
  <text x="480" y="148" class="step-label" text-anchor="middle">Text aligned</text>
  <text x="480" y="172" class="col-title" text-anchor="middle">Center</text>

  <!-- BEFORE -->
  <g transform="translate(340, 220)">
    <rect x="0.5" y="0.5" width="279" height="89" class="sel-outline"/>
    <text x="140" y="56" class="node-text" text-anchor="middle">Hello world</text>
    <line x1="0.5" y1="64.5" x2="279.5" y2="64.5" class="baseline"/>
    <rect x="-3.5" y="-3.5" width="7" height="7" class="handle"/>
    <rect x="276.5" y="-3.5" width="7" height="7" class="handle"/>
    <rect x="-3.5" y="86.5" width="7" height="7" class="handle"/>
    <rect x="276.5" y="86.5" width="7" height="7" class="handle"/>

    <!-- anchor at center -->
    <g transform="translate(140, 45)" filter="url(#pin-shadow)">
      <use href="#anchor-pin"/>
    </g>

    <g transform="translate(103, 100)" filter="url(#badge-shadow)">
      <rect x="0" y="0" width="74" height="20" rx="4" class="badge"/>
      <text x="37" y="14" class="badge-text" text-anchor="middle">280 × 90</text>
    </g>
  </g>

  <line x1="480" y1="365" x2="480" y2="412" class="arrow" marker-end="url(#ah)"/>

  <!-- AFTER: new box 70..210, centered on x=140 -->
  <g transform="translate(340, 432)">
    <rect x="0.5" y="0.5" width="279" height="89" class="ghost"/>
    <rect x="70.5" y="0.5" width="139" height="89" class="sel-outline"/>
    <text x="140" y="56" class="node-text" text-anchor="middle">Hello world</text>
    <line x1="70.5" y1="64.5" x2="209.5" y2="64.5" class="baseline"/>
    <rect x="66.5" y="-3.5" width="7" height="7" class="handle"/>
    <rect x="206.5" y="-3.5" width="7" height="7" class="handle"/>
    <rect x="66.5" y="86.5" width="7" height="7" class="handle"/>
    <rect x="206.5" y="86.5" width="7" height="7" class="handle"/>

    <!-- pin still at center -->
    <g transform="translate(140, 45)" filter="url(#pin-shadow)">
      <use href="#anchor-pin"/>
    </g>
    <line x1="140" y1="-12" x2="140" y2="102" class="pin-line"/>

    <!-- both edges move inward -->
    <line x1="10" y1="45" x2="62" y2="45" class="arrow-red" marker-end="url(#ah-red)" stroke-dasharray="3 2"/>
    <line x1="270" y1="45" x2="218" y2="45" class="arrow-red" marker-end="url(#ah-red)" stroke-dasharray="3 2"/>

    <g transform="translate(103, 100)" filter="url(#badge-shadow)">
      <rect x="0" y="0" width="74" height="20" rx="4" class="badge"/>
      <text x="37" y="14" class="badge-text" text-anchor="middle">auto × 90</text>
    </g>
  </g>

  <text x="480" y="650" class="caption" text-anchor="middle">Center stays put.</text>
  <text x="480" y="670" class="caption" text-anchor="middle">Both edges move inward.</text>

  <!-- ============================================================ -->
  <!-- RIGHT-aligned                                                -->
  <!-- ============================================================ -->
  <text x="800" y="148" class="step-label" text-anchor="middle">Text aligned</text>
  <text x="800" y="172" class="col-title" text-anchor="middle">Right</text>

  <!-- BEFORE -->
  <g transform="translate(660, 220)">
    <rect x="0.5" y="0.5" width="279" height="89" class="sel-outline"/>
    <text x="266" y="56" class="node-text" text-anchor="end">Hello world</text>
    <line x1="0.5" y1="64.5" x2="279.5" y2="64.5" class="baseline"/>
    <rect x="-3.5" y="-3.5" width="7" height="7" class="handle"/>
    <rect x="276.5" y="-3.5" width="7" height="7" class="handle"/>
    <rect x="-3.5" y="86.5" width="7" height="7" class="handle"/>
    <rect x="276.5" y="86.5" width="7" height="7" class="handle"/>

    <!-- anchor on right edge -->
    <g transform="translate(280, 45)" filter="url(#pin-shadow)">
      <use href="#anchor-pin"/>
    </g>

    <g transform="translate(103, 100)" filter="url(#badge-shadow)">
      <rect x="0" y="0" width="74" height="20" rx="4" class="badge"/>
      <text x="37" y="14" class="badge-text" text-anchor="middle">280 × 90</text>
    </g>
  </g>

  <line x1="800" y1="365" x2="800" y2="412" class="arrow" marker-end="url(#ah)"/>

  <!-- AFTER: new box 140..280 -->
  <g transform="translate(660, 432)">
    <rect x="0.5" y="0.5" width="279" height="89" class="ghost"/>
    <rect x="140.5" y="0.5" width="139" height="89" class="sel-outline"/>
    <text x="266" y="56" class="node-text" text-anchor="end">Hello world</text>
    <line x1="140.5" y1="64.5" x2="279.5" y2="64.5" class="baseline"/>
    <rect x="136.5" y="-3.5" width="7" height="7" class="handle"/>
    <rect x="276.5" y="-3.5" width="7" height="7" class="handle"/>
    <rect x="136.5" y="86.5" width="7" height="7" class="handle"/>
    <rect x="276.5" y="86.5" width="7" height="7" class="handle"/>

    <!-- pin still on right edge -->
    <g transform="translate(280, 45)" filter="url(#pin-shadow)">
      <use href="#anchor-pin"/>
    </g>
    <line x1="280" y1="-12" x2="280" y2="102" class="pin-line"/>

    <!-- inward arrow on the moving (left) edge -->
    <line x1="10" y1="45" x2="132" y2="45" class="arrow-red" marker-end="url(#ah-red)" stroke-dasharray="3 2"/>

    <g transform="translate(173, 100)" filter="url(#badge-shadow)">
      <rect x="0" y="0" width="74" height="20" rx="4" class="badge"/>
      <text x="37" y="14" class="badge-text" text-anchor="middle">auto × 90</text>
    </g>
  </g>

  <text x="800" y="650" class="caption" text-anchor="middle">Right edge stays put.</text>
  <text x="800" y="670" class="caption" text-anchor="middle">Left edge moves in.</text>

  <!-- ============================================================ -->
  <!-- legend                                                       -->
  <!-- ============================================================ -->
  <g transform="translate(140, 800)">
    <rect x="0" y="0" width="680" height="120" rx="10" class="legend-box"/>

    <g transform="translate(54, 42)">
      <use href="#anchor-pin"/>
      <text x="22" y="5" class="caption">Anchor — the side that stays fixed</text>
    </g>

    <g transform="translate(40, 80)">
      <rect x="0" y="-6" width="42" height="12" class="ghost"/>
      <text x="54" y="3" class="caption">Original bounds before auto sizing</text>
    </g>

    <g transform="translate(390, 42)">
      <line x1="0" y1="0" x2="32" y2="0" class="arrow-red" marker-end="url(#ah-red)" stroke-dasharray="3 2"/>
      <text x="46" y="5" class="caption">Edge that moves inward</text>
    </g>

    <g transform="translate(390, 80)">
      <rect x="0" y="-8" width="56" height="16" rx="4" class="badge"/>
      <text x="28" y="4" class="badge-text" text-anchor="middle">w × h</text>
      <text x="68" y="3" class="caption">Live size readout</text>
    </g>
  </g>
</svg>
