dotfiles

<section class="pivi-mockup">
  <style>
    :host { color-scheme: dark; font: 14px/1.35 ui-monospace, "Cascadia Mono", Consolas, monospace; }
    .pivi-mockup { max-width: 1120px; margin: 0 auto; color: #d7d7d7; background: #17191d; border: 1px solid #464b55; box-shadow: 0 10px 35px #0008; }
    .tabs, .winbar, .status { display: flex; align-items: center; min-height: 1.7em; padding: 0 .65em; white-space: pre; }
    .tabs { background: #242830; gap: 1.1em; color: #a9b0bc; }
    .tabs .active { color: #f0f0f0; background: #343945; margin: 0 -.4em; padding: 0 .4em; }
    .workspace { display: grid; grid-template-columns: minmax(0, 3fr) minmax(24em, 2fr); min-height: 29em; }
    .window { min-width: 0; position: relative; }
    .window + .window { border-left: 1px solid #464b55; }
    .winbar { justify-content: space-between; background: #202329; color: #bfc5cf; border-bottom: 1px solid #30343c; }
    .agent { color: #deb887; }
    .buffer { padding: .45em 0 1em; overflow: hidden; }
    .line { display: grid; grid-template-columns: 2em 1.2em minmax(0, 1fr); min-height: 1.45em; }
    .num { color: #636b78; text-align: right; padding-right: .45em; user-select: none; }
    .sign { color: #7f8794; text-align: center; }
    .code { white-space: pre; overflow: hidden; }
    .kw { color: #d49adf; } .str { color: #e6c384; }
    .editing { background: #3a3223; }
    .editing .sign { color: #efbd6b; }
    .changed { background: #22352c; }
    .changed .sign { color: #8ec07c; }
    .virt { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); color: #87b98b; background: #1c2923; }
    .virt::before { content: "+"; text-align: right; padding-right: .55em; color: #8ec07c; }
    .ghost { color: #98a1ad; font-style: italic; }
    .status { justify-content: space-between; background: #292d35; color: #ccd0d8; border-top: 1px solid #464b55; }
    .external { color: #89919e; }
    .controls { display: flex; gap: .5em; padding: .65em; border-top: 1px solid #343944; background: #202329; }
    button { font: inherit; color: #d7d7d7; background: #303540; border: 1px solid #565d69; padding: .3em .7em; }
    button[aria-pressed="true"] { border-color: #d7a85d; color: #f3c77b; }
    button:focus-visible { outline: 2px solid #9ccfd8; outline-offset: 2px; }
    .note { margin-left: auto; align-self: center; color: #7f8794; }
  </style>
  <div class="tabs"><span class="active">1 api</span><span>2 tests</span><span>3 docs</span><span class="agent">π refactor-parser</span></div>
  <div class="workspace">
    <article class="window">
      <header class="winbar"><span>lua/parser.lua</span><span>human workspace</span></header>
      <div class="buffer">
        <div class="line"><span class="num">38</span><span class="sign"> </span><span class="code"><span class="kw">local function</span> parse(input)</span></div>
        <div class="line"><span class="num">39</span><span class="sign"> </span><span class="code">  <span class="kw">local</span> tokens = tokenize(input)</span></div>
        <div class="line changed"><span class="num">40</span><span class="sign">┃</span><span class="code">  <span class="kw">return</span> parse_tokens(tokens)</span></div>
        <div class="line"><span class="num">41</span><span class="sign"> </span><span class="code"><span class="kw">end</span></span></div>
        <div class="line"><span class="num">42</span><span class="sign"> </span><span class="code"></span></div>
        <div class="line"><span class="num">43</span><span class="sign"> </span><span class="code"><span class="kw">return</span> { parse = parse }</span></div>
      </div>
    </article>
    <article class="window">
      <header class="winbar"><span>lua/tokenize.lua</span><span class="agent">π editing 17:19</span></header>
      <div class="buffer">
        <div class="line"><span class="num">15</span><span class="sign"> </span><span class="code"><span class="kw">local function</span> scan(input)</span></div>
        <div class="line"><span class="num">16</span><span class="sign"> </span><span class="code">  <span class="kw">local</span> result = {}</span></div>
        <div class="line editing"><span class="num">17</span><span class="sign">●</span><span class="code">  <span class="kw">for</span> token <span class="kw">in</span> input:gmatch(<span class="str">'%S+'</span>) <span class="kw">do</span> <span class="ghost">π editing…</span></span></div>
        <div class="virt"><span></span><span class="code">    result[#result + 1] = normalize(token)</span></div>
        <div class="line editing"><span class="num">18</span><span class="sign">│</span><span class="code">    result[#result + 1] = token</span></div>
        <div class="line editing"><span class="num">19</span><span class="sign">└</span><span class="code">  <span class="kw">end</span></span></div>
        <div class="line"><span class="num">20</span><span class="sign"> </span><span class="code">  <span class="kw">return</span> result</span></div>
        <div class="line"><span class="num">21</span><span class="sign"> </span><span class="code"><span class="kw">end</span></span></div>
      </div>
    </article>
  </div>
  <footer class="status"><span>NORMAL  lua/parser.lua</span><span class="external">existing user-owned statusline remains untouched</span><span>40:3</span></footer>
  <div class="controls" aria-label="Representative controls">
    <button type="button" data-follow aria-pressed="true">Follow: window</button>
    <button type="button" data-state aria-pressed="false">Show completed state</button>
    <span class="note">Illustrative interaction only</span>
  </div>
  <script>
    (() => {
      const root = document.currentScript.mockupRoot;
      const follow = root.querySelector('[data-follow]');
      const state = root.querySelector('[data-state]');
      follow.addEventListener('click', () => {
        const on = follow.getAttribute('aria-pressed') !== 'true';
        follow.setAttribute('aria-pressed', String(on));
        follow.textContent = on ? 'Follow: window' : 'Follow: off';
      });
      state.addEventListener('click', () => {
        const completed = state.getAttribute('aria-pressed') !== 'true';
        state.setAttribute('aria-pressed', String(completed));
        state.textContent = completed ? 'Show active state' : 'Show completed state';
        root.querySelectorAll('.editing').forEach((line) => {
          line.classList.toggle('editing', !completed);
          line.classList.toggle('changed', completed);
        });
        const winbar = root.querySelectorAll('.winbar')[1].lastElementChild;
        winbar.textContent = completed ? 'π edited 17:19' : 'π editing 17:19';
        const ghost = root.querySelector('.ghost');
        ghost.textContent = completed ? 'π changed' : 'π editing…';
      });
    })();
  </script>
</section>