claudecode-omc 5.6.5 → 5.6.7

package/.local/skills/h5-to-swiftui/assets/sample-h5-react/src/components/TrendChart.jsx

@@ -0,0 +1,159 @@
+import React, { useRef, useEffect } from 'react';
+import styles from './TrendChart.module.css';
+
+/**
+ * TrendChart — WebGL sparkline chart rendered on a <canvas> element.
+ *
+ * {/* TIER3: WebGL canvas — uses WebGLRenderingContext to draw a sparkline.
+ *    The rendering pipeline is entirely GPU-driven via custom GLSL shaders.
+ *    There is NO SwiftUI equivalent for arbitrary WebGL content.
+ *    SwiftUI port options:
+ *      (a) Replace with a native Swift Charts (iOS 16+) line mark — preferred
+ *          if data semantics are equivalent.
+ *      (b) Wrap in WKWebView if exact visual must be preserved (accepts
+ *          partial fidelity loss: no ProMotion, extra process, no Dynamic Type).
+ *    Risk triage MUST flag this surface and NOT silently generate wrong code.
+ * */
+export default function TrendChart({ data, label, color = '#0071e3' }) {
+  const canvasRef = useRef(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    // Attempt WebGL; fall back to 2D canvas if unavailable (e.g. jsdom in tests)
+    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+
+    if (!gl) {
+      // Graceful 2D fallback (no WebGL in test env)
+      const ctx = canvas.getContext('2d');
+      if (!ctx || !data?.length) return;
+      drawFallback2D(ctx, canvas, data, color);
+      return;
+    }
+
+    // WebGL sparkline — minimal shader pair
+    const vsSource = `
+      attribute vec2 a_position;
+      uniform vec2 u_resolution;
+      void main() {
+        vec2 clip = (a_position / u_resolution) * 2.0 - 1.0;
+        gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+      }
+    `;
+
+    const fsSource = `
+      precision mediump float;
+      uniform vec4 u_color;
+      void main() {
+        gl_FragColor = u_color;
+      }
+    `;
+
+    const vs = compileShader(gl, gl.VERTEX_SHADER, vsSource);
+    const fs = compileShader(gl, gl.FRAGMENT_SHADER, fsSource);
+    if (!vs || !fs) return;
+
+    const program = gl.createProgram();
+    gl.attachShader(program, vs);
+    gl.attachShader(program, fs);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;
+
+    gl.useProgram(program);
+
+    // Map data to canvas coordinates
+    const w = canvas.width;
+    const h = canvas.height;
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min || 1;
+    const pad = 8;
+
+    const vertices = new Float32Array(data.length * 2);
+    data.forEach((v, i) => {
+      vertices[i * 2] = pad + (i / (data.length - 1)) * (w - pad * 2);
+      vertices[i * 2 + 1] = h - pad - ((v - min) / range) * (h - pad * 2);
+    });
+
+    const buf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+
+    const posLoc = gl.getAttribLocation(program, 'a_position');
+    gl.enableVertexAttribArray(posLoc);
+    gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
+
+    const resLoc = gl.getUniformLocation(program, 'u_resolution');
+    gl.uniform2f(resLoc, w, h);
+
+    const colLoc = gl.getUniformLocation(program, 'u_color');
+    const [r, g, b] = hexToRgb(color);
+    gl.uniform4f(colLoc, r, g, b, 1.0);
+
+    gl.viewport(0, 0, w, h);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.lineWidth(2);
+    gl.drawArrays(gl.LINE_STRIP, 0, data.length);
+
+    return () => {
+      gl.deleteProgram(program);
+      gl.deleteBuffer(buf);
+    };
+  }, [data, color]);
+
+  return (
+    <div className={styles.chartWrapper}>
+      {label && <span className={styles.chartLabel}>{label}</span>}
+      <canvas
+        ref={canvasRef}
+        width={280}
+        height={80}
+        className={styles.canvas}
+        aria-label={`Trend chart: ${label}`}
+        role="img"
+      />
+    </div>
+  );
+}
+
+// ── helpers ──────────────────────────────────────────────────────────────────
+
+function compileShader(gl, type, source) {
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+}
+
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? [parseInt(result[1], 16) / 255, parseInt(result[2], 16) / 255, parseInt(result[3], 16) / 255]
+    : [0, 0.44, 0.89];
+}
+
+function drawFallback2D(ctx, canvas, data, color) {
+  const w = canvas.width;
+  const h = canvas.height;
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const pad = 8;
+
+  ctx.clearRect(0, 0, w, h);
+  ctx.beginPath();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 2;
+  data.forEach((v, i) => {
+    const x = pad + (i / (data.length - 1)) * (w - pad * 2);
+    const y = h - pad - ((v - min) / range) * (h - pad * 2);
+    i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+  });
+  ctx.stroke();
+}

