claudecode-omc 5.6.6 → 5.6.8

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import styles from './ArticleCard.module.css';
+
+export default function ArticleCard({ article }) {
+  const navigate = useNavigate();
+  const { id, title, summary, author, publishedAt, readingTime, tag, imageAlt } = article;
+
+  const formattedDate = new Date(publishedAt).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+
+  return (
+    <article
+      className={styles.card}
+      onClick={() => navigate(`/article/${id}`)}
+      role="button"
+      tabIndex={0}
+      onKeyDown={e => e.key === 'Enter' && navigate(`/article/${id}`)}
+    >
+      <div className={styles.imagePlaceholder} aria-label={imageAlt}>
+        <span className={styles.imagePlaceholderText}>{imageAlt}</span>
+      </div>
+
+      <div className={styles.body}>
+        <div className={styles.meta}>
+          <span className={styles.tag}>{tag}</span>
+          <span className={styles.readingTime}>{readingTime} min read</span>
+        </div>
+
+        <h2 className={styles.title}>{title}</h2>
+        <p className={styles.summary}>{summary}</p>
+
+        <div className={styles.footer}>
+          <div className={styles.authorArea}>
+            <div className={styles.avatar} aria-hidden="true">
+              {author.name.slice(0, 1)}
+            </div>
+            <div className={styles.authorInfo}>
+              <span className={styles.authorName}>{author.name}</span>
+              <span className={styles.authorRole}>{author.role}</span>
+            </div>
+          </div>
+          <time className={styles.date} dateTime={publishedAt}>
+            {formattedDate}
+          </time>
+        </div>
+      </div>
+    </article>
+  );
+}

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

@@ -0,0 +1,139 @@
+.card {
+  background-color: var(--color-bg-card);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+  cursor: pointer;
+  transition: box-shadow var(--duration-normal) var(--easing-default),
+              transform var(--duration-normal) var(--easing-default);
+  display: flex;
+  flex-direction: column;
+}
+
+.card:hover {
+  box-shadow: var(--shadow-elevated);
+  transform: translateY(-2px);
+}
+
+.card:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.imagePlaceholder {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background-color: var(--color-bg-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.imagePlaceholderText {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-caption);
+  text-align: center;
+  padding: var(--space-2);
+}
+
+.body {
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  flex-grow: 1;
+}
+
+.meta {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.tag {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-accent);
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+}
+
+.readingTime {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-caption);
+}
+
+.title {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-subhead);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  line-height: var(--line-height-tight);
+  letter-spacing: -0.3px;
+}
+
+.summary {
+  font-size: var(--font-size-body);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-normal);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.footer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: auto;
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--color-divider);
+}
+
+.authorArea {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-full);
+  background-color: var(--color-accent);
+  color: var(--color-text-on-accent);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.authorInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.authorName {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.authorRole {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-caption);
+}
+
+.date {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-caption);
+}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import styles from './NavBar.module.css';
+
+const TABS = [
+  { id: 'feed', label: 'Feed', path: '/' },
+];
+
+export default function NavBar({ activeTab, onTabChange }) {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  function handleTab(tab) {
+    onTabChange(tab.id);
+    navigate(tab.path);
+  }
+
+  return (
+    <header className={styles.navbar}>
+      <div className={styles.logoArea}>
+        <span className={styles.logoMark}>C</span>
+        <span className={styles.logoText}>Chronicle</span>
+      </div>
+      <nav className={styles.tabs}>
+        {TABS.map(tab => (
+          <button
+            key={tab.id}
+            className={`${styles.tab} ${location.pathname === tab.path ? styles.tabActive : ''}`}
+            onClick={() => handleTab(tab)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </nav>
+    </header>
+  );
+}

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

@@ -0,0 +1,72 @@
+.navbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-6);
+  background-color: var(--color-bg-primary);
+  border-bottom: 1px solid var(--color-border);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.logoArea {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.logoMark {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  background-color: var(--color-accent);
+  color: var(--color-text-on-accent);
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logoText {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-headline);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  letter-spacing: -0.5px;
+}
+
+.tabs {
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-1);
+}
+
+.tab {
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-full);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+  transition: background-color var(--duration-fast) var(--easing-default),
+              color var(--duration-fast) var(--easing-default);
+}
+
+.tab:hover {
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+}
+
+.tabActive {
+  background-color: var(--color-accent);
+  color: var(--color-text-on-accent);
+}
+
+.tabActive:hover {
+  background-color: var(--color-accent-hover);
+  color: var(--color-text-on-accent);
+}

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import styles from './TagCloud.module.css';
+
+/**
+ * TagCloud — a flex-wrap tag gallery with non-uniform item widths.
+ *
+ * CSS uses `flex-wrap: wrap` with variable-length tag labels.
+ * This pattern has NO stock SwiftUI equivalent:
+ *   "flex-wrap: wrap → HStack never wraps; LazyHGrid/LazyVGrid are scroll
+ *    containers, not inline wrapping layouts" (css-to-swiftui-map.md)
+ *
+ * CUSTOM-LAYOUT: flex-wrap:wrap — the variable-width tags must reflow onto
+ * multiple rows at arbitrary breakpoints determined by available width, which
+ * HStack cannot do. SwiftUI port requires the FlowLayout custom Layout protocol.
+ */
+export default function TagCloud({ tags, onTagClick, selectedTag }) {
+  return (
+    <div className={styles.cloud}>
+      {tags.map(tag => (
+        <button
+          key={tag}
+          className={`${styles.tag} ${selectedTag === tag ? styles.tagSelected : ''}`}
+          onClick={() => onTagClick(tag === selectedTag ? null : tag)}
+        >
+          {tag}
+        </button>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,50 @@
+/* CUSTOM-LAYOUT: flex-wrap:wrap
+ *
+ * flex-wrap: wrap causes tags with non-uniform widths to reflow onto multiple
+ * rows. The break points are data-driven (label length) and width-driven
+ * (viewport). HStack in SwiftUI never wraps — this MUST use a custom Layout
+ * (FlowLayout) implementing the Layout protocol (iOS 16+).
+ *
+ * Trigger quote from css-to-swiftui-map.md:
+ *   "flex-wrap: wrap → Custom Layout protocol (iOS 16+) — FlowLayout
+ *    No LazyHGrid/LazyVGrid equivalent for true wrapping"
+ */
+.cloud {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap; /* CUSTOM-LAYOUT: flex-wrap:wrap */
+  gap: var(--space-2) var(--space-2);
+  padding: var(--space-4) 0;
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-tag);
+  color: var(--color-text-accent);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+  border: 1px solid transparent;
+  transition: background-color var(--duration-fast) var(--easing-default),
+              border-color var(--duration-fast) var(--easing-default);
+  cursor: pointer;
+}
+
+.tag:hover {
+  background-color: var(--color-bg-secondary);
+  border-color: var(--color-border);
+}
+
+.tagSelected {
+  background-color: var(--color-accent);
+  color: var(--color-text-on-accent);
+  border-color: var(--color-accent);
+}
+
+.tagSelected:hover {
+  background-color: var(--color-accent-hover);
+  border-color: var(--color-accent-hover);
+}

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>
+);