diff --git a/app/figma-plugin/src/ui.template.html b/app/figma-plugin/src/ui.template.html index 77021b42..6a7d2638 100644 --- a/app/figma-plugin/src/ui.template.html +++ b/app/figma-plugin/src/ui.template.html @@ -8,12 +8,6 @@
- -
- - Design Readiness Checker -
-
@@ -37,15 +31,6 @@

Ready to analyze

- -
@@ -103,7 +88,6 @@

Ready to analyze

function showLoading() { document.getElementById('empty-state').style.display = 'none'; document.getElementById('results').className = ''; - document.getElementById('footer').style.display = 'none'; document.getElementById('loading').style.display = 'block'; document.getElementById('error').style.display = 'none'; document.getElementById('btn-selection').disabled = true; @@ -112,7 +96,6 @@

Ready to analyze

function showError(msg) { document.getElementById('loading').style.display = 'none'; document.getElementById('results').className = ''; - document.getElementById('footer').style.display = 'none'; document.getElementById('empty-state').style.display = 'none'; var errEl = document.getElementById('error'); errEl.className = 'error-msg'; @@ -138,7 +121,6 @@

Ready to analyze

}); el.className = 'visible'; CanICode.initReportInteractions(el); - document.getElementById('footer').style.display = ''; } // ---- Focus node in Figma — intercept all [data-node-id] clicks ---- diff --git a/app/shared/styles.css b/app/shared/styles.css index e7ffa59a..89cce2ef 100644 --- a/app/shared/styles.css +++ b/app/shared/styles.css @@ -277,19 +277,6 @@ body { margin-bottom: 24px; position: relative; } -@media (max-width: 600px) { - .rpt-tab-list::after { - content: ""; - position: sticky; - right: 0; - width: 40px; - min-height: 100%; - background: linear-gradient(to right, transparent, var(--bg)); - pointer-events: none; - flex-shrink: 0; - margin-left: -40px; - } -} .rpt-tab-list { display: flex; gap: 4px; @@ -542,6 +529,18 @@ body { color: rgba(113,113,122,0.6); margin-top: 4px; } +.rpt-footer-links { + margin-top: 4px; + font-size: 12px; +} +.rpt-footer-links a { + color: var(--fg-muted); + text-decoration: none; +} +.rpt-footer-links a:hover { + color: var(--fg); + text-decoration: underline; +} /* ================================================================ 4. Responsive — narrow viewport (Figma plugin ~420px) diff --git a/app/web/src/index.html b/app/web/src/index.html index 4cf3494f..299caf97 100644 --- a/app/web/src/index.html +++ b/app/web/src/index.html @@ -23,8 +23,7 @@ } .web-topbar-logo { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; } .web-topbar-sub { color: #a1a1aa; font-size: 14px; } - .web-topbar a { color: #a1a1aa; text-decoration: none; transition: color 0.15s; } - .web-topbar a:hover { color: white; } + .web-topbar a { color: #a1a1aa; text-decoration: none; display: flex; align-items: center; } .web-auth { display: flex; align-items: center; gap: 8px; } .web-auth-dot { width: 6px; height: 6px; border-radius: 50%; } .web-auth-dot.ok { background: #22c55e; } @@ -47,7 +46,7 @@ .web-modal { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(0,0,0,0.12); - width: 100%; max-width: 420px; margin: 0 16px; padding: 24px; + width: 100%; max-width: 500px; margin: 0 16px; padding: 24px; } .web-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .web-modal-header h2 { font-size: 18px; font-weight: 600; } @@ -124,11 +123,11 @@
- Figma Design Analysis + Figma AI-Readiness Checker - + @@ -152,18 +151,15 @@

Authorize

-

- - Stored in your browser session only. Sent directly from your browser to Figma when you analyze or post a comment. -

-

+

Figma → Settings → Security → Personal access tokens → Generate new token

- +
+

Stored in your browser only. Requests go directly to Figma.

@@ -171,8 +167,8 @@

Authorize

-

Analyze your Figma designs

-

