# Reference: EMBEDDED_ARTIFACTS Building Details

## wireframes{} — per moduleCode

### Architecture: Flat File + Nested Structures

**FLAT-FILE:** Wireframes come from `screens.json` in each module directory (collected in step-01),
NOT from `moduleFeature.specification.uiWireframes`.

### STEP 1: Collect wireframe sources from BOTH flat and nested structures

```javascript
const mod = collected_data.modules[moduleCode];

// Flat: mod.screens.screens[] with mockupFormat/mockup at top level
// Nested: mod.screens.sections[].resources[].wireframe (design step output)
let rawWireframes = [];

// Source A: flat screens[] array (original BA output or manually enriched)
const flatScreens = mod.screens?.screens || [];
rawWireframes.push(...flatScreens.filter(s => s.mockup || s.mockupFormat));

// Source B: nested sections[].resources[].wireframe (design step output)
const sections = mod.screens?.sections || [];
for (const section of sections) {
  // B1: wireframe directly on section (ba-004 style: sections[].wireframe)
  if (section.wireframe) {
    rawWireframes.push({
      ...section.wireframe,
      section: section.wireframe.section || section.id || section.code || section.sectionCode || "",
      screen: section.wireframe.screen || section.id || section.code || section.sectionCode || ""
    });
  }
  // B2: wireframe on resources (nested: sections[].resources[].wireframe)
  for (const resource of (section.resources || [])) {
    if (resource.wireframe) {
      rawWireframes.push({
        ...resource.wireframe,
        section: resource.wireframe.section || section.sectionCode || section.id || "",
        screen: resource.wireframe.screen || `${section.sectionCode || section.id}-${resource.code}` || ""
      });
    }
  }
}

// Source C: screens/sections without mockup → auto-generate text description as wireframe fallback
// C1: from flat screens[]
const screensWithoutMockup = flatScreens.filter(s => !s.mockup && !s.mockupFormat);
// C2: from sections[] (ba-004 style) — sections without wireframe property
const sectionsWithoutWireframe = sections.filter(s => !s.wireframe);
const allNoMockup = [
  ...screensWithoutMockup.map(s => ({
    type: s.componentType || "", columns: s.columns || [], tabs: s.tabs || [],
    kpis: s.kpis || [], screen: s.screen || "", section: s.section || "",
    description: s.sectionDescription || ""
  })),
  ...sectionsWithoutWireframe.map(s => ({
    type: s.layout || s.componentType || "", columns: s.columns || [], tabs: s.tabs || [],
    kpis: s.kpis || [], screen: s.id || s.code || "", section: s.id || s.code || "",
    description: s.description || ""
  }))
];
for (const screen of allNoMockup) {
  const type = screen.type;
  let desc = "";
  if (type.includes("Table") || type.includes("Grid")) {
    const cols = screen.columns;
    desc = "Tableau avec " + cols.length + " colonnes : " + cols.map(c => c.label || c.displayName || c.code || c.name).join(", ");
  } else if (type.includes("Form")) {
    const tabs = screen.tabs;
    desc = "Formulaire " + (tabs.length > 0 ? "avec " + tabs.length + " onglet(s)" : "");
  } else if (type.includes("Dashboard")) {
    desc = "Tableau de bord avec " + (screen.kpis.length || "") + " KPIs";
  } else if (type.includes("Kanban")) {
    desc = "Vue Kanban";
  }
  if (desc) {
    rawWireframes.push({
      screen: screen.screen, section: screen.section,
      mockupFormat: "text", mockup: desc,
      description: screen.description, elements: [], componentMapping: []
    });
  }
}
```

### STEP 2: Map to HTML format (RENAME: mockupFormat → format, mockup → content)

**FIELD RENAME WARNING:** Module JSON uses `mockupFormat`/`mockup`. HTML reads `format`/`content`. You MUST rename.

```javascript
wireframes: {
  [moduleCode]: rawWireframes.map(wf => ({
      screen: wf.screen || wf.name || wf.title || wf.id || "",
      section: wf.section || "",
      format: wf.mockupFormat || "ascii",                   // RENAME: mockupFormat → format
      content: wf.mockup || wf.ascii || wf.content || "",   // RENAME: mockup → content
      svgContent: null,
      description: wf.description || "",
      elements: wf.elements || [],
      actions: wf.actions || [],
      componentMapping: Array.isArray(wf.componentMapping)
        ? wf.componentMapping.map(function(entry) {
            if (entry.wireframeElement && entry.reactComponent) return entry; // canonical
            // Shorthand: [{key: value}] → {wireframeElement, reactComponent}
            var keys = Object.keys(entry);
            if (keys.length === 1 && !entry.wireframeElement) {
              return { wireframeElement: keys[0], reactComponent: entry[keys[0]] };
            }
            return entry;
          })
        : typeof wf.componentMapping === 'object' && wf.componentMapping !== null
          ? Object.entries(wf.componentMapping).map(([k, v]) => ({ wireframeElement: k, reactComponent: v }))
          : [],
      layout: typeof wf.layout === 'object' ? wf.layout : null,
      permissionsRequired: wf.permissionsRequired || []
    }))
}
```

## e2eFlows[]

```javascript
e2eFlows: (master.consolidation?.e2eFlows || []).map(flow => ({
  name: flow.name,
  diagram: flow.steps.map(s => s.action + "(" + s.module + ")").join(" ──→ "),
  steps: flow.steps || [],
  actors: [...new Set(flow.steps.map(s => s.permission?.split(".")[0]).filter(Boolean))].join(", "),
  modules: [...new Set(flow.steps.map(s => s.module))].join(" → ")
}))
```

## dependencyGraph

```javascript
dependencyGraph: {
  nodes: (master.modules || []).map(m => ({
    id: m.code, label: m.code, type: m.featureType || "data-centric"
  })),
  edges: (master.dependencyGraph?.edges || []).map(e => ({
    from: e.from, to: e.to, description: e.description || ""
  }))
}
```