package/.local/skills/h5-to-swiftui/assets/sample-h5-react/src/components/TrendChart.module.css

@@ -0,0 +1,21 @@
+.chartWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.chartLabel {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.canvas {
+  display: block;
+  border-radius: var(--radius-sm);
+  background-color: var(--color-bg-secondary);
+  width: 100%;
+  height: 80px;
+}

package/.local/skills/h5-to-swiftui/assets/sample-h5-react/src/main.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App.jsx';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

package/.local/skills/h5-to-swiftui/assets/sample-h5-react/src/screens/ArticleScreen.jsx

@@ -0,0 +1,182 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import styles from './ArticleScreen.module.css';
+
+export default function ArticleScreen() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [article, setArticle] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadArticle() {
+      setLoading(true);
+      setError(null);
+      try {
+        const res = await fetch(`/api/articles/${id}`);
+        if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+        const data = await res.json();
+        if (!cancelled) setArticle(data);
+      } catch (err) {
+        if (!cancelled) setError(err.message);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    loadArticle();
+    return () => { cancelled = true; };
+  }, [id]);
+
+  if (loading) {
+    return (
+      <div className={styles.stateContainer}>
+        <div className={styles.spinner} aria-label="Loading article" />
+        <p className={styles.stateText}>Loading article…</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={styles.stateContainer} role="alert">
+        <p className={styles.errorHeading}>Could not load article</p>
+        <p className={styles.stateText}>{error}</p>
+        <button className={styles.backButton} onClick={() => navigate('/')}>
+          ← Back to feed
+        </button>
+      </div>
+    );
+  }
+
+  if (!article) return null;
+
+  const {
+    title,
+    subtitle,
+    author,
+    publishedAt,
+    readingTime,
+    tag,
+    body,
+  } = article;
+
+  const formattedDate = new Date(publishedAt).toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  });
+
+  return (
+    <article className={styles.article}>
+      {/* ── Back navigation ───────────────────────────────────── */}
+      <div className={styles.topBar}>
+        <button className={styles.backButton} onClick={() => navigate('/')}>
+          ← Chronicle
+        </button>
+        <span className={styles.tagChip}>{tag}</span>
+      </div>
+
+      {/* ── Article header ────────────────────────────────────── */}
+      <header className={styles.header}>
+        <h1 className={styles.title}>{title}</h1>
+        {subtitle && (
+          <p className={styles.subtitle}>{subtitle}</p>
+        )}
+
+        <div className={styles.byline}>
+          <div className={styles.avatarLg} aria-hidden="true">
+            {author.name.slice(0, 1)}
+          </div>
+          <div className={styles.bylineText}>
+            <span className={styles.authorName}>{author.name}</span>
+            <span className={styles.authorMeta}>
+              {author.role} · <time dateTime={publishedAt}>{formattedDate}</time> · {readingTime} min read
+            </span>
+          </div>
+        </div>
+      </header>
+
+      {/* ── Body — text-heavy, multi-typographic-level region ─── */}
+      {/*
+       * TEXT REGION NOTE (skill stage 2):
+       * This body region is intentionally text-heavy with multiple typographic
+       * levels (h2 headlines, pull-quote, body paragraphs, code block, caption).
+       * The skill must apply layout-box IoU + token-color ΔE for region
+       * comparison, NOT glyph SSIM, because CoreText metrics diverge from
+       * WebKit at identical px declarations (see stack-detection.md reason 4).
+       */}
+      <div className={styles.body}>
+        {body.map((block, idx) => (
+          <ArticleBlock key={idx} block={block} />
+        ))}
+      </div>
+
+      {/* ── Article footer ────────────────────────────────────── */}
+      <footer className={styles.footer}>
+        <div className={styles.footerDivider} />
+        <div className={styles.authorCard}>
+          <div className={styles.avatarLg} aria-hidden="true">
+            {author.name.slice(0, 1)}
+          </div>
+          <div className={styles.authorCardText}>
+            <span className={styles.authorCardName}>{author.name}</span>
+            <span className={styles.authorCardRole}>{author.role}</span>
+            {author.bio && (
+              <p className={styles.authorBio}>{author.bio}</p>
+            )}
+          </div>
+        </div>
+      </footer>
+    </article>
+  );
+}
+
+// ── Block renderer ────────────────────────────────────────────────────────────
+
+function ArticleBlock({ block }) {
+  switch (block.type) {
+    case 'paragraph':
+      return <p className={styles.paragraph}>{block.text}</p>;
+
+    case 'heading':
+      return <h2 className={styles.heading2}>{block.text}</h2>;
+
+    case 'subheading':
+      return <h3 className={styles.heading3}>{block.text}</h3>;
+
+    case 'pullquote':
+      return (
+        <blockquote className={styles.pullquote}>
+          <p className={styles.pullquoteText}>{block.text}</p>
+          {block.attribution && (
+            <cite className={styles.pullquoteAttribution}>{block.attribution}</cite>
+          )}
+        </blockquote>
+      );
+
+    case 'code':
+      return (
+        <figure className={styles.codeFigure}>
+          {block.caption && (
+            <figcaption className={styles.codeCaption}>{block.caption}</figcaption>
+          )}
+          <pre className={styles.pre}>
+            <code className={styles.code}>{block.text}</code>
+          </pre>
+        </figure>
+      );
+
+    case 'caption':
+      return <p className={styles.caption}>{block.text}</p>;
+
+    case 'divider':
+      return <hr className={styles.divider} />;
+
+    default:
+      return null;
+  }
+}

