claudecode-omc 5.6.6 → 5.6.8

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

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

@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import ArticleCard from '../components/ArticleCard.jsx';
+import TagCloud from '../components/TagCloud.jsx';
+import TrendChart from '../components/TrendChart.jsx';
+import styles from './FeedScreen.module.css';
+
+const ALL_TAGS = [
+  'Technology',
+  'Design',
+  'Engineering',
+  'Swift',
+  'SwiftUI',
+  'Machine Learning',
+  'Web Performance',
+  'Accessibility',
+  'Open Source',
+  'Developer Experience',
+  'iOS 18',
+  'WWDC',
+];
+
+const TREND_DATA = [12, 19, 8, 24, 17, 31, 28, 35, 22, 40, 38, 45];
+
+export default function FeedScreen() {
+  const [articles, setArticles] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [selectedTag, setSelectedTag] = useState(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadFeed() {
+      setLoading(true);
+      setError(null);
+      try {
+        // Fetch from mock API endpoint (relative URL; real server returns JSON)
+        const res = await fetch('/api/articles');
+        if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+        const data = await res.json();
+        if (!cancelled) setArticles(data.articles ?? []);
+      } catch (err) {
+        if (!cancelled) setError(err.message);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    loadFeed();
+    return () => { cancelled = true; };
+  }, []);
+
+  const filtered = selectedTag
+    ? articles.filter(a => a.tag === selectedTag)
+    : articles;
+
+  return (
+    <div className={styles.screen}>
+      {/* ── Hero header ───────────────────────────────────────── */}
+      <section className={styles.hero}>
+        <div className={styles.heroInner}>
+          <p className={styles.heroEyebrow}>Daily Edition — May 2026</p>
+          <h1 className={styles.heroTitle}>The Chronicle</h1>
+          <p className={styles.heroSubtitle}>
+            Thoughtful writing on technology, design, and the craft of building software.
+          </p>
+        </div>
+      </section>
+
+      <div className={styles.content}>
+        {/* ── Trend chart — TIER3 surface ───────────────────── */}
+        {/* TIER3: WebGL canvas chart via TrendChart component.
+            This component uses WebGLRenderingContext (GLSL shaders) for
+            GPU-accelerated sparkline rendering. It cannot be transpiled to
+            SwiftUI; must be replaced with Swift Charts LineChart or WKWebView.
+            See TrendChart.jsx for full TIER3 annotation. */}
+        <section className={styles.trendSection}>
+          <TrendChart
+            data={TREND_DATA}
+            label="Reader engagement — last 12 weeks"
+            color="var(--color-accent)"
+          />
+        </section>
+
+        {/* ── Tag filter ────────────────────────────────────── */}
+        <section className={styles.tagsSection}>
+          <h2 className={styles.sectionHeading}>Topics</h2>
+          {/* CUSTOM-LAYOUT: flex-wrap:wrap (see TagCloud.module.css) */}
+          <TagCloud
+            tags={ALL_TAGS}
+            selectedTag={selectedTag}
+            onTagClick={setSelectedTag}
+          />
+        </section>
+
+        {/* ── Articles grid ─────────────────────────────────── */}
+        <section className={styles.feedSection}>
+          <div className={styles.feedHeader}>
+            <h2 className={styles.sectionHeading}>
+              {selectedTag ? `#${selectedTag}` : 'Latest'}
+            </h2>
+            {selectedTag && (
+              <button
+                className={styles.clearFilter}
+                onClick={() => setSelectedTag(null)}
+              >
+                Clear filter
+              </button>
+            )}
+          </div>
+
+          {loading && (
+            <div className={styles.stateContainer}>
+              <div className={styles.spinner} aria-label="Loading articles" />
+              <p className={styles.stateText}>Loading articles…</p>
+            </div>
+          )}
+
+          {error && !loading && (
+            <div className={styles.stateContainer} role="alert">
+              <p className={styles.errorHeading}>Failed to load feed</p>
+              <p className={styles.stateText}>{error}</p>
+            </div>
+          )}
+
+          {!loading && !error && filtered.length === 0 && (
+            <div className={styles.stateContainer}>
+              <p className={styles.stateText}>
+                {selectedTag
+                  ? `No articles tagged "${selectedTag}" yet.`
+                  : 'No articles found.'}
+              </p>
+            </div>
+          )}
+
+          {!loading && !error && filtered.length > 0 && (
+            <div className={styles.grid}>
+              {filtered.map(article => (
+                <ArticleCard key={article.id} article={article} />
+              ))}
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}