claudecode-omc 5.6.5 → 5.6.7

package/.local/skills/h5-to-swiftui/assets/sample-h5-vanilla/screens/detail.js

@@ -0,0 +1,164 @@
+/* ── Detail screen ───────────────────────────────────────────────────────── *
+ * Route: #/detail?id=<N>
+ * Shows: task card with image placeholder, metadata chips, description,
+ *        and a canvas-based progress sparkline (Tier-3 surface).
+ *
+ * The sparkline uses <canvas> with plain 2D context drawing.
+ * Stage 1 route inventory will capture this screen.
+ * Stage 3 NavigationStack will map it as a pushed detail view.
+ * Stage risk-triage.json will flag the canvas section as Tier-3.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+/* global TASKS */
+
+function renderDetail(params) {
+  'use strict';
+
+  const id   = parseInt(params.id, 10);
+  const task = TASKS.find(t => t.id === id);
+
+  const screen = document.createElement('section');
+  screen.className = 'screen';
+  screen.setAttribute('aria-label', 'Task detail');
+
+  if (!task) {
+    screen.innerHTML = `
+      <a href="#/list" class="detail-back">← Back to list</a>
+      <div class="empty-state">
+        <p>Task #${id} not found.</p>
+        <a href="#/list" class="btn btn-secondary">Go to list</a>
+      </div>
+    `;
+    return screen;
+  }
+
+  // ── Static markup for Tier-1 surfaces ──
+  screen.innerHTML = `
+    <a href="#/list" class="detail-back">← Back to list</a>
+
+    <article class="detail-card">
+      <!-- Image placeholder — maps to AsyncImage in SwiftUI -->
+      <div class="detail-image-placeholder" aria-label="Task cover image placeholder">
+        Cover image
+      </div>
+
+      <div class="detail-body">
+        <h1 class="detail-title">${task.title}</h1>
+
+        <div class="detail-meta-row">
+          <span class="detail-chip">${task.category}</span>
+          <span class="detail-chip priority-chip" data-priority="${task.priority}">${task.priority} priority</span>
+          <span class="detail-chip">${task.done ? '✓ Done' : 'Pending'}</span>
+          <span class="detail-chip">Due ${task.dueDate}</span>
+        </div>
+
+        <p class="detail-desc">${task.description}</p>
+      </div>
+    </article>
+
+    <!-- TIER3: canvas custom drawing -->
+    <div class="sparkline-section">
+      <h3>Progress history (last 8 entries)</h3>
+      <canvas id="sparkline-canvas"
+              width="600"
+              height="80"
+              aria-label="Progress sparkline chart"
+              role="img">
+        Progress values: ${task.progress.join(', ')}
+      </canvas>
+    </div>
+
+    <div style="display:flex; gap:var(--space-3); flex-wrap:wrap;">
+      <a href="#/list" class="btn btn-secondary">← All tasks</a>
+      <a href="#/home" class="btn btn-secondary">Home</a>
+    </div>
+  `;
+
+  // ── Canvas sparkline — Tier-3 surface ─────────────────────────────────────
+  // This tiny canvas draw is the explicit Tier-3 region.
+  // risk-triage.json should flag #sparkline-canvas as requiring human review
+  // before any SwiftUI port attempt (Charts.framework vs custom Path).
+  // <!-- TIER3: canvas custom drawing -->
+  drawSparkline(screen.querySelector('#sparkline-canvas'), task.progress);
+
+  return screen;
+}
+
+/**
+ * Draw a minimal line sparkline onto the given canvas element.
+ * Uses only the 2D canvas API — no library.
+ *
+ * @param {HTMLCanvasElement} canvas
+ * @param {number[]} values  Array of progress percentages (0–100)
+ */
+function drawSparkline(canvas, values) {
+  'use strict';
+
+  if (!canvas || !canvas.getContext) return;
+
+  const ctx    = canvas.getContext('2d');
+  const dpr    = window.devicePixelRatio || 1;
+  const w      = canvas.clientWidth  || 600;
+  const h      = canvas.clientHeight || 80;
+
+  // Resize for device pixel ratio
+  canvas.width  = w * dpr;
+  canvas.height = h * dpr;
+  ctx.scale(dpr, dpr);
+
+  const pad    = 12;
+  const min    = 0;
+  const max    = 100;
+  const rangeX = w - pad * 2;
+  const rangeY = h - pad * 2;
+
+  // Map a value to canvas coordinates
+  function xAt(i) { return pad + (i / (values.length - 1)) * rangeX; }
+  function yAt(v) { return pad + (1 - (v - min) / (max - min)) * rangeY; }
+
+  // Detect dark mode for color
+  const dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const lineColor = dark ? '#0a84ff' : '#007aff';
+  const fillFrom  = dark ? 'rgba(10,132,255,0.25)' : 'rgba(0,122,255,0.12)';
+  const dotColor  = dark ? '#ffffff' : '#007aff';
+
+  // Area fill
+  ctx.beginPath();
+  ctx.moveTo(xAt(0), yAt(values[0]));
+  for (let i = 1; i < values.length; i++) {
+    ctx.lineTo(xAt(i), yAt(values[i]));
+  }
+  ctx.lineTo(xAt(values.length - 1), h - pad);
+  ctx.lineTo(xAt(0), h - pad);
+  ctx.closePath();
+  ctx.fillStyle = fillFrom;
+  ctx.fill();
+
+  // Line stroke
+  ctx.beginPath();
+  ctx.moveTo(xAt(0), yAt(values[0]));
+  for (let i = 1; i < values.length; i++) {
+    ctx.lineTo(xAt(i), yAt(values[i]));
+  }
+  ctx.strokeStyle = lineColor;
+  ctx.lineWidth   = 2;
+  ctx.lineJoin    = 'round';
+  ctx.stroke();
+
+  // Data point dots
+  ctx.fillStyle = dotColor;
+  values.forEach((v, i) => {
+    ctx.beginPath();
+    ctx.arc(xAt(i), yAt(v), 3, 0, Math.PI * 2);
+    ctx.fill();
+  });
+
+  // Last value label
+  const lastX = xAt(values.length - 1);
+  const lastY = yAt(values[values.length - 1]);
+  ctx.fillStyle   = lineColor;
+  ctx.font        = `bold ${11 * dpr / dpr}px -apple-system, sans-serif`;
+  ctx.textAlign   = 'right';
+  ctx.textBaseline = 'bottom';
+  ctx.fillText(`${values[values.length - 1]}%`, lastX - 4, lastY - 4);
+}

