Keyboard and pointer split pane

<!doctype html>
<!--
MIT License
Copyright (c) 2026 MRHTML

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data: blob:; connect-src 'none'; form-action 'none'; object-src 'none'; base-uri 'none'"
    />
    <title>Room to work. | MRHTML example</title>
    <style>
      :root {
        color-scheme: light;
        --paper: #f5f3ee;
        --surface: #fff;
        --ink: #172a3b;
        --muted: #536575;
        --line: #d2dce1;
        --blue: #234ed8;
        --soft: #eef3ff;
        --orange: #ad4b17;
        --error: #a62440;
        font:
          16px/1.6 system-ui,
          -apple-system,
          BlinkMacSystemFont,
          'Segoe UI',
          sans-serif;
        color: var(--ink);
        background: var(--paper);
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        padding: clamp(24px, 6vw, 64px) 22px;
        min-height: 100svh;
      }
      main {
        width: min(760px, 100%);
        margin: auto;
        min-width: 0;
      }
      h1,
      h2,
      h3,
      p {
        margin: 0;
      }
      h1 {
        font-size: clamp(2rem, 6vw, 3rem);
        line-height: 1.08;
        letter-spacing: -0.055em;
        font-weight: 680;
        max-width: 680px;
      }
      h2 {
        font-size: 1.2rem;
        line-height: 1.3;
        letter-spacing: -0.02em;
      }
      p {
        color: var(--muted);
      }
      header {
        margin-bottom: 28px;
      }
      .brand {
        font:
          700 0.73rem/1.5 ui-monospace,
          monospace;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--blue);
        margin-bottom: 20px;
      }
      .intro {
        max-width: 62ch;
        margin-top: 16px;
      }
      .surface {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: clamp(20px, 4vw, 32px);
      }
      .note {
        font-size: 0.85rem;
        margin-top: 20px;
      }
      .eyebrow {
        font:
          600 0.72rem/1.5 ui-monospace,
          monospace;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 20px;
      }
      button,
      input,
      textarea,
      select {
        font: inherit;
      }
      button {
        border: 1px solid var(--ink);
        background: var(--ink);
        color: #fff;
        border-radius: 8px;
        padding: 10px 17px;
        min-height: 44px;
        font-weight: 650;
        cursor: pointer;
      }
      button.secondary {
        background: transparent;
        color: var(--ink);
        border-color: var(--line);
      }
      button:hover:not(:disabled) {
        background: var(--blue);
        border-color: var(--blue);
        color: #fff;
      }
      button:disabled {
        cursor: not-allowed;
        opacity: 0.55;
      }
      label {
        font-weight: 600;
      }
      input:not([type='checkbox']):not([type='range']):not([type='file']),
      textarea,
      select {
        width: 100%;
        min-width: 0;
        border: 1px solid #8e9faa;
        border-radius: 8px;
        padding: 10px 12px;
        background: #fff;
        color: var(--ink);
      }
      textarea {
        resize: vertical;
        min-height: 180px;
      }
      input[type='range'] {
        width: 100%;
        accent-color: var(--blue);
      }
      input[type='checkbox'] {
        width: 20px;
        height: 20px;
        accent-color: var(--blue);
      }
      :focus-visible {
        outline: 3px solid var(--orange);
        outline-offset: 4px;
      }
      a {
        color: var(--blue);
      }
      .status {
        min-height: 1.6em;
        font-size: 0.9rem;
        margin-top: 18px;
        overflow-wrap: anywhere;
      }
      .status[data-error='true'] {
        color: var(--error);
      }
      [hidden] {
        display: none !important;
      }
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      .field {
        display: grid;
        gap: 7px;
        margin-top: 16px;
      }
      footer {
        font-size: 0.75rem;
        color: var(--muted);
        border-top: 1px solid var(--line);
        margin-top: 30px;
        padding-top: 16px;
        display: flex;
        justify-content: space-between;
        gap: 12px;
      }
      noscript {
        display: block;
        padding: 14px;
        background: #fff2d9;
        border: 1px solid #ad4b17;
        margin-top: 20px;
        border-radius: 8px;
        color: var(--ink);
      }
      @media (max-width: 400px) {
        body {
          padding: 25px 16px;
        }
        .surface {
          padding: 20px;
        }
        button {
          padding: 10px 14px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          scroll-behavior: auto !important;
          animation: none !important;
          transition: none !important;
        }
      }

      main {
        width: min(940px, 100%);
      }
      .split-shell {
        padding: 24px;
      }
      .split-heading {
        display: flex;
        justify-content: space-between;
        gap: 20px;
      }
      #split-value {
        font:
          500 0.75rem ui-monospace,
          monospace;
        color: var(--blue);
      }
      #split-help {
        margin: 12px 0 22px;
      }
      .workspace {
        display: grid;
        grid-template-columns: minmax(0, var(--first, 45fr)) 18px minmax(
            0,
            var(--second, 55fr)
          );
        height: 390px;
        border: 1px solid var(--line);
        border-radius: 11px;
        overflow: hidden;
      }
      .pane {
        min-width: 0;
        min-height: 0;
        overflow: auto;
        padding: clamp(16px, 3vw, 26px);
        background: #fafbfc;
      }
      .pane h2 {
        font-size: clamp(1.2rem, 3vw, 1.7rem);
        margin: 18px 0 13px;
      }
      .pane p:not(.eyebrow),
      .pane li,
      .pane label,
      .pane a {
        font-size: 0.85rem;
      }
      .pane ul {
        padding-left: 20px;
        color: var(--muted);
        margin: 20px 0;
      }
      .pane textarea {
        min-height: 100px;
        margin-top: 6px;
        font-size: 0.85rem;
      }
      .pane a {
        display: inline-block;
        margin-top: 20px;
      }
      .preview-pane {
        background: #edf2fd;
      }
      .separator {
        display: grid;
        place-items: center;
        background: #d7dfe7;
        cursor: col-resize;
        touch-action: none;
        user-select: none;
        outline-offset: -3px;
      }
      .separator span {
        display: block;
        width: 3px;
        height: 36px;
        border-radius: 4px;
        background: #627b8f;
      }
      .separator:hover,
      .separator[data-drag='true'] {
        background: #bed0ff;
      }
      .preview-mark {
        display: flex;
        gap: 7px;
        margin: 25px 0;
      }
      .preview-mark span {
        width: 30px;
        height: 40px;
        border-radius: 6px;
        background: var(--blue);
      }
      .preview-mark span:nth-child(2) {
        height: 55px;
        background: #7294e9;
      }
      .preview-mark span:nth-child(3) {
        height: 32px;
        background: #bcccf3;
      }
      @media (max-width: 560px) {
        .split-shell {
          padding: 16px;
        }
        .workspace {
          height: 560px;
          grid-template-columns: minmax(0, 1fr);
          grid-template-rows: minmax(0, var(--first, 45fr)) 20px minmax(
              0,
              var(--second, 55fr)
            );
        }
        .separator {
          cursor: row-resize;
        }
        .separator span {
          width: 36px;
          height: 3px;
        }
        .pane {
          padding: 18px;
        }
        .preview-mark {
          margin: 16px 0;
        }
        .preview-mark span {
          height: 26px;
        }
        .preview-mark span:nth-child(2) {
          height: 35px;
        }
        .preview-mark span:nth-child(3) {
          height: 22px;
        }
      }
    </style>
  </head>
  <body>
    <main>
      <header>
        <p class="brand">MRHTML / Runnable example</p>
        <h1>Room to work.</h1>
        <p class="intro">
          Resize a pair of local panels with the handle or your keyboard. The
          layout turns vertical on narrow screens.
        </p>
      </header>
      <section class="surface split-shell">
        <div class="split-heading">
          <p class="eyebrow">Notes / Preview</p>
          <output id="split-value">45% / 55%</output>
        </div>
        <p id="split-help" class="note" tabindex="-1">
          Focus the separator. Use Left and Right Arrow, or Home and End. Shift
          makes larger steps.
        </p>
        <div id="workspace" class="workspace">
          <section id="primary-pane" class="pane" aria-labelledby="notes-title">
            <p class="eyebrow">01 / Working notes</p>
            <h2 id="notes-title">A small plan</h2>
            <p>
              Give the opening line room to breathe. Keep the next action close
              to the idea it belongs to.
            </p>
            <ul>
              <li>One useful headline</li>
              <li>A readable measure</li>
              <li>A clear next step</li>
            </ul>
            <label for="panel-note">Your note</label
            ><textarea
              id="panel-note"
              rows="3"
              placeholder="Add a thought…"
            ></textarea>
          </section>
          <div id="separator" class="separator" aria-hidden="true">
            <span aria-hidden="true"></span>
          </div>
          <section class="pane preview-pane" aria-labelledby="preview-title">
            <p class="eyebrow">02 / Static preview</p>
            <div class="preview-mark" aria-hidden="true">
              <span></span><span></span><span></span>
            </div>
            <h2 id="preview-title">Good ideas need a little space.</h2>
            <p>
              Both panels keep their own content. Resizing changes the available
              room, not the text you entered.
            </p>
            <a id="read-split-help" href="#split-help" hidden
              >Read the resize instructions</a
            >
          </section>
        </div>
        <div class="actions">
          <button id="reset-split" class="secondary" type="button" disabled>
            Reset proportions
          </button>
        </div>
      </section>
      <p class="note">
        The notes panel stays between 25% and 75%. On small screens the
        separator becomes horizontal and uses Up and Down Arrow. Notes exist
        only in this page.
      </p>
      <noscript
        >Both panels remain readable with fixed proportions. JavaScript enables
        resizing; notes are never saved or sent.</noscript
      >
      <footer>
        <span>MRHTML example</span><span>Original code · MIT</span>
      </footer>
    </main>
    <script>
      'use strict';
      (() => {
        const workspace = document.querySelector('#workspace'),
          separator = document.querySelector('#separator'),
          value = document.querySelector('#split-value'),
          help = document.querySelector('#split-help'),
          reset = document.querySelector('#reset-split'),
          narrow = matchMedia('(max-width: 560px)');
        let percent = 45,
          drag = null;
        function render(next = percent) {
          percent = Math.min(75, Math.max(25, next));
          workspace.style.setProperty('--first', `${percent}fr`);
          workspace.style.setProperty('--second', `${100 - percent}fr`);
          separator.setAttribute('aria-valuenow', String(Math.round(percent)));
          separator.setAttribute(
            'aria-valuetext',
            `${Math.round(percent)} percent notes, ${Math.round(100 - percent)} percent preview`,
          );
          value.value = `${Math.round(percent)}% / ${Math.round(100 - percent)}%`;
        }
        function finish(revert = false) {
          if (!drag) return;
          const current = drag;
          drag = null;
          separator.dataset.drag = 'false';
          if (revert) render(current.start);
          if (separator.hasPointerCapture(current.id))
            separator.releasePointerCapture(current.id);
        }
        function mode() {
          finish();
          separator.setAttribute(
            'aria-orientation',
            narrow.matches ? 'horizontal' : 'vertical',
          );
          help.textContent = `Focus the separator. Use ${narrow.matches ? 'Up and Down' : 'Left and Right'} Arrow, or Home and End. Shift makes larger steps.`;
          render();
        }
        separator.removeAttribute('aria-hidden');
        separator.setAttribute('role', 'separator');
        separator.setAttribute('tabindex', '0');
        separator.setAttribute('aria-label', 'Notes panel size');
        separator.setAttribute('aria-controls', 'primary-pane');
        separator.setAttribute('aria-describedby', 'split-help');
        separator.setAttribute('aria-valuemin', '25');
        separator.setAttribute('aria-valuemax', '75');
        separator.addEventListener('keydown', (event) => {
          const decrease = narrow.matches ? 'ArrowUp' : 'ArrowLeft',
            increase = narrow.matches ? 'ArrowDown' : 'ArrowRight';
          let next = percent;
          if (event.key === decrease) next -= event.shiftKey ? 10 : 1;
          else if (event.key === increase) next += event.shiftKey ? 10 : 1;
          else if (event.key === 'Home') next = 25;
          else if (event.key === 'End') next = 75;
          else if (event.key === 'Escape' && drag) {
            event.preventDefault();
            finish(true);
            return;
          } else return;
          event.preventDefault();
          render(next);
        });
        separator.addEventListener('pointerdown', (event) => {
          if (event.button !== 0 || !event.isPrimary) return;
          event.preventDefault();
          separator.focus();
          const bounds = workspace.getBoundingClientRect(),
            handle = separator.getBoundingClientRect();
          drag = {
            id: event.pointerId,
            start: percent,
            vertical: !narrow.matches,
            origin: narrow.matches ? bounds.top : bounds.left,
            size: narrow.matches ? bounds.height : bounds.width,
            handle: narrow.matches ? handle.height : handle.width,
          };
          try {
            separator.setPointerCapture(event.pointerId);
            separator.dataset.drag = 'true';
          } catch {
            drag = null;
          }
        });
        separator.addEventListener('pointermove', (event) => {
          if (!drag || event.pointerId !== drag.id) return;
          const coordinate = drag.vertical ? event.clientX : event.clientY;
          render(
            ((coordinate - drag.origin - drag.handle / 2) /
              (drag.size - drag.handle)) *
              100,
          );
        });
        separator.addEventListener('pointerup', (event) => {
          if (drag && event.pointerId === drag.id) finish();
        });
        separator.addEventListener('pointercancel', (event) => {
          if (drag && event.pointerId === drag.id) finish(true);
        });
        separator.addEventListener('lostpointercapture', () => finish());
        window.addEventListener('resize', () => {
          finish();
          render();
        });
        narrow.addEventListener('change', mode);
        const helpLink = document.querySelector('#read-split-help');
        helpLink.addEventListener('click', (event) => {
          event.preventDefault();
          help.focus({ preventScroll: true });
          help.scrollIntoView({
            behavior: matchMedia('(prefers-reduced-motion: reduce)').matches
              ? 'instant'
              : 'smooth',
            block: 'nearest',
          });
        });
        helpLink.hidden = false;
        reset.disabled = false;
        reset.addEventListener('click', () => {
          finish();
          render(45);
          separator.focus();
        });
        mode();
      })();
    </script>
  </body>
</html>