package/.local/skills/h5-to-swiftui/assets/sample-h5-react/src/screens/ArticleScreen.module.css

@@ -0,0 +1,294 @@
+.article {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: var(--space-8) var(--space-6) var(--space-12);
+}
+
+/* ── Top bar ──────────────────────────────────────────────────── */
+.topBar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-8);
+}
+
+.backButton {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-accent);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-full);
+  border: 1px solid var(--color-border);
+  transition: background-color var(--duration-fast) var(--easing-default);
+}
+
+.backButton:hover {
+  background-color: var(--color-bg-secondary);
+}
+
+.tagChip {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-accent);
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  padding: var(--space-1) var(--space-3);
+  background-color: var(--color-bg-tag);
+  border-radius: var(--radius-full);
+}
+
+/* ── Header ───────────────────────────────────────────────────── */
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  margin-bottom: var(--space-10);
+  padding-bottom: var(--space-8);
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.title {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-display);
+  font-weight: var(--font-weight-heavy);
+  color: var(--color-text-primary);
+  line-height: var(--line-height-tight);
+  letter-spacing: -1.5px;
+}
+
+.subtitle {
+  font-size: var(--font-size-subhead);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-relaxed);
+}
+
+.byline {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.avatarLg {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-full);
+  background-color: var(--color-accent);
+  color: var(--color-text-on-accent);
+  font-size: var(--font-size-body-lg);
+  font-weight: var(--font-weight-bold);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.bylineText {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.authorName {
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.authorMeta {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-caption);
+}
+
+/* ── Body ─────────────────────────────────────────────────────── */
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+/* Paragraph — main body text */
+.paragraph {
+  font-size: var(--font-size-body-lg);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-text-primary);
+  line-height: var(--line-height-relaxed);
+}
+
+/* Section heading */
+.heading2 {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-title);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  line-height: var(--line-height-tight);
+  letter-spacing: -0.8px;
+  margin-top: var(--space-4);
+}
+
+/* Sub-section heading */
+.heading3 {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-headline);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  line-height: var(--line-height-tight);
+  letter-spacing: -0.4px;
+  margin-top: var(--space-2);
+}
+
+/* Pull-quote */
+.pullquote {
+  border-left: 3px solid var(--color-accent);
+  padding: var(--space-4) var(--space-6);
+  background-color: var(--color-bg-secondary);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.pullquoteText {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-subhead);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  line-height: var(--line-height-relaxed);
+  font-style: italic;
+}
+
+.pullquoteAttribution {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  font-style: normal;
+}
+
+/* Code block */
+.codeFigure {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.codeCaption {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.pre {
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-5);
+  overflow-x: auto;
+}
+
+.code {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-primary);
+  line-height: var(--line-height-relaxed);
+  white-space: pre;
+}
+
+/* Caption / footnote */
+.caption {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-caption);
+  line-height: var(--line-height-normal);
+  text-align: center;
+}
+
+/* Divider */
+.divider {
+  border: none;
+  border-top: 1px solid var(--color-divider);
+  margin: var(--space-2) 0;
+}
+
+/* ── Footer / author card ─────────────────────────────────────── */
+.footer {
+  margin-top: var(--space-12);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.footerDivider {
+  height: 1px;
+  background-color: var(--color-divider);
+}
+
+.authorCard {
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-4);
+  align-items: flex-start;
+  padding: var(--space-5);
+  background-color: var(--color-bg-secondary);
+  border-radius: var(--radius-lg);
+}
+
+.authorCardText {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.authorCardName {
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+}
+
+.authorCardRole {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.authorBio {
+  font-size: var(--font-size-body);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-normal);
+  margin-top: var(--space-2);
+}
+
+/* ── Loading / error states ───────────────────────────────────── */
+.stateContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-12) var(--space-6);
+}
+
+.spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--color-border);
+  border-top-color: var(--color-accent);
+  border-radius: var(--radius-full);
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.stateText {
+  font-size: var(--font-size-body);
+  color: var(--color-text-secondary);
+  text-align: center;
+}
+
+.errorHeading {
+  font-size: var(--font-size-headline);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-danger);
+}