package/.local/skills/h5-to-swiftui/assets/sample-h5-vanilla/screens/home.js

@@ -0,0 +1,53 @@
+/* ── Home screen ─────────────────────────────────────────────────────────── *
+ * Route: #/home
+ * Shows: hero text, summary stats derived from TASKS, two CTA buttons.
+ * Tier-1 surface: text, buttons, stat cards, flex layout.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+/* global TASKS */
+
+function renderHome(/* params */) {
+  'use strict';
+
+  const total    = TASKS.length;
+  const done     = TASKS.filter(t => t.done).length;
+  const pending  = total - done;
+  const highPri  = TASKS.filter(t => t.priority === 'high' && !t.done).length;
+
+  const screen = document.createElement('section');
+  screen.className = 'screen';
+  screen.setAttribute('aria-label', 'Home');
+
+  screen.innerHTML = `
+    <div class="home-hero">
+      <h1>TaskFlow</h1>
+      <p>A simple task manager — open <code>index.html</code> directly, no build required.</p>
+    </div>
+
+    <div class="home-stats" role="list" aria-label="Summary stats">
+      <div class="stat-card" role="listitem">
+        <span class="stat-value">${total}</span>
+        <span class="stat-label">Total</span>
+      </div>
+      <div class="stat-card" role="listitem">
+        <span class="stat-value">${pending}</span>
+        <span class="stat-label">Pending</span>
+      </div>
+      <div class="stat-card" role="listitem">
+        <span class="stat-value">${done}</span>
+        <span class="stat-label">Done</span>
+      </div>
+      <div class="stat-card" role="listitem">
+        <span class="stat-value">${highPri}</span>
+        <span class="stat-label">High priority</span>
+      </div>
+    </div>
+
+    <div class="home-cta">
+      <a href="#/list" class="btn btn-primary">View Tasks</a>
+      <a href="#/detail?id=1" class="btn btn-secondary">Sample Detail</a>
+    </div>
+  `;
+
+  return screen;
+}

