canicode 0.9.0 → 0.10.0

package/skills/canicode-roundtrip/helpers.js

@@ -0,0 +1,263 @@
+var CanICodeRoundtrip = (function (exports) {
+  'use strict';
+
+  // src/core/roundtrip/annotations.ts
+  function stripAnnotations(annotations) {
+    const input = annotations ?? [];
+    const out = [];
+    for (const a of input) {
+      const hasLM = typeof a.labelMarkdown === "string" && a.labelMarkdown.length > 0;
+      const hasLabel = typeof a.label === "string" && a.label.length > 0;
+      if (!hasLM && !hasLabel) continue;
+      const base = hasLM ? { labelMarkdown: a.labelMarkdown } : { label: a.label };
+      if (a.categoryId) base.categoryId = a.categoryId;
+      if (Array.isArray(a.properties) && a.properties.length > 0) {
+        base.properties = a.properties;
+      }
+      out.push(base);
+    }
+    return out;
+  }
+  async function ensureCanicodeCategories() {
+    const api = figma.annotations;
+    const existing = await api.getAnnotationCategoriesAsync();
+    const byLabel = new Map(existing.map((c) => [c.label, c.id]));
+    async function ensure(label, color) {
+      const cached = byLabel.get(label);
+      if (cached) return cached;
+      const created = await api.addAnnotationCategoryAsync({ label, color });
+      byLabel.set(label, created.id);
+      return created.id;
+    }
+    return {
+      gotcha: await ensure("canicode:gotcha", "blue"),
+      autoFix: await ensure("canicode:auto-fix", "green"),
+      fallback: await ensure("canicode:fallback", "yellow")
+    };
+  }
+  function upsertCanicodeAnnotation(node, input) {
+    if (!node || !("annotations" in node)) return false;
+    const { ruleId, markdown, categoryId, properties } = input;
+    const prefix = `**[canicode] ${ruleId}**`;
+    const body = markdown.startsWith(prefix) ? markdown : `${prefix}
+
+${markdown}`;
+    const existing = stripAnnotations(node.annotations);
+    const entry = { labelMarkdown: body };
+    if (categoryId) entry.categoryId = categoryId;
+    if (properties && properties.length > 0) entry.properties = properties;
+    const idx = existing.findIndex((a) => {
+      const lm = a.labelMarkdown;
+      const lb = a.label;
+      return typeof lm === "string" && lm.startsWith(prefix) || typeof lb === "string" && lb.startsWith(prefix);
+    });
+    if (idx >= 0) existing[idx] = entry;
+    else existing.push(entry);
+    try {
+      node.annotations = existing;
+      return true;
+    } catch (e) {
+      const msg = String(e?.message ?? e);
+      const isNodeTypeReject = /invalid property .+ for a .+ node/i.test(msg);
+      if (!entry.properties || !isNodeTypeReject) throw e;
+      delete entry.properties;
+      if (idx >= 0) existing[idx] = entry;
+      node.annotations = existing;
+      return true;
+    }
+  }
+
+  // src/core/roundtrip/apply-with-instance-fallback.ts
+  var DEFINITION_WRITE_SKIPPED_EVENT = "cic_roundtrip_definition_write_skipped";
+  function resolveSourceComponentName(definition, question) {
+    if (definition && typeof definition.name === "string" && definition.name) {
+      return definition.name;
+    }
+    const ic = question.instanceContext;
+    if (ic && typeof ic.sourceComponentName === "string" && ic.sourceComponentName) {
+      return ic.sourceComponentName;
+    }
+    return "the source component";
+  }
+  async function routeToDefinitionOrAnnotate(definition, writeFn, ctx) {
+    if (definition && !ctx.allowDefinitionWrite && ctx.reason !== "non-override-error") {
+      const componentName = resolveSourceComponentName(definition, ctx.question);
+      if (ctx.categories) {
+        upsertCanicodeAnnotation(ctx.scene, {
+          ruleId: ctx.question.ruleId,
+          markdown: `Apply this fix on the source component **${componentName}** to share across all instances. This instance kept its current value to avoid unintended fan-out. Re-run with \`allowDefinitionWrite: true\` to propagate.`,
+          categoryId: ctx.categories.fallback
+        });
+      }
+      ctx.telemetry?.(DEFINITION_WRITE_SKIPPED_EVENT, {
+        ruleId: ctx.question.ruleId,
+        reason: ctx.reason
+      });
+      return {
+        icon: "\u{1F4DD}",
+        label: "definition write skipped (opt-in disabled)"
+      };
+    }
+    if (!definition) {
+      if (ctx.categories) {
+        const markdown = ctx.reason === "silent-ignore" ? "write accepted but value unchanged; no definition available" : ctx.reason === "override-error" ? `could not apply automatically: ${ctx.errorMessage ?? ""}` : `could not apply automatically: ${ctx.errorMessage ?? ""}`;
+        upsertCanicodeAnnotation(ctx.scene, {
+          ruleId: ctx.question.ruleId,
+          markdown,
+          categoryId: ctx.categories.fallback
+        });
+      }
+      return ctx.reason === "silent-ignore" ? { icon: "\u{1F4DD}", label: "silent-ignore, annotated" } : { icon: "\u{1F4DD}", label: `error: ${ctx.errorMessage ?? ""}` };
+    }
+    try {
+      await writeFn(definition);
+      return {
+        icon: "\u{1F310}",
+        label: ctx.reason === "silent-ignore" ? "source definition (silent-ignore fallback)" : "source definition"
+      };
+    } catch (defErr) {
+      const defMsg = String(defErr?.message ?? defErr);
+      const isRemoteReadOnly = definition.remote === true || /read-only/i.test(defMsg);
+      if (ctx.categories) {
+        upsertCanicodeAnnotation(ctx.scene, {
+          ruleId: ctx.question.ruleId,
+          markdown: isRemoteReadOnly ? "source component lives in an external library and is read-only from this file \u2014 apply the fix in the library file itself." : `could not apply at source definition: ${defMsg}`,
+          categoryId: ctx.categories.fallback
+        });
+      }
+      return {
+        icon: "\u{1F4DD}",
+        label: isRemoteReadOnly ? "external library (read-only)" : `definition error: ${defMsg}`
+      };
+    }
+  }
+  async function applyWithInstanceFallback(question, writeFn, context = {}) {
+    const { categories, allowDefinitionWrite = false, telemetry } = context;
+    const scene = await figma.getNodeByIdAsync(question.nodeId);
+    if (!scene) return { icon: "\u{1F4DD}", label: "missing node" };
+    const definition = question.sourceChildId ? await figma.getNodeByIdAsync(question.sourceChildId) : null;
+    try {
+      const changed = await writeFn(scene);
+      if (changed === false) {
+        return routeToDefinitionOrAnnotate(definition, writeFn, {
+          question,
+          scene,
+          categories,
+          reason: "silent-ignore",
+          allowDefinitionWrite,
+          telemetry
+        });
+      }
+      return { icon: "\u2705", label: "instance/scene" };
+    } catch (e) {
+      const msg = String(e?.message ?? e);
+      const looksLikeInstanceOverride = /cannot be overridden/i.test(msg) || /override/i.test(msg);
+      if (!looksLikeInstanceOverride) {
+        return routeToDefinitionOrAnnotate(null, writeFn, {
+          question,
+          scene,
+          categories,
+          reason: "non-override-error",
+          errorMessage: msg,
+          allowDefinitionWrite,
+          telemetry
+        });
+      }
+      return routeToDefinitionOrAnnotate(definition, writeFn, {
+        question,
+        scene,
+        categories,
+        reason: "override-error",
+        errorMessage: msg,
+        allowDefinitionWrite,
+        telemetry
+      });
+    }
+  }
+
+  // src/core/roundtrip/apply-property-mod.ts
+  async function resolveVariableByName(name) {
+    const locals = await figma.variables.getLocalVariablesAsync();
+    return locals.find((v) => v.name === name) ?? null;
+  }
+  function parseValue(raw) {
+    if (raw && typeof raw === "object" && "variable" in raw) {
+      const v = raw;
+      const parsed = { kind: "binding", name: v.variable };
+      if ("fallback" in v) parsed.fallback = v.fallback;
+      return parsed;
+    }
+    if (raw && typeof raw === "object" && "fallback" in raw) {
+      return { kind: "scalar", scalar: raw.fallback };
+    }
+    return { kind: "scalar", scalar: raw };
+  }
+  function isPaintProp(prop) {
+    return prop === "fills" || prop === "strokes";
+  }
+  function applyPropertyBinding(target, prop, variable) {
+    if (isPaintProp(prop)) {
+      const current = target[prop];
+      if (current === figma.mixed || !Array.isArray(current)) return false;
+      const paints = current;
+      const bound = paints.map(
+        (paint) => figma.variables.setBoundVariableForPaint(paint, "color", variable)
+      );
+      target[prop] = bound;
+      return true;
+    }
+    target.setBoundVariable(prop, variable);
+    return true;
+  }
+  function applyPropertyScalar(target, prop, scalar) {
+    const rec = target;
+    const before = rec[prop];
+    rec[prop] = scalar;
+    if (rec[prop] === before && before !== scalar) return false;
+    return true;
+  }
+  async function applyPropertyMod(question, answerValue, context = {}) {
+    const props = Array.isArray(question.targetProperty) ? question.targetProperty : question.targetProperty !== void 0 ? [question.targetProperty] : [];
+    return applyWithInstanceFallback(
+      question,
+      async (target) => {
+        if (!target) return void 0;
+        let changed = void 0;
+        for (const prop of props) {
+          if (!(prop in target)) continue;
+          const perProp = answerValue && typeof answerValue === "object" && !("variable" in answerValue) && !Array.isArray(answerValue) ? answerValue[prop] : answerValue;
+          const parsed = parseValue(perProp);
+          if (parsed.kind === "binding") {
+            const variable = await resolveVariableByName(parsed.name);
+            if (variable) {
+              applyPropertyBinding(target, prop, variable);
+              continue;
+            }
+            if (parsed.fallback !== void 0) {
+              if (!applyPropertyScalar(target, prop, parsed.fallback)) {
+                changed = false;
+              }
+            }
+            continue;
+          }
+          if (parsed.scalar === void 0) continue;
+          if (!applyPropertyScalar(target, prop, parsed.scalar)) {
+            changed = false;
+          }
+        }
+        return changed;
+      },
+      context
+    );
+  }
+
+  exports.applyPropertyMod = applyPropertyMod;
+  exports.applyWithInstanceFallback = applyWithInstanceFallback;
+  exports.ensureCanicodeCategories = ensureCanicodeCategories;
+  exports.resolveVariableByName = resolveVariableByName;
+  exports.stripAnnotations = stripAnnotations;
+  exports.upsertCanicodeAnnotation = upsertCanicodeAnnotation;
+
+  return exports;
+
+})({});