Check development-friendliness and AI-readiness scores. Analysis runs in your browser, and requests go directly to Figma rather than through an app backend.

+

Is your Figma design AI-ready?

+

16 rules across 6 categories score how accurately AI can implement your design. Runs entirely in your browser.

Share your Figma design to help improve scoring accuracy @@ -258,14 +254,17 @@

Analyze your Figma designs

var token = getToken(); var dot = document.getElementById('auth-dot'); var label = document.getElementById('auth-label'); + var logoutBtn = document.getElementById('auth-logout-btn'); if (token) { dot.className = 'web-auth-dot ok'; label.textContent = 'Authorized'; label.className = 'web-auth-label ok'; + if (logoutBtn) logoutBtn.style.display = ''; } else { dot.className = 'web-auth-dot no'; label.textContent = 'Not authorized'; label.className = 'web-auth-label'; + if (logoutBtn) logoutBtn.style.display = 'none'; } } @@ -388,7 +387,7 @@

Analyze your Figma designs

var errMsg = res.status === 400 ? 'Bad request — check node ID format' : res.status === 403 ? 'Token lacks file access' : res.status === 404 ? 'File not found' : res.status === 429 ? 'Rate limited — try again later' : 'HTTP ' + res.status; throw new Error(errMsg + (errBody ? ': ' + errBody.slice(0, 100) : '')); } - btn.textContent = 'Sent \u2713'; + btn.textContent = 'Sent'; btn.classList.remove('rpt-btn-fail'); btn.classList.add('rpt-btn-ok'); window._trackEvent && window._trackEvent('cic_comment_posted', {}); diff --git a/src/core/adapters/figma-url-parser.ts b/src/core/adapters/figma-url-parser.ts index 83185822..61d278e5 100644 --- a/src/core/adapters/figma-url-parser.ts +++ b/src/core/adapters/figma-url-parser.ts @@ -57,7 +57,8 @@ export function toCommentableNodeId(nodeId: string): string { } export function buildFigmaDeepLink(fileKey: string, nodeId: string): string { - // Figma URLs use hyphens instead of colons: "3010:7457" → "3010-7457" - const urlNodeId = nodeId.replace(/:/g, "-"); - return `https://www.figma.com/design/${fileKey}?node-id=${encodeURIComponent(urlNodeId)}`; + // Strip instance-internal path to top-level node: + // "I175:7425;1442:7704" → "175:7425" → "175-7425" + const topNodeId = toCommentableNodeId(nodeId).replace(/:/g, "-"); + return `https://www.figma.com/design/${fileKey}?node-id=${topNodeId}`; } diff --git a/src/core/report-html/index.ts b/src/core/report-html/index.ts index 134d28a7..d9e832c7 100644 --- a/src/core/report-html/index.ts +++ b/src/core/report-html/index.ts @@ -125,7 +125,7 @@ function renderFigmaCommentScript(figmaToken: string): string { const errMsg = res.status === 400 ? 'Bad request' : res.status === 403 ? 'Token lacks file access' : res.status === 404 ? 'File not found' : res.status === 429 ? 'Rate limited' : 'HTTP ' + res.status; throw new Error(errMsg + (errBody ? ': ' + errBody.slice(0, 100) : '')); } - btn.textContent = 'Sent \\u2713'; + btn.textContent = 'Sent'; btn.classList.remove('rpt-btn-fail'); btn.classList.add('rpt-btn-ok'); } catch (e) { diff --git a/src/core/report-html/render.ts b/src/core/report-html/render.ts index 8fec700d..8be8935a 100644 --- a/src/core/report-html/render.ts +++ b/src/core/report-html/render.ts @@ -14,6 +14,7 @@ import type { Category } from "../contracts/category.js"; import type { AnalysisIssue } from "../engine/rule-engine.js"; import type { ScoreReport } from "../engine/scoring.js"; +import { version as VERSION } from "../../../package.json"; import { buildFigmaDeepLink } from "../adapters/figma-url-parser.js"; import { CATEGORIES, @@ -126,8 +127,9 @@ ${ruleGroups.length === 0 `; }