refactor(docs): drop playground window chrome from capture demo

Co-authored-by: Cursor <[email protected]>

docs/themes/navy/layout/playground.swig

@@ -4,23 +4,17 @@
     <div class="loader" role=status aria-busy=true></div>
     <div id="editors" class="inner hide" aria-hide=true>
       <div class="area-tpl editor-wrapper">
-        <div class="pane-window">
+        <h2>Template</h2>
-          <span class="pane-tab">Template</span>
+        <div class="editor" id="editorEl">{{ raw('partial/demo.liquid') }}</div>
-          <div class="editor" id="editorEl">{{ raw('partial/demo.liquid') }}</div>
-        </div>
       </div>
       <div class="area-data editor-wrapper">
-        <div class="pane-window">
+        <h2>Context</h2>
-          <span class="pane-tab">Context</span>
+        <div class="editor" id="dataEl">{{ raw('partial/demo.json') }}</div>
-          <div class="editor" id="dataEl">{{ raw('partial/demo.json') }}</div>
-        </div>
       </div>
       <div class="area-output editor-wrapper">
-        <div class="pane-window">
+        <h2>Output</h2>
-          <span class="pane-tab">Output</span>
+        <div class="output-preview" id="previewEl">
-          <div class="output-preview" id="previewEl">
+          <pre class="highlight"><code class="language-markup" id="previewCode">{{__('playground.loading')}}</code></pre>
-            <pre class="highlight"><code class="language-markup" id="previewCode">{{__('playground.loading')}}</code></pre>
-          </div>
         </div>
       </div>
     </div>

docs/themes/navy/source/css/_partial/playground.styl

@@ -13,6 +13,14 @@
     margin-bottom: 24px
     color: var(--color-default)
 
+  h2
+    font-size: 0.8125rem
+    font-weight: 600
+    text-transform: uppercase
+    letter-spacing: 0.04em
+    color: var(--color-gray)
+    margin: 0
+
   #editors
     display: grid
     overflow: hidden
@@ -48,80 +56,46 @@
 
   .editor-wrapper
     display: flex
+    gap: 8px
     flex-direction: column
     min-height: 0
     overflow: hidden
-
+    .editor
-  .pane-window
+      flex: 1 1 auto
-    flex: 1 1 auto
+      min-height: 0
-    min-height: 0
+      position: relative
-    position: relative
+      code-block-chrome()
-    display: flex
+      overflow: hidden
-    flex-direction: column
+      @media mq-mobile
-    playground-window-chrome()
+        min-height: 240px
-    overflow: hidden
+    .output-preview
-    @media mq-mobile
+      flex: 1 1 auto
-      min-height: 240px
+      min-height: 0
-
+      code-block-chrome()
-  .pane-tab
+      overflow: auto
-    position: absolute
+      cursor: default
-    z-index: 5
+      pre.highlight
-    top: 0
+        margin: 0
-    left: 0
+        min-height: 100%
-    right: 0
+        padding: 16px
-    height: 36px
+        border: none
-    line-height: 36px
+        box-shadow: none
-    text-align: center
+        border-radius: 0
-    font-size: 0.75rem
+        background: var(--highlight-background)
-    font-weight: 600
+        code
-    letter-spacing: 0.02em
+          display: block
-    color: var(--color-gray)
+          font-size: 14px
-    pointer-events: none
+          line-height: 1.5
-    user-select: none
+          background: transparent
-
+          padding: 0
-  .editor
+          white-space: pre
-    flex: 1 1 auto
-    min-height: 0
-    position: relative
-    overflow: hidden
     .ace_editor
-      top: 0
+      font-family: font-mono
-      bottom: 0
+      font-size: 14px
-      height: auto !important
+      line-height: 1.5
-
+      border-radius: 6px
-  .output-preview
+    .ace_scrollbar
-    flex: 1 1 auto
+      z-index: 2
-    min-height: 0
-    cursor: default
-    overflow: auto
-    pre.highlight
-      margin: 0
-      min-height: 100%
-      padding: 16px
-      border: none
-      box-shadow: none
-      border-radius: 0 0 6px 6px
-      background: var(--highlight-background)
-      code
-        display: block
-        font-size: 14px
-        line-height: 1.5
-        background: transparent
-        padding: 0
-        white-space: pre
-
-  .ace_editor
-    font-family: font-mono
-    font-size: 14px
-    line-height: 1.5
-    border-radius: 6px
-  .ace_gutter
-    display: none !important
-    width: 0 !important
-  .ace_scroller
-    left: 0 !important
-  .ace_scrollbar
-    z-index: 2
 
   .version
     font-size: 0.8125rem

docs/themes/navy/source/css/_variables.styl

@@ -102,20 +102,3 @@ code-block-chrome()
   border-radius: 6px
   border: 1px solid var(--code-border)
   box-shadow: var(--code-shadow)
-
-playground-window-chrome()
-  code-block-chrome()
-  padding-top: 36px
-  &:before
-    content: ''
-    position: absolute
-    z-index: 4
-    top: 0
-    left: 0
-    right: 0
-    height: 36px
-    background: var(--highlight-background)
-    border-bottom: 1px solid var(--code-border)
-    border-radius: 6px 6px 0 0
-    pointer-events: none
-    background-image: radial-gradient(circle at 12px 18px, #ff5f57 5px, transparent 5px), radial-gradient(circle at 28px 18px, #febc2e 5px, transparent 5px), radial-gradient(circle at 44px 18px, #28c840 5px, transparent 5px)

docs/themes/navy/source/js/main.js

@@ -73,10 +73,7 @@
     const editorsEl = document.querySelector('#editors');
     editorsEl.classList.remove('hide');
     editorsEl.setAttribute('aria-hide', false);
-    editors.forEach(function(ed) {
+    editors.forEach(function(ed) { ed.resize(); });
-      ed.clearSelection();
-      ed.resize();
-    });
   }
 
   function getEditorTheme() {
@@ -96,15 +93,11 @@
       fontFamily: '"Source Code Pro", ui-monospace, Monaco, Menlo, Consolas, monospace',
       fontSize: '14px',
       showPrintMargin: false,
-      showGutter: false,
-      highlightActiveLine: false,
-      highlightSelectedWord: false,
       tabSize: 2,
       useSoftTabs: true,
       scrollPastEnd: 0.25
     });
     editor.getSession().setMode('ace/mode/' + lang);
-    editor.renderer.setShowGutter(false);
     editor.renderer.setScrollMargin(8, 8, 0, 0);
     return editor;
   }