package/.local/skills/h5-to-swiftui/assets/sample-h5-vanilla/screens/list.js

@@ -0,0 +1,87 @@
+/* ── List screen ─────────────────────────────────────────────────────────── *
+ * Route: #/list
+ * Shows: filterable task list loaded from window.TASKS (in-file JS array).
+ * Tier-1 surface: list rows, badges, flex layout, text.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+/* global TASKS */
+
+function renderList(/* params */) {
+  'use strict';
+
+  const screen = document.createElement('section');
+  screen.className = 'screen';
+  screen.setAttribute('aria-label', 'Task list');
+
+  // ── State ──
+  let filter = 'all'; // 'all' | 'pending' | 'done'
+
+  function filteredTasks() {
+    if (filter === 'pending') return TASKS.filter(t => !t.done);
+    if (filter === 'done')    return TASKS.filter(t => t.done);
+    return TASKS;
+  }
+
+  // ── Render task rows ──
+  function buildTaskList() {
+    const tasks = filteredTasks();
+
+    if (tasks.length === 0) {
+      return `<div class="empty-state"><p>No tasks in this filter.</p></div>`;
+    }
+
+    const rows = tasks.map(task => `
+      <li class="task-row ${task.done ? 'task-done' : ''}"
+          data-id="${task.id}"
+          role="button"
+          tabindex="0"
+          aria-label="${task.title}, ${task.priority} priority, ${task.done ? 'done' : 'pending'}">
+        <span class="task-dot priority-${task.priority}" aria-hidden="true"></span>
+        <div class="task-info">
+          <span class="task-title">${task.title}</span>
+          <span class="task-meta">${task.category} · Due ${task.dueDate}</span>
+        </div>
+        <span class="task-badge">${task.priority}</span>
+      </li>
+    `).join('');
+
+    return `<ul class="task-list" aria-label="Tasks">${rows}</ul>`;
+  }
+
+  // ── Full render ──
+  function render() {
+    screen.innerHTML = `
+      <div class="list-header">
+        <h2>Tasks</h2>
+        <div style="display:flex; gap:var(--space-2)">
+          <button class="btn btn-secondary ${filter === 'all'     ? 'active' : ''}" data-filter="all">All</button>
+          <button class="btn btn-secondary ${filter === 'pending' ? 'active' : ''}" data-filter="pending">Pending</button>
+          <button class="btn btn-secondary ${filter === 'done'    ? 'active' : ''}" data-filter="done">Done</button>
+        </div>
+      </div>
+      ${buildTaskList()}
+    `;
+
+    // Bind filter buttons
+    screen.querySelectorAll('[data-filter]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        filter = btn.dataset.filter;
+        render();
+      });
+    });
+
+    // Bind task rows → navigate to detail
+    screen.querySelectorAll('.task-row').forEach(row => {
+      function goDetail() {
+        window.location.hash = `#/detail?id=${row.dataset.id}`;
+      }
+      row.addEventListener('click', goDetail);
+      row.addEventListener('keydown', e => {
+        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); goDetail(); }
+      });
+    });
+  }
+
+  render();
+  return screen;
+}

package/.local/skills/h5-to-swiftui/assets/sample-h5-vanilla/styles/app.css

