fix(ui): readable date-time trigger, showcase code panel, release ui 0.8.88

- DatePicker trigger shows the value formatted in the component locale
  ("Oct 2, 2026 · 9:30 AM", "Jul 15, 2026"); the hidden input still submits
  the ISO value.
- Showcase playground code panel: the reactive runtime read "{...}" in the
  rewritten code as interpolations and blanked every object in array props.
  Braces are now written as their own spans, like the server-rendered code.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

examples/component-showcase/public/playground.js

@@ -169,11 +169,33 @@
     const mount = publicTag ? [] : [`data-component="${sourceAttribute(component)}"`];
     const lines = [...mount, ...attributes].map((attribute) => `  ${attribute}`).join("\n");
     const opening = lines ? `<${tag}\n${lines}` : `<${tag}`;
-    code.textContent = hasSlot
+    let source = hasSlot
       ? `${opening}>\n  <!-- Add slot content here -->\n</${tag}>`
       : `${opening}\n/>`;
-    if (declarations.length) code.textContent = `page ${component.replace(/[^A-Za-z0-9]/g, "")}Example {\n${declarations.join("\n")}\n  view {\n${code.textContent}\n  }\n}`;
+    if (declarations.length) source = `page ${component.replace(/[^A-Za-z0-9]/g, "")}Example {\n${declarations.join("\n")}\n  view {\n${source}\n  }\n}`;
+    writeCode(code, source);
+  }
 
+  /*
+   * The reactive runtime treats "{expr}" inside a text node as an
+   * interpolation, so a sample like { "label": "Mon" } written with
+   * textContent was evaluated and rendered as an empty string. Putting each
+   * brace in its own <span> means no single text node ever holds a {...}
+   * pair -- the same markup the generator uses for the server-rendered code.
+   */
+  function writeCode(code, source) {
+    const fragment = document.createDocumentFragment();
+    for (const part of source.split(/([{}])/)) {
+      if (!part) continue;
+      if (part === "{" || part === "}") {
+        const brace = document.createElement("span");
+        brace.textContent = part;
+        fragment.append(brace);
+      } else {
+        fragment.append(document.createTextNode(part));
+      }
+    }
+    code.replaceChildren(fragment);
   }
 
   function valuesFrom(form) {