feat(example): sample image picker, calibration from test_cases, and UI tweaks

- Add sample thumbnails (cam1/cam2) with per-camera calibration from test_cases.json
- Replace centerX/centerY with fx/fy/cx/cy; add rectilinear, original, cylindrical presets
- Add loadRequestId so output canvas stays in sync when switching samples
- Sidebar toggle: "Settings" label, SVG icon, layout and hover styles
- Sample thumb grid and thumb styles in fisheye-demo.styles
- Renderer: await onSubmittedWorkDone before closing frame
- Remove example/public/test.jpg

Author: GyeongHoKim

example/public/samples/cam1_01.jpg

@@ -1,7 +1,7 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-const SIDEBAR_TOGGLE_WIDTH = 48;
+const SIDEBAR_TOGGLE_WIDTH = 52;
 
 @customElement("demo-sidebar")
 export class DemoSidebar extends LitElement {
@@ -15,27 +15,39 @@ export class DemoSidebar extends LitElement {
     .sidebar-toggle {
       width: 100%;
       min-height: 3rem;
-      padding: 0;
+      padding: 0 0.25rem;
       background: #0f3460;
       border: none;
       border-right: 1px solid #1a3a5c;
       color: #00d9ff;
-      font-size: 1rem;
+      font-size: 0.8125rem;
       cursor: pointer;
       display: flex;
+      flex-direction: column;
       align-items: center;
       justify-content: center;
-      transition: background 0.15s;
+      gap: 0.25rem;
+      transition: background 0.15s, color 0.15s;
     }
 
     .sidebar-toggle:hover {
       background: #1a3a5c;
+      color: #fff;
     }
 
     .sidebar-toggle .icon {
+      width: 20px;
+      height: 20px;
+      flex-shrink: 0;
       transition: transform 0.25s ease;
     }
 
+    .sidebar-toggle .label {
+      line-height: 1.1;
+      font-weight: 500;
+      letter-spacing: 0.02em;
+    }
+
     .sidebar-toggle[aria-expanded="true"] .icon {
       transform: rotate(180deg);
     }
@@ -46,12 +58,19 @@ export class DemoSidebar extends LitElement {
       }
 
       .sidebar-toggle {
+        flex-direction: row;
         width: 100%;
         height: ${SIDEBAR_TOGGLE_WIDTH}px;
+        padding: 0 0.75rem;
         border-right: none;
         border-bottom: 1px solid #1a3a5c;
       }
 
+      .sidebar-toggle .label {
+        flex: 1;
+        text-align: left;
+      }
+
       .sidebar-toggle[aria-expanded="true"] .icon {
         transform: rotate(0deg);
       }
@@ -68,16 +87,24 @@ export class DemoSidebar extends LitElement {
     this.dispatchEvent(new CustomEvent("toggle", { bubbles: true, composed: true }));
   }
 
+  private get toggleLabel(): string {
+    return this.open ? "Close settings" : "Open settings";
+  }
+
   render() {
     return html`
       <button
         type="button"
         class="sidebar-toggle"
         @click=${this.toggle}
         aria-expanded=${this.open}
-        aria-label=${this.open ? "Close sidebar" : "Open sidebar"}
+        aria-label=${this.toggleLabel}
+        title=${this.toggleLabel}
       >
-        <span class="icon" aria-hidden="true">▶</span>
+        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+          <path d="M9 18l6-6-6-6" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        <span class="label">Settings</span>
       </button>
     `;
   }

example/public/samples/cam1_02.jpg

@@ -100,6 +100,56 @@ export const fisheyeDemoStyles = css`
     cursor: pointer;
   }
 
+  .sidebar-form .sample-thumbnails {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .sidebar-form .sample-thumb {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.35rem;
+    background: #0f3460;
+    border: 2px solid #1a3a5c;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .sidebar-form .sample-thumb:hover {
+    border-color: #00d9ff;
+    background: #1a3a5c;
+  }
+
+  .sidebar-form .sample-thumb.active {
+    border-color: #00d9ff;
+    background: rgba(0, 217, 255, 0.15);
+  }
+
+  .sidebar-form .sample-thumb img {
+    width: 100%;
+    aspect-ratio: 4/3;
+    object-fit: cover;
+    border-radius: 4px;
+  }
+
+  .sidebar-form .sample-thumb span {
+    font-size: 0.65rem;
+    color: #8892b0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  .sidebar-form .sample-thumb.active span {
+    color: #00d9ff;
+  }
+
   .sidebar-form .file-input-wrapper {
     position: relative;
   }