@@ -0,0 +1,342 @@
+/* ── Global reset & base ─────────────────────────────────────────────────── */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  font-size: var(--font-size-body);
+  line-height: var(--line-height-normal);
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  min-height: 100vh;
+}
+
+/* ── Nav bar ─────────────────────────────────────────────────────────────── */
+
+#nav-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: 0 var(--space-6);
+  height: var(--nav-height);
+  background-color: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.nav-link {
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.nav-link:hover {
+  color: var(--color-primary);
+  background-color: var(--color-surface-alt);
+}
+
+.nav-link.active {
+  color: var(--color-primary);
+  font-weight: var(--font-weight-bold);
+}
+
+/* ── Screen root ─────────────────────────────────────────────────────────── */
+
+#screen-root {
+  padding: var(--space-6);
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+/* ── Screen transition (simple fade) ────────────────────────────────────── */
+
+.screen {
+  animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Home screen ─────────────────────────────────────────────────────────── */
+
+.home-hero {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  margin-bottom: var(--space-8);
+}
+
+.home-hero h1 {
+  font-size: var(--font-size-title);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+}
+
+.home-hero p {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-body);
+}
+
+.home-stats {
+  display: flex;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+  margin-bottom: var(--space-8);
+}
+
+.stat-card {
+  flex: 1 1 120px;
+  background-color: var(--color-surface);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+  box-shadow: var(--shadow-card);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.stat-card .stat-value {
+  font-size: var(--font-size-title);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-primary);
+}
+
+.stat-card .stat-label {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.home-cta {
+  display: flex;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+
+/* ── Buttons ─────────────────────────────────────────────────────────────── */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-3) var(--space-5);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  border: none;
+  text-decoration: none;
+  transition: opacity 0.15s, transform 0.1s;
+}
+
+.btn:active { transform: scale(0.97); }
+
+.btn-primary {
+  background-color: var(--color-primary);
+  color: #ffffff;
+}
+
+.btn-primary:hover { background-color: var(--color-primary-dark); }
+
+.btn-secondary {
+  background-color: var(--color-surface-alt);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+}
+
+.btn-secondary:hover { background-color: var(--color-border); }
+
+/* ── List screen ─────────────────────────────────────────────────────────── */
+
+.list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-6);
+}
+
+.list-header h2 {
+  font-size: var(--font-size-heading);
+  font-weight: var(--font-weight-bold);
+}
+
+.task-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  list-style: none;
+}
+
+.task-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  background-color: var(--color-surface);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+  box-shadow: var(--shadow-card);
+  cursor: pointer;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.task-row:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
+}
+
+.task-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+
+.task-dot.priority-high   { background-color: var(--color-danger); }
+.task-dot.priority-medium { background-color: #ff9f0a; }
+.task-dot.priority-low    { background-color: var(--color-success); }
+
+.task-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.task-title {
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-medium);
+}
+
+.task-meta {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+}
+
+.task-done .task-title {
+  text-decoration: line-through;
+  color: var(--color-text-secondary);
+}
+
+.task-badge {
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-medium);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-full);
+  background-color: var(--color-surface-alt);
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+}
+
+/* ── Detail screen ───────────────────────────────────────────────────────── */
+
+.detail-back {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--color-primary);
+  font-size: var(--font-size-body);
+  text-decoration: none;
+  margin-bottom: var(--space-6);
+}
+
+.detail-card {
+  background-color: var(--color-surface);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow-card);
+  margin-bottom: var(--space-6);
+}
+
+.detail-image-placeholder {
+  width: 100%;
+  height: 180px;
+  background-color: var(--color-surface-alt);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-caption);
+}
+
+.detail-body {
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.detail-title {
+  font-size: var(--font-size-heading);
+  font-weight: var(--font-weight-bold);
+}
+
+.detail-desc {
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-normal);
+}
+
+.detail-meta-row {
+  display: flex;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+
+.detail-chip {
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-medium);
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-full);
+  background-color: var(--color-surface-alt);
+  color: var(--color-text);
+}
+
+/* ── Canvas sparkline section ────────────────────────────────────────────── */
+
+.sparkline-section {
+  margin-bottom: var(--space-6);
+}
+
+.sparkline-section h3 {
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-medium);
+  margin-bottom: var(--space-3);
+  color: var(--color-text-secondary);
+}
+
+/* TIER3: canvas custom drawing */
+#sparkline-canvas {
+  display: block;
+  width: 100%;
+  height: 80px;
+  border-radius: var(--radius-md);
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+}
+
+/* ── Empty state ─────────────────────────────────────────────────────────── */
+
+.empty-state {
+  text-align: center;
+  padding: var(--space-12) var(--space-6);
+  color: var(--color-text-secondary);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.empty-state p {
+  font-size: var(--font-size-body);
+}