package/.claude/skills/design-to-code/PROMPT.md

@@ -1,143 +0,0 @@
-# Design to Code — Standard Prompt
-
-This prompt is used by all code generation pipelines:
-- Calibration Converter
-- Ablation experiments (API-based)
-- User-facing `canicode implement` command (default prompt)
-
-## Stack
-- HTML + CSS (single file)
-- No frameworks, no build step
-
-## Conventions
-- Semantic HTML elements
-- Flexbox / Grid for layout
-- Always include `* { box-sizing: border-box; margin: 0; padding: 0; }` reset
-
-## CRITICAL: Do NOT Interpret. Reproduce Exactly.
-
-Every pixel in the Figma file is intentional. A designer made each decision deliberately.
-Your job is to translate the Figma data to HTML+CSS — nothing more.
-
-### Priority Order
-1. **Pixel-exact reproduction** — match every dimension, color, spacing, font exactly
-2. **Component reuse** — same component annotation → shared CSS class
-3. **Design tokens** — repeated values → CSS custom properties
-
-Never sacrifice #1 for #2 or #3. Reuse and tokens are structural improvements only — they must not change the visual output.
-
-### Rules
-- Do NOT add any value that isn't in the Figma data (no extra padding, margin, gap, transition)
-- Do NOT add hover effects unless `[hover]:` data is provided in the design tree
-- Do NOT change any value from the Figma data (if it says 160px padding, use 160px)
-- Do NOT "improve" the design — if something looks wrong, reproduce it anyway
-- Do NOT add responsive behavior unless the Figma data explicitly shows it
-- Do NOT use min-height or min-width unless the design tree explicitly includes them — use exact height and width from the data
-- Do NOT add overflow: auto or scroll unless specified
-- Fonts: load via Google Fonts CDN (`<link>` tag). Do NOT use system font fallbacks as primary — the exact font from the data must render.
-
-### Component Reuse
-
-Nodes annotated with `[component: ComponentName]` are instances of the same design component.
-
-- Define a CSS class for each unique component name (e.g., `[component: Review Card]` → `.review-card { ... }`)
-- If the same component appears multiple times, define the shared styles once in the class, then apply it to each instance
-- `component-properties:` lines show variant overrides — use them to differentiate instances (e.g., different text content, sizes) while keeping shared styles in the class
-- Component name → class name: lowercase, spaces to hyphens (e.g., `Review Card` → `.review-card`)
-- Use CSS classes only — no Web Components, no JavaScript templates
-
-### Design Tokens
-
-Extract repeated values into CSS custom properties in `:root { }`.
-
-**Colors**: When the same hex color appears 3+ times, define it as a CSS variable:
-```css
-:root {
-  --color-2C2C2C: #2C2C2C;
-  --color-0066CC: #0066CC;
-}
-```
-Then use `var(--color-2C2C2C)` instead of inline `#2C2C2C`.
-
-Naming: if a `/* var:... */` comment is present next to a color value, it means the designer bound this color to a design token — always extract these as CSS variables.
-
-**Typography**: When `/* text-style: StyleName */` appears in a text node's styles, nodes sharing the same text style name should use a shared CSS class:
-```css
-.text-heading-large { font-family: "Inter"; font-weight: 700; font-size: 32px; line-height: 40px; }
-```
-Style name → class name: lowercase, spaces/slashes to hyphens, prefix with `text-` (e.g., `Heading / Large` → `.text-heading-large`).
-
-### SVG Vectors
-
-When a node's style includes `svg: <svg>...</svg>`, render it as an inline `<svg>` element:
-- Use the SVG markup exactly as provided — do not modify paths or attributes
-- Preserve the node's dimensions (`width` and `height` from the node header)
-- The `<svg>` replaces the node's HTML element (do not wrap it in an extra `<div>` unless the node has other styles like background or border)
-
-### Hover States
-
-When a node includes a `[hover]:` line, generate a `:hover` CSS rule with the provided style changes:
-
-```text
-Button (INSTANCE, 120x40) [component: Button]
-  style: background: #2C2C2C
-  [hover]: background: #1E1E1E; Icon: fill: #FFFFFF
-```
-
-→ generates:
-
-```css
-.button { background: #2C2C2C; }
-.button:hover { background: #1E1E1E; }
-.button:hover .icon { fill: #FFFFFF; }
-```
-
-- Only use hover data that is explicitly provided in `[hover]:` — do not invent hover effects
-- Child styles (e.g., `Icon: fill: #FFFFFF`) use `.parent:hover .child` selector pattern
-
-### Image Assets
-
-The design tree uses two distinct image types:
-
-**`content-image:`** — leaf node, no children → render as `<img>` tag
-- `content-image: url(images/...)` → `<img src="images/..." />`
-- `object-fit: cover` or `object-fit: contain` is provided alongside — use it directly
-
-**`background-image:`** — node has children on top → keep as CSS `background-image`
-- `background-image: url(images/...)` → `background-image: url(images/...)` in CSS
-- `background-size`, `background-position`, `background-repeat` are provided alongside — use as-is
-
-**`[IMAGE]` placeholder** — image asset unavailable → use a placeholder color matching the surrounding design
-
-### If data is missing
-When the Figma data does not specify a value, you MUST list it as an interpretation.
-Do not silently guess — always declare what you assumed.
-
-## Output
-
-### 1. Code
-- Place the entire design inside a single root `<div>` as the first child of `<body>` — do NOT apply design styles directly to `<body>` or `<html>`
-- Output as a code block with filename:
-
-```html
-// filename: index.html
-<!DOCTYPE html>
-...
-```
-
-### 2. Interpretations
-After the code block, list every value you had to guess or assume.
-Keep this list to **only genuine ambiguities** — do not list standard defaults (e.g., `body { margin: 0 }` is always expected, not an interpretation).
-**Maximum 10 items.** If you have more than 10, keep only the highest-impact ones.
-
-```text
-// interpretations:
-- Used placeholder gray (#CCCCCC) for unavailable image asset
-- Chose "Inter" font weight 500 for ambiguous "Medium" style reference
-```
-
-If you did not interpret anything, write:
-
-```text
-// interpretations: none
-```