fix(docs): unify playground pane padding and hold output on errors

Match editor inset to the output panel, drop Prism from output preview,
keep the last render while typing invalid template/context, and refresh
the README demo GIF.

docs/themes/navy/layout/partial/after_footer.swig

@@ -4,8 +4,6 @@
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min/mode-liquid.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min/mode-json.js"></script>
 <script>ace.config.set('basePath', 'https://cdn.jsdelivr.net/npm/[email protected]/src-min/');</script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-markup.min.js"></script>
 {% endif %}
 
 {{ js('js/main') }}

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

@@ -121,40 +121,3 @@ pre
       color: var(--highlight-bash-command)
     .operator
       color: var(--highlight-purple)
-
-// Prism (playground output) — uses palette tokens for light/dark
-code[class*="language-"]
-  color: var(--highlight-foreground)
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata
-    color: var(--highlight-comment)
-  .token.punctuation
-    color: var(--highlight-foreground)
-  .token.property,
-  .token.tag,
-  .token.boolean,
-  .token.number,
-  .token.constant,
-  .token.symbol,
-  .token.deleted
-    color: var(--highlight-red)
-  .token.attr-name,
-  .token.selector,
-  .token.string,
-  .token.char,
-  .token.builtin,
-  .token.inserted
-    color: var(--highlight-green)
-  .token.attr-value,
-  .token.regex,
-  .token.variable
-    color: var(--highlight-blue)
-  .token.operator,
-  .token.entity,
-  .token.url
-    color: var(--highlight-aqua)
-  .token.atrule,
-  .token.keyword
-    color: var(--highlight-purple)

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

@@ -1,6 +1,7 @@
 #playground
   --playground-gap: 12px
   --playground-radius: 10px
+  --playground-inset: 16px
   background: var(--color-content-bg)
   overflow: hidden
   box-shadow: var(--panel-shadow)
@@ -124,7 +125,7 @@
     gap: 10px
     flex-shrink: 0
     height: 36px
-    padding: 0 12px
+    padding: 0 var(--playground-inset)
     border-bottom: 1px solid var(--code-border)
     @media mq-mobile
       height: 32px
@@ -151,9 +152,32 @@
     min-width: 0
     display: flex
     flex-direction: column
-    overflow: visible
+    overflow: hidden
     background: var(--highlight-background)
 
+  .area-tpl .pane-body,
+  .area-data .pane-body
+    padding: var(--playground-inset)
+    box-sizing: border-box
+    @media mq-mobile
+      padding: 12px
+
+  .area-tpl .ace_gutter,
+  .area-data .ace_gutter
+    display: none !important
+    width: 0 !important
+    min-width: 0 !important
+
+  .area-tpl .ace_editor,
+  .area-data .ace_editor,
+  .area-tpl .ace_scroller,
+  .area-data .ace_scroller,
+  .area-tpl .ace_content,
+  .area-data .ace_content,
+  .area-tpl .ace_text-layer,
+  .area-data .ace_text-layer
+    background: transparent !important
+
   .editor
     flex: 1 1 auto
     min-height: 0
@@ -175,7 +199,7 @@
       min-height: 100%
       width: 100%
       box-sizing: border-box
-      padding: 16px
+      padding: var(--playground-inset)
       border: none
       box-shadow: none
       border-radius: 0
@@ -194,6 +218,7 @@
         font-family: font-mono
         font-size: 14px
         line-height: 1.55
+        color: var(--highlight-foreground)
         background: transparent
         padding: 0
         white-space: inherit

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

@@ -38,7 +38,7 @@
 
 (function() {
   // playground
-  /* global liquidjs, ace, Prism */
+  /* global liquidjs, ace */
   if (!/\/playground(?:\.html)?$/.test(location.pathname)) return;
   updateVersion(liquidjs.version);
   const engine = new liquidjs.Liquid({
@@ -86,6 +86,8 @@
 
   function applyEditorTheme(editor) {
     editor.setTheme(getEditorTheme());
+    editor.renderer.setPadding(0);
+    editor.container.style.background = 'transparent';
   }
 
   function createEditor(id, lang) {
@@ -103,7 +105,10 @@
     });
     editor.getSession().setMode('ace/mode/' + lang);
     editor.renderer.setShowGutter(false);
-    editor.renderer.setScrollMargin(8, 8, 0, 0);
+    if (editor.renderer.$gutter) {
+      editor.renderer.$gutter.style.display = 'none';
+    }
+    editor.renderer.setScrollMargin(0, 0, 0, 0);
     bindClipboard(editor);
     return editor;
   }
@@ -163,10 +168,6 @@
   function setPreview (value) {
     previewValue = value
     previewCode.textContent = value
-    if (window.Prism) {
-      delete previewCode.dataset.highlighted
-      window.Prism.highlightElement(previewCode)
-    }
   }
 
   async function update() {
@@ -177,7 +178,7 @@
       const html = await engine.parseAndRender(tpl, JSON.parse(data));
       setPreview(html);
     } catch (err) {
-      setPreview(err.stack);
+      // keep last successful output while template or context is invalid
     }
   }